用途:Web to Figma 是一款 Chrome 扩展,用于捕获网页并导出为 Figma 兼容的 JSON 文件,便于在 Figma 工作流中继续编辑。页面内提供浮动工具栏,可一键触发捕获。
主要能力:支持整页捕获(DOM 元素、样式与布局)和针对特定元素的捕获;支持跨域图片代理模式以规避 CORS 导致的图片缺失;图片下载并发数可配置(4/6/8/10/12/16/20/infinite);导出为 .json 文件。
安装(开发者模式本地加载): git clone https://github.com/Paidax01/web-to-figma.git cd web-to-figma 随后打开 Chrome 的 chrome://extensions/,启用右上角开发者模式,点击“加载已解压的扩展程序”,选择 web-to-figma 目录,扩展图标即出现在工具栏。
项目结构包含 manifest.json(扩展配置)、background.js(代理与协调的 Service Worker)、capture.js(DOM 遍历与样式提取核心逻辑)、runner.js(编排捕获流程)、inpage-toolbar.js(页面内浮动工具栏)、popup.html/css/js(弹窗 UI)与 logo/ 图标。
使用方式:通过弹窗或页面内工具栏触发捕获,可传入配置对象,如 useProxy、imageConcurrency、fullPage、includeHidden、maxDepth、captureIframes、captureBackgrounds、minimumSize 等;捕获结果以 JSON 下载,文件名形如 figma-capture-<时间戳>.json。
适用场景:需要将网页视觉结构迁移到 Figma 进行设计还原、参考或二次编辑时使用。
限制:资料未提供收费、价格、平台兼容范围或效果保证等信息;捕获可能受 CORS、懒加载图片、严格 CSP、超大页面内存占用及导出 JSON 体积过大等因素影响,需按资料中的排查建议处理。