Figma

Figma MCP Server

Um servidor ModelContextProtocol que permite que assistentes de IA interajam com arquivos do Figma. Este servidor fornece ferramentas para visualizar, comentar e analisar designs do Figma diretamente através do ModelContextProtocol.

Recursos

• Adicione um arquivo do Figma ao seu chat com o Claude fornecendo a URL
• Leia e poste comentários em arquivos do Figma

Configuração com Claude

Instalação via Smithery

Para instalar o Figma MCP Server para o Claude Desktop automaticamente via Smithery:

npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude

1. Baixe e instale o aplicativo de desktop do Claude em claude.ai/download

2. Obtenha uma chave de API do Figma (figma.com -> clique no seu nome no canto superior esquerdo -> configurações -> Segurança). Conceda os escopos File content e Comments.

3. Configure o Claude para usar o servidor MCP do Figma. Se este for o seu primeiro servidor MCP, execute o seguinte no terminal.

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

Se não for, copie o bloco figma-mcp para o seu claude_desktop_config.json

3. Reinicie o Claude Desktop.

4. Procure pelo ícone de martelo com o número de ferramentas disponíveis na interface do Claude para confirmar que o servidor está em execução.

Exemplo de uso

Inicie um novo chat com o Claude Desktop e cole o seguinte

What's in this figma file?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

Demonstração de um uso mais realista

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

Configuração de Desenvolvimento

Executando com Inspector

Para fins de desenvolvimento e depuração, você pode usar a ferramenta MCP Inspector. O Inspector fornece uma interface visual para testar e monitorar as interações do servidor MCP.

Visite a documentação do Inspector para instruções detalhadas de configuração e diretrizes de uso.

O comando para testar localmente com o Inspector é

npx @modelcontextprotocol/inspector npx figma-mcp

Desenvolvimento Local

1. Clone o repositório
2. Instale as dependências:

npm install

3. Compile o projeto:

npm run build

4. Para desenvolvimento com recompilação automática:

npm run watch

Ferramentas Disponíveis

O servidor fornece as seguintes ferramentas:

• add_figma_file: Adicione um arquivo do Figma ao seu contexto fornecendo sua URL
• view_node: Obtenha uma miniatura para um nó específico em um arquivo do Figma
• read_comments: Obtenha todos os comentários em um arquivo do Figma
• post_comment: Poste um comentário em um nó em um arquivo do Figma
• reply_to_comment: Responda a um comentário existente em um arquivo do Figma

Cada ferramenta é projetada para fornecer funcionalidade específica para interagir com arquivos do Figma através da interface ModelContextProtocol.