HTML to design：HTML 转设计稿，重建与代码脱节的设计文件

凭肉眼在 Figma 中重建线上页面，意味着要测量间距、吸取颜色、猜字号、重画图标。一个营销页面就可能花上一天。一个有几十个界面的产品要花好几周，而且结果仍然会与真实数值有偏差。

HTML to Frames 直接从浏览器读取数值，所以间距、颜色和字号都是精确的，而不是近似值。SVG 图标会变为可编辑矢量。布局会被转换为自动布局并在 2 px 以内校验，只有在自动布局会导致元素移位的地方才保留绝对定位。

这改变了改版第一天的样子。团队不必把时间花在重建上，而是从一份准确的现有产品副本出发，把时间用在决策上：

• 实际在用的颜色有哪些？哪些只是无意间产生的近似重复色？
• 哪些组件在重复出现？线上实际存在多少种变体？
• 上线的布局在哪些地方偏离了预期的设计系统？

网站转 Figma 改版指南介绍了设计公司如何借此准备提案。

由于每个框架都保存了来源 URL，你可以在下一次发布后重新导入页面，与改版方案进行对比。设计文件始终与线上版本保持关联，而不是变成又一个逐渐过时的快照。

提取的目标是生成一套精简、好用的集合，而不是每个元素一个样式。

颜色

一种颜色被使用至少两次，或被网站定义为 CSS 自定义属性时，就会成为变量。自定义属性的名称会保留为层级结构：--brand-primary 变为 brand/primary。最多 96 个颜色变量会放入 Colors · <domain> 集合。

文本和阴影

根据页面上实际渲染的文字，最多创建 48 个文本样式。阴影被归为 sm、md、lg 和 xl 四种样式。

先复用，再创建

如果你的文件中已有数值相同的变量或样式，就会直接复用。同一站点导入两次也不会新建任何内容，长期维护的文件因此保持整洁。

Light + Dark

选择 Light + Dark 配色方案时，页面会在两种 prefers-color-scheme 设置下分别捕获，同一个集合获得两种模式。Figma Free 文件每个集合只允许一种模式，因此这种情况下会跳过深色模式并附上说明。

以上一切都是可选的。关闭 Styles & variables，你得到的就是带原始数值的普通图层，有时快速参考或一次性拆解正需要这样。

线上代码很少能与设计系统完全一致。某个按钮可能用的是 #2161E9，而令牌是 #2160E8；某个标题可能是 31 px 而不是 32 px。如果原样导入这些数值，你的文件就会被近似重复的样式淹没。

Snap to my file's styles（吸附到我文件的样式）正是为此而设。在没有精确匹配时，插件会用感知 OKLab 距离在你的文件中寻找最接近的颜色，并寻找字体族和字重相同、字号相差在 10% 以内的最接近文本样式。导入的图层随后会绑定到你的样式，而不是新建样式。

它在三种场景下特别有用：

1. 审查：希望看到产品用官方设计系统表达出来的样子。
2. 改版：希望从第一个框架起就遵循设计系统。
3. 竞品拆解：用你自己的令牌重新设计别人的布局。

Snap、Styles & variables 以及 Components & hover states 都是 Pro 功能。插件绝不会读取超出所需的文件内容；它只写入图层，并且只读取自己创建的框架的元数据，详见安全页面。

当你的文件中已有已发布的颜色和文本样式时，Snap 效果最好。先从一个小而干净的样式库开始，导入一个有代表性的页面，检查哪些数值成功吸附，再对网站其余页面进行更大规模的 Multiple 导入。