cursor-talk-to-figma-mcp MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Ler seleção atual, árvores de nós e metadados do documento
Atualizações de texto em massa (scan_text_nodes + set_multiple_text_contents) para localização
Ferramentas de auto-layout e espaçamento (set_layout_mode, set_padding, set_axis_align)
Criar frames, retângulos e texto; instanciar componentes; definir overrides
Exportar qualquer nó como PNG/SVG para uso em outros lugares

Demo ao vivo

Como fica na prática

cursor-talk-to-figma.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "cursor-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "cursor-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "cursor-talk-to-figma-mcp"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: cursor-talk-to-figma-mcp

Como atualizar cada camada de texto em um documento Figma a partir de um prompt

👤 Designers + PMs executando revisões de copy ou localização ⏱ ~20 min intermediate

Quando usar: Você tem uma especificação que renomeia 50 strings e não quer clicar 50 vezes.

Pré-requisitos

Bun instalado — curl -fsSL https://bun.sh/install | bash
Desktop Figma aberto com o plugin vinculado — Plugins > Development > Link existing plugin > aponte para src/cursor_mcp_plugin/manifest.json
Ponte WebSocket em execução — bun run start no repo clonado

Fluxo

Junte-se ao canal do painel do plugin

Junte-se ao canal Figma X7F2 e liste todos os nós de texto na página atual.✓ Copiado

→ Lista de ids de nós com texto atual
Mapeie copy antiga para copy nova

Aqui está um CSV de old_string,new_string. Para cada nó de texto cujo conteúdo corresponde a um old_string, substitua pelo new_string usando set_multiple_text_contents.✓ Copiado

→ Contagem de atualizações aplicadas, visualização de diff
Verificação visual spot

Exporte os três frames que tiveram mais edições como PNGs para que eu possa revisar.✓ Copiado

→ URLs PNG / caminhos de arquivo

Resultado: Um arquivo revisado de copy com cada string atualizada e uma exportação antes/depois para comprová-lo.

Armadilhas

Plugin desconecta no meio da operação — set_multiple_text_contents é idempotente — execute novamente com o mesmo mapeamento; nós já corretos são pulados
Texto em componentes vs instâncias confunde atualizações — Use get_instance_overrides primeiro para ver quais instâncias sobrescrevem o texto base

Combine com: filesystem

Como anotar uma especificação Figma de um PRD em uma única shot

👤 Design-engineers emparelhando docs com mocks ⏱ ~25 min intermediate

Quando usar: Seu PRD tem 'o CTA deve dizer X, incluir Y tooltip copy' e você quer aqueles como anotações Figma.

Fluxo

Compartilhe o PRD

Aqui está o PRD [colar]. Extraia cada requisito de anotação de UI.✓ Copiado

→ Lista estruturada de {node_hint, annotation_text}
Mapeie dicas para nós reais

Use get_selection e scan_nodes_by_types para corresponder cada anotação a um id de nó concreto na página atual.✓ Copiado

→ Pares de node_id + anotação prontos
Aplique anotações

Aplique-os com set_multiple_annotations.✓ Copiado

→ Anotações visíveis na sobreposição do plugin

Resultado: Um arquivo Figma auto-documentado que engenheiros podem ler sem alternar abas.

Armadilhas

Claude corresponde ao nó errado quando vários compartilham um nome — Inclua nomes de frame pai como dicas de desambiguação

Combine com: notion · github

Como gerar variantes de componentes (modo escuro, tamanhos) programaticamente

👤 Times de design systems ⏱ ~20 min advanced

Quando usar: Você precisa clonar um botão base em 12 variantes e ajustar preenchimentos/traços.

Fluxo

Clone o nó base

Clone o frame Button/Primary 4 vezes e organize horizontalmente com intervalo de 16px.✓ Copiado

→ 4 novos nós no documento
Retingir preenchimentos/traços

Para cada clone, defina set_fill_color para as tonalidades 500, 600, 700, 800 de #3B82F6.✓ Copiado

→ Progressão de cor visível
Converter para variantes

Agrupe-os como um conjunto de componentes chamado 'Button / Intensity'.✓ Copiado

→ Novo conjunto de componentes aparece em ativos

Resultado: Um conjunto de variantes pronto para usar em seu design system.

Armadilhas

Tokens de cor diferem do hex bruto — Se seu sistema usa variáveis, use set_fill_color com o id da variável e não o hex bruto

Como exportar cada frame marcado como PNG para handoff de dev

👤 Design-engineers preparando um documento de handoff ⏱ ~10 min beginner

Quando usar: Antes de um sprint kickoff ou uma revisão do cliente.

Fluxo

Encontre frames com uma tag de handoff

Digitalize nós do tipo FRAME na página atual cujo nome começa com '[HANDOFF]'.✓ Copiado

→ Lista de frames alvo
Exporte em 2x

Exporte cada um como PNG em 2x e salve em /handoff/2026-04/.✓ Copiado

→ Caminhos de arquivo retornados

Resultado: Uma pasta de handoff com timestamp pronta para descarregar em Notion ou Linear.

Combine com: filesystem · notion

Combinações

Combine com outros MCPs para 10× de alavancagem

cursor-talk-to-figma + notion

Sincronizar anotações de design em uma página de especificação Notion para engenheiros

Extraia cada anotação na página Figma atual e espelhe-as no documento Notion 'Checkout Spec v3' como uma lista de verificação.✓ Copiado

cursor-talk-to-figma + filesystem

Exporte frames em uma pasta de handoff local com versão por data

Exporte cada frame [HANDOFF] para /design-handoff/2026-04/ como PNG 2x.✓ Copiado

cursor-talk-to-figma + github

Emparelhe uma mudança de design com uma referência de PR de código

Adicione uma anotação no botão CTA vinculando para PR #4421 no repositório frontend.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
get_document_info		Oriente-se em um novo arquivo	free
get_selection		Operar no que o usuário acabou de clicar	free
scan_text_nodes	root_id?: str	Antes de mudanças de copy em massa	free
set_multiple_text_contents	updates: {id, text}[]	Substituição de texto em lote	free
set_fill_color	id: str, color: {r,g,b,a}	Restilar um nó	free
set_layout_mode	id, mode: 'HORIZONTAL'\|'VERTICAL'\|'NONE'	Alternar auto-layout	free
create_component_instance	component_key: str, parent_id: str, position?: {x,y}	Solte um componente de biblioteca na tela	free
set_multiple_annotations	annotations: {id, text}[]	Anotações de especificação em lote	free
export_node_as_image	id: str, format: 'PNG'\|'SVG'\|'JPG', scale?: number	Handoff, revisões, visualizações inline	free
join_channel	channel: str	Primeira chamada após iniciar o plugin	free

Custo e limites

O que custa rodar

Cota de API: Figma não tem limite de taxa publicado para ações de plugin; o limite prático é a taxa de transferência WebSocket
Tokens por chamada: Informações de nó: 100-1500 tokens dependendo de filhos
Monetário: Gratuito (conta Figma necessária; plano gratuito funciona)
Dica: Sempre defina o escopo de verificações para um id de nó raiz específico; verificações em toda a página em arquivos grandes explodem o contexto.

Segurança

Permissões, segredos, alcance

Escopos mínimos: Plugin Figma em execução em aplicativo desktop/web; nenhum token de API necessário

Armazenamento de credenciais: Nenhum — plugin é executado em processo em Figma; MCP fala através do WebSocket localhost

Saída de dados: Os nós do documento Figma fluem do plugin para seu MCP local e depois para seu LLM escolhido. Designs sensíveis saem da sua máquina apenas através da chamada LLM.

Nunca conceda: Não exponha a porta WebSocket além de localhost

Edições em massa não são transacionais — falha parcial deixa estado misto. Commit versões Figma antes de grandes execuções.

Solução de problemas

Erros comuns e correções

O plugin não pode se conectar ao WebSocket

Certifique-se de que bun run start está ativo e o id do canal do plugin corresponde ao que o agente se juntou.

Verificar: bun --version && lsof -i :3055

set_multiple_text_contents atualiza apenas alguns nós

Nós dentro de camadas bloqueadas ou componentes são pulados. Desbloqueie ou destine ao override da instância.

Plugin Figma mostra 'manifest não encontrado'

Revinculne via Plugins > Development > Link existing plugin > escolha manifest.json de src/cursor_mcp_plugin/.

As exportações retornam URLs vazias

Alguns nós (grupos de máscara, certos efeitos) não podem renderizar do lado do servidor. Achate primeiro ou exporte como SVG.

Alternativas

cursor-talk-to-figma-mcp vs. outros

Alternativa	Quando usar	Troca
Official Figma Dev Mode MCP	Você tem assentos Figma Dev Mode pagos e quer suporte oficial	Somente leitura; sem edição em massa
Framelink Figma MCP	Você prefere um servidor baseado em REST-API somente leitura	Sem mutação, nenhum plugin WebSocket necessário, mas não pode editar

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills