Auto Layout

🎨 學習內容：

• 認識 Auto Layout 的基本概念與使用情境
• 加入 Auto Layout 到選取的物件或元件
• 編輯 Auto Layout 的屬性（方向、間距、對齊、填滿容器等）
• 巢狀 Auto Layout 的應用
• 使用 Suggest Auto Layout 自動轉換設計
• Auto Layout 在元件（Components）中的應用限制與技巧

🧠 核心概念講解：

Auto Layout 是什麼？

Auto Layout 是 Figma 用來建立「彈性排版」的功能，讓設計在內容變動時自動調整大小與位置，適合用來做：

• 隨文字長度變化的按鈕
• 可動態增加項目的清單或卡片
• 響應式 UI 介面組合（例如手機介面）

加入 Auto Layout 的方式：

1. 選取物件，按 Shift + A
2. 右側面板點選「+ Auto layout」
3. 右鍵選單「Add auto layout」

Auto Layout 的屬性：

• 方向（Direction）：水平或垂直排列
• 間距（Spacing）：物件之間的距離
• Padding：內邊距
• 對齊（Alignment）：物件對齊方式
• 填滿容器（Fill Container）：物件寬高是否自動填滿父容器

🧠 實作教學與程式碼/操作範例：

範例一：響應式按鈕

操作步驟：

1. 插入一個文字「送出」
2. 加入 Auto Layout（Shift + A）
3. 設定 Padding：左右 16px、上下 8px
4. 設定水平置中對齊
5. 改變文字內容，看按鈕自動調整寬度

範例二：部落格卡片元件

1. 建立圖片 + 文字區塊（包含標題與描述）
2. 外層加上垂直 Auto Layout
3. 內層標題 + 描述設水平 Auto Layout
4. 加上 Padding、間距與對齊
5. 建立卡片組合並巢狀多個卡片至一個 UI 區塊中

範例三：使用 Suggest Auto Layout 快速自動轉換

1. 匯入設計草稿（含按鈕、清單、導覽列等）
2. 選取整個畫面 → Actions → Suggest Auto Layout
3. 觀察系統如何自動建立結構，學習常見排版模式
4. 手動微調不符合預期的區塊

🧠 練習題與任務：

練習 1：

請設計一個「表單按鈕區塊」，包含三個按鈕：

• 提交（Submit）
• 重設（Reset）
• 返回（Back）

要求：

• 使用 Auto Layout 水平排列
• 所有按鈕自動調整寬度，並左右間距 16px
• 將整個區塊放入垂直 Auto Layout，下方空間為 24px

練習 2：

將下列 UI 元素轉換為響應式設計（使用 Suggest Auto Layout）：

• 上方標題列（包含返回鍵與標題文字）
• 中間圖片區
• 下方資訊區（三段文字）
• 加入兩個巢狀 Auto Layout 並合理排列元素