F
FigmaMind：从Figma设计中提取组件并转换为标准化JSON格式的工具
@joao-loker/FigmaMind
0 Stars
526 次浏览
joao-loker
更新于 2026-08-23
从Figma设计中提取组件，并将其转换为标准化的JSON格式，以便AI模型和工具轻松使用以进行界面重建。
该服务暂未提供标准配置，请参考 README 手动接入
服务介绍
FigmaMind
应用程序通过官方 API 从 Figma 中提取组件和模式，并实现了模型调用协议 (MCP)。
关于项目
FigmaMind 是一种工具，它分析 Figma 设计并将其转换为标准化的 JSON 表示。该工具可以识别按钮、输入框、标题等组件，提取它们的属性和关系。
该应用提供了两种类型的 API：
- REST API：用于传统的 HTTP 使用
- MCP (Model Calling Protocol)：用于与 LLMs 及其他兼容 MCP 的系统集成
主要特点
- 通过官方 API 从 Figma 提取组件
- 自动识别组件类型（如按钮、输入框、标题等）
- 标准化位置和属性
- 提取资源（图片和图标）
- 实现了 Model Calling Protocol (MCP)
- 完全使用 TypeScript 编写
要求
- Node.js 18.0.0 或更高版本
- Figma API 令牌
安装
- 克隆仓库：
git clone https://github.com/seu-usuario/figmamind.git
cd figmamind
- 安装依赖项：
npm install
- 在项目根目录下创建一个
.env文件，并添加您的 Figma 令牌：
FIGMA_TOKEN=seu_token_aqui
PORT=3000
- 编译项目：
npm run build
使用
启动服务器
npm start
对于开发时自动重载：
npm run dev
使用示例
通过 REST API
转换 Figma 设计：
curl -X POST -H "Content-Type: application/json" \
--data '{"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}' \
http://localhost:3000/api/transform
通过 MCP
列出可用工具：
curl -X POST -H "Content-Type: application/json" \
--data '{"jsonrpc": "2.0", "method": "tools.list", "id": 1}' \
http://localhost:3000/tools/list
执行一个工具：
curl -X POST -H "Content-Type: application/json" \
--data '{"jsonrpc": "2.0", "method": "run", "id": 2, "params": {"name": "figmamind.transform", "arguments": {"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}}}' \
http://localhost:3000/run
项目结构
figmamind/
├── docs/ # Documentação detalhada
├── examples/ # Exemplos de uso
│ ├── input/ # Dados de exemplo para entrada
│ └── output/ # Dados de exemplo de saída
├── src/ # Código-fonte
│ ├── mcp/ # Implementação do MCP
│ ├── processor/ # Processamento de componentes
│ ├── services/ # Serviços (Figma API)
│ ├── transformers/ # Transformadores específicos
│ ├── types/ # Definições de tipos TypeScript
│ └── utils/ # Utilitários
├── tests/ # Testes automatizados
└── scripts/ # Scripts utilitários
测试
运行自动化测试：
# Teste da transformação do Figma
npm run test:transform
# Teste dos endpoints MCP
npm run test:mcp
# Teste da API REST de transformação
npm run test:api
# Executa o teste principal
npm test
文档
请参阅 docs/ 文件夹中的详细文档：
转换为 TypeScript
此项目已从 JavaScript 转换为 TypeScript，以提高类型检查、代码健壮性和维护性。转换包括：
- 为所有数据结构添加接口和类型
- 将所有
.js文件转换为.ts文件 - 对函数参数和返回值实现强类型
- 使用 TypeScript 创建自动化测试
许可证
MIT
由 João Pereira 开发
