Auto Layout

Auto Layout 是什麼?

Auto Layout 是 Figma 中的版面功能:依方向、間距、留白與對齊,自動排列畫面框裡的物件;內容新增、移除或改變大小時,版面會自己調整,不必手動重排。

設定包括:方向(垂直、水平,以及 beta 中的網格)、物件間距(gap,可固定或 Auto)、留白(padding)、對齊,以及水平方向下的換行(wrap)。畫面框可以巢狀組合出多方向的版面。

為什麼要用 Auto Layout?

按鈕要隨文字變長、清單要隨項目增減、儀表板要適應不同螢幕,這些都是「內容會變」的情況。用手動擺放,每次改動都要重排;Auto Layout 把這個規則寫進設計稿,所以設計能隨內容調整,Figma 的說明也把支援響應式設計列為主要好處。

對 AI 來說還有另一層價值:Auto Layout 把間距與排列規則明確寫下來,AI 讀到的是「垂直排列、間距 16、留白 24」,而不是需要從像素位置猜測的圖層。

Auto Layout 怎麼運作?

子物件有三種尺寸設定:固定(Fixed)維持尺寸;包覆內容(Hug contents)讓畫面框縮放到剛好容納子物件加間距;填滿容器(Fill container)讓子物件撐滿父層的剩餘空間。也能搭配最小與最大尺寸。

對應到程式碼,一份第三方的 Figma 轉程式碼文件(figma-code-agent,非 Figma 官方)整理出近似 CSS flexbox 的對應:方向對應 flex-direction,gap 對應 gap,填滿容器對應 flex-grow: 1 加 flex-basis: 0,固定尺寸對應 flex-shrink: 0 加明確尺寸,wrap 對應 flex-wrap。「忽略 Auto Layout」的物件則脫離流程,等同絕對定位。

對我有什麼影響?

如果你要讓 AI 把設計稿變成程式碼,Auto Layout 是影響最大的整理工作之一:有 Auto Layout 的畫面框,間距與排列規則是明確的;沒有的,AI 只能從座標推測。上述文件也指出,GROUP 沒有 Auto Layout,其子物件需要絕對定位。

要知道限制:Figma 自己列出的限制包括,網格仍在 beta、Auto Layout 必須逐一加到每個元件、元件實例可以調整留白與間距但不能新增或重排圖層。轉成 flexbox 也不是一對一:Figma 沒有原生斷點,多個斷點的畫面框要自己合併成媒體查詢。