3分钟把网页变成可编辑Figma设计稿:figma-html 快速上手完整指南【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-htmlfigma-html 是一个开源的网页转 Figma 工具:在 Chrome 里点一下扩展图标,它就把当前页面的 DOM 结构和 CSS 样式解析成一份page.figma.json,再通过 Figma 插件把它还原成可编辑的图层、文本和画板。你不需要截图、不需要拿标尺量间距,一次完整的打开页面 → 抓取 → 导入 Figma流程大约只要 3 分钟。下面用一个真实任务串起来:把某个公开网页放进 Figma,做成一份可以直接标注和修改的设计稿。 开始之前:它能做什么,以及一个必须知道的背景先说清楚能力边界,避免你带着错误预期上手。维度实际情况转换对象浏览器里当前这一页的可见内容(body内全部 DOM)输出产物一份page.figma.json,描述 Figma 图层树样式保留颜色、字号、字重、行高、内/外边距、圆角、阴影等按计算后的值写入图层不能做不执行你后续的交互;懒加载没滚动出来的内容不会被抓到;不处理跨域拿不到的资源细节⚠️ 一个要提前知道的背景:仓库根目录的 README 说明,该功能的官方版本已迁移到 Builder.io 的 Chrome 扩展。也就是说,如果你只想能用,官方扩展是更省事的选择;但这个开源仓库的价值在于它完整暴露了网页 → Figma的解析链路,适合你想看懂原理、想基于它魔改、或者想离线构建自己扩展包的情况。本篇指南就走自己构建这条路。 第一步:获取源码并构建扩展(最快配置方法)整个扩展的代码都在chrome-extension/目录下,构建只有 4 条命令:git clone https://gitcode.com/gh_mirrors/fi/figma-html cd figma-html/chrome-extension npm install npm run buildnpm run build走 webpack 生产配置,产物输出到chrome-extension/dist;日常开发可以用npm run dev开启 watch 模式,改一行代码自动重编。构建完成后,在 Chrome 地址栏打开chrome://extensions/,打开右上角开发者模式,点加载已解压的扩展程序,选择chrome-extension/dist目录。扩展名为 HTML to Figma,图标出现在工具栏,点击后弹出一个约 400px 宽的小面板,中间就是一个醒目的 Capture page 按钮。目录结构很小,值得花 30 秒认识一下,后面排错全靠它:chrome-extension/src/background.ts— 后台脚本,负责把解析脚本注入当前标签页chrome-extension/src/inject.ts— 真正干活的页面内脚本,只有一屏代码chrome-extension/src/popup/Popup.tsx— 你点到的那个面板(React MobX)shared/typings.ts— 扩展与插件之间交换数据的类型定义chrome-extension/info/manifest.json— 标准 MV3 清单,声明了图标和 popup 入口 第二步:在目标页面抓取,拿到 page.figma.json打开你要转换的网页,先把页面滚到底,让懒加载的图片、列表都渲染出来——这一步决定了稿子的完整度。然后点扩展图标,在弹出的面板里点Capture page。背后发生的事其实很直白,这也是这个项目最值得看的地方:popup 通过chrome.runtime.sendMessage({ inject: true })通知后台;background.ts收到消息后,用chrome.tabs.executeScript把inject.js注入当前标签页;inject.ts里就一行核心逻辑:调用htmlToFigma(body),把 body 下的 DOM 逐节点映射成 Figma 图层,序列化后生成 Blob,模拟点击一个隐藏的a download标签,浏览器里随即出现page.figma.json的下载。两个细节坑:扩展代码里明确禁止在 Chrome 应用商店页面运行(会显示错误提示),换个正常网页就行;面板在注入完成后会显示 Done!,这是你确认转换成功的唯一信号,看到它再去 Figma 端操作。 第三步:在 Figma 里用插件把 JSON 变成可编辑图层转换分两半,浏览器只完成了一半,另一半在 Figma 里:在 Figma 中安装社区插件市场里的 HTML-To-Figma 插件;按Cmd /(Mac)或Ctrl /(Windows)唤起插件面板,输入html figma回车;插件面板里选 upload here,上传第二步下载到的page.figma.json;插件把 JSON 反序列化,按图层树逐层创建 frame、text、rect,铺满你的画布。完成后你会发现:标题是独立 text 图层、每个卡片是一个 frame、颜色值可以直接在右侧面板里读出来。这意味着竞品拆解、设计走查、间距标注这些工作,都可以在 Figma 里直接做,而不是对着截图猜。 第四步:结果验证与常见问题对照表症状可能原因处理方式点了 Capture page 没有下载浏览器禁用了下载,或页面触发了扩展的 URL 限制确认 popup 显示 Done;换一个非商店页面重试稿子里缺少部分内容懒加载没触发先手动滚动全页,等图片出现再抓取图层层级混乱、嵌套过深原页面 div 套 div 太深转换前用浏览器工具检查 DOM,或转换后在 Figma 里手动重组个别样式(如 JS 动态设置的内联样式)对不上脚本运行时才生成的样式等动画/交互结束后再抓,或手动在 Figma 补排查时记住一个判断顺序:先确认浏览器端拿到了 JSON(看 Done 提示),再看 JSON 本身对不对,最后才怀疑 Figma 插件端。三步分开,问题基本不会查串。 这套工作流最省时间的三个场景竞品界面拆解:把对手官网落地页抓进 Figma,直接量字号、抽色板、建组件,传统截图 标注半天起步的活压缩到 1 小时以内;设计走查(Design QA):前端把实现页面转成 Figma 稿,和原始设计稿并排放,差异肉眼可见,不用来回截图争论 1px;设计规范反推:从一个成熟网站里批量提取颜色、文本样式和间距节奏,给新项目的 Design Token 打底。 想深入原理,看这几个文件就够代码量不大,建议按这个顺序读:chrome-extension/src/inject.ts— 从一行htmlToFigma(body)开始,看解析结果如何变成下载文件;chrome-extension/src/background.ts— 扩展如何把脚本注入活动标签页,不到 25 行;chrome-extension/src/popup/Popup.tsx— 面板的状态机:loading / done / error 三态;shared/typings.ts— 浏览器端和 Figma 插件端交换的数据契约,理解它等于理解了整条链路的接口;DEVELOP.md— 官方写的开发文档,讲清了扩展端与 Figma 插件端的分工架构。✅ 下一步行动现在就可以动手:挑一个你熟悉的公开网站(比如你公司官网或一个 SaaS 落地页),按上面四步走一遍,目标是在 10 分钟内拿到一份能在 Figma 里逐层编辑的设计稿。卡住的任何一步,先翻chrome-extension/README.md(使用与构建说明)和DEVELOP.md(架构与开发说明),再对照chrome-extension/src/下对应源码。这个仓库体量小、链路完整,是理解网页到设计工具这类转换项目的好教材。【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考