Figma 自動佈局與 CSS Flexbox 和網格：縮小設計到程式碼的差距
Figma 自動佈局如何對應到 CSS 彈性盒和網格（方向、間隙、填充、擁抱、填充、包裝）以及它們的不同之處，因此設計可以在切換中倖存下來。
核心要點
Figma 的自動佈局的行為與 CSS Flexbox 非常相似：方向映射到 flex-direction，間隙映射到間隙，padding 映射到 padding，“擁抱內容”映射到按內容調整大小，“填充容器”映射到 flex-grow 或全寬，以及換行映射到 flex-wrap。自動佈局的網格流對應於CSS網格。最小和最大尺寸、文字換行、基線對齊和回應斷點都會出現差異，因此在切換時請明確檢查這些內容。
對應
Figma 的指南描述了自動佈局框架，該框架按方向、間距、填充和對齊方式排列子項，具有水平、垂直和網格流以及可選的換行。每個都有一個接近的 CSS 等價物：
擁抱、填充和固定
在 Figma 中，設定為擁抱內容的框架根據其子項調整大小，設定為填充容器的子項將拉伸以填充可用空間；Figma 指出，如果將子級設定為填充，則父級不能再朝該方向擁抱。在 CSS 中，等效項是基於內容的大小調整（auto 或 fit-content）和 flex: 1 或 width: 100%。 MDN的flexbox指南解釋了flex-grow、flex-shrink和flex-basis如何分配空間，這是同一想法的CSS方面。
縫隙出現的地方
大多數切換錯誤來自以下幾個方面：
- 最小和最大尺寸：在兩個地方都設定它們，否則文字和容器在極端情況下的行為會有所不同。
- 文字：Figma 文字呈現和瀏覽器之間的行高、換行和截斷有所不同。
- 基線對齊：CSS可以按文字基線對齊；檢查這是如何意圖的。
- 絕對子項：Figma 的「忽略自動佈局」（以前稱為絕對位置）對應到定位父項中的位置：絕對。
- 反應能力：自動佈局框架沒有斷點；定義佈局在每個寬度上如何變化。
網格
使用自動佈局的網格流實現真正的二維佈局，並將其對應到 CSS 網格，MDN 將其描述為按行和列佈局內容的系統。包裹的彈性行與網格不同：包裹的行中的項目不會按列排列。
運動是更大的差距
從 Figma 到 CSS 的佈局映射得相當好。運動則不然：原型轉換必須在程式碼中重建，且狀態經常會遺失。這是具有運行時的間隙工具，例如 ExodeUI（我們製造的）和 Rive，用於互動式元件的位址。
要記住的關鍵 Principle
- 自動佈局方向、間隙、填充和換行對應到 Flexbox
- 擁抱 ≈ 內容大小；填充 ≈ 彎曲：1 或 100% 寬度
- 網格流映射到 CSS 網格
- 檢查切換時的最小/最大尺寸、文字、基線和斷點
- 運動和狀態是設計與程式碼之間較大的差距
常見問題解答
來源
- Guide to auto layout — Figma幫助中心
- Basic concepts of flexbox — MDN 網路文檔
- Basic concepts of grid layout — MDN 網路文檔