# html to figma

**Repository Path**: tomdac/html-to-figma

## Basic Information

- **Project Name**: html to figma
- **Description**: 将网页一键采集为可编辑设计 JSON 的 Chrome 扩展，支持 DOM/样式提取、图片代理与 Figma 设计流程接入。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://facomqeet1v.feishu.cn/wiki/LJL6wBolJiZPBEkFLhEc9ka2nxc?from=from_copylink
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-10
- **Last Updated**: 2026-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Figma, 插件, 设计师

## README

/**
 * @copyright Tomda (https://www.tomda.top)
 * @copyright UIED技术团队 (https://fsuied.com)
 * @author UIED技术团队
 * @createDate 2026-03-10
 */

# Web to Design Chrome插件

将网页内容捕获并转换为可编辑设计数据（面向 Figma/设计系统流程）。

## 功能特性

- 🎨 捕获网页 DOM 结构、布局和核心样式
- 🧩 支持树结构 + 扁平结构双输出
- 🖼️ 支持跨域图片代理抓取与资源嵌入
- 📥 一键下载 JSON 文件（可用于二次转换）
- 🧰 支持注入网页悬浮采集工具条

## 安装方法

1. 打开Chrome浏览器，进入 `chrome://extensions/`
2. 开启右上角的"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择本项目文件夹

## 使用方法

1. 点击浏览器工具栏中的插件图标
2. 在弹窗中点击“开始采集并下载 JSON”
3. 如需网页内操作，点击“注入网页悬浮工具条”
4. 采集完成后会下载 `web-to-design-*.json`
5. 将 JSON 用于 Figma 插件或内部设计转换流程

## 技术栈

- Manifest V3
- Vanilla JavaScript
- Chrome Extension APIs（scripting/downloads/storage）
- 资源代理队列 + 会话缓存

## 项目结构

```
figma/
├── manifest.json       # 插件配置文件
├── popup.html         # 弹窗页面
├── popup.css          # 弹窗样式
├── popup.js           # 弹窗逻辑
├── content.js         # 采集引擎
├── runner.js          # 采集执行器
├── inpage-toolbar.js  # 网页悬浮工具条
├── background.js      # 后台服务
├── icons/             # 图标文件夹
└── README.md          # 说明文档
```

## 版权信息

© Tomda (https://www.tomda.top)  
© UIED技术团队 (https://fsuied.com)  
作者: UIED技术团队  
创建日期: 2026-03-10

## 许可证

MIT License