Figma Auto Layout 自動佈局完整教學：2026 年必學的排版神器

如果你用 Figma 做 UI 設計卻還沒學 Auto Layout，那你大概有一半的時間都在手動調整間距和對齊。說真的，Auto Layout 是 Figma 最強大的功能之一，一旦學會，你的設計效率至少提升兩倍。

我在帶新人的時候，Auto Layout 永遠是第一堂必修課。這篇文章會從最基礎的概念開始，一步步帶你掌握 Auto Layout 的所有技巧，包括 2026 年 Figma 最新更新的功能。

Auto Layout 是什麼？為什麼要學

Auto Layout 簡單說就是讓元素自動排列和調整大小的功能。就像 CSS 裡的 Flexbox——你設定好方向、間距、對齊方式，裡面的元素就會自動排好。

沒有 Auto Layout 的時候，你可能會：

• 手動計算每個元素的 X、Y 座標
• 文字內容一改，按鈕大小就跑掉
• 新增一個項目，後面所有元素都要手動位移
• 做響應式版本時，整個重新排一次

有了 Auto Layout，這些問題全部自動處理。你的設計檔案也會更整潔、更容易維護。更重要的是，工程師看到用 Auto Layout 排的設計稿，會對你好感度大增——因為它的邏輯和前端開發的 Flexbox 幾乎一模一樣。

如果你對 UI/UX 設計的職涯發展有興趣，可以看看這篇 UX 設計師如何透過 AI 產品設計讓薪水翻倍的文章。

基礎觀念：方向、間距、填充

Auto Layout 的核心就三個東西：

1. 排列方向（Direction）

水平（Horizontal）：元素從左排到右，像一排按鈕。
垂直（Vertical）：元素從上排到下，像一個清單。
Wrap：Figma 2025 新增的功能，元素排滿一行後會自動換行，超好用！

2. 間距（Gap）

元素之間的距離。你可以設定一個統一的間距值，也可以個別調整。小技巧：按住 Alt 在 Figma 畫布上就能直接看到間距數值。

3. 填充（Padding）

元素和容器邊框之間的距離。可以四邊統一設定，也可以上右下左分別設定。

建立第一個 Auto Layout

最快的方式：選取你要排列的元素，按 Shift + A，完成！

你也可以先建立一個空的 Auto Layout Frame，再把元素拖進去。試試看：

1. 畫一個矩形當背景，寬 200、高 40、圓角 8
2. 加一段文字「按鈕」在上面
3. 同時選取矩形和文字，按 Shift + A
4. 設定 Padding 為 12（上下）和 24（左右）

現在試著改變文字內容——比如把「按鈕」改成「送出表單」。你會發現按鈕自動變寬了！這就是 Auto Layout 的魔力。

巢狀 Auto Layout 實戰

真正的威力在於巢狀（Nested）Auto Layout——Auto Layout 裡面放 Auto Layout。

舉個例子，一張卡片通常是這樣的結構：

卡片（垂直 Auto Layout）
├── 圖片
├── 內容區（垂直 Auto Layout）
│   ├── 標題
│   ├── 描述文字
│   └── 標籤區（水平 Auto Layout, Wrap）
│       ├── 標籤1
│       ├── 標籤2
│       └── 標籤3
└── 按鈕區（水平 Auto Layout）
    ├── 取消按鈕
    └── 確認按鈕

每一層都是一個 Auto Layout，各自管理自己的排列邏輯。當你修改任何一個元素，整張卡片都會自動調整。

Hug Content vs Fill Container

這是很多人搞混的地方，但其實很簡單：

Hug Content（擁抱內容）：容器大小跟著內容走。內容多大，容器就多大。適合用在按鈕、標籤這類大小不固定的元素。

Fill Container（填滿容器）：元素大小跟著容器走。容器多寬，元素就多寬。適合用在需要撐滿整行的元素，比如卡片裡的圖片、輸入框。

Fixed（固定）：就是固定大小，不跟著任何東西走。

一個實用的經驗法則：外層容器通常用 Fixed 或 Fill，內層元素用 Hug 或 Fill。

絕對定位元素的搭配使用

有時候你需要在 Auto Layout 裡放一個「不參與排列」的元素，比如卡片右上角的關閉按鈕、或是重疊在圖片上的標籤。

做法很簡單：選取那個元素，在右側面板找到「Absolute position」的圖示點下去。這個元素就會從 Auto Layout 的排列中脫離，你可以自由拖放它的位置，其他元素不受影響。

這個功能在設計通知徽章（Badge）、浮動按鈕、角落裝飾時特別好用。

響應式設計的排版技巧

Auto Layout 搭配 Constraints 和 Min/Max Width，可以做出真正響應式的設計。

設定最小和最大寬度

選取 Auto Layout Frame，在右側面板的寬度欄位旁邊，點擊下拉選單可以設定 Min Width 和 Max Width。這樣你的容器就會在一個範圍內自適應。

斷點模擬

搭配 Wrap 功能，你可以讓元素在容器變窄時自動換行——就像 CSS 的 flex-wrap。這在設計表單、標籤群組、圖片牆時超級實用。

常見踩坑與除錯方法

學 Auto Layout 一定會踩坑，以下是最常見的幾個：

1. 元素順序對不上：Auto Layout 裡的元素順序就是圖層面板裡的順序。拖動圖層面板裡的順序就能改變排列順序
2. 大小突然變成 0：通常是因為設成了 Fill Container 但外層容器的大小是 Hug Content，形成了循環。解法：外層改成 Fixed 或設定一個 Min Width
3. 間距不一致：檢查是不是有元素被設了額外的 margin（在 Auto Layout 中叫做 Individual padding）
4. 加不進去 Auto Layout：確認你是拖進 Auto Layout Frame 裡面，而不是放在外面

實戰案例：設計一張響應式卡片

來用今天學到的所有技巧，做一張完整的響應式卡片：

1. 建立一個 Frame（320px 寬），加上 Auto Layout（垂直方向）
2. 加入圖片區域（Fill Container 寬度，Fixed 180px 高度）
3. 建立內容區 Auto Layout（垂直，Padding 16px，Gap 8px）
4. 在內容區加入標題文字（Fill Container 寬度）
5. 加入描述文字（Fill Container，設定 Max Lines 為 2）
6. 建立標籤區 Auto Layout（水平 + Wrap，Gap 8px）
7. 加入 2-3 個標籤（Hug Content）
8. 加入按鈕區 Auto Layout（水平，Space Between）
9. 右上角加一個「愛心」圖示（Absolute Position）

完成後，試試拉寬拉窄卡片的寬度，你會看到所有元素都能正確地響應式調整。這就是 Auto Layout 的威力！

結語

Auto Layout 初學的時候可能會覺得限制很多，但一旦內化了它的邏輯，你會發現它是設計效率的超級倍增器。不只省時間，做出來的設計檔案更整潔、更好維護、也更容易和工程師溝通。

我的建議是：接下來做的每一個設計，都強迫自己用 Auto Layout 來排。剛開始會慢一點，但兩週之後你就回不去了。加油！