HTML转Figma完整指南：让任意网页变可编辑设计稿
HTML转Figma完整指南：让任意网页变可编辑设计稿
【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html
你的网页上线三个月，设计稿却还停在旧版本——改版时只能对着浏览器截图，再在 Figma 里手动重画每个区块。figma-html（即 html-to-figma）项目专治这种返工：它能把任意网页的 HTML 结构，转换成可编辑的 Figma 设计稿，而不是一张干巴巴的截图。
⚡ 先弄懂一次转换发生了什么
别急着装工具，先花两分钟理解它的工作方式，后面用起来会顺手很多。
figma-html 把整条链路拆成两步：
- 抓取页面结构：Chrome 扩展在当前网页里注入一段脚本，把页面元素的布局、样式和层级关系序列化成一份 JSON 文件。
- 导入 Figma：这份 JSON 由配套的 Figma 插件读取，还原成带图层、可选中、可修改的设计元素。
关键区别在于：你拿到的是"结构"，不是"图片"。页面上的每个区块，都对应 Figma 里的一个 frame、文本框或矩形，双击就能编辑。也就是说，转换结果从一开始就是"活"的，而不是一张只能看不能改的图。
🖥️ 场景一：改版一个已上线的网页
假设你现在就要处理开头说的那个改版任务，完整流程如下。
三步完成环境配置
先在本地把项目跑起来，只需三条命令：
git clone https://gitcode.com/gh_mirrors/fi/figma-htmlcd chrome-extension && npm installnpm run dev
npm run dev会以监听模式持续构建扩展。构建完成后，打开 Chrome 的扩展管理页，勾选"开发者模式"，点击"加载已解压的扩展程序"，选中项目里的dist目录，扩展就装好了。
一分钟捕获整页
接下来是整个流程里最畅快的部分：
- 打开你想要转换的网页（避开 Chrome 网上应用店本身，那是唯一会被拒绝的页面）。
- 点击扩展图标，在弹出的面板里点Capture page。
- 浏览器会自动下载一个
page.figma.json文件。 - 打开 Figma，运行配套的 HTML to Figma 插件，选择upload here。
- 整个页面就以可编辑的图层形式出现在画布里，随你调整。
这背后其实只有一行核心调用。在chrome-extension/src/inject.ts里，扩展执行的就是htmlToFigma("body")，把结果打包成 JSON 并触发下载。想只捕获页面上的某个区域？把"body"换成对应的 CSS 选择器就行，例如htmlToFigma(".product-grid")。
🧩 场景二：把它接进你自己的工具链
如果你不需要浏览器扩展，只想在代码里直接完成转换，可以单独安装核心库：
npm install @builder.io/html-to-figma
然后在项目里这样调用：
import { htmlToFigma } from "@builder.io/html-to-figma"; const layers = htmlToFigma("body");返回的layers就是一组符合 Figma 节点规范的图层数据。这个库基于 TypeScript 编写，类型定义完整，调用时能获得自动补全和编译期检查，适合集成进自己的自动化工作流——比如定时抓取线上页面、自动生成设计稿初稿。
再配合 Figma 的反向导出能力，可编辑的设计稿还能生成 React、Vue、Svelte 或原生 HTML/CSS 代码。网页到设计稿、设计稿到代码，两个方向都被打通了。
⚠️ 三个常见误区，对照正确做法
误区一：以为转换出来的是截图。正确理解是：你得到的是带完整图层结构的可编辑设计稿，文本内容、填充颜色、间距尺寸都能直接修改。
误区二：以为只能整页抓取。正确做法是：htmlToFigma接受选择器参数，配合useFrames选项还能控制图层如何分组，转换范围完全由你决定。
误区三：以为安装过程很折腾。实际只需要克隆仓库、安装依赖、跑一条构建命令，再加载一次dist目录，全程用不了五分钟。
🚀 下一步：挑一个真实网页试一次
回到开头那个改版任务。有了这套工具，流程可以压缩成"打开网页 → 点一下 → 在 Figma 里直接改"，原先最耗时的手工重建环节被省掉了。
想确认它是否适合你的工作流，最直接的办法是亲手验证：
- 克隆仓库并完成构建。
- 选一个你自己维护的页面做测试。
- 把转换结果与原页面逐区块对比，看看还原度。
工具好不好用，跑一遍比看任何介绍都可靠。当第一次转换成功、看到网页以图层形式完整出现在 Figma 里时，你会明显感觉到：设计与开发之间那层隐形的墙，被撬开了一道口子。
【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考