Figma 新介面 (2024) • 按鈕製作 | Figma 教學
8K views · 2024-07-05
UI DesignInteraction & UX
這集我們來看一下Figma更新過後的介面. 我們透過建立個按鈕component來了解新介面的操作. 其中我們也會用到像 Instance Swap, Text Property, 和Boolean的設定.
如何加入新介面Waitlist: https://help.figma.com/hc/en-us/articles/24037640924823-What-s-new-from-Config-2024#:~:text=To%20join%20the%20waitlist%3A,Click%20Join%20Waitlist.
0:00 Figma新介面的申請
0:36 新的工作區Toolbar
1:22 視窗伸縮
1:41 建立Component
3:14 Assets Library整理
5:25 按鈕製作: 加入板塊
6:00 按鈕製作: Auto-layout建立
8:15 按鈕製作: Create Component
8:30 按鈕製作: Text Property
8:50 按鈕製作: Instance Swap
9:26 按鈕製作: Boolean
10:18 按鈕製作: Variant
11:48 按鈕製作: 互動設定
12:43 Instance 展示
13:00 物件長寬Hug/Fill/MinMax設定
13:33 Clip Content & Show Content
14:10 按鈕製作: Instance重複利用
15:23 互動測試
16:18 介面精簡 (Minimize UI)
17:15 Multi-Edit
17:40 結尾
#Figma新介面 #Figma新介面教學 #Figma按鈕製作 #UI製作 #Figma教學
如何加入新介面Waitlist: https://help.figma.com/hc/en-us/articles/24037640924823-What-s-new-from-Config-2024#:~:text=To%20join%20the%20waitlist%3A,Click%20Join%20Waitlist.
0:00 Figma新介面的申請
0:36 新的工作區Toolbar
1:22 視窗伸縮
1:41 建立Component
3:14 Assets Library整理
5:25 按鈕製作: 加入板塊
6:00 按鈕製作: Auto-layout建立
8:15 按鈕製作: Create Component
8:30 按鈕製作: Text Property
8:50 按鈕製作: Instance Swap
9:26 按鈕製作: Boolean
10:18 按鈕製作: Variant
11:48 按鈕製作: 互動設定
12:43 Instance 展示
13:00 物件長寬Hug/Fill/MinMax設定
13:33 Clip Content & Show Content
14:10 按鈕製作: Instance重複利用
15:23 互動測試
16:18 介面精簡 (Minimize UI)
17:15 Multi-Edit
17:40 結尾
#Figma新介面 #Figma新介面教學 #Figma按鈕製作 #UI製作 #Figma教學