FigmaMind

使用官方 API 从 Figma 中提取组件和模式的应用程序，并实现模型调用协议 (MCP)。

关于项目

FigmaMind 是一种分析 Figma 设计并将其转换为标准化 JSON 表示的工具。它可以识别按钮、输入字段、标题等组件，并提取它们的属性和关系。

该应用程序公开两种类型的 API：

REST API ：通过 HTTP 进行传统使用
MCP（模型调用协议） ：用于与 LLM 和其他 MCP 兼容系统集成

主要特点

通过官方 API 提取 Figma 组件
自动识别组件类型（按钮、输入、标题等）
定位和属性标准化
资产提取（图像和图标）
模型调用协议（MCP）的实现
完全用 TypeScript 编写

要求

Node.js 18.0.0 或更高版本
Figma API 令牌

安装

克隆存储库：

git clone https://github.com/seu-usuario/figmamind.git
cd figmamind

安装依赖项：

npm install

使用您的 Figma 令牌在项目根目录中创建一个.env文件：

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 创建自动化测试

执照

麻省理工学院

由 João Pereira 开发

FigmaMind MCP Server

Integrations