CSS to Figma Auto Layout：Flexbox 与 Grid 转自动布局指南

如果你写前端代码，Figma 的自动布局（Auto Layout）会让你觉得很熟悉：方向、间距、内边距、对齐，子元素可以包裹内容或填充容器。人们很容易以为 CSS to Figma Auto Layout 是一一对应的翻译。其实不是。Flexbox 和 Grid 的能力更丰富，浏览器会解析自动布局不具备的 margin、百分比和固有尺寸，而同样的视觉效果也可能来自截然不同的 CSS。

本指南说明 HTML to Frames 如何把 CSS 布局映射为自动布局、为什么每个结果都要与浏览器比对校验、限制在哪里，以及如何编写能够干净导入的 CSS。

思路：先看几何，再做推断

简单粗暴的转换器读到 display: flex 就把属性照搬过去。这很快就会出问题：gap: 0 却在子元素上用 margin 的 flex 容器、只是看起来像垂直堆叠的块级元素，或者渲染成两行整齐排列的 grid。

HTML to Frames 以浏览器实际渲染的结果为依据：

1. 像素级精确构建。 页面先在 Figma 中构建，使用取自浏览器实测几何的绝对定位。
2. 由内而外遍历。 从最深层的框架开始，插件根据位置和尺寸推断垂直堆叠、水平堆叠、换行行、间距、内边距和对齐。
3. 加入响应式语义。 居中内容变为 Center，带 max-width 的盒子保持居中，等宽卡片和 flex-grow 变为 Fill；在“Logo … 菜单 … 图标”这样的栏中，间隙项变为 Fill。
4. 校验。 应用自动布局后，将每个子元素的位置与原始位置比对，容差为 2 px。
5. 安全回退。 如果不成立，就尝试更简单的方案。如果仍然失败，框架保留绝对定位，并设置合理的约束（Stretch、Scale、Center、Min、Max）。

由于推断从渲染后的几何出发，一组块级元素和 flex 列一样会变成垂直自动布局。CSS 用了什么机制，不如最终结果重要。想了解更全面的概述，请参阅 自动布局详解。

映射表

以下是常见 CSS 模式的典型映射。请把它当作预期结果，而不是承诺；最终以校验结果为准。

Flexbox 详解

方向与顺序

flex-direction 决定容器成为水平堆叠还是垂直堆叠。由于推断使用的是渲染后的位置，反向排列和 order 只会让图层按视觉顺序排列。浏览器里看到什么，图层面板里就是什么。

间距与内边距

gap 是最干净的输入：子元素之间单一、一致的距离，直接对应自动布局的元素间距。兄弟元素之间的 margin 只要一致也可以。如果不一致，比如 16、24、16，插件就无法用一个间距值表示，校验要么会选择另一个方案，要么保留绝对定位。

内边距根据子元素在容器内的实际位置测量，因此 padding、border 宽度和内部 margin 都会影响结果。

主轴与交叉轴对齐

justify-content 对应主轴对齐，align-items 对应交叉轴对齐。值得注意的是 space-between。在“Logo … 菜单 … 图标”这样的页头中，插件会把间隙项变为 Fill，于是调整大小时 Logo 留在左侧、图标留在右侧、中间伸展。这才是你期望的响应式语义，而不是只在一个宽度下有效的固定间距值。

flex-grow 与 Fill

带 flex-grow 或 flex: 1 的子元素会变为 Fill container（填充容器）。一行等宽卡片会变成等宽的 Fill 项，因此调整父框架大小时，卡片会一起缩放，和浏览器中一样。

换行

flex-wrap: wrap 对应自动布局的 wrap（换行）模式，生成换行的行。这非常适合用 flexbox 构建的标签列表、Logo 墙和卡片网格。

CSS Grid 详解

Figma 的自动布局是堆叠模型，而不是二维网格。因此 grid 布局会被映射为能通过校验的最接近的结构：

• 均匀网格（等宽列、等间距）通常变为换行行。
• 非对称网格（侧栏加主栏、2:1 分栏）通常变为嵌套堆叠：由多个垂直堆叠组成的水平堆叠，或者反过来。
• 无法拆解为堆叠的跨格和重叠单元格会保留绝对定位并加上约束。

无论哪种情况，视觉结果都在容差范围内与浏览器一致。不同的只是你在 Figma 中能流畅调整大小的部分有多少。

绝对定位、居中与 auto margin

position: absolute

绝对定位的徽标、装饰性色块或浮层不适合放进堆叠，因为它们与兄弟元素重叠。这些元素会保留绝对定位，插件会为它们设置约束，让它们在父级调整大小时仍然表现合理：固定在右上角的徽标仍在右上角，全覆盖的浮层会拉伸。

max-width 与 margin: auto

经典的内容容器 max-width: 1200px; margin: 0 auto 会变成全宽框架内的居中盒子。这也是 Site width（站点宽度）发挥作用的地方：插件在导入时测量页面的真实设计宽度。满屏设计以 1920 导入且内容盒子居中，真正的盒式网站以其盒子宽度导入，流式网站以 1440 导入。测量得到的数值让你的容器逻辑保持完整。

flex 中的 auto margin

在 flex 子元素上使用 margin-left: auto 会把它推到末端，这是导航栏的常见写法。和 space-between 一样，这也是根据几何推断的，通常表现为一个 Fill 间隙项，把被推开的元素保持在最远端。

为什么校验很重要

没有校验，转换器只有两个糟糕的选择：到处应用自动布局，接受部分框架错位、重叠或塌陷；或者干脆不用自动布局，交给你一堆僵硬的绝对定位图层。

HTML to Frames 应用自动布局后，会检查每个子元素的位置是否在 2 px 以内。如果某个框架未通过，就尝试更简单的方案；如果仍失败，该框架保持绝对定位。设计永不走样。 你可以相信 Figma 中看到的与浏览器一致，得到的自动布局也是真正站得住的自动布局。

结果页面会显示整体自动布局占比，并为保持绝对定位的框架列出原因（诊断信息）。这样，“为什么这里不是自动布局？”就变成了你可以在 CSS 中着手解决的问题。

在我们对真实网站的测试中，大约 86% 到 97% 的框架推断出了自动布局，例如某个产品网站为 93%，Linear 和 Stripe 为 88%。你的结果取决于 CSS 的写法。

需要了解的限制

• 自动布局中不存在二维网格语义；网格会变为换行行或嵌套堆叠，复杂的跨格可能保持绝对定位。
• 兄弟元素之间不一致的间距无法用单一间距值表达。
• 重叠（负 margin、绝对定位子元素）会让这些元素保持绝对定位。
• 倾斜和 3D 变换、path() 裁剪路径、多层遮罩以及 Display-P3 颜色暂不转换。
• iframe、WebGL 画布、没有封面的视频等嵌入内容会以其盒子的截图图片形式导入。
• 一次一个宽度。 每个屏幕按各自的宽度布局。使用响应式套组（Desktop、Tablet、Mobile）把每个断点捕获为单独的框架。

技巧：编写能干净导入的 CSS

这些习惯能让你的布局更常被映射为自动布局，而且本身也是良好的 CSS 实践。

1. 用 gap 代替兄弟元素 margin。 一个一致的值直接对应元素间距。
2. 在同一容器内保持间距一致。 混合间距会导致回退。
3. 一维布局优先使用 flexbox。 导航、工具栏、按钮组和卡片行都能直接映射。
4. 卡片网格使用等宽轨道的 grid。 均匀的列会变成干净的换行行。
5. 用明确的容器包裹非对称布局。 把侧栏和内容区放进各自的 flex 行，会生成清晰的嵌套堆叠。
6. 需要伸展的元素使用 flex: 1。 它代表 Fill。
7. 用 max-width 和 margin: 0 auto 居中内容。 它会变成始终居中的盒子。
8. position: absolute 只用于真正的浮层。 不要用它做普通布局。
9. 避免用负 margin 布局。 它会造成无法堆叠的重叠。
10. 用自定义属性命名颜色。 启用 Styles & variables（样式与变量，Pro）后，--brand-primary 会变成 brand/primary 变量。
11. 使用真实文本。 图片里的文字无法变成可编辑的文本图层。

查看你自己的映射结果

了解你的 CSS 如何映射，最快的方法就是导入它。通过 HTML to Figma 流程粘贴代码或上传文件夹，用 Chrome 扩展捕获本地构建，或者让 AI 工具通过 MCP 发送过来。然后打开结果页面，查看自动布局占比，并阅读保持绝对定位的框架的诊断信息。

开启 Reference screenshot（参考截图，Pro），添加一个隐藏、锁定的原始页面图层，方便你在导入结果和浏览器渲染之间切换对比。需要更细致的图层结构时，开启 Detailed layers（详细图层，Pro）。

想进一步了解页面如何变成框架，请阅读 HTML to frame 转换，并查看功能了解导入器支持的全部内容。文档详细介绍了每个导入选项。