FigmaMind MCP Server

# 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: ```bash git clone https://github.com/seu-usuario/figmamind.git cd figmamind ``` 2. Instale as dependências: ```bash 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: ```bash npm run build ``` ## Uso ### Iniciar o servidor ```bash npm start ``` Para desenvolvimento com recarregamento automático: ```bash npm run dev ``` ### Exemplos de uso #### Via REST API Transformar um design do Figma: ```bash 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: ```bash 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: ```bash 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: ```bash # 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](./docs/component-types.md) - [Limitações da API do Figma](./docs/figma-api-limitations.md) - [Extração de assets](./docs/assets-extraction.md) - [Detalhes técnicos](./docs/technical-details.md) - [Segurança](./docs/security.md) ## 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