Navbar 桌上型設計 (Responsive) | Figma 教學

這集我們來製作 桌上型 (desktop) 的navbar 導覽列. 我們會運用到 "max-width" 的設置, 讓我們的navbar 達成 responsive 的設計感.

支持這頻道: https://ko-fi.com/alandesign


0:00 設計預覽 & Logo 建立
2:14 模板跟 "最大寬度" 的設置
4:18 連結按鈕 建立
8:50 Navbar 連結按鈕區的 Auto-layout
11:20 最大寬度設定
14:18 Navbar 高度 和美化
15:13 連結按鈕 Hover
15:50 連結按鈕 設計變化
18:40 Navbar 第二種設計
19:33 Navbar #2 Auto-layout 變化
23:10 設計結尾


#navbarUI #navbar製作 #figma教學