Figma Auto Layout 完整教學：從基礎到 Grid 新功能，一篇搞懂自動佈局
2026年3月1日 下午 12:30
UI/UX 設計📌 目錄
你有沒有遇過這種情況——按鈕裡的文字改了幾個字，結果背景跑掉了；卡片裡多加一行文字，下面的元素全部要手動推；做完桌面版的設計稿，手機版又要從頭排一次？
這些問題的根源都一樣：你還在用「手動推像素」的方式做排版。
Auto Layout 是 Figma 最重要的核心功能，沒有之一。它讓你的設計稿從「死的畫面」變成「活的佈局」——內容變了，排版自動跟著變。學會 Auto Layout，你的設計效率會直接翻倍，而且做出來的設計稿，工程師看了也會感謝你。
這篇文章會從零開始，把 Figma Auto Layout 的每一個功能都講清楚，包括 2025 年新推出的 Grid Auto Layout。不管你是剛接觸 Figma 的新手，還是用了一陣子但總覺得 Auto Layout「很難搞」的設計師，看完這篇你會對它完全改觀。
Auto Layout 是什麼？為什麼你必須學會它
Auto Layout 是 Figma 中讓 Frame 內的元素可以自動排列、自動調整間距和尺寸的功能。
如果你有寫過 CSS，Auto Layout 基本上就是 Figma 版的 display: flex。如果你沒寫過也完全沒關係——你可以把它想像成一個聰明的盒子，你告訴它「裡面的東西要怎麼排」，之後不管內容怎麼變，它都會自動幫你處理好。
❌ 沒有 Auto Layout
改文字 → 背景跑掉 → 手動調
✅ 有 Auto Layout
改文字 → 自動調整 → 搞定
具體來說，Auto Layout 能幫你做到這些事：
🔘 按鈕自動適應文字長度
不管按鈕裡寫「確定」還是「立即免費註冊帳號」，背景會自動撐開或縮小，Padding 永遠一致。
🔘 列表自動增減
在一個列表裡新增或刪除項目，其他項目的間距會自動重新分配，不用手動推。
🔘 跟工程師說同一種語言
Auto Layout 的邏輯跟 CSS Flexbox 一模一樣。你的設計稿本身就是排版規格，工程師不用再猜「這個間距到底是 12 還是 16」。
一句話總結：Auto Layout 是 Figma 中「用規則取代手動」的核心功能。學會它，你做設計的速度和品質會同時提升。
Auto Layout 基本操作教學
開啟 Auto Layout 非常簡單，有三種方式：
快捷鍵 Shift + A
選取一個或多個圖層，按下 Shift + A，Figma 就會自動幫你加上 Auto Layout。這是最常用的方式，建議直接記住。
右側面板點擊「+」
選取 Frame 或圖層後，在右側設計面板找到 Layout 區塊，點「+」號即可新增 Auto Layout。
右鍵選單
對圖層右鍵 → 選擇「Add auto layout」。另外也可以用「Suggest auto layout」，讓 Figma 自動判斷你的畫面該怎麼加 Auto Layout。
⚠️ 重要觀念：Frame vs Group
Auto Layout 只能加在 Frame 上，不能加在 Group 上。如果你選了一堆圖層按 Shift + A，Figma 會自動幫你建一個 Frame 把它們包起來。但如果你習慣用 Cmd/Ctrl + G 來 Group，記得改成用 Cmd/Ctrl + Option/Alt + G 來建 Frame，才能使用 Auto Layout。
開啟 Auto Layout 之後，你會看到右側面板出現一整排設定。不用怕，接下來一個一個講清楚。
方向、間距與內距設定
Auto Layout 最基本的三個設定：方向（Direction）、間距（Gap）、內距（Padding）。
方向 Direction
決定子元素要怎麼排列，有三個選項：
| 方向 | Vertical ↕ | Horizontal ↔ | Wrap ↩ |
|---|---|---|---|
| 排列方式 | 上到下 | 左到右 | 超出換行 |
| 常用場景 | 列表、卡片堆疊、表單 | 按鈕列、導覽列、標籤 | 標籤雲、圖片集、篩選器 |
| CSS 對應 | flex-direction: column | flex-direction: row | flex-wrap: wrap |
Wrap 是 Horizontal 方向的延伸選項——當子元素的總寬度超過 Frame 的寬度時，會自動換到下一行。做 Tag 標籤雲或是響應式的卡片排列時特別好用。
間距 Gap
Gap 就是子元素之間的距離。設定一個數字，所有子元素之間的間距就會統一。比如你設 Gap = 12，那每個元素之間都是 12px，不用一個一個量。
如果你想讓某些元素之間的間距不一樣，可以選取特定的子元素，然後在右側面板的 Item spacing 裡單獨設定。
內距 Padding
Padding 是 Frame 邊緣到子元素之間的距離，就是 CSS 裡的 padding。Figma 預設會給你一個統一的 Padding 值，但如果你點開那個小圖示，可以分別設定上、右、下、左四邊的 Padding。
實際操作小技巧：按住數字欄位左右拖動可以快速調整數值，不用每次都打字。
對齊 Alignment
Auto Layout 有一個 3×3 的對齊格子（alignment grid），讓你決定子元素在 Frame 裡的對齊方式。上、中、下 × 左、中、右 = 9 種對齊位置。這跟 CSS Flexbox 的 align-items 和 justify-content 完全對應。
Resizing 三種模式完整解析
這是 Auto Layout 裡最多人搞混的部分，但其實邏輯很簡單。每個 Auto Layout Frame 和裡面的子元素，寬度和高度各自有三種 Resizing 模式：
📐 Fixed（固定尺寸）
你指定一個固定的寬度或高度，不管內容怎麼變，Frame 大小不變。適合你明確知道元素尺寸的時候，像是一個寬 375px 的手機畫面。
🤗 Hug（擁抱內容）
Frame 會根據裡面的內容自動調整大小——內容多就撐大，內容少就縮小。按鈕就是最典型的例子：文字多長，按鈕就多寬。
📦 Fill Container（填滿容器）
元素會撐滿父層 Auto Layout Frame 的可用空間。這是做響應式設計的關鍵——讓元素跟著容器大小變化。只有在外層有 Auto Layout Frame 的時候才能選這個模式。
這三個模式的組合是 Auto Layout 威力的核心。舉幾個實際的例子：
💡 常見組合情境
按鈕
寬度 Hug，高度 Hug → 按鈕隨文字自動調整大小
卡片
寬度 Fixed 或 Fill，高度 Hug → 寬度固定，高度隨內容調整
全寬區塊
寬度 Fill，高度 Hug → 撐滿父容器寬度，高度自適應
手機畫面
寬度 Fixed 375px，高度 Hug → 固定手機寬度，高度隨內容延伸
記住一個口訣：「外層用 Fixed 或 Fill 控制大小，裡層用 Hug 適應內容。」 大部分情境照這個邏輯就不會出錯。
巢狀 Auto Layout 實戰
Auto Layout 真正強大的地方在於巢狀（Nesting）——一個 Auto Layout Frame 裡面再放 Auto Layout Frame。就像俄羅斯娃娃，或者 HTML 裡面 div 裡面再放 div。
我們用一個最常見的「卡片元件」來實際走一遍：
最內層：按鈕
建立一個文字圖層寫上「了解更多」，按 Shift + A，設定 Padding 上下 12、左右 24，加上背景色。這就是一顆會自動適應文字長度的按鈕。
中間層：文字區塊
把標題、描述文字、按鈕選起來，Shift + A 包成一個 Vertical Auto Layout。設定 Gap = 12，讓標題、描述、按鈕之間有統一間距。
最外層：卡片容器
把封面圖片和文字區塊選起來，再按一次 Shift + A 包成 Vertical Auto Layout。加上 Padding、圓角、背景色，一張完整的卡片就完成了。
現在試試看改卡片裡的標題文字——你會發現文字區塊的高度自動變了，卡片的整體高度也跟著變了，按鈕的位置也自動調整了。這就是巢狀 Auto Layout 的魔力。
如果你要做一個卡片列表，只要再把多張卡片選起來 Shift + A，設定 Horizontal 方向和 Gap，就完成了一排可以自動排列的卡片組。加刪卡片，間距自動調整。
Absolute Position 與 Space Between
Absolute Position 絕對定位
有時候你需要在 Auto Layout 裡放一個「不守規矩」的元素——比如卡片右上角的徽章、或是輸入框裡的清除圖示。這時候就要用 Absolute Position。
選取 Auto Layout 裡的某個子元素，在右側面板點擊 Absolute Position 的圖示，那個元素就會脫離 Auto Layout 的排列規則，你可以自由地把它放在 Frame 裡的任何位置，其他元素會當它不存在。
你還是可以對這個絕對定位的元素設定 Constraints（約束），比如「固定在右上角」，讓它在 Frame 大小改變時還是釘在那個位置。
Space Between 均分間距
在 Auto Layout 的進階設定裡（點右側面板的「⋯」），你可以把 Spacing Mode 從 Packed（固定間距）切換成 Space Between（均分間距）。
Packed 就是你設什麼 Gap，元素之間就是那個固定距離。Space Between 則會忽略 Gap 的數值，把子元素平均分散在 Frame 的全部空間裡——就像 CSS 的 justify-content: space-between。
最常用的場景就是 Navigation Bar：Logo 在左、選單在右，中間的空間自動分配。
Grid Auto Layout（2025 新功能）
🆕 2025 年 Figma Config 新功能
Grid Auto Layout 是 2025 年 5 月 Figma Config 大會上推出的重磅功能，目前仍在 Open Beta 階段。它讓 Auto Layout 從「一維排列」進化到「二維排列」。
之前的 Auto Layout 只能選 Vertical 或 Horizontal——也就是只能排「一排」或「一列」。如果你要做一個 2×3 的卡片網格，就得用巢狀：外層 Vertical 裡面放三排 Horizontal。
Grid Auto Layout 直接讓你在一個 Frame 裡用欄（Column）和列（Row）來排列元素，不用再巢狀。你可以設定欄數、欄寬、列高，甚至讓某個元素「跨欄」或「跨列」（Span），做出 Bento Box 風格的不規則網格。
Grid 跟 Horizontal/Vertical 的最大差異在於：Grid 裡的元素不會「換行」。每個元素都有明確的「位在第幾欄第幾列」的位置，更像 CSS Grid 的邏輯。
適合使用 Grid Auto Layout 的場景包括：Dashboard 佈局、圖片 Gallery、Bento Box 風格卡片、Product Grid 商品列表等。
Auto Layout 常見問題與踩坑指南
❓ 為什麼我的 Auto Layout 跑版了？
最常見的原因是 Resizing 模式設錯了。檢查一下是不是把該設 Hug 的設成了 Fixed，或是該設 Fill 的設成了 Hug。另一個常見問題是不小心用了 Group 而不是 Frame。
❓ 怎麼在 Auto Layout 裡放分隔線？
建立一個 Rectangle，高度設 1px，寬度設 Fill Container，填充色用淺灰。放進 Auto Layout 裡就會自動成為一條撐滿寬度的分隔線。不建議用 Line 工具，因為 Line 在 Auto Layout 裡的行為有時候不太穩定。
❓ 怎麼在 Auto Layout 裡讓元素重疊？
把 Gap 設成負數就可以了。比如做頭像堆疊（avatar stack）的效果，把 Horizontal Auto Layout 的 Gap 設成 -8，頭像就會微微重疊。
❓ 怎麼移除 Auto Layout？
注意不要再按一次 Shift + A，那樣會在外面再包一層。正確的方式是在右側面板的 Auto Layout 區塊點「-」號，或右鍵 → More layout options → Remove all auto layout（連子層的也一起移除）。
❓ 文字跑出 Auto Layout Frame 怎麼辦？
檢查文字圖層的 Text Resizing 設定。如果是 Auto Width（自動寬度），文字只會往右邊長、不會換行。把它改成 Auto Height（固定寬度、自動高度），文字就會在 Frame 寬度內自動換行。
重點整理
📝 重點整理
→
Auto Layout 是 Figma 最核心的功能，讓設計從「手動推像素」升級為「用規則自動排版」
→
三個方向：Vertical（垂直）、Horizontal（水平）、Wrap（自動換行），對應不同的排列需求
→
Resizing 三模式是關鍵：Fixed（固定）、Hug（跟著內容）、Fill（撐滿容器），學會組合就能應對所有情境
→
巢狀 Auto Layout 是做複雜元件的核心技巧——從按鈕到卡片到整頁佈局，都是一層一層套出來的
→
Absolute Position 讓特殊元素脫離排列規則，Space Between 實現均分佈局
→
2025 年新功能 Grid Auto Layout 帶來二維排列能力，做 Dashboard 和 Bento Box 不再需要巢狀
→
Auto Layout 的邏輯等同 CSS Flexbox/Grid，學會它等於同時學會前端排版思維
Auto Layout 不只是 Figma 的一個功能，它是一種排版思維。當你開始用 Auto Layout 思考，你做的每一個元件都會是可擴展的、可維護的、可交付的。
下次打開 Figma，試試看從一顆按鈕開始——先打字，再 Shift + A，設定 Padding 和背景色。當你看到按鈕的寬度隨著文字自動變化的那一刻，你就會理解為什麼 Auto Layout 是 Figma 設計師的必備技能了。
延伸資源
🔗 Figma Design 4B：Auto Layout 基礎教學
🔗 Auto Layout 互動練習檔（Figma Community）
🎓 想系統性學習 Figma 設計？
這篇文章講的 Auto Layout 只是 Figma 的其中一個功能。如果你想從零開始完整學會 Figma 的介面設計，從基本操作到 Component、Prototype、Design System 全部搞定，推薦 RAR 設計攻略的 Figma 線上課程。
100 種 Figma 設計的方法｜UI/UX 線上課程
從零到一百學會 UI/UX 使用者介面與體驗設計
100 個單元 · 實作專題式教學 · 終身觀看
