HTML to Frame：DOM 如何变成 Figma 自动布局（Auto Layout）

把网页转成一张图片很容易。把它转成像设计师亲手搭建的 Figma 框架才是难点。一个看起来没问题、但一改标题就塌掉的框架，并不比截图好多少。

本文一步步说明 HTML to Frames 如何把 DOM 变成嵌套的 Figma 框架，它的自动布局（Auto Layout）引擎如何决定哪些内容成为堆叠，以及它为什么在保留结果之前要先检查自己的工作。

从 DOM 到框架树

网页是一棵树：body 包含区块，区块包含容器，容器包含卡片，卡片包含标题和按钮。Figma 文件同样是一棵树：框架包含框架、文本和矢量。

HTML to frame 转换的基本思路，就是把一棵树映射到另一棵树上：

• 每个页面、每个屏幕都成为一个顶层框架。 对同一页面导入 Desktop、Tablet 和 Mobile，会并排生成三个框架。
• 充当盒子的元素成为嵌套框架。 它们的背景、边框、圆角、阴影和裁剪都会变成框架属性。
• 文本成为文本图层，并保留混合样式，因此一句带有加粗链接的话仍是一个文本图层。
• SVG 成为可编辑矢量，图片成为图片填充。
• 伪元素（::before、::after）、shadow DOM 内容以及 z-index 顺序都会被保留，图层叠放顺序与浏览器绘制的一致。

目标是一个设计师读得懂的图层面板，而不是把每个 DOM 节点都倒出来。如果你需要更细粒度的图层结构来做检查，可以使用 Detailed layers（详细图层，Pro）选项。

框架命名

顶层框架的命名方式便于你在大型文件中查找：

example.com/pricing — Desktop (1920)

名称包含域名和路径（如有查询参数也会包含），不含协议和 www，后面跟着屏幕类型及其宽度，最长 60 个字符。来源 URL 也会存储在框架上，这正是一键 Re-import（重新导入）得以实现的原因。

第 1 步：先做像素级精确的构建

引擎并不是一上来就猜测自动布局。它先构建一个保证看起来正确的版本：

1. 页面在真实浏览器中以所选宽度渲染。对 Desktop 而言，这个宽度是 Site width（站点宽度）——插件根据页面的实际设计测量得出的宽度（满屏设计为 1920，盒式网站为盒子宽度，流式网站为 1440）。
2. 测量每个元素的几何信息和计算样式。
3. 使用绝对定位构建框架树，让每个图层都精确位于浏览器放置它的位置。

这个绝对定位版本就是安全网。之后的每一步都是需要证明自己的改进。

第 2 步：由内而外推断自动布局

接下来，引擎从最内层向外遍历框架。对每个框架，它查看子元素的实测几何信息，并判断：这些子元素能否描述为一个自动布局堆叠？

它会推断：

• 方向——子元素是垂直堆叠还是水平堆叠？
• 换行——它们是否构成换行的行，比如 CSS 网格卡片或 flex-wrap？
• 间距——子元素之间的间距是否足够一致，可以用一个间距值表示？
• 内边距——子元素距离框架各边有多远？
• 对齐——它们在每个轴上是起始、居中还是末端对齐？

由内而外很重要：一张卡片的内容一旦成为整齐的垂直堆叠，这张卡片本身就可以作为外层卡片行中的单个元素来处理。

关键在于，推断基于浏览器实际渲染的结果，而不是解析 CSS。无论一行是用 flexbox、grid、浮动还是 inline-block 构建的，测量结果都一样，引擎正是以此为依据。

第 3 步：加入响应式语义

间距和内边距正确的堆叠只是开始，它还不能像响应式设计那样工作。引擎还会推断意图：

• 居中内容 → Center。 如果内容在父级中居中，就设置为 Center 对齐，调整框架大小时它仍保持居中。
• 有最大宽度的盒子保持居中。 全宽区块中带最大宽度的内容容器会保持其宽度并居中。
• 等宽卡片和 flex-grow → Fill。 平分一行的卡片，或会伸展填充空间的元素，会被设置为 Fill container（填充容器）。
• Logo … 菜单 … 图标 → 中间的间隙项变为 Fill。 在典型的页头中，真正伸缩的是各组之间的空白。引擎会把这个间隙项设为 Fill，这样页头变宽时，Logo 留在左侧，图标留在右侧。

这就是“只在一个宽度下与页面一致的框架”和“真正可以调整大小的框架”之间的区别。

第 4 步：校验每个子元素（2 px 容差）

这一步保证了设计的完整性。对某个框架应用自动布局方案后，引擎会将每个子元素的位置与原始的像素级精确布局进行比对。每个子元素都必须落在浏览器所放位置的 2 px 以内。

• 如果所有子元素都符合，就保留该方案。
• 如果不符合，就尝试更简单的方案——例如去掉较激进的对齐或 Fill 设置的单一堆叠。
• 如果没有任何方案成立，该框架就保留绝对定位。

规则很简单：设计永不走样。 在复杂的区块上，你得到的自动布局框架可能少一些，但不会得到一个悄悄错位的布局。

成功率如何？在我们对真实网站的测试中，大约 86–97% 的框架推断出了自动布局——例如某个产品网站为 93%，Linear 和 Stripe 为 88%。结果取决于页面的构建方式，请把这些数字视为测量结果，而非保证。

第 5 步：为保持绝对定位的框架设置约束

保持绝对定位的框架也不会被放任不管。引擎会为它们设置合理的约束：

• Stretch（拉伸）——用于横跨父级的元素，比如全宽背景图层。
• Scale（缩放）——用于需要按比例缩放的元素。
• Center（居中）——用于在父级中居中的元素。
• Min——固定在左侧或顶部。
• Max——固定在右侧或底部。

因此，即使是绝对定位的框架，在调整父级大小时也能表现得合理。

第 6 步：诊断信息——框架为何保持绝对定位

结果页面会报告本次导入的框架数、图层数和自动布局占比，以及缺失字体和警告。它还会列出特定框架保持绝对定位的原因。实际中，保持绝对定位的区块往往是子元素相互重叠、脱离正常文档流，或间距过于不规则、无法用一个堆叠描述的那些。

这些诊断信息有两方面用处：

• 对设计师——你知道哪些区块需要手动转换，才能做到完全响应式。
• 对开发者——它们往往提示布局代码比实际需要的更复杂。

CSS flexbox 和 grid 到自动布局：映射表

由于引擎以实测几何为依据，下表描述的是典型结果，而不是 CSS 属性的逐字翻译。想深入了解，请参阅 CSS flexbox 和 grid 转 Figma 自动布局。

实例演示：三卡片价格区块

为了让上述步骤更具体，设想一个常见的区块：顶部居中的标题和副标题，下面一行三张价格卡片，每张包含方案名称、价格、功能列表和按钮。

引擎通常会这样处理：

1. 像素级精确构建。 每个元素都放在实测位置。区块已经看起来正确。
2. 先处理最内层框架。 每个功能列表成为间距一致的垂直堆叠。每张卡片成为垂直堆叠——名称、价格、列表、按钮——内边距取自到卡片边缘的距离。
3. 卡片行。 三张卡片等宽、等距并排，因此这一行成为只有一个间距值的水平堆叠，每张卡片设为 Fill，平分宽度。
4. 标题块。 标题和副标题居中，因此成为 Center 对齐的垂直堆叠。
5. 校验。 检查每个框架的每个子元素是否与原始位置一致。比如，如果中间卡片顶部压着一个“最受欢迎”徽标，这张卡片的方案可能无法通过 2 px 校验。引擎会尝试更简单的方案；如果仍不成立，这张卡片就保留绝对定位并加上约束——结果页面会告诉你是哪个框架。

最终得到的是一个可以调整大小的区块：拉宽框架，卡片一起变宽；编辑功能列表，卡片随之变高。启用 Components & hover states（组件与悬停状态，Pro）后，由于三张卡片结构相同，它们还可能作为同一个组件的实例导入。

实际意味着什么

打开导入的页面后，你可以：

• 编辑标题，区块随之变高，把下面的内容往下推。
• 修改一个间距值，收紧卡片网格。
• 调整框架大小，看着 Fill 元素伸展，而居中内容保持不动。
• 把卡片替换为组件实例——启用 Components & hover states（Pro）后，重复的卡片可能已经是组件了。

这就是框架树与扁平图片的区别。HTML to canvas 对比一文对此有更详细的说明。

获得更好自动布局结果的技巧

1. 以正确的宽度导入。 让 Desktop 使用 Site width，并用 Responsive set（响应式套组）添加 Tablet 和 Mobile，以便检查每个断点。
2. 隐藏浮层。 开启 Hide cookie banners & popups（隐藏 Cookie 横幅和弹窗），避免固定对话框覆盖区块、迫使其使用绝对定位。
3. 捕获稳定状态。 捕获时动画会被冻结；对于加载较晚的内容，Extra wait（额外等待，Pro）会有帮助。
4. 先查看诊断信息，再动手转换。它们会准确告诉你该关注哪些框架。
5. 需要确认图层与线上页面一致时，使用 Reference screenshot（参考截图，Pro）。

了解更多

• 完整导入流程：如何将 HTML 转换为 Figma
• 全部转换功能：功能
• 每个选项的说明：文档
• 方案与限制：价格

获取插件，导入一个你熟悉的页面。理解这个引擎最快的方法，就是调整结果的大小，看看哪些部分稳如磐石。