Web2Figma

一键将任意网页转化为 Figma 设计稿

---

---

简介

Web2Figma 是一款 Chrome 浏览器扩展，能够将任意网页瞬间捕获并转化为 Figma 可编辑的设计数据。无需手动截图、无需重新排版 —— 点击一次，直接粘贴到 Figma 中即可获得完整的可编辑设计稿。

功能特性

• 一键捕获 — 点击按钮即可将当前页面完整捕获为 Figma 设计数据
• 自动复制到剪贴板 — 捕获完成后数据自动复制，在 Figma 中 Ctrl+V / Cmd+V 粘贴即可
• 图片资源下载 — 自动下载页面中的图片资源并内联，确保在 Figma 中完整还原
• 智能预处理
  • 字体统一替换为 PingFang SC，保证 Figma 渲染一致性
  • SVG <use> 引用自动内联
  • Shadow DOM 自动展平
  • <canvas> 画布自动转为图片
  • <video> 视频自动截图
  • 图标字体（FontAwesome、Material Icons 等）自动标记占位符
• 懒加载图片处理 — 自动将 loading="lazy" 的图片切换为立即加载，确保捕获完整
• 安全恢复 — 页面预处理后自动恢复原始状态，不影响正常浏览；30 秒超时保护机制
• 轻量高效 — 纯原生实现，无额外依赖，运行流畅

安装方式

方式一：开发者模式加载（推荐）

1. 将本项目克隆到本地：

   git clone https://github.com/Ryujoxys/Web2Figma.git

2. 打开 Chrome 浏览器，地址栏输入 chrome://extensions/

3. 开启右上角的 开发者模式

4. 点击 加载已解压的扩展程序

5. 选择本项目所在的 Web2Figma 文件夹

6. 安装完成，浏览器工具栏将出现 Web2Figma 图标

方式二：直接下载

前往 Releases 页面下载最新版本的压缩包，解压后按上述步骤加载。

使用方法

1. 打开你想要捕获的网页
2. 点击浏览器工具栏中的 Web2Figma 图标
3. （可选）取消勾选「下载图片」可加快捕获速度
4. 点击 「捕获页面」 按钮
5. 等待捕获完成，数据会自动复制到剪贴板
6. 打开 Figma，在画布上 Ctrl+V / Cmd+V 粘贴

提示： 捕获过程中页面会短暂变化，完成后自动恢复。如果意外中断，30 秒后会自动恢复原始状态。

项目结构

Web2Figma/
├── manifest.json        # 扩展清单文件（Manifest V3）
├── popup.html           # 弹出窗口界面
├── popup.js             # 主要逻辑：图片下载、页面预处理、捕获流程控制
├── vendor/
│   └── capture.js       # Figma 官方页面捕获脚本
├── icons/
│   ├── icon16.svg       # 16x16 图标
│   ├── icon48.svg       # 48x48 图标
│   └── icon128.svg      # 128x128 图标
└── LICENSE              # MIT 开源协议

技术细节

• 基于 Chrome Extension Manifest V3 构建
• 使用 chrome.scripting.executeScript 注入脚本到页面
• 在 MAIN world 中执行捕获脚本，确保访问页面原始 DOM
• 图片下载采用并发批量处理（每批 5 张），带超时保护
• 页面预处理采用可逆操作 + 安全网（Safety Net）双重保障

兼容性

• Chrome 88+（Manifest V3 支持）
• 不支持 chrome://、chrome-extension:// 等浏览器内置页面
• 部分跨域图片可能因浏览器安全策略无法下载

开源协议

本项目基于 MIT License 开源。

作者

Ryujoxys

• GitHub: https://github.com/Ryujoxys
• 项目主页: https://github.com/Ryujoxys/Web2Figma

---

如果这个项目对你有帮助，欢迎给个 Star ⭐