進階網頁設計｜課程講義

Advanced Web Page Design

Figma Auto Layout
深度實戰與視覺細緻化

Author

JinJin Wang

September 16, 2026

・ Auto Layout 3.0 的流動佈局與彈性設計

本單元將深入探討 Figma Auto Layout 3.0 的核心運作機制，並示範如何將 Relume AI 產出的結構線框圖（Wireframe） 正式帶入設計系統（Design Tokens & Components），進行高保真（High-Fidelity）視覺細緻化與 RWD 流體排版。

Auto Layout 是 Figma 模擬現代前端網頁 CSS Flexbox 的核心功能。掌握 Auto Layout 3.0，能讓 UI 組件自動適應不同的文案長度與螢幕尺寸。

・ Auto Layout 3.0 核心三大維度

  • 方向（Direction）
    • Horizontal（水平）：子物件由左至右橫向排列。
    • Vertical（垂直）：子物件由上至下縱向堆疊。
    • Wrap（自動換行）：當子物件總寬度超出容器時，自動折落至下一行（適合 Tag 標籤牆、多欄卡片列）。
  • 間距與內邊距（Gap & Padding）
    • Gap between items：子物件之間的等距間隔（建議採用 8pt 網格系統：8px, 16px, 24px, 32px）。
    • Padding：容器邊框與內部物件之間的留白，可獨立設定 Top / Right / Bottom / Left。
  • 對齊與分佈（Alignment & Distribution）
    • 9 宮格對齊：指定內部物件置左、置中、置右或靠上/靠下。
    • Packed（緊密排列）：物件依指定 Gap 等距靠攏。
    • Space Between（兩端對齊）：物件自動推至容器最左與最右端（適用於 Header 導覽列與 Card 頁腳）。
event design
Figma Auto Layout 3.0 核心三大維度

・ Resizing Rules（尺寸調整三黃金法則）

這是 Auto Layout 最關鍵的屬性，決定了容器與內部物件的伸縮行為：

模式名稱 原理說明 典型 UI 應用情境
Fixed Width / Height
(固定尺寸)		 強制鎖定指定的像素值（px），不隨內容或父容器縮放。 點擊 Icon、個人頭像 (44x44px)、固定的裝飾圖案。
Hug Contents
(擁抱內容)		 容器寬高度由內向外隨子物件或文字多寡自動長大或縮小。 按鈕（Button）、Tag 標籤、Badge 膠囊塊。
Fill Container
(填滿容器)		 物件由外向內自動拉伸，填滿父容器扣除 Padding 後的剩餘空間。 RWD 自適應核心！卡片內文、滿版 Banner、網格欄位。
💡 核心配對心法：
  • 外層卡片：設定 Fill Container（寬度隨螢幕伸縮）。
  • 卡片標題/內文：設定 Fill Container（寬度縮小時自動向上推擠換行，防破版）。
  • 卡片內按鈕：設定 Hug Contents（維持按鈕外框擠壓長度）。
event design
Figma Auto Layout 尺寸調整三黃金法則 (Resizing Rules)

・進階屬性：Wrap、絕對定位與極限限制

  • Wrap（自動換行）：選取父容器方向為 Wrap，子物件設為固定寬度或 Min-Width，寬度不足時自動換行（如熱門搜尋標籤列）。
  • Absolute Position（絕對定位）：點擊子物件右側屬性欄的 + 絕對定位按鈕，可讓該物件脫離 Auto Layout 的自動排版流，任意相對於父容器置頂/置角（常用於右上角提示紅點 Notification Badge 或關閉按鈕 X）。
  • Min & Max Dimensions（最大/最小尺寸限制）：點擊尺寸輸入框設定 Min W / Max W：
    • Max-Width: 1200px：防止 RWD 拉伸至超大螢幕時內容過度散開。
    • Min-Width: 320px：防止螢幕縮小過度擠壓介面。
event design
Figma Auto Layout 3.0 進階屬性解析

・ 如何做出隨螢幕寬度自動延伸的網頁區塊

要打造能自適應不同解析度（如 1440px 桌機至 375px 手機）的流體網頁區塊，必須建立雙層架構：

[ Outer Section Frame (Fill Container / 100% W) ]  <-- 吃滿螢幕底色
   └── [ Inner Container Frame (Max-Width / Centered) ]  <-- 限制內容寬度與對齊
          └── [ Content UI Elements (Fill Container) ]  <-- 彈性內容組件
event design
自適應網頁區塊雙層與彈性組件架構圖解

・區塊構建雙層架構步驟

  1. 外層容器（Outer Section Frame）：
    • Auto Layout 方向設定為 Vertical。
    • 寬度設為 Fill Container（或在 Desktop 設為 1440px，動態拉伸時設為 Fill）。
    • 綁定全站背景色 Token（如 color/neutral/bg）。
    • 設定垂直 Padding（如 Top/Bottom: 80px）。
  2. 內層容器（Inner Container Frame）：
    • 將內層 Frame 放入外層，寬度設定 Fill Container，並新增 Max Width: 1200px。
    • 對齊方式設定為 Top Center（置中對齊）。
    • 套用 grid/desktop-12 網格規範。
  3. 內部內容組件（Content UI Elements）：
    • 卡片與欄位設為 Fill Container。當外層視窗縮小時，內層卡片將依據比例自動彈性縮小。
event design
網頁區塊構建雙層架構 3 大步驟

・ 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; 脫離文檔流，自由定位
event design
Figma Auto Layout ➔ CSS Flexbox 屬性對照與功能示意圖

・ 將 Relume 結構稿套用設計系統並進行視覺細緻化

Relume AI 能快速產生合理的黑白結構稿（Wireframe），但缺乏品牌個性與視覺層次。本階段將示範如何將結構稿正式導入 Design System。

[ Relume 黑白結構稿 ] ➔ [ 帶入 Design Tokens ] ➔ [ 替換 Component 變體 ] ➔ [ 視覺質感細緻化 ]
event design
Relume 結構稿轉化高保真設計 4 大步驟

・ 步驟 1：結構拆解與解綁（Detach / Unlink）

  • 匯入 Relume 結構稿後，檢視其層級架構。
  • 清除 Relume 預設的非系統字體與色彩（點擊右側 Break link 或直接套用我們第一單元建立的 Token）。
event design
步驟 1：結構拆解與解綁（Detach / Unlink）

・ 步驟 2：帶入 Design Tokens（色彩與文字階層）

  • 色彩變數綁定：
    • 背景色：綁定 color/neutral/bg (#F8FAFC)。
    • 大標題文字：綁定 color/neutral/text (#0F172A)。
    • 主色區塊/按鈕：綁定 color/primary (#0F2C59) 或 color/secondary (#2563EB)。
  • 文字階層綁定：
    • Hero 區塊大標題：套用 type/h1 (36px / Bold / LH 120%)。
    • 區塊小標題：套用 type/h2 (24px) 或 type/h3 (18px)。
    • 長篇內文：套用 type/body-regular (16px / LH 160%)。
event design
步驟 2：帶入 Design Tokens（色彩與文字階層）

・ 步驟 3：組件替換（Swap Instances）

  • 按鈕替換：
    • 選取 Relume 的預設按鈕，在右側屬性欄點擊 ❖ Swap instance，替換為第二單元製作的 ❖ Component: Button。
    • 快速切換 Variant 狀態（如 Type: Primary / State: Default）。
  • 卡片替換：
    • 將普通 Frame 替換為 ❖ Bento Card 組件，並確認卡片內的圖片 Slot 與文字均設為 Fill Container。
event design
步驟 3：組件替換（Swap Instances）

・步驟 4：視覺層次細緻化（Visual Polish & Details）

  • 留白節奏微調（8-pt Grid System）：
    • 檢視所有 Padding 與 Gap，將隨機的數字調整為 8px, 16px, 24px, 32px, 48px, 64px 等規範數值。
  • 圓角與層次質感（Border Radius & Shadows）：
    • 卡片統一套用 12px 圓角。
    • 重要卡片加入微陰影（Drop Shadow: Y: 4, Blur: 12, Opacity: 5%）營造懸浮空氣感。
  • 品牌影像與無障礙校正（A11y Check）：
    • 將灰階圖片佔位符替換為高質感品牌攝影圖（如《島嶼新浪潮》自然海浪意象）。
    • 使用 Contrast / Stark 插件檢測，確保所有內文與背景對比度達 WCAG 2.1 AA 標準 (≥ 4.5:1)。
event design
步驟 4：視覺層次細緻化（Visual Polish & Details）

・ 轉化前後差異對照表

轉化維度 Relume 原始結構稿 (Wireframe) 正式 Design System 視覺細緻化後
色彩與視覺 黑、灰、白等單調占位色 全站綁定語意化 Color Tokens（支援黑夜/白天模式）
字體排版 預設系統無級別字型 嚴格對齊語意化 Text Styles（h1~h6, Body, Label）
組件維護性 一次性獨立 Frame 結構 可重複使用之 ❖ Component 變體與 Instance 連結
工程交付 (Dev) 未確定邊距與響應規則 100% 映射 CSS Flexbox（Padding, Gap, Fill Container）
💡 核心結論與效益：
透過這套 workflow，設計師能利用 Relume AI 在 10% 的時間內完成 80% 的版型佈局思考，再將剩餘 90% 的時間專注於 Design System 的視覺層次細緻化、品牌氛圍打造與無障礙（A11y）體驗檢測。

・ 實務操作常見踩坑與避坑指南

❌ 常見錯誤 1：文字設定為 Fixed Width，導致多語言或換行時破版

解法：在 Auto Layout 容器內的文字，寬度必須一律設為 Fill Container（若需長度自適應則設為 Hug Contents），絕不設為 Fixed Width。

❌ 常見錯誤 2：外層畫布縮放時，內部卡片不會跟著變寬/變窄

解法：檢查層級，必須「每一層」父容器與子組件的寬度都設定為 Fill Container，彈性鏈結才不會中斷。

❌ 常見錯誤 3：按鈕文字變長時，按鈕圖示（Icon）與文字疊在一起

解法：按鈕外框必須開啟 Auto Layout，方向設為 Horizontal，並設定固定的 Gap（如 8px），Resizing 設為 Hug Contents。

event design
Figma Auto Layout 實務避坑指南 (Common Pitfalls & Solutions)

・課後作業

Relume AI 結構稿轉化 Design System 實戰

請依據以下四階段執行標準與檢核條件，完成專案畫布之高保真（High-Fidelity）視覺轉化。

作業階段 核心目標 具體操作步驟 規格與屬性設定 驗證與避坑檢查
步驟 1
結構拆解與解綁		 純化 Relume 線框圖，清除第三方非系統樣式
  • 匯入 Relume AI 結構稿至 Figma 畫布。
  • 展開 Layers 面板，檢視 Auto Layout 容器層級。
  • 全選結構組件，於右側 Inspect 面板點擊 Break Link ✂️。
  • 若為 Component Instance，按 Cmd+Option+B (Detach) 解除嵌套。
  • 斷開預設文字樣式（Text Styles）
  • 斷開預設色彩（Color Styles）
  • ✅ 圖層面板中無任何 Relume 原始樣式殘留。
  • ✅ 所有文字與色彩回歸無綁定純質狀態。
步驟 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 Container (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
  • ✅ 縮放畫布時，內部卡片與內文會自動推擠換行，無溢出破版。
  • ✅ 每一層級寬度皆正確傳遞 Fill Container，無中斷點。
  • ✅ 按鈕文字變長時，Icon 與文字不重疊。
步驟 4
視覺質感與 A11y		 微調留白節奏、圓角光影與無障礙對比檢測
  • 8-pt Grid 校正：檢查全頁 Padding 與 Gap，規格化為 8 的倍數。
  • 圓角與陰影：卡片統一套用 12px 圓角，重點卡片加入輕量微陰影。
  • 品牌影像替換：將灰階占位圖替換為高畫質品牌攝影作品（如《島嶼新浪潮》海浪意象）。
  • A11y 無障礙檢測：執行 Contrast / Stark 插件檢測對比度。
  • Grid 規格: 8px, 16px, 24px, 32px, 48px, 64px
  • Border Radius: 12px
  • Drop Shadow: Y: 4, Blur: 12, Opacity: 5%
  • 無障礙標準: WCAG 2.1 AA (≥ 4.5:1)
  • ✅ 全頁留白無隨機像素數值（如 13px, 19px）。
  • ✅ 陰影通透自然，無重色黑邊框感。
  • ✅ 文字與背景對比度全數通過 WCAG 2.1 AA 檢測。
💡 作業繳交 Checkpoint：請於 Figma 專案中將「轉化前 (Wireframe)」與「轉化後 (High-Fi)」並排呈現，並確認畫布縮放時 Auto Layout 流體響應運作正常。