Figma MCP Server

Conecta-se à API do Figma, permitindo que ferramentas de IA acessem e interajam com seus designs no Figma.

Documentação

Servidor MCP do Figma

Um servidor Model Context Protocol (MCP) que se conecta à API do Figma, permitindo que ferramentas de IA e LLMs acessem e trabalhem com seus designs do Figma.

Recursos

Extração de Dados de Design: Extraia componentes, estilos e textos dos seus designs do Figma
Análise do Sistema de Design: Analise a consistência e os padrões do sistema de design
Gerenciamento de Conteúdo de UI: Extraia e organize todo o texto de interface dos designs
Entrega para Desenvolvimento: Gere documentação abrangente para desenvolvedores
Integração Perfeita com IA: Conecte seus designs a ferramentas de IA como Claude, Cursor e outros clientes compatíveis com MCP

Começando

Pré-requisitos

Node.js 16 ou superior
Token de Acesso Pessoal do Figma (Obtenha nas configurações da sua conta do Figma)

Instalação

Clone o repositório:

git clone https://github.com/yourusername/figma-mcp-server.git
cd figma-mcp-server

Instale as dependências:
```
npm install
```

Crie um arquivo .env na raiz do projeto:

FIGMA_API_TOKEN=your_figma_personal_access_token
API_KEY=your_secure_api_key
TRANSPORT_TYPE=stdio

Compile o servidor:
```
npm run build
```
Inicie o servidor:
```
npm start
```

Conectando a Clientes

Claude para Desktop

Abra ou crie o arquivo de configuração do Claude para Desktop:
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

Adicione a seguinte configuração:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
      "env": {
        "FIGMA_API_TOKEN": "your_figma_personal_access_token",
        "TRANSPORT_TYPE": "stdio"
      }
    }
  }
}

Reinicie o Claude para Desktop

Cursor

Configuração Global

Crie ou edite o arquivo de configuração MCP do Cursor:

macOS: ~/Library/Application Support/Cursor/mcp.json
Windows: %APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

Configuração Específica do Projeto

Crie um diretório .cursor na raiz do seu projeto:
```
mkdir -p .cursor
```

Crie um arquivo mcp.json dentro desse diretório:

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

Ferramentas Disponíveis

Ferramenta	Descrição
`get-file-info`	Obtenha informações básicas sobre um arquivo do Figma
`get-nodes`	Obtenha nós específicos de um arquivo do Figma
`get-components`	Obtenha informações de componentes de um arquivo do Figma
`get-styles`	Obtenha informações de estilos de um arquivo do Figma
`get-comments`	Obtenha comentários de um arquivo do Figma
`search-file`	Pesquise elementos em um arquivo do Figma por tipo, nome, etc.
`extract-text`	Extraia todos os elementos de texto de um arquivo do Figma

Prompts Disponíveis

analyze-design-system - Analise componentes e estilos do sistema de design para consistência
extract-ui-copy - Extraia e organize todo o texto de interface dos designs
generate-dev-handoff - Gere documentação de entrega para desenvolvimento com base nos designs

Exemplos de Uso

Usando com Claude:

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

Usando com Cursor:

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.

Variáveis de Ambiente

Variável	Descrição	Padrão
`FIGMA_API_TOKEN`	Seu Token de Acesso Pessoal do Figma	(Obrigatório)
`API_KEY`	Chave de segurança para autenticação da API	(Obrigatório)
`TRANSPORT_TYPE`	Método de transporte (`stdio` ou `sse`)	`stdio`
`PORT`	Porta para transporte SSE	`3000`

Arquitetura

Este servidor MCP:

Conecta-se à API do Figma usando seu token de acesso pessoal
Expõe uma interface padronizada seguindo o Model Context Protocol
Fornece ferramentas, recursos e prompts que LLMs podem usar para interagir com seus designs do Figma
Suporta transporte stdio (conexões locais) e transporte SSE (conexões remotas)

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para enviar um Pull Request.