Auto Layout: Wrap | Figma 教學
1.4K views · 2023-07-05
UI Design
這集我們來看 Figma最近推出的 Auto Layout “Wrap” 的更新.
透過 Auto Layout Wrap 的功能, 我們能夠達成之前所不能完成的 Responsive 設計.
教學結合了 “min/max width”, “gap: auto”, “alignment”, 等設計選項.
Figma檔: https://www.figma.com/file/p33yjr6aPpNox4ZU5cvMIg/Auto-layout%3A-Wrap?type=design&node-id=12%3A5&mode=design&t=GssxVu7RFFP1ygX9-1
---------------------------------------------------------------------------------------------------------
0:00 設計開始
0:23 Wrap: 背景知識
2:20 Wrap: Figma 簡介
4:22 Wrap: 移除 max-width
6:17 Wrap: Alignment 對齊
7:09 Wrap: 移除 min/max-width
8:10 Wrap: Gap & Auto 間距設定
11:39 Wrap Auto: 背景知識
12:22 Wrap Auto: 移除 max-width
13:09 範例實作
15:51 結尾
---------------------------------------------------------------------------------------------------------
#AutoLayoutWrap #FigmaFlexWrap #Figma教學 #Figma包裹 #FigmaResponsive設計
透過 Auto Layout Wrap 的功能, 我們能夠達成之前所不能完成的 Responsive 設計.
教學結合了 “min/max width”, “gap: auto”, “alignment”, 等設計選項.
Figma檔: https://www.figma.com/file/p33yjr6aPpNox4ZU5cvMIg/Auto-layout%3A-Wrap?type=design&node-id=12%3A5&mode=design&t=GssxVu7RFFP1ygX9-1
---------------------------------------------------------------------------------------------------------
0:00 設計開始
0:23 Wrap: 背景知識
2:20 Wrap: Figma 簡介
4:22 Wrap: 移除 max-width
6:17 Wrap: Alignment 對齊
7:09 Wrap: 移除 min/max-width
8:10 Wrap: Gap & Auto 間距設定
11:39 Wrap Auto: 背景知識
12:22 Wrap Auto: 移除 max-width
13:09 範例實作
15:51 結尾
---------------------------------------------------------------------------------------------------------
#AutoLayoutWrap #FigmaFlexWrap #Figma教學 #Figma包裹 #FigmaResponsive設計