Sticky Menu #1 - 側邊導覽製作 | Figma 教學
這集來介紹 Figma 最近推出的更新, Sticky Menu (Scroll Behavior: Sticky).
我們可以利用 sticky scroll 來製作網頁中的菜單導覽. 可以看到範例連結裡, 網頁中有菜單 滑動但黏貼在網頁的某處.
常見的範例:
- https://developer.apple.com/design/human-interface-guidelines/foundations/layout
- https://atlassian.design/foundations/color
Figma 範例檔: https://www.figma.com/file/352SGFpaSgj04gmkn0kjTE/YT-Alan-Design-Sticky-Menu-%231?node-id=5%3A20&t=gymO9qTGIp89YQgQ-1
---------------------------------------------------------------------------------------------------------
0:00 開始簡介
0:14 範例跟技術背景簡介
2:07 Figma Sticky Scroll 操作
3:20 要點#1: 圖層順序
4:27 要點#2: 計算加入空白間距
8:30 要點#3: 設計美化—呼吸的空間
10:38 結尾&回顧
---------------------------------------------------------------------------------------------------------
#stickymenu #figmaStickyMenu #stickyMenu製作 #StickyMenu教學 #Figma教學 #positionSticky #midMenu #Submenu #stickymenuDesign #figma網頁中導覽
我們可以利用 sticky scroll 來製作網頁中的菜單導覽. 可以看到範例連結裡, 網頁中有菜單 滑動但黏貼在網頁的某處.
常見的範例:
- https://developer.apple.com/design/human-interface-guidelines/foundations/layout
- https://atlassian.design/foundations/color
Figma 範例檔: https://www.figma.com/file/352SGFpaSgj04gmkn0kjTE/YT-Alan-Design-Sticky-Menu-%231?node-id=5%3A20&t=gymO9qTGIp89YQgQ-1
---------------------------------------------------------------------------------------------------------
0:00 開始簡介
0:14 範例跟技術背景簡介
2:07 Figma Sticky Scroll 操作
3:20 要點#1: 圖層順序
4:27 要點#2: 計算加入空白間距
8:30 要點#3: 設計美化—呼吸的空間
10:38 結尾&回顧
---------------------------------------------------------------------------------------------------------
#stickymenu #figmaStickyMenu #stickyMenu製作 #StickyMenu教學 #Figma教學 #positionSticky #midMenu #Submenu #stickymenuDesign #figma網頁中導覽