Figma Auto Layout 是什麼？為什麼它是響應式設計的核心
Figma Auto Layout 是用 Frame 內的規則控制元素方向、間距、尺寸與對齊的功能。它適合做按鈕、列表、卡片、表單、導覽列與響應式版面，讓設計稿能跟著內容或容器變化調整。
把它想成一套排版規則會比較好理解：按鈕文字變長，外框跟著長大；列表新增一列，下面內容自動往下推；卡片內文多一行，CTA 仍維持固定間距。設計稿如果還停留在手動拖像素，修改一次文案就要重排一次，交付工程時也很難說清楚版面該怎麼伸縮。
操作名稱可對照 Figma 官方 Auto Layout 說明。實務上，Auto Layout 最重要的價值不是省幾次拖曳，而是讓每一層 Frame 都有明確排版責任。
Auto Layout 和手動排版的差別
手動排版是把每個圖層放在固定位置，版面看起來可以很準，但內容一變就容易破。Auto Layout 則是先設定父層 Frame 的方向、Gap、Padding、Alignment，再讓子層依規則排列。
按鈕是最小案例：手動做按鈕時，文字變長後要重新拉背景寬度；用 Auto Layout 時，文字層和外層 Frame 設成 Hug contents，按鈕會依文字與 padding 自動調整。
列表也是同樣邏輯。手動排列清單項目時，新增一筆就要往下推其他項目；垂直 Auto Layout 只要設定固定 Gap，新增、刪除或隱藏項目時，列表會維持一致間距。
卡片則更能看出差異。標題、描述、標籤、CTA 如果都手動放，內容長短一變就會重疊；用垂直 Auto Layout 分層後，文字區變高，卡片仍能維持可讀的結構。
Auto Layout 可以想成 Figma 裡的 Flexbox 嗎？
可以把 figma auto layout 當成接近 Flexbox 的心智模型：父層決定排列方向，子層決定尺寸行為，Gap 和 Padding 控制間距。但這只是幫助理解，不需要把 CSS 語法搬進設計稿。
設計師真正要判斷的是：這一層是水平排列還是垂直排列？子層要固定、貼合內容，還是填滿容器？如果工程師看到你的結構可以直接理解版面規則，這份設計稿就更容易交付。
Auto Layout 適合用在哪些 UI 元件？
Figma 自動排版適合所有會因內容或容器改變而調整的元件。常見情境包括按鈕、卡片、表單欄位、導覽列、標籤列、清單、Dashboard 區塊。
- 按鈕：文字與 icon 水平排列，外層 Hug contents。
- 卡片：圖片區、文字區、CTA 垂直排列，內容變長時仍維持間距。
- 表單：Label、Input、Helper text 垂直堆疊，Input 可 Fill container。
- 導覽列：Logo、選單、操作按鈕水平排列，中間區塊可填滿剩餘空間。
- 標籤列：搭配 Wrap，讓標籤在寬度不足時自動換行。
Auto Layout 在哪裡？三種啟用方式與新版介面位置
Figma Auto Layout 可從三個入口啟用：選取物件後按 Shift + A、從右側 Design 面板新增、或右鍵選單選擇 Add auto layout。啟用前要先選取 Frame 或多個圖層。
方法一：選取物件後按 Shift + A
最快的方式是選取一個 Frame、Component，或多個圖層後按 Shift + A。如果你選的是多個散落圖層，Figma 會建立一個套用 Auto Layout 的父層 Frame，並把這些圖層放進去。
新手常犯的錯是只選到文字或背景其中一層，結果建立出來的結構不完整。做按鈕時，請同時選文字、icon 或外框所需元素，再套用 Auto Layout。
方法二：從右側 Design 面板新增 Auto Layout
選取可套用的 Frame 或圖層後，右側 Design 面板會出現 Auto Layout 或 Layout 相關區塊。點擊新增後，可以選擇 Horizontal、Vertical 或 Grid flow。
如果你正在做導覽列，通常先選 Horizontal；做列表或表單欄位組，通常先選 Vertical；做卡片矩陣或 bento 版面，可以考慮 Grid Auto Layout。
方法三：右鍵選單 Add auto layout
右鍵選取物件後選 Add auto layout，也能啟用 Figma 自動版面配置。這個方式適合你正在整理舊稿，想在畫布上直接替某一組元素建立規則。
整理舊稿時，我會先從最小單位開始加，例如按鈕、輸入欄位、卡片內容區，再往外包成頁面區塊。直接對整個複雜畫面套 Auto Layout，通常只會得到一堆難以維護的巢狀 Frame。
如果找不到 Auto Layout，先檢查你選到的是什麼
找不到 Auto Layout 時，先看你選到的是 Frame、Group、Section，還是單一圖層。Figma 官方說明指出 Auto Layout 支援在 Frame 上運作；若選取多個圖層，Figma 會建立可承載 Auto Layout 的 Frame。
如果你選的是 Section，請把真正要排版的內容放在 Section 裡的 Frame。Section 適合整理畫布，不適合拿來控制按鈕、卡片或表單的內部排列。
Frame、Group、Section 差在哪？Auto Layout 應該加在哪一層
Auto Layout 的主要承載單位是 Frame。Group 適合暫時打包物件，Section 適合整理畫布與流程區域；真正要控制方向、間距、尺寸與對齊時，應該把 Auto Layout 加在 Frame 上。
| 類型 | 主要用途 | 適合承擔排版規則嗎 | 常見用法 |
|---|---|---|---|
| Group | 快速打包多個圖層 | 不適合 | 臨時移動一組物件、整理草稿 |
| Frame | 容器、版面、元件結構 | 適合 | 按鈕、卡片、表單、頁面區塊 |
| Section | 整理畫布、標記流程、協作交付 | 不適合作為主容器 | 登入流程、購物流程、Ready for dev 區域 |
Group 只是打包物件，不適合承擔排版規則
Group 的用途是把多個圖層暫時視為一組，方便移動或整理。它的邊界會跟著子層內容變動，但沒有 Auto Layout 所需的方向、Gap、Padding、尺寸模式等完整排版設定。
如果你習慣用 Ctrl + G 或 Cmd + G 包按鈕，後面一定會遇到文字變長、背景不跟著動、icon 不對齊的問題。按鈕這類元件應該用 Frame 承載。
Frame 才是 Auto Layout 的主要承載單位
Frame 可以有固定尺寸、背景、圓角、描邊、陰影，也能控制子層排列。Figma Auto Layout 本質上就是讓 Frame 具備排版能力。
做卡片時，外層 Frame 負責卡片寬度、背景與圓角；內層文字 Frame 負責標題、描述、標籤的垂直間距。每一層 Frame 只負責一個清楚任務，後續調整會穩很多。
Section 適合整理畫布，不適合當 Auto Layout 主容器
Section 可以用來整理畫布、標示流程、協助協作與開發交付。依照 Figma Sections 說明，Section 是畫布上的整理單位，適合放不同 Frame 或流程區域。
我的判斷很直接：如果你是在整理檔案，用 Section；如果你是在排 UI，用 Frame；如果你只是暫時移動一組圖層，用 Group。
什麼時候要多包一層 Frame？
當同一個區塊同時需要兩種排列方向，就要多包一層 Frame。不要把所有元素塞在同一層，因為一層 Auto Layout 通常只適合處理一種主要方向。
例如卡片外層是垂直排列，卡片底部 CTA 區可能是水平排列；表單頁外層是垂直排列，每個欄位組也是垂直排列，但兩欄欄位區又需要水平排列。這些都是該多包一層 Frame 的情境。
Auto Layout 基本設定：方向、Gap、Padding、Alignment
Auto Layout 的基本設定包含 Direction、Gap、Padding、Alignment。Direction 決定排列方向，Gap 控制元素距離，Padding 控制內容和容器邊界，Alignment 控制內容貼齊位置。
Direction：水平、垂直、Wrap、Grid 的選擇
Direction 決定子層怎麼流動。按鈕裡的 icon 與文字通常用水平；清單項目、表單欄位、卡片內容通常用垂直；標籤列或工具列可用 Wrap；規則卡片矩陣可用 Grid。
按鈕範例：icon 在左、文字在右，父層設 Horizontal。清單範例：每個 list item 往下排列，父層設 Vertical。選錯方向時，後續的 Gap 和 Alignment 看起來都會怪，這不是細節問題，而是結構問題。
Gap：元素之間的距離
Gap 控制子層之間的距離。按鈕中，icon 和文字可能設 8；清單中，每個項目可能設 12 或 16。Gap 應該由父層管理，不要用手動拖曳製造看似接近的距離。
在水平或垂直 Auto Layout 裡，Gap 也可以設為 Auto，達成類似 Space Between 的效果。做導覽列時，Logo 在左、選單或按鈕在右，中間要撐開，這時 Auto spacing 會比硬塞透明矩形乾淨。
Padding：容器和內容之間的距離
Padding 是容器邊界到內容的距離。按鈕會用左右 padding 控制點擊區和視覺寬度；卡片會用上下左右 padding 控制內容不貼邊；列表項目則常用垂直 padding 提升可讀性。
按鈕範例：文字層外面包 Frame，左右 padding 16，上下 padding 10，寬度 Hug contents。清單範例：每個 row 的上下 padding 12，左右 padding 16，讓點擊區一致。
Alignment：控制內容貼齊哪一側
Alignment 控制子層在父層中的對齊位置。按鈕常用置中對齊，讓 icon 和文字在高度上穩定；清單項目可能用左對齊，讓多行文字有清楚起點。
九宮格對齊適合大多數 UI 元件。文字大小不一致時，可以搭配 Align text baseline，讓導覽列文字、價格文字、表單 label 看起來更穩。
Fixed、Hug、Fill 怎麼選？Auto Layout 尺寸模式決策表
Fixed、Hug、Fill 是 Auto Layout 的尺寸行為。Fixed 維持固定尺寸，Hug contents 跟著內容縮放，Fill container 填滿父層剩餘空間，Min / Max 用來限制過窄或過寬。
Fixed：尺寸固定，不跟內容或容器變動
Fixed 適合尺寸不應被內容影響的物件，例如 icon、固定高度導覽列、固定寬度側欄、固定尺寸頭像。它的好處是穩定，風險是內容變多時可能溢出。
如果按鈕文字常被翻譯成不同長度，就不適合把按鈕寬度寫死。Fixed 應該留給真的需要固定的尺寸，不要拿來掩蓋結構沒整理好的問題。
Hug contents：跟著內容長大或縮小
Hug contents 適合內容長度不固定，但容器應該貼合內容的元件，例如按鈕、標籤、文字膠囊、短 CTA。外層 Frame 會依子層內容、Gap 和 Padding 計算尺寸。
做按鈕時，文字層本身要能依文字變化調整，外層 Frame 的寬度也要設 Hug contents。只設其中一層，常會出現文字變長但外框沒跟著動的狀況。
Fill container：填滿父層剩餘空間
Fill container 適合子層需要吃滿父層剩餘空間的情境，例如表單輸入框、主內容區、卡片列表中的卡片寬度、Dashboard 右側內容區。
Fill 的前提是父層本身要有可分配的空間，而且子層必須在 Auto Layout Frame 裡。若父層是 Hug contents，或父層寬度太小，Fill 看起來就像沒反應。
Min / Max width：避免響應式元件過窄或過寬
Min width 和 Max width 是讓響應式元件穩定的保護欄。Figma 官方 Auto Layout 說明列出 Minimum 與 Maximum dimensions，可與其他尺寸模式一起使用。
例如卡片可設 Min width，避免手機寬度下文字被壓到難讀；內容區可設 Max width，避免桌機寬螢幕時段落拉得太長。設計系統裡，這類限制比單純拉大拉小更有維護價值。
常見情境決策表
| 情境 | 外層建議 | 子層建議 | 判斷重點 |
|---|---|---|---|
| 按鈕 | Hug contents | 文字 Hug，icon Fixed | 文案變長時按鈕跟著長大 |
| 導覽列 | Fixed width 或 Fill container | Logo Fixed，選單 Hug，中段 Fill | 左右區塊要能穩定分配空間 |
| 表單欄位 | Fill container | Label Hug，Input Fill | 輸入框要跟著父層寬度變化 |
| 卡片 | Fill 或 Fixed 搭配 Min / Max | 文字區 Hug，CTA Hug | 內容變長時卡片不重疊 |
| Dashboard | Grid 或巢狀 horizontal / vertical | 卡片 Fill，側欄 Fixed | 先決定頁面骨架，再決定卡片尺寸 |
從小元件到大版面：Auto Layout 實戰結構拆解
巢狀 Auto Layout 的核心做法，是把大版面拆成外層容器、區塊與元件。每一層 Frame 只負責一種排列方向，避免所有元素擠在同一層。
按鈕：文字、icon、padding、hug contents
按鈕建議用一個 Horizontal Auto Layout Frame 承載。內層放 icon 和文字，Gap 控制兩者距離，Padding 控制點擊區，外層寬度設 Hug contents。
如果有 icon 版本與純文字版本，先把基礎按鈕做成 Component，再用 Variants 管理 icon 顯示、尺寸、狀態。更多按鈕細節可延伸閱讀 button-design-guidelines。
卡片：圖片區、文字區、CTA 的垂直結構
卡片適合用垂直 Auto Layout。外層 Frame 負責背景、圓角、描邊與整體 padding；內層分成圖片區、文字區、CTA 區。文字區本身也可以是一個垂直 Auto Layout Frame。
我不建議把標題、描述、標籤、按鈕全部放在卡片外層同一層。當描述多兩行，CTA 很容易被推到不理想的位置。分層後，每個區塊的 Gap 才能被單獨維護。
表單：Label、Input、Helper text 的欄位組
表單欄位可以拆成 Field group：Label、Input、Helper text 垂直排列。Field group 通常設 Fill container，Input 也設 Fill container，讓欄位能跟著表單寬度變動。
兩欄表單則多包一層 Horizontal wrapper，左右欄位設 Fill container，Gap 控制欄距。表單可讀性與錯誤提示規則可搭配 form-design-best-practices 一起規劃。
左側導覽 + 右側內容區：外層 horizontal wrapper
大型版面先看骨架。左側導覽加右側內容區，外層應該是 Horizontal Auto Layout：sidebar 設 Fixed width，main content 設 Fill container。
右側內容區再用 Vertical Auto Layout，往下拆成頁首、工具列、內容區、分頁或表格。這種結構接近工程實作，也能讓設計稿在不同寬度下保留合理行為。
Dashboard：卡片網格、內容區與側欄的組合
Dashboard 常同時需要側欄、上方工具列、卡片網格、表格與圖表區。外層先決定主方向，再由內容區決定用 Grid Auto Layout、Wrap，或巢狀水平與垂直 Frame。
卡片矩陣如果是規則重複內容，可以用 Grid；如果是標籤或小工具列，Wrap 會更自然。真正可維護的 Dashboard 不靠把所有卡片手動排齊，而靠每一層容器負責自己的排列規則。
Wrap、Grid Auto Layout 與新版功能：2026 寫法應該怎麼教
2026 年教 Auto Layout 不能只停在水平與垂直。Wrap 適合內容超出寬度時自動換行，Grid Auto Layout 適合規則化卡片、bento、Dashboard 與更複雜的列欄版面。
| 模式 | 適合情境 | 不適合情境 | 判斷方式 |
|---|---|---|---|
| Wrap | 標籤列、卡片列、工具列 | 需要固定列欄規則的版面 | 內容像一串物件，寬度不足就自然換行 |
| Grid Auto Layout | 卡片矩陣、bento、Dashboard、表格感版面 | 只是一排按鈕或簡單清單 | 需要列、欄、cell、span 這類規則 |
| Suggest auto layout | 整理中等複雜舊稿、卡片、導覽列、手機畫面 | 大型複雜網站整頁一次轉換 | 可當起點，但要人工檢查父子層 |
Wrap：適合標籤列、卡片列、工具列
Wrap 會在水平排列寬度不足時，把溢出的物件推到下一行。它適合標籤列、篩選 chip、工具列按鈕、小卡片列表。
判斷方式很實用：如果這些物件的順序重要，但每一列放幾個可以隨容器寬度改變，就用 Wrap。如果每個物件必須落在明確欄位裡，就不要勉強用 Wrap。
Grid Auto Layout：適合重複卡片與規則化版面
依照 Figma Grid Auto Layout 說明，Grid 是 Auto Layout 的 flow 之一，可用列與欄組成 cell，讓物件跨欄或跨列，並在父層調整時回應尺寸變化。
Grid 適合卡片矩陣、bento boxes、Dashboard、編輯型版面與表格感設計。它和 Wrap 的差別在於，Grid 強調規則化列欄，Wrap 強調自然換行。
Suggest auto layout：可以輔助，但不能取代結構判斷
Suggest auto layout 可以協助把既有畫面轉成多層 Auto Layout Frame。官方說明也提醒，大型或複雜設計適合分批使用。
我的做法是把 Suggest 當成整理舊稿的第一版，而不是最終結構。轉完後一定要檢查：父層方向是否合理、子層尺寸是否正確、是否多出不必要 wrapper、是否把應該獨立的元件塞在一起。
Auto Layout 常見卡關與修正清單
Auto Layout 卡住時，不要只看單一圖層。多數問題來自父層、子層、尺寸模式與間距設定互相衝突。先找出是哪一層在控制版面，再修正設定。
| 問題 | 可能原因 | 修正方式 |
|---|---|---|
| Fill container 沒反應 | 父層不是 Auto Layout、子層是 Fixed、父層沒有剩餘空間 | 確認父層 Frame、調整子層為 Fill、讓父層有固定或可填滿寬度 |
| Space Between 找不到 | 新版介面改以 Gap Auto 或對齊快捷操作呈現 | 把 Gap 設為 Auto，或在 alignment box 使用快速切換 |
| 文字變長按鈕沒變寬 | 外層或文字層被設成 Fixed | 外層 Frame 設 Hug contents，文字層避免固定文字框 |
| 卡片不跟父層變寬 | 卡片固定寬度，或父層本身是 Hug | 卡片設 Fill container，父層給可分配寬度 |
| 巢狀越包越亂 | 同一層同時處理多個方向 | 拆成外層容器、區塊、元件，每層只負責一種方向 |
Fill container 沒反應
可能原因通常有四個：父層不是 Auto Layout、子層被設成 Fixed、父層沒有可填滿的剩餘空間、外層 Frame 太小。Fill container 只會在父層能分配空間時運作。
修正方式是由外往內檢查。先確認父層是 Auto Layout Frame，再看父層寬度是否 Fixed 或 Fill，最後把子層寬度改成 Fill container。
Space Between 到哪裡去了？
新版介面裡，Space Between 常透過 Gap 設為 Auto 來達成。Figma 官方水平與垂直 flow 說明也提到，Gap between items 可以設定為 Auto，讓物件取得最大可用距離。
修正方式：選取 Auto Layout Frame，找到 Gap between items，把數值改為 Auto。如果你習慣快捷操作，也可以點右側 alignment box 後用快捷鍵切換 gap between。
為什麼改文字後按鈕沒有自動變寬？
最常見原因是外層按鈕 Frame 被設成 Fixed width，或文字層本身是固定寬度文字框。按鈕要自動變寬，外層通常要 Hug contents，文字也要能依內容自然計算寬度。
修正方式是選外層按鈕 Frame，將 width 設為 Hug contents；再選文字層，避免用固定寬度框限制文字。多語系按鈕尤其要這樣做，不然英文、中文、日文切換時很容易破版。
為什麼卡片寬度不會跟著父層調整？
卡片寬度不動，多半是卡片本身設 Fixed width，或卡片所在的父層沒有可調整寬度。卡片要跟著列表或內容區伸縮，子層卡片通常要設 Fill container。
修正時，先看卡片所在的父層是水平、垂直、Wrap 還是 Grid，再決定卡片該 Fill、Fixed 或受 Grid track 控制。不要只拉寬卡片本身，這樣只是把問題延後。
巢狀 Auto Layout 為什麼越包越亂？
巢狀混亂通常是因為每層 Frame 沒有清楚責任。外層想管頁面，內層又同時管卡片、文字、按鈕，最後任何一個 Gap 都不知道影響哪裡。
修正方式是重新命名與拆層：Page wrapper、Content area、Card list、Card、Card content、CTA row。命名能逼你釐清每一層在做什麼，這比多記一個快捷鍵更重要。
進階設定：Strokes、Canvas stacking、文字基準線、負間距與 Min / Max
進階設定會影響尺寸計算、疊放順序、文字對齊與元件穩定性。Strokes、Canvas stacking、Align text baseline、負間距、Min / Max 都應該以可維護性判斷。
Strokes 是否計入尺寸，會影響元件對齊
Strokes included 或 excluded in layout 會影響描邊是否被算進 Auto Layout 尺寸。若按鈕有 1px 描邊，設計稿和工程 border 計算方式不一致，就可能出現對齊落差。
設計系統裡，我會對按鈕、輸入框、卡片這些高重用元件統一 stroke 計算規則。不同元件各自設定，交付時很難解釋為什麼同樣 40px 高的元件看起來不一樣。
Canvas stacking 控制重疊物件的順序
當你用負間距做 avatar group、badge 疊放、卡片堆疊時，Canvas stacking 會決定哪個物件在畫布上方。它改變的是視覺疊放順序，不等於重新排列圖層清單。
修正疊放問題時，不要急著拖圖層順序。先檢查 Auto Layout settings 裡的 Canvas stacking，決定 First on top 或 Last on top 比較符合元件邏輯。
Align text baseline 讓不同字級文字更穩定對齊
Align text baseline 適合文字大小不一致、但需要看起來在同一條基準線上的情境，例如導覽列、價格表、icon 加文字、表單 label。
只用垂直置中有時會讓大字、小字、icon 看起來微微不齊。基準線對齊能讓文字組合更像真實介面，而不是畫布上勉強置中的圖層。
負間距適合特殊視覺，但要小心可維護性
負間距可以做重疊頭像、卡片疊層、徽章壓在元件邊緣等效果。它有視覺價值，但不適合拿來修補一般版面對不齊的問題。
如果一個元件需要大量負間距才看起來正常，通常代表結構應該重拆。負間距應該是明確的視覺規則，而不是排版失控後的補丁。
Auto Layout 與 Component、Variants、Variables、Design Tokens 的關係
Auto Layout 管元件內部結構，Component 管重用與同步，Variants 管不同狀態，Variables 與 Design Tokens 管 spacing、radius、color 等規則值。它們應該分工合作。
Auto Layout 和 Component 差在哪？
Auto Layout 決定元件內容怎麼排列、如何伸縮；Component 讓這個元件可以被重複使用並同步更新。按鈕可以先用 Auto Layout 做出穩定結構，再轉成 Component。
如果只做 Component，內部排版仍可能很脆弱；如果只做 Auto Layout，團隊無法集中維護元件。兩者一起使用，才比較接近可交付的設計系統。
Variants 讓同一個元件支援不同狀態
Variants 適合管理同一元件的不同狀態，例如按鈕的 primary、secondary、disabled，或 icon left、icon right、no icon。Auto Layout 則確保不同狀態切換時，內部間距和尺寸仍穩定。
按鈕尺寸可以設成 small、medium、large，分別對應不同 padding 和文字樣式。這類規則若能在元件階段整理好，後面做頁面時就不需要每顆按鈕重新調。
Variables 與 Design Tokens 讓 spacing、radius、color 可系統化
Variables 和 Design Tokens 可以把 spacing、radius、color、字級等規則系統化。Auto Layout 裡的 Gap、Padding、Min / Max 若能對應 token，團隊就能用同一套尺度維護元件。
設計系統工作流可延伸閱讀 design-system-guide、design-token-figma-guide、figma-component-variants 與 component-library-setup。我的判斷是，Auto Layout 做得好只是第一步，真正難的是讓規則在多人協作時不被各自改掉。
哪些內容本文不會展開
Figma Auto Layout 的學習應集中在 Frame、尺寸、間距、對齊、巢狀結構與排錯。CSS 深度語法、完整 Figma 入門、視覺風格與圖片規劃不適合放在同一篇裡展開。
不會完整教 CSS Flexbox
Flexbox 可以幫助理解 Auto Layout，但這裡不展開 CSS 語法、屬性細節或前端實作。設計師只需要理解父層與子層的排版邏輯，交付時能說清楚規則即可。
不會做完整 Figma 新手教學
如果你還不熟 Frame、Layer、Component、Prototype 等基礎操作，可以先看 figma-basics 或 figma-tutorial-guide。Auto Layout 是 Figma 的核心能力之一，但不等於完整入門課。
不會規劃圖片或範例截圖
這裡只處理 Figma Auto Layout 的操作、判斷與排錯，不安排圖片製作、截圖規劃或視覺素材。學會 Auto Layout 的重點，是能判斷每一層 Frame 應該負責哪一種排版規則。
Figma Auto Layout 要怎麼開啟？
選取 Frame 或多個圖層後按 Shift + A，也可以從右側 Design 面板新增 Auto Layout，或在右鍵選單選 Add auto layout。
Figma Auto Layout 在哪裡？
Auto Layout 位於右側 Design 面板中。如果沒有看到，通常是因為沒有選到可套用的 Frame、Component 或圖層選取範圍。
Figma Auto Layout 和 Component 有什麼不同？
Auto Layout 管元件內部排列與尺寸行為；Component 管元件重用與同步更新。實務上，按鈕、卡片、表單欄位通常會同時使用兩者。
為什麼 Fill container 沒有反應？
常見原因是父層不是 Auto Layout、子層被設成 Fixed、父層沒有可填滿的剩餘空間，或外層 Frame 尺寸太小。先檢查父層，再檢查子層尺寸模式。
Space Between 到哪裡去了？
新版介面中可把 Gap 設為 Auto 來達成 Space Between，也可以透過 alignment box 快速切換 gap between。
Auto Layout 可以用在 Group 上嗎？
Auto Layout 主要作用在 Frame。Group 只是把物件打包，不適合承擔方向、間距、Padding、尺寸模式等排版規則。
Section 可以加 Auto Layout 嗎？
Section 比較適合整理畫布、流程與交付區域，不是主要的 Auto Layout 承載單位。真正的 UI 排版仍建議放在 Frame 裡處理。
什麼時候該用 Hug contents？
當容器應該跟著內容長大或縮小時使用 Hug contents，例如按鈕、標籤、文字膠囊、簡短 CTA。
什麼時候該用 Fill container？
當子層需要填滿父層剩餘空間時使用 Fill container，例如表單輸入框、卡片寬度、主內容區、Dashboard 內容區。
Wrap 和 Grid Auto Layout 差在哪？
Wrap 適合內容自然換行，例如標籤列或工具列；Grid Auto Layout 適合規則化重複版面，例如卡片矩陣、bento、Dashboard 或表格感內容。
Auto Layout 可以做右到左 RTL 排版嗎？
可以透過方向、對齊、圖層順序與文字設定處理部分 RTL 情境。不過多語系產品仍需要逐一檢查元件邏輯，特別是 icon 位置、導覽列順序與表單欄位對齊。
Auto Layout 適合做響應式設計嗎？
適合。它能讓文字、按鈕、卡片、表單與版面依內容和容器變化調整，讓設計稿更接近工程實作邏輯，也更容易維護。