企业官网建设流程全解析

网页秒变Figma设计稿：HTML to Figma网页转Figma工具快速上手指南

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

想象一个再熟悉不过的场景：产品经理甩来一个竞品网站，说"照这个风格改一版"。你打开浏览器，看了半天布局、间距、配色，然后回到Figma里从零开始画框、拉矩形、对像素……两三个小时就这么没了。

但如果有人告诉你，这个网页可以在一分钟内变成Figma里可编辑的设计稿——每个区块、每段文字、每张图片都自动生成图层，你想挪就挪、想改就改，你会不会觉得这有点科幻？

这就是HTML to Figma正在做的事。它是一款开源的网页转Figma工具，核心目标只有一句话：Convert any website to editable Figma designs——把任意网站转换成可编辑的Figma设计稿。无论你是想重构旧站、复刻竞品，还是快速搭建原型，它都能帮你省掉大量重复劳动。

它到底解决了什么问题？

先别急着装，我们把痛点说透。设计师和前端之间最常见的三类尴尬：

• 重构旧页面：老网站没有设计稿，改版时只能凭感觉重画，还原度全看运气
• 竞品参考：看到不错的页面想借鉴，手动复刻费时费力，还容易漏细节
• 原型速建：需要拿真实网页快速做交互原型，却没有现成的Figma素材

这三个场景有个共同点：HTML结构明明已经存在，却没有办法把它"搬"进设计工具。而HTML to Figma补上的，正是这最后一步——让网页结构自动变成Figma图层，而不是靠肉眼和鼠标去"临摹"。

它凭什么能做到？三个核心亮点

这个工具之所以好用，不在于概念多炫，而在于它把每个环节都做得很顺手。

• 🛠️ 一键捕获，网页即素材：它内置了一个Chrome扩展。你在任何网页上点一下扩展图标，再点"Capture page"，当前页面的HTML结构就会被打包成一个JSON文件下载下来。整个操作不到十秒，不需要写一行代码。

• 🎯 图层级还原，不是截图：这也是它和"网页截图再贴进Figma"最本质的区别。转换结果里每个元素都是独立的Figma图层——标题是文本图层，按钮是带填充的矩形，图片、间距、层级关系全部保留。你可以像编辑原生设计稿一样去调整，而不是对着位图干瞪眼。

• 📦 核心转换库可独立使用：如果你不需要浏览器扩展，只想在自己的项目里调用转换逻辑，可以直接引入@builder.io/html-to-figma核心包，一行代码就能拿到转换后的图层数据：

import { htmlToFigma } from '@builder.io/html-to-figma'; const figmaNodes = htmlToFigma(document.documentElement);

转换逻辑集中在核心库，扩展只是它的一个前端入口，这种模块化设计也让二次开发和定制变得容易。

三步完成网页到Figma的转换

整个流程比你想象中短得多，装好之后日常使用只需要三步：

第一步：安装Chrome扩展

把项目克隆到本地，进入chrome-extension目录安装依赖并构建：

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

构建完成后，打开Chrome的扩展管理页面，勾选"开发者模式"，点击"加载已解压的扩展程序"，选择dist目录即可完成安装。

第二步：捕获网页

打开你想转换的网站，点击扩展图标，在弹出的面板里点Capture page，浏览器会自动下载一个page.figma.json文件。

第三步：导入Figma

在Figma中打开你已安装的 HTML To Figma 插件，选择"upload here"，上传刚才下载的JSON文件。眨眼之间，网页的完整结构就会以可编辑图层的形式出现在你的画布上。

从点击捕获到设计稿就位，整个过程用不了五分钟，这就是网页转Figma工具应该有的效率。

几个实用小贴士

用了一段时间后，你会发现一些让体验更好的细节：

• 避开特殊页面：扩展无法在Chrome应用商店页面运行，遇到这种页面会直接给出提示，换个普通网址即可
• 按需捕获：默认捕获整个页面，如果你只想转换页面的某一部分，可以先在页面上选中目标区域，再触发捕获，得到的图层更干净
• 保持Figma插件更新：转换质量与Figma插件版本有关，建议定期检查插件是否有更新，确保兼容性
• 依赖管理：项目基于Webpack和TypeScript构建，开发模式用npm run dev，生产构建用npm run build，两种模式输出结果不同，按需选择即可

从今天开始，把"临摹"交给工具

说实话，网页转设计稿这件事，过去一直是条没人走通的路——不是做不到，而是手动做太累。HTML to Figma把这条路的最后一公里打通了：它不追求替代设计师，而是把那些机械的、重复的"搬砖"环节自动化，让你把精力放回真正需要判断力的地方——布局的取舍、视觉的打磨、体验的优化。

如果你手头正好有个需要重构的网站，或者想复刻某个页面练手，现在就可以克隆这个项目，按上面的步骤装好扩展，打开一个你喜欢的网页试试。当网页第一次以完整图层的形式出现在Figma里时，你会理解什么叫"想立刻试试"。

告别逐像素临摹，把网页转Figma这件事，交给一个能读懂HTML的工具吧。

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