企业官网建设流程全解析

3分钟把网页变成可编辑Figma设计稿:figma-html 快速上手完整指南

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

figma-html 是一个开源的网页转 Figma 工具:在 Chrome 里点一下扩展图标,它就把当前页面的 DOM 结构和 CSS 样式解析成一份page.figma.json,再通过 Figma 插件把它还原成可编辑的图层、文本和画板。你不需要截图、不需要拿标尺量间距,一次完整的"打开页面 → 抓取 → 导入 Figma"流程大约只要 3 分钟。下面用一个真实任务串起来:把某个公开网页放进 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 build

• npm 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。

背后发生的事其实很直白,这也是这个项目最值得看的地方:

1. popup 通过chrome.runtime.sendMessage({ inject: true })通知后台;
2. background.ts收到消息后,用chrome.tabs.executeScript把inject.js注入当前标签页;
3. inject.ts里就一行核心逻辑:调用htmlToFigma("body"),把 body 下的 DOM 逐节点映射成 Figma 图层,序列化后生成 Blob,模拟点击一个隐藏的<a download>标签,浏览器里随即出现page.figma.json的下载。

两个细节坑:

• 扩展代码里明确禁止在 Chrome 应用商店页面运行(会显示错误提示),换个正常网页就行;
• 面板在注入完成后会显示 "Done!",这是你确认转换成功的唯一信号,看到它再去 Figma 端操作。

🔌 第三步:在 Figma 里用插件把 JSON 变成可编辑图层

转换分两半,浏览器只完成了一半,另一半在 Figma 里:

1. 在 Figma 中安装社区插件市场里的 HTML-To-Figma 插件;
2. 按Cmd + /(Mac)或Ctrl + /(Windows)唤起插件面板,输入html figma回车;
3. 插件面板里选 "upload here",上传第二步下载到的page.figma.json;
4. 插件把 JSON 反序列化,按图层树逐层创建 frame、text、rect,铺满你的画布。

完成后你会发现:标题是独立 text 图层、每个卡片是一个 frame、颜色值可以直接在右侧面板里读出来。这意味着竞品拆解、设计走查、间距标注这些工作,都可以在 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