3 步把任意网页变成可编辑的 Figma 设计稿，这个开源工具真的能打

3 步把任意网页变成可编辑的 Figma 设计稿，这个开源工具真的能打

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

周四晚上，产品经理甩来一句："官网要改版，明早先出设计稿。"你对着网页在 Figma 里重画，两小时过去，导航栏还没画完。这种网页转设计稿的活，早该交给工具。开源项目 figma-html 就是干这个的：把任意网页抓成可编辑的 Figma 图层。

先搞清楚它省掉了哪一步

浏览器里一个网页，本质是标签、样式和布局的堆叠；Figma 里一份设计稿，本质是图层、属性和画板。figma-html 做的，就是把前者的"语言"翻译成后者听得懂的东西。

你平时手工做的事大概是这样的：打开网页 → 截图 → 照着截图画框 → 填文字 → 手动对齐 → 补遗漏的细节。figma-html 把前面一大半都接管了——页面结构、文字内容、颜色、图片位置，一次搬过来，而且搬过来的是"可编辑"的图层，不是一张扁平的截图。

这正是它和"网页截图"最本质的区别：截图是死的，图层是活的。你拿到手的是一份能继续修改的设计稿，而不是一张只能看不能动的图。

上手记：从安装到看到第一个图层，大约 10 分钟

我按"从零到上手"的节奏完整走了一遍，下面每一步都是实际操作过的，照着做基本不会卡壳。

第 1 步：把 Chrome 扩展装上

在 Chrome 里装好扩展（项目里已经备好了完整的前端代码和构建配置）。装好后打开任意一个网页，点一下扩展图标，选择"capture current page"，它就会把当前页面的结构和样式抓取下来，打包成一个文件。这一步最爽的是不用自己写任何东西——页面里有什么，它就抓什么，包括响应式布局下的当前形态。网页一键导入 Figma 的链路，就是从这一下点击开始的。

第 2 步：在 Figma 里准备好对应的插件

Figma 需要安装配套的 HTML to Figma 插件。装好之后，在 Figma 里按Command + /，输入"html figma"，回车。

第 3 步：上传文件，图层全部就位

选择"upload here"，把第 1 步生成的文件传上去。几秒钟后，页面上的文字、按钮、图片、容器就会以图层的形式整整齐齐出现在画板里。这时候你就能像平时编辑设计稿一样，拖一拖、改一改。

如果你不想用扩展，只想在代码里调用转换逻辑，项目也提供了核心包，一条命令装好：

npm install @builder.io/html-to-figma

然后一行代码就能把当前页面转成 Figma 认识的节点结构，适合想把这套能力集成进自己工具链的人。

用之前先看看：4 个新手最容易踩的坑

上手很快，但我也踩了几个小坑，提前说清楚能帮你省不少时间。

坑 1：把它当"魔法"，期待像素级完美。网页转设计稿是结构还原，不是照片复印。字体没加载、图片有防盗链、动画停在中间帧，都可能造成细微偏差。它的正确用法是"给你一个接近九成的底稿，剩下的一成你来补"，而不是"点一下就不管了"。

坑 2：只装了一半。Chrome 扩展负责抓取，Figma 插件负责接收，两头都得装。只装扩展不装插件，文件抓下来了却找不到上传入口；只装插件不装扩展，又没法从网页抓内容。这个工具是"两条腿走路"的，少一条都跑不起来。

坑 3：抓登录后才能看到的页面。如果你要转换的页面需要登录，抓取时很可能只拿到一个空壳或者登录框。先想想页面是否需要鉴权，必要时用公开可访问的页面做测试，成功率会高很多。

坑 4：混淆了"搬运现状"和"重新设计"。网页转设计稿最适合的场景，是"基于现有页面做改版和迭代"；如果你要的是一版全新风格的设计，那它的角色是"参考底稿"而不是"成品"。定位想清楚，用起来才不会失望。

前后对比：同样的页面，两种做法差多少

我把一个中等复杂度的营销页（含导航、轮播、多区块、页脚）分别用两种方式试了一遍：

差距主要不在"画得快"，而在"改得快"。手工稿子改一版等于重画一遍，而转换过来的稿子，改颜色、换文案、调间距都是图层级的操作，返工成本一下子低了一个数量级。对经常要做官网改版这种活儿的团队来说，省下的不是几分钟，而是整个迭代节奏。

除了"抓网页"，它还能反着来

figma-html 其实是条双向的桥。正向是网页转 Figma 设计稿，反向则支持把 Figma 里选中的元素转换成代码——包括 React、Vue、Svelte 和原生 HTML/CSS。也就是说，改版流程可以变成：网页转设计稿 → 在设计稿里改 → 再转回代码，一条链路闭环。

它对个人的意义更实际：逛到某个网站觉得布局好看，以前你得截图存素材，现在直接抓成可编辑的图层，拆解它的排版思路、字号搭配、间距节奏，比自己从零临摹高效得多。给设计师当参考库、给前端当还原底稿、给团队当协作起点，都是不错的位置。

想深入研究的同学，也可以把仓库克隆下来，看看 Chrome 扩展的抓取逻辑和构建配置是怎么写的：

git clone https://gitcode.com/gh_mirrors/fi/figma-html

给它 10 分钟，你会看到不一样的改版方式

与其听我说，不如直接试。找一个你常逛的、结构还算规整的网页，按上面的三步走一遍，亲眼看看图层是怎么"长"出来的。第一次看到那排图层整整齐齐出现的时候，你大概会和我一样，回头打量那些年手动画过的框，心里只想说一句：这活，真的可以交给工具了。😄

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