Figma MCP no Claude Code: como levar o layout para o código sem mandar print

Fala aí, beleza? O design chegou pronto, o time de produto te marcou no card e agora é sua vez de transformar aquilo em componente

Aí vem o movimento clássico: print da tela, cola no chat, "faz igual a isso"

E o agente faz o que dá: ele OLHA a imagem e chuta

Chuta o espaçamento, chuta o hex da cor, chuta se aquele bloco é um flex com gap ou três divs empilhadas na sorte. O resultado fica parecido de longe e errado de perto, e você passa a tarde ajustando padding na mão

O servidor MCP da Figma existe pra matar esse palpite. Em vez de uma imagem achatada, o agente recebe dados estruturados vindos do próprio arquivo: nós, propriedades, hierarquia, e até o mapeamento pros componentes que já existem no seu código

Neste post tu vai ver qual das duas versões do servidor usar, como instalar o Figma MCP no Claude Code, a ordem certa de chamar as ferramentas de leitura e onde esse fluxo compensa de verdade

Bora? 🙂

Pré-inscrição Formação Claude Code

Domine o Claude Code do básico ao avançado

Você vai aprender a criar sistemas completos com Claude Code, sem precisar ser programador. Inscreva-se para ter acesso a um desconto de lançamento e bônus especiais!

Quero minha vaga

O que você precisa antes de começar

Nada de PC da Nasa aqui, a lista é curta:

• Claude Code instalado e funcionando no terminal
• Conta na Figma com permissão no arquivo que vai ser lido: o acesso do agente é herdado da sua conta, ou seja, ele só alcança o que você já pode ver ou editar
• O marketplace claude-plugins-official, que o próprio Claude Code adiciona automaticamente na primeira execução interativa. Os plugins são gerenciados pelo comando /plugin
• Para a versão desktop: o app desktop da Figma e um assento Dev ou Full em plano pago

Um detalhe que evita frustração logo na largada: o servidor remoto está disponível em todos os assentos e planos, então dá pra começar mesmo sem plano pago

Porém, se o teu assento é View ou Collab, o teto é de até 6 chamadas de ferramenta por mês

Seis. Isso dá pra provar o conceito num frame pequeno e olhe lá, não dá pra tocar um projeto

Servidor remoto ou desktop: qual dos dois usar

A Figma oferece duas versões do servidor MCP, e a diferença entre elas não é cosmética: muda COMO o contexto chega até o agente

Na prática, o remoto é o que a própria Figma aponta como a versão que a maioria dos usuários precisa, e é ele que carrega o conjunto mais amplo de ferramentas

O desktop tem um charme específico: você clica na camada, o agente entende o que está selecionado, sem colar URL nenhuma. É gostoso de usar quando você está com o arquivo aberto do lado

Se estiver em dúvida, comece pelo remoto

Como configurar o Figma MCP no Claude Code passo a passo

A forma recomendada pela Figma não é editar JSON na mão: é instalar o plugin oficial, que já vem com as configurações do servidor MCP e as Agent Skills para fluxos comuns

Se você conhece a lógica de instalar um pacote com NPM ou composer, é a mesma sensação: um comando e as coisas se conectam

1. Instale o plugin oficial da Figma no Claude Code:

claude plugin install figma@claude-plugins-official

O erro comum aqui é procurar um marketplace pra adicionar antes: o claude-plugins-official já é adicionado automaticamente pelo Claude Code na primeira execução interativa

2. Reinicie o Claude Code se ele estiver aberto

Esse é o passo que todo mundo pula e depois jura que a instalação falhou. Fecha e abre, beleza?

3. Digite /plugin e aperte Enter para abrir o marketplace de plugins

4. Navegue até a aba Installed com a seta para a direita

Erro comum deste passo: ficar procurando o servidor na primeira aba que aparece. Ele não está lá, ele está em Installed

5. Selecione o servidor figma e aperte Enter para abrir a página de autorização

É nessa hora que a tua conta Figma entra na história e o agente ganha acesso ao que você já enxerga no arquivo

O passo a passo oficial vive no artigo Claude Code and Figma: Set up the MCP server, no Help Center da Figma. Vale deixar aberto na aba do lado enquanto tu configura

E se eu quiser o servidor desktop?

Aí o caminho é outro, e ele acontece dentro do app, não no terminal:

1. Abra o app desktop da Figma
2. Vá no menu e entre em Preferences
3. Marque Enable local MCP server
4. Confira no Dev Mode se o servidor está no ar

Tome cuidado com dois pontos aqui

O primeiro: modo desktop em assento que não tem direito não vai funcionar, e a mensagem nem sempre é óbvia

O segundo, e esse pega MUITA gente: esperar que selecionar a camada resolva quando você está no servidor remoto. Remoto é baseado em link, ele não enxerga a tua seleção. Sem a URL do nó, ele não sabe o que avaliar

Do frame ao componente: a ordem certa de usar as ferramentas

Instalado e autorizado, começa a parte que interessa: extrair o design

A Figma recomenda uma sequência, e ela existe por um motivo bem prático, que é não estourar o contexto do agente com uma tela inteira de uma vez

1. Rode get_design_context nos nós exatos que você quer implementar

Essa ferramenta devolve uma representação estruturada em React mais Tailwind da seleção. Se o teu projeto é Vue, Svelte ou qualquer outra coisa, tudo bem: essa representação é o ponto de partida que o agente traduz para outro framework conforme o teu prompt

Erro comum deste passo: apontar a tela inteira. Mire o card, o header, o formulário. Um pedaço por vez

2. Se a resposta vier grande demais ou truncada, rode get_metadata

Ele devolve um XML esparso com os IDs de camada, nomes, tipos, posição e tamanhos. É o mapa de nós

Com o mapa na mão, você volta e refaz o get_design_context só nos nós que interessam

3. Use get_screenshot como referência visual da variante implementada

Ela devolve um PNG da seleção, com suporte a base64 inline, pro agente raciocinar visualmente

E olha que interessante: o print continua na jogada, mas o papel dele mudou completamente

Antes, a imagem era a FONTE da verdade e o agente adivinhava tudo a partir dela. Agora a estrutura vem dos dados e a imagem serve de conferência, tipo aquele olhar final pra ver se a variante certa foi implementada

É a diferença entre um dev que leu a especificação e um dev que olhou a tela de longe e foi no feeling

Onde esse fluxo realmente compensa

Nem todo projeto precisa disso no dia um. Mas tem três cenários em que ele muda o jogo

Manter o código alinhado ao design system:

Esse é o caso mais forte

A ferramenta get_code_connect_map retorna um objeto com o node ID como chave e os metadados do componente correspondente: nome no código, caminho de arquivo ou URL, e o snippet quando disponível

Traduzindo: em vez de o agente criar mais um botão do zero, ele descobre que aquele nó JÁ é o teu <Button /> e usa o teu

Quem segura essa ponte é o Code Connect, e a própria Figma indica que os servidores MCP funcionam melhor com ele configurado

Padronizar as convenções do projeto:

A ferramenta create_design_system_rules gera o prompt e o template base para criar um arquivo de regras do design system

Ela recebe as clientLanguages, que são as linguagens do teu projeto, e os clientFrameworks, tipo React, Vue, Svelte ou Angular

É um jeito de transformar aquele acordo tácito do time ("aqui a gente sempre faz assim") em regra escrita que o agente lê antes de sair codando

Se tu gosta desse papo de empacotar conhecimento em habilidades reutilizáveis, esse raciocínio é primo do que rola com as skills do Claude Code

Inclusive, a Figma mantém um repositório oficial com o guia e as skills do servidor, o figma/mcp-server-guide, com coisas como figma-create-design-system-rules, figma-generate-design e figma-generate-library

O caminho inverso, do código pra canvas:

Esse quase ninguém comenta e é bem massa

O servidor MCP da Figma não só lê: ele também escreve na canvas. Dá pra criar e atualizar frames, componentes, variáveis e auto layout nos arquivos do Figma a partir do cliente MCP

Ou seja, a via de mão dupla existe: o design vira código e o código consegue devolver estrutura pro arquivo de design

Limites, permissões e custo: o que pesar antes de adotar

Agora o papo reto, sem hype

Permissão é herdada, e isso é bom. O agente só acessa conteúdo do Figma que a tua conta tem permissão de visualizar ou editar. Não existe porta dos fundos pro arquivo do time que ninguém te liberou

O teto de assento é o maior filtro. Até 6 chamadas de ferramenta por mês em assentos View ou Collab é uma cota de demonstração, não de trabalho. E o servidor desktop exige assento Dev ou Full em plano pago

O preço de hoje não é o preço de amanhã. O servidor MCP está gratuito durante o beta, e a própria Figma sinaliza que ele vai virar um recurso pago baseado em uso

Quanto vai custar e como o consumo será medido, ninguém sabe ainda, e eu não vou chutar número aqui

Então, pra quem vale começar agora?

Se você tem assento Dev ou Full e um design system minimamente organizado, vale entrar hoje: o ganho de parar de reimplementar componente que já existe aparece na primeira semana

Se você está em assento View ou Collab, dá pra provar o conceito com aquelas poucas chamadas, mas planeje o upgrade antes de prometer o fluxo pro time

E se o que te trava é a conta no fim do mês, esse raciocínio de custo por ferramenta é o mesmo que eu usei ao comparar o custo de migrar do Cursor

Conclusão

A ideia central cabe em uma linha: o agente passa a LER o arquivo, não a imagem

Espaçamento, hierarquia, nome de camada e componente correspondente deixam de ser dedução visual e viram dado estruturado

O próximo passo é bem simples, e eu sugiro fazer hoje mesmo:

Instala o plugin oficial, autoriza o servidor remoto pelo /plugin e roda o teu primeiro get_design_context em um frame PEQUENO

Um card, um header, um input. Só isso

Quando você vir o componente sair com o token certo sem você ter digitado um hex sequer, aí sim tu ataca a tela inteira

Espero que tenha curtido, até o próximo post! 😀