Figma 重寫 Auto Layout 演算法：六處對齊 CSS Flexbox，設計和開發終於算同一套帳
padding 不再被壓窄、只有 inside stroke 佔位、fill container 改用 border-box——Auto Layout 六處行為向 CSS Flexbox 對齊，設計和開發終於算同一套帳。
Auto Layout 一直想模仿瀏覽器排版，但有幾個邊角行為始終跟 CSS 對不上。這些小差異平常看不太出來，一到交付就現形——工程師拿到設計稿，得自己補一堆 workaround 才能讓做出來的畫面跟畫布長得一樣：用負偏移的外框假裝邊框、手動確認某個 frame 的寬度會不會把 padding 擠掉。這次更新把六個對不齊的地方一次補上，讓 Auto Layout 的行為向 CSS Flexbox 靠攏，七月起對新建立的 frame 預設生效。
對已經天天在用 Figma 的設計師，這屬於那種「底層安靜換掉、但你每天都會踩到」的更新。既有 frame 不會被動到，維持 legacy 版；新開的 frame 自動吃新版；兩版之間可以在 Auto layout 設定裡切換，這個切換窗口開到 2027 年一月。真正的意義落在交付那一端：Dev Mode 複製出來的 code 現在更直接對應 CSS flexbox 屬性，設計和開發第一次是拿同一套排版規則在算帳。
以前你可以把一個 frame 左右各設 30px padding（合計 60px），卻硬把 frame 寬度設成 50px，Figma 會照 50px 畫，把 60px 的 padding 硬擠進去。新版裡同一個 frame 不能再比 60px 窄——padding 永遠被完整尊重，甚至會蓋過你為 frame 設定的 max width。如果這個 frame 有 inside stroke、而且 stroke 算進版面，stroke 的寬度也會一起被算進這個最小值。
封面那張對照圖講的就是這件事：左邊 legacy，空間不夠時 padding 直接重疊；右邊 updated，frame 撐開到 60px 把 padding 讓出來。
以前 stroke 預設不算進物件尺寸，所以不會去影響父 frame 或旁邊的兄弟元素；為了對上 CSS 渲染邊框的方式，Figma 才給了一個「strokes included / excluded in layout」的設定讓你選。新版直接把 inside stroke 預設算進版面，這樣你的設計出廠就跟 CSS 更相容，省掉額外拉一個 border node 或負偏移外框的 workaround。
至於 outside 和 center stroke，就算你把 frame 設成 included in layout，也不再被算進版面了。它們照樣畫在畫布上，只是不再參與間距、fill 這些版面數學，也不再受 include / exclude 設定影響。Figma 自己給的類比很清楚：inside stroke 像 CSS 的 border，算進版面；center 或 outside stroke 像 outline，不佔位。
以前父 frame 上的「strokes included」設定會連帶影響底下有 stroke 的子層，讓它們一律顯示，就算這個設定只加在父層。新版裡這個設定只管它被設定的那一層。父層的 stroke 設定不再左右子層怎麼計算 stroke，每個 frame 的 stroke 都獨立照自己的規則走。
實務上的提醒：升級後如果某個巢狀 frame 突然長得不一樣了，直接去檢查那一層自己的 stroke 設定——它已經不再被父層繼承或牽動。
當一個 Auto Layout frame 裡有兩個以上子層都設成 fill container、而它們的 padding 和 inside stroke 寬度又不一樣時，新版改變了每個子層能拿到多少內容區。以前 fill container 的子層會平均佔用可用空間（總長扣掉 padding、gap、stroke），結果 stroke 比較粗的那層，實際內容區會明顯比 stroke 細的那層小，即使兩層技術上一樣大。
新版改成照「內容區」而非「外框尺寸」去分空間，對齊 CSS 的 border-box 模型：stroke 粗的那層會多吃一點寬度，好讓它的內容區跟兄弟對齊。這個新行為也會帶進 prototype，反映你的設計在開發環境裡實際會長什麼樣。
一個 gap 設成 auto 的 Auto Layout stack，會把多出來的空間平均塞在子層之間。以前空間不夠時，auto gap 會變成負值，把子層疊在一起。新版裡 auto gap 永遠不會低於 0：塞不下時，子層會 collapse 到 frame 的起點靠齊，維持間隔為零，對應 CSS flexbox 裡 space-between 的行為。
如果你真的想讓子層刻意重疊，設一個明確的負 gap 值就好——這個一直都支援，而且現在更清楚地表達「這個重疊是我故意設的」，而非靠 auto gap 意外擠出來的副作用。
以前一個 gap 設成 auto 的 frame 裡若只有一個子層，預設會置中。新版裡單一子層會靠左（水平流）或靠上（垂直流）對齊。官方特別點名：auto-gap 又只有一個子層的版面，是升級後最可能長得不一樣的一種，複查檔案時把這種排到最前面看。
好消息是沒有急迫性。Figma 會支援兩版切換到 2027 年一月，既有 frame 你想升級隨時可以。要升級：選一個 frame，在 Auto layout 設定的下拉選單挑版本；或用 Actions 選單搜「Update layout version for selection」或「for page」。任何會造成視覺變化的升級（版面位移、容器改尺寸）都能先預覽再確認，不對再 Cmd / Ctrl + Z 退回。
到 2027 年一月，legacy frame 的版本切換會從一個 toggle 變成一顆「Update」按鈕，那之後新建的 frame 就不能再切回 legacy。Component 可以手動升級後重新發布；instance 上則不能覆寫版本。
把六條擺在一起看，它們指向同一件事：Figma 在把畫布的排版數學，一格一格搬到跟瀏覽器同一套規則上。對純視覺出圖的人，這些改動大多無感；對每天要把稿交給工程、或自己用 Dev Mode 出 code 的人，這是少數幾次「你的畫布會開始擋下那些在真實環境本來就會壞的排版」。
過去設計和開發之間那道「看起來一樣、做起來不一樣」的縫，大半就是被這幾個邊角行為撐開的。現在縫補上了，代價是你得花點時間複查既有檔案裡靠舊行為硬撐的地方——尤其是 padding 擠壓、父子層不同 stroke 設定、粗細不一的 fill container 子層，還有只有一個子層的 auto-gap stack。這筆複查的帳遲早要付，趁 2027 一月前的切換窗口慢慢還，比到期被迫一次全升級輕鬆得多。
