figma-html 网页转 Figma 完整指南：5 步把任意网站变成可编辑设计稿

figma-html 网页转 Figma 完整指南：5 步把任意网站变成可编辑设计稿

【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html

做设计最怕的一件事，是把一个已经上线的网页，从头再画一遍。figma-html（HTML to Figma）正是为此而生的开源方案：它能把任意网页的 HTML 结构与 CSS 样式，一键转换成可在 Figma 中直接编辑的设计稿，全程不用手动描图层。这篇文章不讲空话，直接从真实场景讲起，带你走通「网页 → Figma 设计稿」的完整路径。

一个让人血压上升的改版场景

「把这个页面改一版，风格跟现有网页保持一致就行。」

收到这种需求时，你的内心是不是已经开始翻白眼了？网页改版、品牌换皮、竞品风格参考……设计师最常遇到的活儿，恰恰是「照着现成网页重新画一遍」。传统做法是打开 Figma，用矩形、文字、图片一块块把网页的样子拼出来：量间距、对对齐、配颜色，一个页面两三个小时起步，做完还得反复跟开发核对细节。

更尴尬的是，网页本身就在那儿——布局、配色、字号、间距都是现成的，你却要手工把它们「翻译」成设计稿。这种重复劳动，本质上是在用最笨的方式做最机械的事。🤯

换个思路：让网页自己「长」出设计稿

figma-html 的思路很直接：网页本身就是一份完整的视觉规格说明，为什么不直接读它？

这个开源项目（核心包名@builder.io/html-to-figma）做的事情，是把 DOM 结构与 CSS 样式解析成 Figma 能识别的图层数据。你在页面上看到的每个区块、每段文字、每个按钮，都会变成设计稿里对应的 Frame、Text、Rectangle——层级关系、间距、配色、圆角，尽可能原样保留。

换句话说，它不是给网页拍一张「照片」，而是把网页的「骨架」搬进 Figma，让你拿到手的是一份可以继续编辑的真实设计文件。

认识这套工作流里的三个角色

整套方案由三个部件配合完成，缺一不可：

• Chrome 扩展：负责「捕获」。你打开任意网页，点一下扩展图标，它就把当前页面转成一份page.figma.json下载下来。捕获逻辑在chrome-extension/src/inject.ts里，核心就一行：调用htmlToFigma("body", ...)，把整个 body 的图层数据序列化成 JSON。
• 核心转换库：负责「翻译」。htmlToFigma()是转换的发动机，接收页面元素，输出结构化的 Figma 图层数据。你甚至可以脱离扩展，在任意前端项目里直接调用它。
• Figma 插件：负责「落位」。安装 HTML to Figma 插件后，在 Figma 里选择「upload here」，把刚才的 JSON 文件传进去，可编辑的图层就出现在你的画布上了。

三个角色各司其职，全程不用复制粘贴代码，也不用对着控制台挠头。😎

实操：把网页搬进 Figma 的 5 个动作

下面是最快的上手路径，跟着走一遍，几分钟内就能看到效果：

1. 拿到代码：git clone https://gitcode.com/gh_mirrors/fi/figma-html
2. 构建扩展：进入chrome-extension目录，执行npm install，再跑npm run dev（开发模式）编译一次。
3. 加载扩展：Chrome 打开chrome://extensions，勾选「开发者模式」，点「加载已解压的扩展程序」，选中dist目录。
4. 捕获页面：打开任意目标网页，点扩展图标，按「Capture page」，浏览器会自动下载page.figma.json。
5. 导入 Figma：打开 Figma，运行 HTML to Figma 插件，选择「upload here」上传刚下载的 JSON。

就这五步。页面上的导航、卡片、图文块，会以可编辑图层的形式出现在画布上，改字、改色、拖布局，都跟平时做设计没两样。

如果只想在自己项目里集成转换能力，也可以直接安装核心包@builder.io/html-to-figma，在代码里import { htmlToFigma } from "@builder.io/html-to-figma"后调用，转换结果同样是标准图层数据。

它给你的不是截图，是可编辑的图层

用过截图方案的人大概都有体会：图片进 Figma，本质上是「看图」，图层是一整块，什么都改不了。figma-html 的差异就在「可编辑」三个字——

• 图层即结构：网页的 DOM 层级映射为 Frame 嵌套，选中哪个区块就改哪个区块，不用重新排版。
• 样式即属性：字体、字号、颜色、间距、圆角等 CSS 属性尽量落到对应的 Figma 属性上，还原度有保障。
• 类型即契约：项目基于 TypeScript 开发，shared/typings里维护着共享类型定义，转换数据的结构清晰可控，二次开发也不容易踩坑。

这意味着你拿到的不是「参考图」，而是一份能直接接着改的设计稿。改版、返工、风格调整的成本，一下子从「重画」降级成「微调」。✨

这些时刻，你一定会想起它

• 网页改版：在旧页面基础上做新设计，直接导入再调整，几分钟进入正题。
• 竞品与灵感收集：看到不错的页面想拆解布局，一键搬进 Figma 慢慢研究。
• 原型快速制作：从真实网页快速搭出交互原型，省掉从零搭框架的时间。
• 设计与开发对齐：双方基于同一份「从网页来的设计稿」讨论，少了「你说的和我看到的不一样」的拉扯。

说到底，网页转 Figma 工具的意义，不是让你少画一张图，而是把重复劳动交给程序，把时间还给真正的设计判断。下次再遇到「照着网页画一遍」的需求，记得先试试让网页自己走进 Figma。🚀

【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html