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 交付的是活的图层。一条命令能跑通的完整链路项目分三层各自解决一段问题模块位置作用Chrome 扩展chrome-extension/在浏览器里抓取当前页面导出 JSON 文件核心转换库builder.io/html-to-figma把 DOM 和样式翻译成 Figma 节点数据Figma 插件需在 Figma 内安装把 JSON 导入到当前画板核心转换逻辑全在 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(useFramestrue)); // 序列化成 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-figmaimport { 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 中的#useFramestrue。给目标网页地址加上这个 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考