5分钟把任意网页变成可编辑的Figma设计稿HTML to Figma完整上手指南【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html凌晨一点你刚做完一个新网站的首页设计师却发来消息这个页面的设计稿能给我一份吗我要在上面改版。你盯着浏览器里的成品心里很清楚——没有设计稿对方只能从零重画一遍。这种开发完还要补设计稿的尴尬做前端的人都懂。好在有个开源工具专治这个场景HTML to Figma它能把当前网页一键转换成可编辑的Figma设计文件让网页反哺设计从半小时的手工劳动变成一次点击。一句话说清楚它是什么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构建扩展构建产物会输出到dist文件夹。打开 Chrome 的扩展管理页地址栏输入chrome://extensions开启开发者模式点击加载已解压的扩展程序选择刚才的dist目录。随便打开一个网页点扩展图标里的 Capture page 按钮再把下载下来的文件拖进 Figma 官方配套的 HTML To Figma 插件里选择上传搞定。没错核心动作只有两个浏览器里抓取、Figma里粘贴。整个项目基于 TypeScript 开发抓取逻辑打包成可复用的builder.io/html-to-figma核心库扩展只是它的一个壳这也是它值得单独说的地方。四个值得细说的亮点亮点一一次点击抓的是结构而不是像素。普通截图工具给你一张扁平图片改一个按钮颜色都要重新截。HTML to Figma 抓取的是页面的 DOM 结构和计算后的样式导入后文字、按钮、图片都是独立图层改字号、换颜色、调整间距和直接操作原生 Figma 元素没有区别。这对需要快速改版的场景是质变。亮点二核心库可以脱离浏览器独立使用。扩展适合整页导入但如果你只想转换页面里的某一块区域或者想把它接进自己的工具链直接调用核心库更灵活。项目里lib/html-to-figma目录就是转换逻辑本体官方发布在 npm 上的builder.io/html-to-figma包与它同源想在 Node 或浏览器环境里做自动化转换引入这个包就行。亮点三TypeScript 全程护航。从扩展的弹窗界面chrome-extension/src/popup/到核心转换逻辑再到shared/目录下的共享类型定义整个链路类型是通的。这意味着你改代码时抓取端和生成端的字段结构保持一致转换过程不容易因为字段对不上而悄悄出错——对想二次开发的人来说这比看一堆注释友好得多。亮点四前后端分离的模块化设计。项目里扩展和核心库是两套独立的构建配置chrome-extension/webpack.*.js与根目录的webpack.config.js各有各的开发与生产模式脚本。想单独调试扩展、单独发布库互不干扰。想深入研究的读者入口可以参考chrome-extension/README.md里的构建说明。进阶技巧与避坑建议技巧一开发模式用npm run watch。每次改完扩展代码都手动npm run dev很烦watch模式会自动监听文件变化并重新编译配合 Chrome 扩展页里的刷新按钮改代码到看效果几乎无缝。技巧二记得给页面留出渲染时间。抓取发生在当前页面如果目标页面的内容是异步加载的比如滚动加载的瀑布流等它完全渲染完再点Capture page否则抓到的会是半成品。避坑一Chrome 应用商店页面抓不了。这是扩展代码里明确处理的边界情况——在 chrome.google.com 域名下会直接提示无法运行遇到这类受限页面换个网址测试即可。避坑二复杂动效和交互不会保留。它转换的是静态结构和样式CSS 动画、hover 效果、JS 交互这些会动的东西都会被抹平。转换结果适合做设计稿和改版底稿不要指望它变成可交互原型。新手最常问的三个问题问导出的文件是真正的 Figma 文件吗答是。通过 Figma 插件导入后内容会以原生图层和组件的形式进入你当前的 Figma 文档可以直接编辑、加注释、拉自动布局不是一张图片。问一定要自己构建扩展吗有没有现成安装包答项目官方已在 Chrome 商店发布了现成扩展装了就能用如果你想基于源码二次开发或验证构建流程再按上面的步骤自己构建两者可以并存。问转换出来的效果和原网页能一模一样吗答接近但不是 100%。常规的布局、配色、字体、圆角阴影都能忠实还原但依赖 JS 动态渲染或特殊 Canvas 的页面会打折扣。复杂页面导入后建议先检查一遍图层分组再开始编辑。一句话总结HTML to Figma 把从网页到设计稿这条最耗时的返工路径压缩成了两次点击——与其继续手动重画不如现在就把仓库 clone 下来挑一个你最近做过的页面亲手感受一下网页进 Figma的丝滑。【此处插入Chrome扩展点击捕获页面的操作截图】 【此处插入Figma插件上传后生成可编辑图层的效果截图】【免费下载链接】figma-htmlConvert any website to editable Figma designs项目地址: https://gitcode.com/gh_mirrors/fi/figma-html创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考