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 网络文档