夜雨聆风最近需要改版公司一个已经上线的官网，但之前的 Figma 源文件找不到了。如果手动重新搭建页面，一个完整的官网少说要花好几天。
后来同事分享了一个 Web to Design 的插件（Chrome 插件 + Figma 插件），可以直接把任意网页一键转换成可编辑的 Figma 设计稿。实际体验下来，还原度比预期高不少，记录分享一下使用流程。
工具简介
Web to Design 是一套双插件方案：
- Chrome 插件:
负责在浏览器端抓取网页的结构、样式和资源，打包生成本地文件（.w2d 格式）
- Figma 插件:
负责读取该文件，解析元素和层级关系，在 Figma 中还原成可编辑的图层画布
整个流程在本地完成，不需要把页面上传到服务器。
插件地址
Chrome 商店搜索：Web to Design
Figma Community 搜索：Web to Design
官网：drawflare.com
使用流程
第一步：Chrome 插件抓取网页
在 Chrome 浏览器中打开目标网页，点击 Web to Design 插件图标。
支持两种导出模式：
模式 | 说明 | 适用场景 |
整个网页导出（Export Full Page） | 抓取当前页面的全部内容 | 需要完整还原整个页面 |
选中区域导出 | 只抓取页面的某个局部 | 只需要某个模块/组件 |
选择导出模式后，插件会在本地完成页面渲染、结构提取和资源打包，生成一个 .w2d 文件。
第二步：Figma 插件导入
打开 Figma，在 Plugins 菜单中运行 Web to Design 插件，导入刚才生成的 .w2d 文件。
等待几秒到一分钟左右（取决于页面复杂度），文件会自动解析为可编辑的 Figma 画布。
导入后的效果
导入完成后，页面会被还原为以下可编辑元素：
- 文本：转为 Text 图层，可直接修改文字内容和字体样式
- 图片：转为独立的 Image 图层，可替换或调整
- 布局：Frame 和 Auto Layout 关系基本保留，层级结构可展开查看
- 样式：颜色、圆角、阴影等属性可直接在右侧面板调整
实测还原度大约在 90% 左右，复杂页面可能会稍弱一些。 绝大部分布局、图片和文字能一比一还原，剩下 10% 是一些细节微调（比如个别间距、嵌套层级需要手动核对）。
实际使用场景
除了"源文件丢失需要重新搭建"，这个工具还适用于：
- 竞品页面拆解
把竞品官网转成 Figma 文件，方便分析其布局结构、配色方案和组件设计 - 网站改版
基于现有线上页面快速生成设计稿底稿，省去从零搭建的时间 - HTML 模板二次设计
拿到一个 HTML 模板后，在 Figma 中进行视觉改版 - 前端还原对照
将线上页面和设计稿并排对比，检查前端实现是否走样
使用注意
CSS 动画和交互效果不会被还原，导入的是静态设计稿
iframe 内嵌的内容可能无法抓取，需要单独处理
导入后建议检查一下图层嵌套层级，复杂页面偶尔有结构需要手动调整
关于免费使用
每月有 10 次免费转换额度，次数按月刷新。对于日常偶尔使用来说免费额度基本够用，如果需要更频繁使用可以了解其付费方案。
总结
对于经常需要处理网页还原、改版设计的前端和设计师来说，这个工具能省掉大量重复搭建页面的时间。从打开网页到拿到可编辑 Figma 文件，正常情况下一分钟内就能完成，比手动重画效率高出一个量级。
如果你也在找类似工具，可以试试。有其他好用的 Figma 插件也欢迎在评论区交流。
