10分钟快速上手如何将网页HTML转换为可编辑的Figma设计稿【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-htmlfigma-html 是一个 HTML 转 Figma 工具由 Chrome 扩展和 Figma 插件组成把当前打开的网页转换成可编辑的 Figma 图层。适合想把现成网页搬进 Figma 做参考、拆解或还原度对比的设计师和前端开发。它是什么figma-html 由两部分配合工作Chrome 扩展负责读取当前页面的 DOM 和计算后样式导出为一个 JSON 文件Figma 插件再读取这个 JSON在画布上还原出标准的图层结构。你不用截图、不用量像素布局、颜色和文字参数导入后直接可见。开始之前Chrome 浏览器可开启开发者模式Node.js 与 npm 命令行环境Git 命令行环境Figma 账号网页版或桌面版均可从0到第一次运行把项目源码克隆到本地git clone https://gitcode.com/gh_mirrors/fi/figma-html进入扩展目录安装依赖并构建出dist目录cd figma-html/chrome-extension npm install npm run build打开 chrome://extensions 页面勾选开发者模式点击加载已解压的扩展程序选择刚才构建好的 dist 目录。打开任意目标网页点击工具栏里的扩展图标选择capture current page浏览器会自动下载一个 JSON 文件。在 Figma 中按 Cmd /Windows 为 Ctrl /搜索并打开 HTML to Figma 插件把刚才下载的 JSON 上传页面图层就出现在画布上。整个过程不超过 10 分钟其中构建和安装约 1 分钟。核心能力一键抓取当前页面扩展读取页面的 DOM 结构和计算后样式一次点击导出 JSON。你拿到的是一个包含页面结构和外观的数据文件可以直接交给 Figma 插件不需要手动整理。视觉参数完整保留颜色、字号、行高、间距、阴影等 CSS 参数在转换过程中被保留。导入后你在 Figma 属性面板里看到的值与网页上显示的一致可以直接在此基础上微调不用重新测量。得到可直接编辑的图层导入结果不是一张大图而是与页面层级对应的图层树。你可以像编辑普通 Figma 文件一样移动、换色、改文案方便后续拆解和复用。两个真实用法当你遇到需要快速拆解竞品页面的情况时可以打开竞品网站用扩展抓取并导入 Figma。得到的图层带着现成的颜色、字号和间距数值提取主色、标题层级等常用 token 只需几分钟不用逐张截图标注。当你遇到开发完成后要核对还原度的情况时可以用扩展抓取线上已跑通的实际页面在 Figma 里与原设计稿并排对照。间距、颜色、字号的差异会直接体现在属性面板里一眼可见不用靠肉眼比对。卡住了怎么办构建后找不到扩展图标 → dist 目录没生成或扩展未刷新 → 重新执行 npm run build然后在扩展页点刷新抓取的 JSON 为空或图层缺失 → 页面的懒加载内容还没触发 → 先把整页滚动到底、完成必要交互再重新抓取Figma 里搜不到插件 → 插件未安装 → 在 Figma 社区搜索 HTML to Figma 并安装写在最后figma-html 把截图—测量—重绘的重复工作压缩成 3 条命令加 1 次点击。建议你今天就克隆仓库、构建扩展转换你的第一个页面。完整的使用流程与构建说明见 chrome-extension/README.md核心源码后台脚本、注入脚本、弹窗界面见 chrome-extension/src/。【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考