多重下拉選單 #2: Prototype 互動設定 • Figma 教學
多重下拉選單 #2: Prototype 互動設定。
延續上集看到製作好的UI物件，這集我們把整個的互動設計做出來。
我們會用到比較複雜且有點花時間的互動設計，利用到變數Variables的設計。
之前的單一下拉選單教學: https://youtu.be/wWbnwtm_C10
設計概念圖: https://drive.google.com/file/d/178v1ZkXE_PX5X9a6YtPztuAd88ubTv0j/view?usp=drive_link
設計檔案: https://drive.google.com/file/d/18IK3fQmpPR1wiGWIvMUC1-J9JmvehVyZ/view?usp=drive_link
[章節]
00:00:00 第一層下拉選單
00:02:10 變數 Variable: 選項名稱
00:05:40 第二層下拉選單
00:11:35 第三層下拉選單
00:17:35 Global Variable
00:24:12 選擇對應Variant製作
00:35:10 選項跟Family互動
00:43:24 第三層設定
01:06:02 Hover跟選擇的變化設定
01:59:00 設計效果
02:00:05 輸入真正的選項名稱
02:05:35 選單響應跟優化
02:08:35 更新Variant名稱
02:11:03 選擇欄Truncate跟伸縮
02:14:58 教學結尾
#多重下拉選單 #多層下拉 #多層選單 #figma下拉 #figma多層下拉 #figma教學
延續上集看到製作好的UI物件，這集我們把整個的互動設計做出來。
我們會用到比較複雜且有點花時間的互動設計，利用到變數Variables的設計。
之前的單一下拉選單教學: https://youtu.be/wWbnwtm_C10
設計概念圖: https://drive.google.com/file/d/178v1ZkXE_PX5X9a6YtPztuAd88ubTv0j/view?usp=drive_link
設計檔案: https://drive.google.com/file/d/18IK3fQmpPR1wiGWIvMUC1-J9JmvehVyZ/view?usp=drive_link
[章節]
00:00:00 第一層下拉選單
00:02:10 變數 Variable: 選項名稱
00:05:40 第二層下拉選單
00:11:35 第三層下拉選單
00:17:35 Global Variable
00:24:12 選擇對應Variant製作
00:35:10 選項跟Family互動
00:43:24 第三層設定
01:06:02 Hover跟選擇的變化設定
01:59:00 設計效果
02:00:05 輸入真正的選項名稱
02:05:35 選單響應跟優化
02:08:35 更新Variant名稱
02:11:03 選擇欄Truncate跟伸縮
02:14:58 教學結尾
#多重下拉選單 #多層下拉 #多層選單 #figma下拉 #figma多層下拉 #figma教學