使用 Figma 的 Auto Layout（自動排版） 是 UI/UX 設計流程中非常關鍵的技巧，能幫助你做出彈性、高度可維護的元件與畫面，省去手動對齊與調整大小的麻煩，尤其對設計系統、響應式設計非常實用。
✅ Auto Layout 是什麼？
Auto Layout 讓你可以為 frame 或元件定義：
- 子元件排列方式（水平或垂直）
- 間距與邊距
- 自動填滿或收縮大小
- 對齊與置中控制
- 動態內容適應（如按鈕文字變長）
🔧 基本用法步驟
🔹 1. 套用 Auto Layout
- 選取一個或多個元素（例如兩個按鈕、兩個文字框）
- 右鍵選擇 ➤
Add Auto Layout 或按下快捷鍵 Shift + A - 選取後會變成一個 Frame，並在右側面板看到 Auto Layout 設定項目
🔹 2. 主要屬性說明
| 屬性 | 說明 |
|---|
| Direction | 元件排列方向：水平（Horizontal）或垂直（Vertical） |
| Spacing between items | 子項間距，如 8px、16px |
| Padding | 內邊距：上下左右獨立設定或統一設定 |
| Alignment | 子項在主軸上的對齊方式（左/右/置中、上/下/置中） |
| Sizing | 子項的寬高可設為 Hug content（隨內容自動）、Fixed（固定）或 Fill container（填滿） |
🧱 Auto Layout 實例應用
📌 案例 1：按鈕元件
需求：當文字變長時，按鈕自動變寬、保持左右 padding
- 做法：
- 建立文字框（如：「確認」）
- 加上 Auto Layout（Shift + A）
- 設定 Padding 左右各 16px、上下 8px
- 加上圓角、背景顏色
- 完成可自動調整長度的按鈕元件 ✅
📌 案例 2：垂直區塊卡片（含標題 + 內容 + 按鈕）
- 三個元素分別為：標題、內容文字、按鈕
- 選取三項 →
Shift + A - 設為垂直方向（Vertical）
- Spacing 設為 12px
- 設定整體 Padding、背景、圓角
- 按鈕部分也可用 Auto Layout 嵌套 → 嵌套 Auto Layout
📌 案例 3：左右排列資訊列（標籤 + 值）
| 文字左 | 文字右 |
|---|
| 使用者名稱： | ChatGPT 使用者 |
| 帳號狀態： | 已驗證 |
- 建立兩個文字元件為一組 → 加 Auto Layout
- 設為水平排列，左右間距設為
auto（選「Space Between」對齊） - 外框可設為垂直 Auto Layout，讓每一列資訊可彈性增加/減少
💡 Auto Layout 技巧與建議
| 技巧 | 說明 |
|---|
| 嵌套 Auto Layout | 一個 Auto Layout 裡面可以再放 Auto Layout，如按鈕內文字、卡片內容。 |
| Frame vs Group | Auto Layout 只能套用在 Frame，不可用 Group（要先解除群組）。 |
| Component + Auto Layout | 建立元件時套用 Auto Layout 可確保重複使用時維持彈性。 |
| 使用 Fill Container | 子項寬度填滿母層（如表單欄位），實現響應式效果。 |
| Responsive Resize 搭配使用 | 畫面縮放時，Auto Layout + Constraints 能實現真正的 RWD 排版。 |
🎯 實用練習建議（快速熟手技巧）
| 練習主題 | 重點技能 |
|---|
| 動態按鈕 | 自動拉寬縮小、固定 Padding |
| 垂直卡片 | 上下對齊、文字與按鈕間距 |
| 註冊表單 | 多欄位對齊、輸入框寬度控制 |
| Navbar 導覽列 | 左 logo + 右導覽按鈕欄，左右分佈 |
| 對話泡泡樣式 | 左右排列、文字彈性換行 |
Post Views: 0