--- title: "Figma Auto Layout 完整教學：從基礎到 Grid 新功能，一篇搞懂自動佈局" slug: figma-auto-layout-guide url: https://rar.design/posts/figma-auto-layout-guide published_at: 2026-03-01 modified_at: 2026-03-04 author: "設計師 Riven" category: "UI/UX 設計" tags: ["figma"] access: public_access --- # Figma Auto Layout 完整教學：從基礎到 Grid 新功能，一篇搞懂自動佈局 > 方向、間距、Resizing、巢狀實戰、Absolute Position 到 2025 Grid Auto Layout，Figma 最重要的功能完整解析 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-03-01 📌 目錄01 Auto Layout 是什麼？為什麼你必須學會它02 Auto Layout 基本操作教學03 方向、間距與內距設定04 Resizing 三種模式完整解析05 巢狀 Auto Layout 實戰06 Absolute Position 與 Space Between07 Grid Auto Layout（2025 新功能）08 Auto Layout 常見問題與踩坑指南09 重點整理你有沒有遇過這種情況——按鈕裡的文字改了幾個字，結果背景跑掉了；卡片裡多加一行文字，下面的元素全部要手動推；做完桌面版的設計稿，手機版又要從頭排一次？這些問題的根源都一樣：你還在用「手動推像素」的方式做排版。Auto Layout 是 Figma 最重要的核心功能，沒有之一。它讓你的設計稿從「死的畫面」變成「活的佈局」——內容變了，排版自動跟著變。學會 Auto Layout，你的設計效率會直接翻倍，而且做出來的設計稿，工程師看了也會感謝你。這篇文章會從零開始，把 Figma Auto Layout 的每一個功能都講清楚，包括 2025 年新推出的 Grid Auto Layout。不管你是剛接觸 Figma 的新手，還是用了一陣子但總覺得 Auto Layout「很難搞」的設計師，看完這篇你會對它完全改觀。▲ A Guide to Auto Layout: Best Practices, Tips & Tricks | FigmaAuto 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 非常簡單，有三種方式：1快捷鍵 Shift + A選取一個或多個圖層，按下 Shift + A，Figma 就會自動幫你加上 Auto Layout。這是最常用的方式，建議直接記住。2右側面板點擊「+」選取 Frame 或圖層後，在右側設計面板找到 Layout 區塊，點「+」號即可新增 Auto Layout。3右鍵選單對圖層右鍵 → 選擇「Add auto layout」。另外也可以用「Suggest auto layout」，讓 Figma 自動判斷你的畫面該怎麼加 Auto Layout。⚠️ 重要觀念：Frame vs GroupAuto Layout 只能加在 Frame 上，不能加在 Group 上。如果你選了一堆圖層按 Shift + A，Figma 會自動幫你建一個 Frame 把它們包起來。但如果你習慣用 Cmd/Ctrl + G 來 Group，記得改成用 Cmd/Ctrl + Option/Alt + G 來建 Frame，才能使用 Auto Layout。開啟 Auto Layout 之後，你會看到右側面板出現一整排設定。不用怕，接下來一個一個講清楚。▲ Figma tutorial: Auto layout button方向、間距與內距設定Auto Layout 最基本的三個設定：方向（Direction）、間距（Gap）、內距（Padding）。方向 Direction決定子元素要怎麼排列，有三個選項：方向Vertical ↕Horizontal ↔Wrap ↩排列方式上到下左到右超出換行常用場景列表、卡片堆疊、表單按鈕列、導覽列、標籤標籤雲、圖片集、篩選器CSS 對應flex-direction: columnflex-direction: rowflex-wrap: wrapWrap 是 Horizontal 方向的延伸選項——當子元素的總寬度超過 Frame 的寬度時，會自動換到下一行。做 Tag 標籤雲或是響應式的卡片排列時特別好用。間距 GapGap 就是子元素之間的距離。設定一個數字，所有子元素之間的間距就會統一。比如你設 Gap = 12，那每個元素之間都是 12px，不用一個一個量。如果你想讓某些元素之間的間距不一樣，可以選取特定的子元素，然後在右側面板的 Item spacing 裡單獨設定。內距 PaddingPadding 是 Frame 邊緣到子元素之間的距離，就是 CSS 裡的 padding。Figma 預設會給你一個統一的 Padding 值，但如果你點開那個小圖示，可以分別設定上、右、下、左四邊的 Padding。實際操作小技巧：按住數字欄位左右拖動可以快速調整數值，不用每次都打字。對齊 AlignmentAuto 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。我們用一個最常見的「卡片元件」來實際走一遍：1最內層：按鈕建立一個文字圖層寫上「了解更多」，按 Shift + A，設定 Padding 上下 12、左右 24，加上背景色。這就是一顆會自動適應文字長度的按鈕。2中間層：文字區塊把標題、描述文字、按鈕選起來，Shift + A 包成一個 Vertical Auto Layout。設定 Gap = 12，讓標題、描述、按鈕之間有統一間距。3最外層：卡片容器把封面圖片和文字區塊選起來，再按一次 Shift + A 包成 Vertical Auto Layout。加上 Padding、圓角、背景色，一張完整的卡片就完成了。現在試試看改卡片裡的標題文字——你會發現文字區塊的高度自動變了，卡片的整體高度也跟著變了，按鈕的位置也自動調整了。這就是巢狀 Auto Layout 的魔力。如果你要做一個卡片列表，只要再把多張卡片選起來 Shift + A，設定 Horizontal 方向和 Gap，就完成了一排可以自動排列的卡片組。加刪卡片，間距自動調整。Absolute Position 與 Space BetweenAbsolute 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 商品列表等。▲ Figma Config 2025：Grid Auto Layout 功能發表與示範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 官方 Auto Layout 完整指南🔗 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 個單元 · 實作專題式教學 · 終身觀看查看 Figma 課程 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →