Auto Layout

Auto Layout 是 Figma 最強大的功能之一，能夠建立響應式的佈局結構。 掌握 Auto Layout 可以大幅提升元件的可重用性與設計一致性。

核心觀念

把 Auto Layout 想像成 CSS 的 Flexbox — 你可以控制排列方向、間距、對齊方式和填充行為。

巢狀 Auto Layout

透過巢狀 Auto Layout，可以建立複雜的卡片佈局：

1. 外層容器 — 設為垂直排列（direction: vertical）

2. 內層列 — 設為水平排列（direction: horizontal）

3. 設定間距 — 使用 gap 控制子元素間距

4. 填充模式 — 子元素設為 Fill container 實現自適應寬度

常用屬性

屬性	說明	等同 CSS
Direction	排列方向	flex-direction
Gap	子元素間距	gap
Padding	內部留白	padding
Alignment	交叉軸對齊	align-items
Fill / Hug	尺寸行為	flex-grow / fit-content

Components & Variants

建立可重用元件

命名規範

使用 / 建立元件群組層級：

Button/Primary/Default
Button/Primary/Hover
Button/Primary/Disabled
Button/Secondary/Default
Button/Secondary/Hover

Figma 會自動將同層級的元件組織成群組， 方便在 Assets 面板中查找。

Variants 設定

為常用狀態建立 Variants：

• State: Default / Hover / Active / Disabled
• Size: Small / Medium / Large
• Type: Primary / Secondary / Ghost

使用 Boolean property 控制可選功能：

• Show Icon: true / false
• Show Badge: true / false

Properties

透過 Component Properties 增加彈性：

• Text property：允許替換按鈕文字
• Instance swap property：允許替換圖示
• Boolean property：切換可選元素的顯示

效率技巧

快捷鍵精選

操作	快捷鍵
建立 Auto Layout	Shift + A
建立元件	Ctrl/Cmd + Alt + K
開啟原型模式	Shift + E
等距分佈	Ctrl/Cmd + Shift + H/V
重新命名圖層	Ctrl/Cmd + R
搜尋元件	Shift + I

Design Token 建議

大型專案建議搭配 Tokens Studio 外掛， 將設計符記（色彩、間距、字型）與程式碼同步， 確保設計與開發的一致性。

相關頁面

• Felimet Hub 網站 — 使用 Figma 設計 Wabi-Sabi UI 系統的實際專案
• Docker 指南 — 技術筆記的另一個範例，展示不同主題的筆記結構