5分钟把任意网页变成可编辑的Figma设计稿：HTML to Figma完整上手指南

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里就有对应的框架、文字和组件等着你动手改。

最短上手路径：从零到第一份设计稿

整个流程可以拆成四步，全程不需要写任何配置：

1. 克隆仓库并进入扩展目录：

git clone https://gitcode.com/gh_mirrors/fi/figma-html cd figma-html/chrome-extension npm install

2. 执行npm run dev构建扩展，构建产物会输出到dist文件夹。
3. 打开 Chrome 的扩展管理页（地址栏输入chrome://extensions），开启"开发者模式"，点击"加载已解压的扩展程序"，选择刚才的dist目录。
4. 随便打开一个网页，点扩展图标里的 "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