Figma

Servidor MCP do Figma

Servidor MCP para interagir com a API do Figma. Este servidor fornece um conjunto completo de métodos da API do Figma por meio do Model Context Protocol. Às vezes, em arquivos Figma grandes, pode ser necessário instruí-lo a usar depth = 1 para figma_get_file e depois aumentar quando precisar de mais.

Ferramentas

Este servidor implementa todos os métodos da API do Figma como ferramentas MCP:

Métodos de Usuário

1. figma_get_me - Obter o usuário atual

Métodos de Arquivo

2. figma_get_file - Obter um arquivo Figma pela chave
3. figma_get_file_nodes - Obter nós específicos de um arquivo Figma
4. figma_get_images - Renderizar imagens de um arquivo Figma
5. figma_get_image_fills - Obter preenchimentos de imagem em um arquivo Figma
6. figma_get_file_versions - Obter histórico de versões de um arquivo Figma

Métodos de Comentários

7. figma_get_comments - Obter comentários em um arquivo Figma
8. figma_post_comment - Adicionar um comentário a um arquivo Figma
9. figma_delete_comment - Excluir um comentário de um arquivo Figma
10. figma_get_comment_reactions - Obter reações de um comentário
11. figma_post_comment_reaction - Adicionar uma reação a um comentário
12. figma_delete_comment_reaction - Excluir uma reação de um comentário

Métodos de Equipe e Projeto

13. figma_get_team_projects - Obter projetos em uma equipe
14. figma_get_project_files - Obter arquivos em um projeto

Métodos de Componentes

15. figma_get_team_components - Obter componentes em uma equipe
16. figma_get_file_components - Obter componentes em um arquivo
17. figma_get_component - Obter um componente pela chave
18. figma_get_team_component_sets - Obter conjuntos de componentes em uma equipe
19. figma_get_file_component_sets - Obter conjuntos de componentes em um arquivo
20. figma_get_component_set - Obter um conjunto de componentes pela chave

Métodos de Estilos

21. figma_get_team_styles - Obter estilos em uma equipe
22. figma_get_file_styles - Obter estilos em um arquivo
23. figma_get_style - Obter um estilo pela chave

Métodos de Webhook (API V2)

24. figma_post_webhook - Criar um webhook
25. figma_get_webhook - Obter um webhook por ID
26. figma_update_webhook - Atualizar um webhook
27. figma_delete_webhook - Excluir um webhook
28. figma_get_team_webhooks - Obter webhooks de uma equipe

Métodos de Análise de Biblioteca

29. figma_get_library_analytics_component_usages - Obter dados de uso de componentes da análise de biblioteca
30. figma_get_library_analytics_style_usages - Obter dados de uso de estilos da análise de biblioteca
31. figma_get_library_analytics_variable_usages - Obter dados de uso de variáveis da análise de biblioteca

Instalação

Instalando via Smithery

Para instalar o mcp-figma para Claude Desktop automaticamente via Smithery:

npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude

Pré-requisitos

• Node.js (v16 ou posterior)
• npm ou yarn

Instalando o pacote

# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Install dependencies
npm install

# Build the package
npm run build

Configuração

Para usar este servidor MCP, você precisa configurar seu token da API do Figma. Você pode fazer isso de uma das três maneiras:

1. Variável de Ambiente

Crie um arquivo .env na raiz do projeto ou defina a variável de ambiente diretamente:

FIGMA_API_KEY=your_figma_api_key

2. Argumentos de Linha de Comando

Ao iniciar o servidor, você pode passar seu token da API do Figma como um argumento de linha de comando:

# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN

Uso com Claude Desktop

Adicione o seguinte ao seu claude_desktop_config.json:

Usando npx

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@thirdstrandstudio/mcp-figma", "--figma-token", "your_figma_api_key"]
    }
  }
}

Node.js direto (com variável de ambiente)

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js"],  
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key"
      }
    }
  }
}

Node.js direto (com argumento de linha de comando)

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js", "--figma-token", "your_figma_api_key"]
    }
  }
}

Substitua /path/to/mcp-figma pelo caminho real do seu repositório.

Exemplos

Obter um Arquivo Figma

// Get a Figma file
const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123"
});

Obter Comentários de um Arquivo

// Get comments from a file
const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

Criar um Webhook

// Create a webhook
const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

Desenvolvimento

# Install dependencies
npm install

# Start the server in development mode
npm start

# Build the server
npm run build

# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN

Licença

Este servidor MCP é licenciado sob a Licença MIT. Isso significa que você é livre para usar, modificar e distribuir o software, sujeito aos termos e condições da Licença MIT. Para mais detalhes, consulte o arquivo LICENSE no repositório do projeto.