Skip to main content
Glama
enesjakoptzh

FigmaMind MCP Server

by joao-loker
GitHub
TypeScript
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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
  1. Instale as dependências:
npm install
  1. Crie um arquivo .env na raiz do projeto com seu token do Figma:
FIGMA_TOKEN=seu_token_aqui PORT=3000
  1. 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

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by mockups and AI tools for interface reconstruction.

  1. About the project
    1. Main features
      1. Requirements
        1. Installation
          1. Use
            1. Start the server
            2. Usage examples
          2. Project structure
            1. Tests
              1. Documentation
                1. Conversion to TypeScript
                  1. License

                    Related MCP Servers

                    • Figma MCP Server

                      MatthewDailey
                      A
                      security
                      F
                      license
                      A
                      quality
                      Enables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.
                      Last updated -
                      5
                      469
                      198
                      • Apple

                    • Talk to Figma MCP

                      yhc984
                      A
                      security
                      F
                      license
                      A
                      quality
                      Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
                      Last updated -
                      38
                      5,664
                      2

                    • Figma MCP Server

                      1yhy
                      -
                      security
                      A
                      license
                      -
                      quality
                      A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
                      Last updated -
                      10
                      15
                      MIT License
                      • Linux
                      • Apple

                    • Figma MCP Server

                      rlagudals95
                      -
                      security
                      A
                      license
                      -
                      quality
                      Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
                      Last updated -
                      54,230
                      MIT License

                    View all related MCP servers

                    Appeared in Searches

                    New MCP Servers

                    MCP directory API

                    We provide all the information about MCP servers via our MCP API.

                    curl -X GET 'https://glama.ai/api/mcp/v1/servers/joao-loker/FigmaMind'

                    If you have feedback or need assistance with the MCP directory API, please join our Discord server