网页转 Figma 设计稿5 分钟上手 HTML to Figma 开源转换指南【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html还在对着网页一寸一寸地手动重建设计稿吗前端工程师老周上周接了个活把一个已经上线的营销页重新设计。按老办法他得自己搭框架、对间距、调字号至少半天起步。这次他只花了 3 分钟——用 HTML to Figma 把网页直接抓成 Figma 里的可编辑图层剩下的时间全用来改创意。网页到设计稿的转换第一次可以快到这个程度。最快跑通一次从网页到 Figma 可编辑图层只需五步先别管原理跟着走一遍几分钟内你就能看到产出。克隆仓库并进入扩展目录git clone https://gitcode.com/gh_mirrors/fi/figma-html cd figma-html/chrome-extension安装依赖并启动开发构建npm install npm run dev打开 Chrome 的扩展管理页开启开发者模式点击加载已解压的扩展选择构建产出的dist目录。打开任意一个你喜欢的网页点击扩展图标按下Capture page按钮浏览器会自动下载一个page.figma.json文件。在 Figma 里装上配套的 HTML to Figma 插件执行它并选择上传这个文件网页就变成了一组可以随意编辑的图层。如果你只想在自己的项目里调用转换能力核心库一条命令就能装好npm install builder.io/html-to-figma import { htmlToFigma } from builder.io/html-to-figma; const layers htmlToFigma(document.documentElement);到这里你已经完成了 90% 的工作量。剩下的就是享受网页秒变设计稿的快乐。它到底强在哪四个值得拆开的亮点 转换结果不是截图是活的图层这是它最打动我的一点。很多同类方案给你一张大图而 HTML to Figma 转换出来的是真实的 Figma 图层树文字还是文字、颜色还是颜色、间距还能微调。设计稿改起来的手感和从零搭一模一样但省掉了全部打底时间。 抓取逻辑藏在一个文件里想改就能改核心转换入口其实就在chrome-extension/src/inject.ts几十行代码读取页面 DOM、交给转换库、打包成 JSON 下载。我第一次看的时候挺惊讶——这么轻量的实现居然能扛住复杂布局。想自定义抓取范围改一个参数就能从整个页面换成某个区块。️ TypeScript 全链路护航扩展、核心库、共享类型定义全部基于 TypeScript见根目录tsconfig.json和shared/typings.ts。这意味着你改代码时有类型提示、有编译期检查转换逻辑不容易悄悄坏掉。对想二次开发的读者来说这比纯 JavaScript 项目友好太多。 Webpack 双环境构建开发和上线都省心仓库里预置了webpack.dev.js和webpack.prod.js两套构建配置开发时npm run dev边改边编译发布时npm run build产出压缩版本。我在本地跑过一次从 clone 到扩展出现在浏览器里全程没有踩配置的坑。三个真实工作流他们真的这么用前端工程师小林接手一个迭代了三年的老项目设计稿早丢了。他把现有页面转成 Figma 图层直接在原版式上做改版方案和设计师对着同一份稿子沟通改版评审一次通过。独立设计师阿May接单前需要快速了解客户的官网风格。她打开页面 → Capture page → 上传 Figma整套流程不到 1 分钟图层里连字体、圆角、阴影都保留着研究竞品从截图猜变成了拆图层。创业团队没有专职设计资源时前端直接用工具把网页抓进 Figma再交给外包设计师精修。交接成本从讲半天需求变成打开这个文件。新手最容易踩的四个坑坑表现解决办法在 Chrome 网上应用店页面使用扩展直接报错拒绝运行换一个普通网页再试扩展本身会拦截这类站点加载了src目录而不是distChrome 提示清单无效先npm run dev构建再加载dist目录忘记安装 Figma 插件拿到 JSON 却不知道往哪传先在 Figma 中安装配套的 HTML to Figma 插件再执行上传页面有动态内容抓到的图层和肉眼看到的不一致尽量在页面渲染稳定后再捕获必要时滚动加载完再点按钮接下来怎么玩三条进阶路径想改抓取逻辑看chrome-extension/src/inject.ts理解htmlToFigma的调用方式后你可以改成抓取特定选择器、自定义文件名。想改扩展交互弹窗 UI 在chrome-extension/src/popup/Popup.tsx用的是 React Material UI加按钮、加选项都很直观。想深入源码仓库根目录的DEVELOP.md讲了架构与本地调试流程chrome-extension/README.md有完整的构建与安装说明package.json里列出了全部脚本值得逐个跑一遍。动手试试下一次改版不用从零开始回到开头那个场景老周现在每周都靠它省出小半天。网页转 Figma 设计稿这件事门槛已经被这个开源项目拉到了点一下按钮的级别。核心收益其实就一句话把重复的打底工作交给工具把创意留给设计本身。现在就 clone 下来跑一次你会回来感谢这 5 分钟。【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考