Unit 04
01 / 12
UI 設計實作課程 · 2026
Auto Layout
& Constraints
彈性版面 · 響應設計 · 元件縮放
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 04
02 / 12
Agenda
課程大綱
第 1 小時
Auto Layout 核心概念
為什麼需要彈性版面
第 2 小時
Constraints 實作
元件在不同尺寸下的行為
第 3 小時
重構練習
把靜態版面改寫成彈性結構
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 04
03 / 12
Why
為什麼需要 Auto Layout？
告別手動調整，讓版面自己長大
內容變長時按鈕自動撐寬
列表增加項目時容器自動延伸
多語言文字長短不一時版面自動適應
設計稿更接近真實開發的行為
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
1
Unit 04
04 / 12
Auto Layout · Direction
水平與垂直排列
兩種基本排列方向
Horizontal：子元素左右排列（如按鈕列、導覽列）
Vertical：子元素上下排列（如卡片、列表）
Wrap：超出寬度時自動換行
快速建立：選取多個物件 → Shift+A
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
2
Unit 04
05 / 12
Auto Layout · Spacing
Padding 與 Spacing
控制內部空間的兩個關鍵參數
Padding：容器內側留白（上下左右可分開設定）
Gap：子元素之間的間距
Auto：子元素均等分佈
統一使用 4px 倍數間距系統
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
3
Unit 04
06 / 12
Auto Layout · Resizing
三種 Resizing 模式
控制容器如何回應內容
Fixed：固定尺寸，內容超出時裁切
Hug：緊貼內容，隨內容大小變化
Fill：填滿父層可用空間
正確設定 Resizing = 元件能在各情境正常運作
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
4
Unit 04
07 / 12
Auto Layout · Nested
巢狀 Auto Layout
複雜版面的組成方式
外層 Vertical Auto Layout 控制整體流向
內層 Horizontal Auto Layout 控制單行元素
讓每個子元件也具備 Auto Layout
思考方式：像 CSS Flexbox 一樣拆解版面
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 04
08 / 12
Constraints
Constraints
元件在不同尺寸 Frame 下的行為
Left / Right / Center（水平固定位置）
Top / Bottom / Center（垂直固定位置）
Scale：等比例縮放
Left+Right：自動拉伸填滿寬度
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 04
09 / 12
Responsive
響應式設計概念
一份設計稿，多種裝置尺寸
建立 Desktop、Tablet、Mobile 三個 Frame
用 Constraints 設定元素的響應行為
核心內容置中、側邊留白彈性縮放
測試：拖動 Frame 邊框看版面反應
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 04
10 / 12
Live Demo
Figma 實機示範
把靜態按鈕改成 Auto Layout
建立一個靜態按鈕（Rectangle + Text）
加上 Auto Layout，設定 Padding
改變文字長度，觀察按鈕自動撐寬
套用到卡片元件
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 04
11 / 12
Workshop
課堂實作
版面重構
把上一堂課的作業改寫成 Auto Layout
選取 App 模仿稿中的導覽列或按鈕
加上 Auto Layout 與 Constraints
測試不同內容長度下的反應
截圖三種狀態（短文字、長文字、多項目）
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
Unit 04
12 / 12
Review
討論與點評
哪裡最難改？哪裡改了最有感？
展示改版前後的比較
Hug vs Fill 的選擇邏輯是什麼？
還有哪些元素可以用 Auto Layout 改善？
UI 設計實作：Figma 與 UX 流程 × AI 設計整合
←
→