HTML转Figma实战：3步把任意网页变成可编辑的设计稿

HTML转Figma实战：3步把任意网页变成可编辑的设计稿

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

周五下午六点，设计师小周收到一条消息：明天要评审的新版产品页，需要先出一版设计稿给老板看。可这个页面三个月前就已经上线了，Figma 里只有旧版文件。小周打开浏览器，对着线上页面，打算从零开始把每个区块重新画一遍。这个场景你大概率见过——网页已经存在，设计稿却要从头补。

figma-html 就是为这种情况准备的开源方案：它把网页的 HTML 和 CSS 翻译成 Figma 可识别的图层数据，你得到的不是一张截图，而是能继续编辑的文本、形状和布局。和"截图贴进画板"的思路有本质区别——截图的每个像素都是死的，而 figma-html 交付的是活的图层。

一条命令能跑通的完整链路

项目分三层，各自解决一段问题：

核心转换逻辑全在 TypeScript 里，扩展只是它的一层壳。这意味着你既能点按钮用，也能把转换能力写进自己的脚本。

3步把网页送进Figma：安装步骤

从克隆仓库到第一个可编辑图层，最短路径只有三步。

第一步：克隆并构建扩展

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

构建产物输出到chrome-extension/dist目录。

第二步：把 dist 加载进 Chrome

打开chrome://extensions，右上角打开"开发者模式"，点击"加载已解压的扩展程序"，选择dist文件夹。工具栏会出现 HTML to Figma 的图标。

第三步：捕获并导入

打开任意一个想抓取的网页，点击扩展图标，再点 "Capture page"，浏览器会下载一个page.figma.json文件。然后在 Figma 里打开 HTML To Figma 插件，选择 "upload here"，指定刚才下载的文件，页面就会以图层的形式出现在画板里。

全程不需要写一行代码。

它能做的4件事：核心能力速览

1. 一键捕获当前网页🚀 解决什么场景：线上页面需要重新出设计稿时，不必手动重建每个区块，点击一次就能拿到完整结构。

2. 图层级还原，不是位图解决什么场景：老板要"改一下按钮文案"时，截图方案只能重画，而这里文本是真文本，双击就能改。

3. 可编程的核心库解决什么场景：想批量把多个页面转成设计稿、或把转换能力接进自己的工具链时，可以直接调用函数而不是点按钮。

4. 可自定义捕获范围解决什么场景：整页太杂、只想导入某个组件或区块时，改一个选择器参数即可。

实战：把产品页的一个区块单独搬进 Figma

扩展默认抓取整个body，但核心库支持传入任意选择器。打开chrome-extension/src/inject.ts，你会看到整条转换链路的入口：

import { htmlToFigma } from "@builder.io/html-to-figma"; // 第一个参数是 CSS 选择器，第二个参数控制是否包裹 Frame const layers = htmlToFigma("body", location.hash.includes("useFrames=true")); // 序列化成 JSON，下载后交给 Figma 插件 var json = JSON.stringify({ layers }); var blob = new Blob([json], { type: "application/json" });

想要只抓取页面上的价格卡片，把"body"改成".price-card"，重新npm run build，刷新扩展即可。

如果不想动扩展，也可以把核心库装进自己的项目：

npm install @builder.io/html-to-figma

import { htmlToFigma } from "@builder.io/html-to-figma"; // 把当前文档转换成 Figma 图层数据 const figmaNodes = htmlToFigma(document.documentElement);

粘贴上面这段代码，跑在任意页面的控制台里，就能拿到一份完整的 Figma 节点结构——它返回的是纯数据，你怎么用都行。

新手最容易踩的5个坑：常见错误修复

坑1：抓下来的页面缺东少西懒加载的图片和滚动才出现的内容不会进快照。点击捕获前，先把页面滚到底再滚回顶部，确保内容全部加载完成。

坑2：只有 JSON，没有图层扩展只负责产出文件，导入这一步必须靠 Figma 插件。先在 Figma 里装好 HTML To Figma 插件，再点 "upload here"。

坑3：构建时 Node 版本报错项目用的是老版本 webpack，在高版本 Node 下会报 OpenSSL 相关错误。package.json 里的构建脚本已经内置了NODE_OPTIONS=--openssl-legacy-provider，别手动删掉这行，优先使用 Node 16 更省心。

坑4：扩展按钮点击后无响应仓库里的info/manifest.json没有声明 background 配置，直接从源码构建的扩展可能收不到消息。遇到这种情况，检查dist下的 manifest.json 是否包含background.service_worker声明，按需补充后重新加载扩展。

坑5：在 Chrome 应用商店页面里无法使用扩展会拦截以chrome.google.com开头的页面，弹窗直接提示错误。这是刻意的保护，换个普通网页即可。

两个提效用法：进阶技巧

技巧1：用 URL 参数控制 Frame 包裹inject.ts里检查了 URL 中的#useFrames=true。给目标网页地址加上这个 hash 再捕获，导入后的图层会自动包进 Frame 里，方便直接复用为组件。

技巧2：改一处代码，只导出目标区域在inject.ts里把选择器改成任意 CSS 表达式，比如只抓导航栏"nav"或某个模块".hero-section"，就能得到独立区块的设计稿，适合逐个组件拆解重构。

下一步：跑通一次完整流程

先按上面的 3 步走一遍，挑一个你自己做的页面抓进 Figma，验证文本可编辑、图层可拖拽这两个结果。然后打开chrome-extension/src/inject.ts读一遍核心调用——整个项目最有价值的部分就在这十几行里。想深入改造时，shared/下的类型定义和webpack.config.js里的构建配置会告诉你扩展和核心库是如何组织在一起的。跑通了第一个页面，后面就是复制粘贴的事。

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