Scroll To 導覽滑動 | Figma 教學

Scroll To 導覽滑動 | Figma 教學

Alan Design 4990 位订阅者
5713 次观看 · 2022-09-19 UI 设计交互设计视觉设计
今天這集我們看一下如何使用 Figma 的 Scroll to 動態效果.
Scroll to 可以讓我們透過點擊物件, 讓介面滑動移至到所設定的位置.
這效果常用於介面中的內容導覽, 也是 CSS 裡常用的像 Position: sticky 這樣類似的效果.

==========================================

Figma 設計檔: https://www.figma.com/file/ZPYN7JmSmqH2CvFZmD8zux/Figma-Tutorial%3A-Scroll-To?node-id=62%3A38

設計檔下載: https://drive.google.com/drive/folders/1OGBHZe1ybifxEENt01kmyczTMSy69vqy?usp=sharing

==========================================

實體範例 (Sony Electronics): https://electronics.sony.com/mobile/smartphone/all/p/xqcq62g-gc

==========================================

0:00 開頭
0:14 設計範例介紹
1:42 設定 Overflow Scrolling
3:15 置頂位置 Fixed Position
3:32 Scroll to 動態設定
6:15 Offset 位置調動
8:45 效果成果
9:09 結尾

==========================================


#ScrollTo #滑動至Figma #figma教學 #stickymenu設計 #內容滑動設計
#figma教學#如何使用figma#使用者介面製作#UI教學#figma元件#figma auto layout 是什麼#figma基礎#figma入門教學#ui實作#ui範例教學#figma variants#模組化設計#重複使用ui元件#美國ui設計師#手機介面設計