Cursor Talk to Figma MCP

Integra o Cursor AI com o Figma para ler e modificar designs programaticamente.

GitHub
7k
Experimente este MCPPatrocinado

Documentação

Talk to Figma MCP

Este projeto implementa uma integração Model Context Protocol (MCP) entre agentes de IA (Cursor, Claude Code) e o Figma, permitindo que o agente de IA se comunique com o Figma para ler designs e modificá-los programaticamente.

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

Estrutura do Projeto

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

Como usar

  1. Instale o Bun, caso ainda não tenha:
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. NOVO Instale o plugin do 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

Agradecemos a @dusskapark pela contribuição do recurso de substituição em massa de texto. Aqui está o vídeo de demonstração.

Propagação de Override de Instância Outra contribuição de @dusskapark Propague overrides de instância de componente de uma instância de origem para múltiplas instâncias de destino com um único comando. Esse recurso reduz drasticamente o trabalho repetitivo de design ao lidar com instâncias de componente 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 à configuração MCP do seu 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 do 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 Cursor MCP
  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

Configuração de Desenvolvimento Local

Para desenvolver, atualize sua configuração MCP para apontar para o seu diretório local.

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
    }
  }
}

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 múltiplos nós fornecendo um array de IDs de nós
  • set_focus - Definir foco em um nó específico selecionando-o e rolando a viewport até ele
  • set_selections - Definir seleção para múltiplos nós e rolar a viewport para exibi-los

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 em lote múltiplas anotações de forma eficiente
  • 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

Criação de 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_section - Criar uma seção para agrupar conteúdo relacionado no canvas
  • create_text - Criar um novo nó de texto com propriedades de fonte personalizáveis

Modificação de Conteúdo de Texto

  • scan_text_nodes - Escanear nós de texto com chunking inteligente para designs grandes
  • set_text_content - Definir o conteúdo de texto de um único nó de texto
  • set_multiple_text_contents - Atualizar em lote múltiplos nós de texto de forma eficiente

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 padding para um frame com auto-layout (superior, direito, inferior, esquerdo)
  • set_axis_align - Definir alinhamento primário e de eixo contrário para frames com auto-layout
  • set_layout_sizing - Definir modos de dimensionamento horizontal e vertical para frames com auto-layout (FIXED, HUG, FILL)
  • set_item_spacing - Definir a distância entre filhos em um frame com 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 traço de um nó
  • set_corner_radius - Definir o raio dos cantos de um nó com controle opcional por canto
  • set_image_fill - Preencher um nó com uma imagem de um caminho de arquivo local, URL ou dados base64 (FILL, FIT, CROP ou TILE)

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 múltiplos nós de uma vez de forma eficiente
  • clone_node - Criar uma cópia de um nó existente com deslocamento de posição opcional
  • rename_node - Renomear um nó
  • set_parent - Mover um nó para um novo pai (seção, frame ou grupo), preservando sua posição absoluta por padrão

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 override de uma instância de componente selecionada
  • set_instance_overrides - Aplicar overrides extraídos a 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 para 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 complexas de design:

  • 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 overrides entre instâncias de componente 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

Compilando o Plugin do Figma

  1. Navegue até o diretório do plugin do 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 componente quando possível para consistência
  7. Trate erros adequadamente, pois todos os comandos podem lançar exceções
  8. Para designs grandes:
    • Use parâmetros de chunking em scan_text_nodes
    • Monitore o progresso por meio de atualizações do WebSocket
    • Implemente tratamento de erros apropriado
  9. Para operações de texto:
    • Use operações em lote quando possível
    • Considere relações estruturais
    • Verifique 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 marcadores com seus elementos de destino usando caminho, nome ou proximidade
    • Categorize anotações adequadamente com get_annotations
    • Crie anotações nativas com set_multiple_annotations em lotes
    • Verifique se todas as anotações estão corretamente vinculadas aos seus alvos
    • Exclua nós de anotação legados após a conversão bem-sucedida
  11. Visualize "macarrões" 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