Talk to Figma MCP

Um servidor para integração com o Figma, permitindo que você interaja com seus arquivos de design.

GitHubExperimente este MCPPatrocinado

Documentação

Talk to Figma MCP

Como usar

1. Instalação do Bun

2. Registro do MCP

2.1 Executar a partir do repositório usando bun

"TalkToFigma": {
      "command": "bunx",
      "args": ["hyun1202/talk-to-figma-mcp#dist"]
}

2.2 Execução direta

Como não está registrado no repositório npm, você precisa configurá-lo para realmente executar o projeto.

Baseado no Windows

"TalkToFigma": {
    "command": "cmd", 
    "args": ["/c", "npm", "--silent", "-C", "C:/cursor-talk-to-figma-mcp", "start"]
}

Modificações

  • Modificado para permitir a criação de componentes locais
  • Modificado para que, ao criar um componente, ele possa ser criado no elemento pai

Original

Cursor Talk to Figma MCP

Estrutura do Projeto

  • src/talk_to_figma_mcp/ - Servidor MCP TypeScript para integração com Figma
  • src/cursor_mcp_plugin/ - Plugin Figma para comunicação com o Cursor
  • src/socket.ts - Servidor WebSocket que facilita a comunicação entre o servidor MCP e o plugin Figma

Começando

  1. Instale o Bun se ainda não o fez:
curl -fsSL https://bun.sh/install | bash
  1. Execute a configuração, isso também instalará o MCP no projeto ativo do seu Cursor
bun setup
  1. Inicie o servidor WebSocket
bun socket
  1. Servidor MCP
bunx cursor-talk-to-figma-mcp
  1. NOVO Instale o plugin Figma pela página da comunidade Figma ou instale localmente

Tutorial em Vídeo Rápido

Link do Vídeo

Exemplo de Automação de Design

Substituição em massa de conteúdo de texto

Agradecimentos a @dusskapark por contribuir com o recurso de substituição em massa de texto. Aqui está o vídeo de demonstração.

Propagação de Substituições de Instância Outra contribuição de @dusskapark Propague substituições de instâncias de componentes de uma instância de origem para várias instâncias de destino com um único comando. Esse recurso reduz drasticamente o trabalho repetitivo de design ao trabalhar com instâncias de componentes que precisam de personalizações semelhantes. Confira nosso vídeo de demonstração.

Configuração e Instalação Manual

Servidor MCP: Integração com o Cursor

Adicione o servidor à sua configuração MCP do Cursor em ~/.cursor/mcp.json:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Servidor WebSocket

Inicie o servidor WebSocket:

bun socket

Plugin Figma

  1. No Figma, vá em Plugins > Desenvolvimento > Novo Plugin
  2. Escolha "Vincular plugin existente"
  3. Selecione o arquivo src/cursor_mcp_plugin/manifest.json
  4. O plugin agora deve estar disponível nos seus plugins de desenvolvimento do Figma

Guia para Windows + WSL

  1. Instale o bun via PowerShell
powershell -c "irm bun.sh/install.ps1|iex"
  1. Remova o comentário do hostname 0.0.0.0 em src/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
  1. Inicie o websocket
bun socket

Uso

  1. Inicie o servidor WebSocket
  2. Instale o servidor MCP no Cursor
  3. Abra o Figma e execute o Plugin MCP do Cursor
  4. Conecte o plugin ao servidor WebSocket entrando em um canal usando join_channel
  5. Use o Cursor para se comunicar com o Figma usando as ferramentas MCP

Ferramentas MCP

O servidor MCP fornece as seguintes ferramentas para interagir com o Figma:

Documento e Seleção

  • get_document_info - Obter informações sobre o documento Figma atual
  • get_selection - Obter informações sobre a seleção atual
  • read_my_design - Obter informações detalhadas do nó sobre a seleção atual sem parâmetros
  • get_node_info - Obter informações detalhadas sobre um nó específico
  • get_nodes_info - Obter informações detalhadas sobre vários nós fornecendo uma matriz de IDs de nós

Anotações

  • get_annotations - Obter todas as anotações no documento atual ou em um nó específico
  • set_annotation - Criar ou atualizar uma anotação com suporte a markdown
  • set_multiple_annotations - Criar/atualizar várias anotações em lote com eficiência
  • scan_nodes_by_types - Escanear nós com tipos específicos (útil para encontrar alvos de anotação)

Prototipagem e Conexões

  • get_reactions - Obter todas as reações de protótipo dos nós com animação de destaque visual
  • set_default_connector - Definir um conector FigJam copiado como o estilo de conector padrão para criar conexões (deve ser definido antes de criar conexões)
  • create_connections - Criar linhas de conector FigJam entre nós, com base em fluxos de protótipo ou mapeamento personalizado

Criando Elementos

  • create_rectangle - Criar um novo retângulo com posição, tamanho e nome opcional
  • create_frame - Criar um novo frame com posição, tamanho e nome opcional
  • create_text - Criar um novo nó de texto com propriedades de fonte personalizáveis

Modificando conteúdo de texto

  • scan_text_nodes - Escanear nós de texto com divisão inteligente para designs grandes
  • set_text_content - Definir o conteúdo de texto de um único nó de texto
  • set_multiple_text_contents - Atualizar vários nós de texto em lote com eficiência

Auto Layout e Espaçamento

  • set_layout_mode - Definir o modo de layout e o comportamento de quebra de um frame (NONE, HORIZONTAL, VERTICAL)
  • set_padding - Definir valores de preenchimento para um frame de auto layout (superior, direito, inferior, esquerdo)
  • set_axis_align - Definir o alinhamento do eixo principal e do eixo secundário para frames de auto layout
  • set_layout_sizing - Definir modos de dimensionamento horizontal e vertical para frames de auto layout (FIXED, HUG, FILL)
  • set_item_spacing - Definir a distância entre filhos em um frame de auto layout

Estilização

  • set_fill_color - Definir a cor de preenchimento de um nó (RGBA)
  • set_stroke_color - Definir a cor e a espessura do contorno de um nó
  • set_corner_radius - Definir o raio dos cantos de um nó com controle opcional por canto

Layout e Organização

  • move_node - Mover um nó para uma nova posição
  • resize_node - Redimensionar um nó com novas dimensões
  • delete_node - Excluir um nó
  • delete_multiple_nodes - Excluir vários nós de uma vez com eficiência
  • clone_node - Criar uma cópia de um nó existente com deslocamento de posição opcional

Componentes e Estilos

  • get_styles - Obter informações sobre estilos locais
  • get_local_components - Obter informações sobre componentes locais
  • create_component_instance - Criar uma instância de um componente
  • get_instance_overrides - Extrair propriedades de substituição de uma instância de componente selecionada
  • set_instance_overrides - Aplicar substituições extraídas às instâncias de destino

Exportação e Avançado

  • export_node_as_image - Exportar um nó como imagem (PNG, JPG, SVG ou PDF) - suporte limitado em imagem, atualmente retornando base64 como texto

Gerenciamento de Conexão

  • join_channel - Entrar em um canal específico para se comunicar com o Figma

Prompts MCP

O servidor MCP inclui vários prompts auxiliares para guiá-lo em tarefas de design complexas:

  • design_strategy - Melhores práticas para trabalhar com designs do Figma
  • read_design_strategy - Melhores práticas para ler designs do Figma
  • text_replacement_strategy - Abordagem sistemática para substituir texto em designs do Figma
  • annotation_conversion_strategy - Estratégia para converter anotações manuais em anotações nativas do Figma
  • swap_overrides_instances - Estratégia para transferir substituições entre instâncias de componentes no Figma
  • reaction_to_connector_strategy - Estratégia para converter reações de protótipo do Figma em linhas de conector usando a saída de 'get_reactions' e orientando o uso de 'create_connections' em sequência

Desenvolvimento

Construindo o Plugin Figma

  1. Navegue até o diretório do plugin Figma: 
    cd src/cursor_mcp_plugin
  2. Edite code.js e ui.html

Melhores Práticas

Ao trabalhar com o Figma MCP:

  1. Sempre entre em um canal antes de enviar comandos
  2. Obtenha a visão geral do documento usando get_document_info primeiro
  3. Verifique a seleção atual com get_selection antes de modificações
  4. Use ferramentas de criação apropriadas com base nas necessidades:
    • create_frame para contêineres
      • create_rectangle para formas básicas
      • create_text para elementos de texto
  5. Verifique as alterações usando get_node_info
  6. Use instâncias de componentes quando possível para consistência
  7. Trate os erros adequadamente, pois todos os comandos podem lançar exceções
  8. Para designs grandes:
    • Use parâmetros de divisão em scan_text_nodes
      • Monitore o progresso por meio de atualizações do WebSocket
      • Implemente o tratamento de erros adequado
  9. Para operações de texto:
    • Use operações em lote quando possível
      • Considere relações estruturais
      • Verifique as alterações com exportações direcionadas
  10. Para converter anotações legadas:
    • Escaneie nós de texto para identificar marcadores numerados e descrições
      • Use scan_nodes_by_types para encontrar elementos de UI aos quais as anotações se referem
      • Corresponda os marcadores aos seus elementos de destino usando caminho, nome ou proximidade
      • Categorize as anotações adequadamente com get_annotations
      • Crie anotações nativas com set_multiple_annotations em lotes
      • Verifique se todas as anotações estão devidamente vinculadas aos seus alvos
      • Exclua nós de anotação legados após a conversão bem-sucedida
  11. Visualize os "noodles" de protótipo como conectores FigJam:
  • Use get_reactions para extrair fluxos de protótipo,
  • defina um conector padrão com set_default_connector,
  • e gere linhas de conector com create_connections para um mapeamento visual claro do fluxo.

Licença

MIT