FigmaMind

Aplicação que extrai componentes e padrões do Figma usando a API oficial, com implementação do Model Calling Protocol (MCP).

Sobre o projeto

FigmaMind é uma ferramenta que analisa designs do Figma e os transforma em representações JSON padronizadas. Identifica componentes como botões, campos de entrada, cabeçalhos e mais, extraindo suas propriedades e relações.

A aplicação expõe dois tipos de APIs:

REST API: Para uso tradicional via HTTP
MCP (Model Calling Protocol): Para integração com LLMs e outros sistemas compatíveis com MCP

Características principais

Extração de componentes do Figma via API oficial
Identificação automática de tipos de componentes (botões, inputs, headers, etc.)
Normalização de posicionamento e propriedades
Extração de assets (imagens e ícones)
Implementação do Model Calling Protocol (MCP)
Totalmente escrito em TypeScript

Requisitos

Node.js 18.0.0 ou superior
Token de API do Figma

Instalação

Clone o repositório:

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

Instale as dependências:

npm install

Crie um arquivo .env na raiz do projeto com seu token do Figma:

FIGMA_TOKEN=seu_token_aqui
PORT=3000

Compile o projeto:

npm run build

Uso

Iniciar o servidor

npm start

Para desenvolvimento com recarregamento automático:

npm run dev

Exemplos de uso

Via REST API

Transformar um design do 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

Via MCP

Listar ferramentas disponíveis:

curl -X POST -H "Content-Type: application/json" \
  --data '{"jsonrpc": "2.0", "method": "tools.list", "id": 1}' \
  http://localhost:3000/tools/list

Executar uma ferramenta:

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

Estrutura do projeto

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

Testes

Execute os testes automatizados:

# 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

Documentação

Consulte a pasta docs/ para documentação detalhada sobre:

Conversão para TypeScript

Este projeto foi convertido de JavaScript para TypeScript para melhorar a tipagem, robustez do código e manutenção. A conversão incluiu:

Adição de interfaces e tipos para todas as estruturas de dados
Conversão de todos os arquivos .js para .ts
Implementação de tipagem forte para parâmetros e retornos de funções
Criação de testes automatizados com TypeScript

Licença

MIT

Desenvolvido por João Pereira

FigmaMind MCP Server

Integrations