Do Figma ao Cursor: MCP Oficial, Configuração e o que Realmente Funciona na Prática

Introdução

Nesses dias eu precisava que o Cursor lesse um arquivo inteiro do Figma e construísse todas as telas exatamente como estavam no design — sem eu precisar ficar enviando prints de cada atributo, cor ou espaçamento. Eu queria que esse processo fosse automático: a IA lendo o Figma diretamente, com contexto real, e implementando isso no código. Foi por isso que decidi usar o MCP oficial da Figma dentro do Cursor. Neste artigo, explico como isso funciona, como configurei e o que de fato é usado na prática.

TL;DR

• O projeto não tem um MCP próprio. Não existe pasta src/mcp, pacote npm interno ou API que "leia Figma" por conta própria.
• O que existe é um arquivo .cursor/mcp.json apontando para o servidor MCP oficial da Figma.
• Existem dois servidores oficiais: remoto (HTTP + OAuth) e local (Figma Desktop + Dev Mode).
• Na prática, o remoto é o que funciona melhor na maioria dos casos — não depende do Figma Desktop aberto.
• O Agent do Cursor passa a enxergar ferramentas como get_design_context, get_screenshot, get_metadata, download_assets e get_variable_defs.

O ponto mais importante

Não existe MCP próprio neste projeto.

Não há pasta tipo src/mcp, nem pacote npm interno, nem API que "leia Figma". O que existe é um arquivo de configuração no Cursor apontando para o servidor da Figma.

Config do projeto: .cursor/mcp.json (raiz do repositório).

Config global do Cursor: C:\Users\<seu-usuario>\.cursor\mcp.json.

Servidor de verdade: MCP oficial da Figma. Código próprio de MCP: nenhum.

Quando o Agent precisa do Figma, o Cursor chama esse endpoint HTTP. No painel de MCPs ele costuma aparecer como figma / user-figma.

O cenário que levou à configuração

Já existia um frontend em Next.js rodando. O design novo veio pronto no Figma. Sem MCP, o Agent não conseguia ler frames, cores, tipografia ou assets com fidelidade — no máximo abria a página web publicada ou trabalhava a partir de um screenshot solto, o que gerava telas “parecidas”, nunca fiéis.

O objetivo era simples de enunciar e chato de fazer manualmente: a IA do Cursor deveria ler o arquivo do Figma com contexto real (nodes, inspeção, tokens de design, screenshots) e implementar isso diretamente no código já existente, sem eu precisar descrever cor por cor, espaçamento por espaçamento.

O que é o MCP (Model Context Protocol)

MCP (Model Context Protocol) é o padrão que o Cursor usa para conectar ferramentas externas ao Agent. Sem MCP, a IA só enxerga o que você cola na conversa. Com o MCP do Figma, ela ganha acesso a ferramentas como:

• get_design_context
• get_screenshot
• get_metadata
• download_assets
• get_variable_defs
• use_figma
• Code Connect e skills de design-to-code

Dois servidores oficiais da Figma (não confundir)

A Figma oferece dois caminhos para o MCP. Vale entender a diferença antes de configurar.

1. Remoto (o que acabei usando)

• Tipo: HTTP
• Autenticação: OAuth feito direto no Cursor (não grava token no mcp.json)
• Funciona mesmo com o Figma Desktop fechado, desde que a conta tenha acesso ao arquivo
• Conjunto mais amplo de ferramentas disponíveis
• É a opção que a própria Figma recomenda na maioria dos casos

2. Local (Desktop)

• Roda dentro do Figma Desktop
• Exige o Dev Mode ligado (Shift + D)
• No painel de inspeção: Enable desktop MCP server
• URL típica: http://127.0.0.1:3845/mcp
• Sem OAuth — depende do aplicativo estar aberto na máquina
• Exige seat Full ou Dev no plano da Figma

No começo, tentei o modo local. O endpoint 127.0.0.1:3845 não respondeu de primeira — Desktop fechado, Dev Mode desligado e o MCP local ainda não habilitado. Migrei para o remoto oficial, que resolveu de forma mais estável.

Onde fica a configuração no projeto

Arquivo na raiz do repositório do front-end: .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Isso só diz ao Cursor: “quando precisar de Figma, use este servidor HTTP”.

Existe a mesma entrada no MCP global da máquina: C:\Users\<seu-usuario>\.cursor\mcp.json

Nesse arquivo global, o figma convive com outros servidores MCP que eu já usava. A configuração do projeto vale só para aquele workspace; a global vale para qualquer pasta aberta no Cursor.

Como foi feito, na prática: só configuração

Não houve implementação de servidor nenhum. O fluxo foi este:

• Colei o link do Figma no chat — o Agent, sem MCP, não conseguia ler o arquivo.
• Criei o .cursor/mcp.json apontando para o Desktop (127.0.0.1:3845).
• Testei o endpoint local — falhou.
• Atualizei o JSON para o servidor remoto oficial, com "type": "http".
• No Cursor: Settings → MCP → Connect / OAuth na conta Figma.
• Status ficou verde — o Agent passou a enxergar as ferramentas.

Nenhum código próprio “constrói” o MCP. O código do servidor é da Figma. O que fica versionado é só a URL de conexão e a autenticação feita via OAuth.

Passo a passo para configurar o MCP da Figma no Cursor

Abaixo, o fluxo completo — do Desktop (opcional) até o link certo do frame no chat.

1. (Opcional) Figma Desktop + Dev Mode

Só necessário se for usar o MCP local:

• Baixe o app em figma.com/downloads.
• Faça login na conta com acesso ao arquivo.
• Abra o arquivo no Desktop.
• Ative o Dev Mode (Shift + D).
• No painel de inspeção, marque Enable desktop MCP server.
• Copie a URL exibida (geralmente http://127.0.0.1:3845/mcp).

2. Criar o mcp.json no projeto

Na raiz do repositório, crie .cursor/mcp.json.

Remoto (recomendado):

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Local (alternativa):

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Os dois podem coexistir no mesmo arquivo, com nomes diferentes.

3. Ativar no Cursor

• Salve o JSON e reinicie o Cursor.
• Vá em Settings → Cursor Settings → MCP.
• Ligue o toggle do figma.
• Clique em Connect → autorize via OAuth no navegador.
• Confira o status: deve aparecer ready / verde.
• No chat do Agent, teste com: "liste as ferramentas MCP do Figma".

Atalho opcional no chat: /add-plugin figma (plugin oficial com skills prontas).

4. Enviar o design certo

O “envio” do design é o link do frame em Dev Mode — não um PDF nem um export qualquer:

• O fileKey e o node-id vêm direto da URL do Figma.
• node-id=12-34 vira 12:34 quando usado pelas ferramentas do MCP.
• Prefira sempre o link do frame da tela específica, não só a página raiz (0-1).

Como o Agent usa isso depois de conectado

Uma ordem que funciona bem na prática:

• Validar se o MCP está autenticado e ativo.
• Ler o link e listar frames, cores e tipografia.
• Comparar com os tokens e componentes que já existem no repositório.
• Implementar uma tela por vez (por exemplo: home → autenticação → páginas internas).
• Reaproveitar o que o projeto já tem (styled-components, shells, tokens) — o output do Figma é referência de design, não código final para simplesmente colar.

Um exemplo real desse reaproveitamento: o arquivo do Figma às vezes só tinha os botões “Entrar” e “Criar conta” no cabeçalho, sem uma tela dedicada para login e cadastro. Nesses casos, as páginas foram montadas seguindo o mesmo padrão visual (tokens, raio de borda, gradiente), reaproveitando o shell de autenticação e os estilos já existentes — mesmo sem um frame específico desenhado no Figma para aquela tela.

Erros comuns ao configurar o MCP da Figma

• MCP não aparece: mcp.json no repositório errado ou Cursor não foi reiniciado. Se o arquivo não carrega, vale validar a sintaxe do JSON antes de reiniciar — um formatador de JSON online resolve isso em segundos.
• 127.0.0.1:3845 recusa conexão: Desktop fechado, Dev Mode desligado ou MCP local ainda não habilitado.
• Servidor aparece verde mas não lê o arquivo: a conta autenticada via OAuth não tem permissão de visualização no Figma.
• Link sem node-id: o Agent pede o link específico da seleção, não da página inteira.
• Código genérico demais: falta usar variables / Code Connect habilitado no Dev Mode.
• Firewall bloqueando localhost na porta 3845: só ocorre no modo desktop.
• Logs para depurar: no Cursor, vá em Output → MCP Logs.

Checklist rápido

Antes de pedir para o Agent implementar qualquer tela, confirme: mcp.json versionado, status ready no painel de MCP, OAuth feito com a conta certa, acesso real ao arquivo no Figma e o link do frame (com node-id) colado no chat.

Perguntas frequentes sobre MCP do Figma no Cursor

Preciso escrever um servidor MCP para conectar o Figma ao Cursor? Não. A Figma já disponibiliza um servidor MCP oficial, remoto ou local. Basta apontar o .cursor/mcp.json para ele e autenticar via OAuth.

Qual a diferença entre o MCP remoto e o local da Figma? O remoto roda via HTTP com OAuth e funciona mesmo com o Figma Desktop fechado. O local depende do Figma Desktop aberto, com Dev Mode ativo, e não usa OAuth.

Por que o Cursor não lê o arquivo mesmo com o MCP conectado? Geralmente porque a conta autenticada não tem acesso de visualização ao arquivo no Figma, ou porque o link enviado não contém um node-id válido.

O código gerado a partir do Figma já sai pronto para produção? Não deve ser tratado assim. O ideal é usar o MCP como referência de design (cores, tipografia, espaçamento, variáveis) e implementar reaproveitando os componentes e padrões que já existem no projeto.

Conclusão

“Ter MCP de Figma” aqui significa uma coisa bem específica: apontar o Cursor para o servidor oficial da Figma e autenticar. O servidor é da Figma — o que fica sob controle do time é só o mcp.json versionado e o uso do Agent com links corretos do Dev Mode. Nenhuma linha de código própria foi escrita para "ler" o Figma; toda a inteligência de leitura de design já vem pronta no protocolo.

Ferramentas rápidas tipo formatador de JSON, gerador de UUID e decodificador de JWT eu deixo salvas na Ontoom — uso no dia a dia.