vorbei/figma-capture
GitHub: vorbei/figma-capture
一款增强型 Chrome 扩展，可将任意网页捕获为 Figma 可编辑图层，并自动修复中日韩字体渲染和清理冗余 DOM 结构。
Stars: 80 | Forks: 14
# Figma 截图
一款 Chrome 扩展，通过 [HTML to Design](https://www.figma.com/community/plugin/1159123024924461424) 将任意网页捕获为 Figma 的剪贴板格式。点击图标，然后粘贴到 Figma 中。
该扩展在 Figma 官方的 `capture.js` 基础上增加了一个**后处理层** —— 它会拦截剪贴板载荷，并在数据到达 Figma 之前应用字体修复和 DOM 清理。
## 功能
- **CJK 字体修复** —— 检测中文/日文/韩文文本，并将字体重新映射为 `PingFang SC` / `Noto Serif SC`，以便在 Figma 中正确渲染字形
- **字体映射** —— 通过用户可配置的 `font-map.json`（参见 `font-map.example.json`），将不可用字体重新映射为 Figma 兼容的等效字体
- **默认字体回退** —— 为没有明确 `fontFamily` 的元素指定 `Noto Sans SC`，防止 Figma 回退到 Times 字体
- **DOM 扁平化** —— 移除没有视觉贡献仅增加干扰的透传包装 `
`/`` 元素
- **空框架清理** —— 剥离零尺寸的无子元素，并向上冒泡移除非装饰性的空容器
## 安装
1. 从 Figma 下载 `capture.js`：
make
2. 复制字体映射示例并根据需要进行自定义：
cp font-map.example.json font-map.json
3. 访问 `chrome://extensions`，启用 **开发者模式 (Developer mode)**
4. 点击 **加载已解压的扩展程序** 并选择此目录
## 使用
1. 导航到你想要捕获的页面
2. 点击扩展图标
3. 切换到 Figma 并按 **Ctrl/Cmd+V** 粘贴
## 原理
1. `capture.js`（Figma 的官方脚本）将 DOM —— 计算样式、图像、布局 —— 序列化为 JSON 载荷并将其写入剪贴板
2. `background.js` 安装了一个剪贴板拦截器（`navigator.clipboard.write` / `writeText`），在写入之前对载荷进行转换：
- 字体校正（CJK、图标字体、字体映射）
- 空白/空节点清理
- 包装器扁平化（提升非装饰性同尺寸容器的单子元素）
3. 结果是更干净、更准确的 Figma 粘贴内容
## 免责声明
这是一个**非官方社区工具**，仅供个人和教育用途。它不隶属于、不由 Figma, Inc. 认可或支持。
- `capture.js` 是在构建时从 Figma 的公共端点下载的，**不包含**在此存储库中。它受 [Figma 服务条款](https://www.figma.com/tos/)约束。Figma 可能随时更改或移除此端点，这可能会破坏构建或改变捕获行为。
- 此扩展仅对剪贴板数据执行**本地客户端转换**。它不收集、传输或存储任何用户数据。
- 引用的字体名称（PingFang SC、Noto Sans SC、Google Sans Flex 等）是其各自所有者的商标。
- 此工具依赖于 Figma 的 HTML to Design 剪贴板格式，该格式未记录在案，可能会随时更改。**无法保证持续可用性。**
- 使用风险自负。作者不对因使用此工具而产生的任何问题负责。
## 许可证
MIT
标签：Chrome 扩展, CJK 字体修复, CSP 绕过, DOM 序列化, DOM 清理, Figma 插件, HTML 转 Design, UI 设计辅助, 前端开发工具, 剪贴板处理, 字体映射, 数据可视化, 浏览器扩展开发, 网页截图, 网页转 Figma, 自定义脚本, 设计自动化