网页转 Figma 设计稿，5 分钟上手 HTML to Figma 开源转换指南

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

还在对着网页一寸一寸地手动重建设计稿吗？前端工程师老周上周接了个活：把一个已经上线的营销页重新设计。按老办法，他得自己搭框架、对间距、调字号，至少半天起步。这次他只花了 3 分钟——用 HTML to Figma 把网页直接抓成 Figma 里的可编辑图层，剩下的时间全用来改创意。网页到设计稿的转换，第一次可以快到这个程度。

最快跑通一次：从网页到 Figma 可编辑图层只需五步

先别管原理，跟着走一遍，几分钟内你就能看到产出。

1. 克隆仓库并进入扩展目录：

git clone https://gitcode.com/gh_mirrors/fi/figma-html cd figma-html/chrome-extension

2. 安装依赖并启动开发构建：

npm install npm run dev

3. 打开 Chrome 的扩展管理页，开启"开发者模式"，点击"加载已解压的扩展"，选择构建产出的dist目录。
4. 打开任意一个你喜欢的网页，点击扩展图标，按下Capture page按钮，浏览器会自动下载一个page.figma.json文件。
5. 在 Figma 里装上配套的 HTML to Figma 插件，执行它并选择"上传这个文件"，网页就变成了一组可以随意编辑的图层。

如果你只想在自己的项目里调用转换能力，核心库一条命令就能装好：

npm install @builder.io/html-to-figma import { htmlToFigma } from "@builder.io/html-to-figma"; const layers = htmlToFigma(document.documentElement);

到这里，你已经完成了 90% 的工作量。剩下的，就是享受"网页秒变设计稿"的快乐。

它到底强在哪：四个值得拆开的亮点

🎯 转换结果不是截图，是"活"的图层

这是它最打动我的一点。很多同类方案给你一张大图，而 HTML to Figma 转换出来的是真实的 Figma 图层树：文字还是文字、颜色还是颜色、间距还能微调。设计稿改起来的手感，和从零搭一模一样，但省掉了全部打底时间。

🧩 抓取逻辑藏在一个文件里，想改就能改

核心转换入口其实就在chrome-extension/src/inject.ts，几十行代码：读取页面 DOM、交给转换库、打包成 JSON 下载。我第一次看的时候挺惊讶——这么轻量的实现，居然能扛住复杂布局。想自定义抓取范围？改一个参数就能从整个页面换成某个区块。

🛡️ TypeScript 全链路护航

扩展、核心库、共享类型定义全部基于 TypeScript（见根目录tsconfig.json和shared/typings.ts）。这意味着你改代码时有类型提示、有编译期检查，转换逻辑不容易"悄悄坏掉"。对想二次开发的读者来说，这比纯 JavaScript 项目友好太多。

🧱 Webpack 双环境构建，开发和上线都省心

仓库里预置了webpack.dev.js和webpack.prod.js两套构建配置：开发时npm run dev边改边编译，发布时npm run build产出压缩版本。我在本地跑过一次，从 clone 到扩展出现在浏览器里，全程没有踩配置的坑。

三个真实工作流：他们真的这么用

前端工程师小林：接手一个迭代了三年的老项目，设计稿早丢了。他把现有页面转成 Figma 图层，直接在原版式上做改版方案，和设计师对着同一份稿子沟通，改版评审一次通过。

独立设计师阿May：接单前需要快速了解客户的官网风格。她打开页面 → Capture page → 上传 Figma，整套流程不到 1 分钟，图层里连字体、圆角、阴影都保留着，研究竞品从"截图猜"变成了"拆图层"。

创业团队：没有专职设计资源时，前端直接用工具把网页抓进 Figma，再交给外包设计师精修。交接成本从"讲半天需求"变成"打开这个文件"。

新手最容易踩的四个坑

接下来怎么玩：三条进阶路径

• 想改抓取逻辑：看chrome-extension/src/inject.ts，理解htmlToFigma的调用方式后，你可以改成抓取特定选择器、自定义文件名。
• 想改扩展交互：弹窗 UI 在chrome-extension/src/popup/Popup.tsx，用的是 React + Material UI，加按钮、加选项都很直观。
• 想深入源码：仓库根目录的DEVELOP.md讲了架构与本地调试流程，chrome-extension/README.md有完整的构建与安装说明，package.json里列出了全部脚本，值得逐个跑一遍。

动手试试，下一次改版不用从零开始

回到开头那个场景：老周现在每周都靠它省出小半天。网页转 Figma 设计稿这件事，门槛已经被这个开源项目拉到了"点一下按钮"的级别。核心收益其实就一句话：把重复的打底工作交给工具，把创意留给设计本身。现在就 clone 下来跑一次，你会回来感谢这 5 分钟。

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