Web2Figma

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

---

---

简介

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

捕获核心基于 Figma 官方的网页捕获脚本（window.figma.captureForDesign）。本扩展在其之上做了完整的工程化封装与体验优化：懒加载预加载、图片内联下载、元素选择捕获、右键菜单、页面预处理与自动还原等，让它开箱即用、捕获更完整。

功能特性

• 一键捕获 — 点击按钮即可将当前页面完整捕获为 Figma 设计数据
• 元素选择捕获 — 「🎯 选择元素捕获」模式，hover 高亮、点击只捕获单个区块/卡片
• 右键菜单 — 在任意页面右键即可「捕获整页 / 选择元素捕获」，图标角标实时显示进度
• 快捷键唤起 — ⌘/Ctrl + Shift + Y 直接打开面板，全屏（F11）下也能用
• 自动复制到剪贴板 — 捕获完成后数据自动复制，在 Figma 中 Ctrl+V / Cmd+V 粘贴即可
• 懒加载预加载 — 捕获前自动滚动页面触发懒加载，连首屏以下的图片也能完整捕获
• 图片资源下载 — 自动下载页面中的图片资源并内联，确保在 Figma 中完整还原
• 智能预处理
  • 自动隐藏 Cookie / GDPR / 同意弹窗，设计稿更干净（捕获后还原）
  • 长页面 position:fixed 元素自动去重，避免重复出现（捕获后还原）
  • SVG <use> 引用自动内联
  • Shadow DOM 自动展平
  • <canvas> 画布、<video> 视频自动转为图片（按显示尺寸，避免布局位移）
  • 图标字体（FontAwesome、Material Icons 等）自动标记占位符
  • 可选将字体统一替换为 PingFang SC（默认关闭，保留网页原字体）
• 真实错误提示 — 捕获失败时显示真实原因，不再误报「完成」
• 安全恢复 — 页面预处理后自动恢复原始状态，不影响正常浏览；30 秒超时保护机制
• 轻量高效 — 纯原生实现，无额外依赖，运行流畅

安装方式

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

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

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

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

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

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

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

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

方式二：直接下载

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

使用方法

捕获整页：

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

只捕获某个元素：

• 点击弹窗中的 「🎯 选择元素捕获」，或在页面上右键选择 「选择元素捕获到 Figma」
• 移动鼠标，目标元素会高亮，点击即可只捕获该元素（按 Esc 取消）

右键菜单： 在任意页面右键，可直接「捕获整页 / 选择元素捕获」，捕获进度通过扩展图标角标（…→✓）显示。

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

项目结构

Web2Figma/
├── manifest.json        # 扩展清单文件（Manifest V3）
├── popup.html           # 弹出窗口界面
├── popup.js             # 弹窗逻辑：选项持久化、进度展示、触发捕获
├── capture-flow.js      # 共享捕获流水线（弹窗 / 右键菜单 / 元素选择器共用）
├── background.js        # 后台 Service Worker：右键菜单、元素选择捕获、角标状态
├── picker.js            # 元素选择器：注入页面，高亮 hover、点击选中
├── vendor/
│   └── capture.js       # Figma 官方网页捕获脚本（核心捕获能力来源）
├── icons/
│   └── figma.png        # 扩展图标
└── LICENSE              # MIT 开源协议

技术细节

• 基于 Chrome Extension Manifest V3 构建
• 捕获核心是 Figma 官方的网页捕获脚本（vendor/capture.js，通过 window.figma.captureForDesign 调用）。本扩展在它之上做了工程化封装：懒加载预加载、图片内联、Shadow DOM / canvas / 图标等预处理、元素选择、右键菜单、剪贴板写入完成即收尾等
• 使用 chrome.scripting.executeScript 注入脚本，在 MAIN world 中执行捕获脚本以访问页面原始 DOM
• 整条流水线抽象在 capture-flow.js，弹窗、右键菜单、元素选择器三个入口复用同一套逻辑
• 图片下载采用并发批量处理（每批 5 张），带超时保护
• 页面预处理采用可逆操作 + 安全网（Safety Net）双重保障，所有改动统一通过 window.__restoreCapture() 还原

兼容性

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

开源协议

本项目基于 MIT License 开源。

作者

Ryujoxys

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

---

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