這一頁不再有固定週次。做 UNIT 05 線框與 UNIT 06 精稿時遇到 Auto Layout 問題，回來查就好；時間充裕再做下方的練習作業。
Auto Layout 3.0 的流動佈局與彈性設計
本單元深入 Figma Auto Layout 3.0 的運作機制，並示範如何把 Relume AI 產出的結構線框圖帶進設計系統（Design Tokens & Components），進行高保真視覺細緻化與 RWD 流體排版。Auto Layout 是 Figma 模擬 CSS Flexbox 的核心功能，能讓 UI 元件自動適應不同的文案長度與螢幕尺寸。
核心三大維度
- Horizontal 水平
- 子物件由左至右橫向排列。
- Vertical 垂直
- 子物件由上至下縱向堆疊。
- Wrap 自動換行
- 總寬度超出容器時自動折到下一行（Tag 標籤牆、多欄卡片列）。
- Gap between items
- 子物件之間的等距間隔，建議用 8pt 網格：8162432
- Padding
- 容器邊框與內部物件之間的留白，可獨立設定 Top／Right／Bottom／Left。
- 9 宮格對齊
- 內部物件置左、置中、置右，或靠上／靠下。
- Packed 緊密排列
- 物件依指定 Gap 等距靠攏。
- Space Between 兩端對齊
- 物件推到容器最左與最右（Header 導覽列、Card 頁腳）。
Resizing Rules：尺寸調整三黃金法則
這是 Auto Layout 最關鍵的屬性，決定容器與內部物件怎麼伸縮：
固定尺寸
強制鎖定指定的像素值，不隨內容或父容器縮放。
Icon、頭像 44×44px、裝飾圖案擁抱內容
容器由內向外，隨子物件或文字多寡自動長大或縮小。
按鈕、Tag 標籤、Badge 膠囊填滿容器
由外向內拉伸，填滿父容器扣除 Padding 後的剩餘空間。
RWD 核心！卡片內文、滿版 Banner、網格欄位外層卡片設 Fill Container（寬度隨螢幕伸縮）→ 卡片標題／內文設 Fill Container（寬度變窄時自動換行，防破版）→ 卡片內按鈕設 Hug Contents（維持按鈕長度）。下面的遊樂場選「卡片 Vertical」範本就能看到這組配對。
Auto Layout 遊樂場：調整屬性 → 看畫面 → 輸出程式碼
左邊是仿 Figma 的屬性面板；點畫布上的物件可以選取它。下方程式碼會即時更新，可以複製或下載
進階屬性：Wrap、絕對定位與極限限制
父容器方向設為 Wrap，子物件設固定寬度或 Min-Width，寬度不足時自動換行（如熱門搜尋標籤列）。遊樂場「標籤牆 Wrap」範本可以試。
點子物件右側的「+ 絕對定位」按鈕，讓它脫離 Auto Layout 的排版流，相對父容器置頂或置角（通知紅點 Badge、關閉按鈕 X）。遊樂場勾「通知紅點」可以試。
點尺寸輸入框設定 Min W／Max W：Max-Width: 1200px 防止超大螢幕時內容過度散開；Min-Width: 320px 防止螢幕縮小時過度擠壓。
如何做出隨螢幕寬度自動延伸的網頁區塊
要讓區塊從 1440px 桌機一路適應到 375px 手機，必須建立雙層架構：
拖拉螢幕寬度，看雙層架構怎麼運作
區塊構建雙層架構步驟
- Auto Layout 方向：
Vertical - 寬度：
Fill Container（Desktop 可先設 1440px，拉伸時改 Fill） - 綁定背景色 Token：
color/neutral/bg - 垂直 Padding：
Top/Bottom: 80px
- 放進外層，寬度
Fill Container，新增Max Width: 1200px - 對齊方式：
Top Center（置中） - 套用
grid/desktop-12網格
- 卡片與欄位設為
Fill Container - 外層視窗縮小時，內層卡片會依比例自動彈性縮小
Figma Auto Layout ➔ CSS Flexbox 對照表
理解 Figma 和前端 CSS 的對應，能大幅提升與開發團隊交接（Dev Handoff）的效率。點任一列，在上面的遊樂場套用那個屬性。
| Figma Auto Layout 屬性 | CSS Flexbox 對應程式碼 | 實務說明 | |
|---|---|---|---|
| Horizontal / Vertical | flex-direction: row / column; | 排版流向（軸線方向） | |
| Wrap | flex-wrap: wrap; | 超出寬度時自動折行 | |
| Gap | gap: 16px; | 子物件之間的間距 | |
| Padding | padding: 24px 16px; | 容器內部留白邊距 | |
| Fill Container | flex: 1 1 0%; 或 width: 100%; | 彈性分配剩餘空間 | |
| Hug Contents | width: fit-content; | 尺寸由內容決定 | |
| Space Between | justify-content: space-between; | 主軸物件推至兩端對齊 | |
| Absolute Position | position: absolute; | 脫離文檔流，自由定位 |
將 Relume 結構稿套用設計系統並視覺細緻化
Relume AI 能快速產生合理的黑白結構稿（Wireframe），但缺乏品牌個性與視覺層次。按下面的步驟，看同一個區塊怎麼從黑白稿一步步變成高保真設計：
看見島嶼最古老的地景
跟著在地導覽員，認識地質與漁村文化。
前後對照：拖拉中間的把手
四個步驟的操作細節
結構拆解與解綁（Detach／Unlink）
- 匯入 Relume 結構稿後，檢視它的層級架構。
- 清除 Relume 預設的非系統字體與色彩：點右側
Break link，或直接套用第一單元建立的 Token。
帶入 Design Tokens（色彩與文字階層）
色彩變數綁定（點一下複製 Token 名稱）：
文字階層綁定：
- Hero 大標題：
type/h1（36px／Bold／LH 120%） - 區塊小標題：
type/h2（24px）或type/h3（18px） - 長篇內文：
type/body-regular（16px／LH 160%）
組件替換（Swap Instances）
- 按鈕替換：選取 Relume 的預設按鈕，在右側屬性欄點
❖ Swap instance，換成第二單元做好的❖ Component: Button。 - 快速切換 Variant 狀態（如
Type: Primary／State: Default）。 - 卡片替換：把普通 Frame 換成
❖ Bento Card組件，並確認卡片內的圖片 Slot 與文字都設為 Fill Container。
視覺層次細緻化（Visual Polish & Details）
- 留白節奏（8-pt Grid）：把所有隨機的 Padding、Gap 調成 8、16、24、32、48、64 等規範數值。下面的 8pt 檢查器可以幫你算。
- 圓角與層次：卡片統一 12px 圓角；重要卡片加微陰影（Drop Shadow：Y 4、Blur 12、Opacity 5%）營造懸浮感。
- 品牌影像與無障礙：灰階佔位圖換成高質感品牌攝影；用 Contrast／Stark 插件確認內文對比度達 WCAG 2.1 AA（≥ 4.5:1）。
8pt 留白檢查器
轉化前後差異對照
| 轉化維度 | Relume 原始結構稿 | 正式 Design System 細緻化後 |
|---|---|---|
| 色彩與視覺 | 黑、灰、白等單調佔位色 | 全站綁定語意化 Color Tokens（支援黑夜／白天模式） |
| 字體排版 | 預設系統字型，沒有層級 | 嚴格對齊語意化 Text Styles（h1～h6、Body、Label） |
| 組件維護性 | 一次性的獨立 Frame | 可重複使用的 ❖ Component 變體與 Instance 連結 |
| 工程交付 | 邊距與響應規則未定 | 100% 映射 CSS Flexbox（Padding、Gap、Fill Container） |
用 Relume AI 在 10% 的時間內完成 80% 的版型佈局思考，再把剩下 90% 的時間，專注在設計系統的視覺層次、品牌氛圍與無障礙體驗。
// 核心結論與效益
實務操作常見踩坑與避坑指南
左邊是錯誤設定、右邊是正確設定。拖拉寬度，親眼看它怎麼壞掉、怎麼修好。
Auto Layout 容器內的文字，寬度一律設 Fill Container（需要長度自適應時用 Hug Contents），絕不設 Fixed Width，否則多語言或換行時一定破版。
檢查層級：「每一層」父容器與子元件的寬度都要設 Fill Container，彈性鏈結才不會在中間斷掉。
按鈕外框開啟 Auto Layout，方向 Horizontal，固定 Gap 8px，Resizing 設 Hug Contents。文字再長，Icon 都不會跟文字疊在一起。
練習作業（選做）：Relume 結構稿轉化 Design System 實戰
依照下面四階段的執行標準與檢核條件，完成專案畫布的高保真視覺轉化。每一階段展開看操作步驟與規格，做完就勾下方的驗證項目，最後可以匯出成檢核報告一起繳交。
步驟 1結構拆解與解綁——純化 Relume 線框圖，清除第三方非系統樣式
- 把 Relume AI 結構稿匯入 Figma 畫布。
- 展開 Layers 面板，檢視 Auto Layout 容器層級。
- 全選結構組件，在右側 Inspect 面板點
Break Link ✂️。 - 若是 Component Instance，按
Cmd + Option + B（Detach）解除嵌套。
- 斷開預設文字樣式（Text Styles）
- 斷開預設色彩（Color Styles）
步驟 2帶入 Design Tokens——綁定全域 Color 與 Typography Tokens
- 頁面與區塊底色綁定
color/neutral/bg。 - 大標題與主要文字綁定
color/neutral/text。 - 重點區塊與按鈕綁定
color/primary或color/secondary。 - Hero 大標
type/h1、小標type/h2／type/h3、內文type/body-regular。
color/neutral/bg（#F8FAFC）color/neutral/text（#0F172A）color/primary（#0F2C59）type/h1（36px／LH 120%）type/body-regular（16px／LH 160%）
❌ 直接填裸碼 Hex（如 #000000） ❌ 使用未定義階層的系統預設字型
步驟 3組件替換與響應——替換系統組件並建立雙層流體架構
- 按鈕：
❖ Swap instance換成❖ Component: Button。 - 微調 Variant（如
Type: Primary, State: Default）。 - 卡片：普通 Frame 換成
❖ Bento Card。 - 雙層架構：外層 Fill（100% W）；內層 Max Width 1200px、Top Center 置中。
- Outer Frame：
100% W / Fill - Inner Frame：
Max-W: 1200px - 卡片圖片 Slot：
Fill Container - 卡片文字欄位：
Fill Container - 按鈕外框：
Horizontal + Gap 8px + Hug
步驟 4視覺質感與 A11y——留白節奏、圓角光影與無障礙對比
- 8-pt Grid 校正：全頁 Padding 與 Gap 規格化為 8 的倍數（可用上面的 8pt 檢查器）。
- 卡片統一 12px 圓角，重點卡片加輕量微陰影。
- 灰階佔位圖換成高畫質品牌攝影（如《島嶼新浪潮》海浪意象）。
- 用 Contrast／Stark 插件檢測對比度。
- Grid：
8, 16, 24, 32, 48, 64 - Border Radius：
12px - Drop Shadow：
Y 4, Blur 12, Opacity 5% - 無障礙：
WCAG 2.1 AA (≥ 4.5:1)
驗證與避坑檢查
步驟 1結構拆解與解綁
步驟 2帶入 Design Tokens
步驟 3組件替換與響應
步驟 4視覺質感與 A11y
在 Figma 專案中把「轉化前（Wireframe）」與「轉化後（High-Fi）」並排呈現，並確認畫布縮放時 Auto Layout 流體響應正常運作。