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

1. Clone o repositório:

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

2. Instale as dependências:

   npm install

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

   FIGMA_TOKEN=seu_token_aqui
   PORT=3000

4. 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:

• Transformação de componentes
• Limitações da API do Figma
• Extração de assets
• Detalhes técnicos
• Segurança

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