Figma MCP no Claude Code vale a pena? O que ele entrega e o que continua sendo trabalho manual

Fala aí, beleza? Instalar o Figma MCP esperando apertar um botão e receber a tela pronta é o caminho mais curto pra decepção

A própria Figma fala isso com todas as letras: o MCP não é uma ferramenta de um clique pra gerar código perfeito

O que o servidor faz é enviar contexto estruturado do design (frames, componentes, layout, tokens, variáveis) e quem gera o código final é o agente, adaptando layouts e reaproveitando componentes conforme o prompt e o teu codebase

Ou seja: no caminho do design pro código, o MCP resolve o TRANSPORTE do contexto, não a entrega do código final (ele também tem escrita no canvas, mas aí é o outro sentido da ponte, já já a gente chega lá)

Se tu instalou, rodou, olhou o resultado e pensou "só isso?", esse post é pra ti

Bora separar as duas pilhas: o que o agente realmente extrai do arquivo e o que continua sendo decisão humana (responsivo, estados, tokens, nome de componente)

O que o Figma MCP entrega e o que continua trabalho manual

A tabela abaixo é o resumo honesto da divisão de trabalho, direto do que está na documentação do servidor MCP da Figma

Repara no padrão: quase tudo na coluna da esquerda é leitura e transporte de contexto

A única linha que foge é a escrita no canvas, e olha que ela entrega dentro do FIGMA, não no teu código

Tudo que está na direita é decisão de produto e de front-end, e decisão continua sendo tua

Como colocar o Figma MCP para rodar no Claude Code

A Figma indica o servidor remoto como a versão recomendada e com o conjunto mais amplo de recursos

O caminho mais direto pro Claude Code é o plugin oficial, que já traz as configurações do servidor MCP e Agent Skills pra fluxos comuns

1. Instale o plugin oficial no terminal:

claude plugin install figma@claude-plugins-official

O erro comum deste passo: se o comando falhar, a causa provável é a organização ter bloqueado a instalação de plugins (todos ou o da Figma). Nesse caso não adianta insistir no comando, o papo é com os administradores do Claude

2. Reinicie o Claude Code depois da instalação

3. Rode /plugin, vá na aba Installed e autorize a sua conta Figma

4. Se preferir a alternativa local, use o app desktop: na seção MCP server do painel de inspeção, ligue o Enable desktop MCP server. Ele roda localmente no endpoint http://127.0.0.1:3845/mcp

5. Aí registre esse servidor no Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

6. Com o servidor de pé, siga o fluxo que a própria Figma recomenda: get_design_context primeiro. Se a resposta vier grande demais ou truncada, chame get_metadata pra pegar o mapa de nós e rebusque só os nós que interessam. Depois get_screenshot pra referência visual e só ENTÃO manda implementar

Esse último passo parece detalhe, mas é ele que separa quem usa a ferramenta de quem só joga o link da tela e reza 🙂

O agente entrega uma tela que quebra no mobile e ignora hover e estados

O sintoma:

O markup até que sai parecido no desktop

Aí você diminui a janela e tudo estoura: largura fixa, nenhum breakpoint, navegação que não colapsa

E nada de hover, foco, estado de carregando, estado vazio, aquele bloco que só aparece quando o usuário fez X

A causa:

Frame estático não carrega comportamento

A Figma é explícita nisso: a IA não consegue inferir interação a partir de frames estáticos, porque comportamento simplesmente não existe no node tree

Se a diferença entre mobile e desktop só existe na tua cabeça, ela não vai existir no contexto que o MCP manda

Como resolver:

A orientação da própria Figma é resolver isso no ARQUIVO, não no código depois

• Crie frames para diferentes breakpoints, tornando explícitas as diferenças visuais (por exemplo, a navegação que colapsa num ícone de menu)
• Aplique auto layout em listas verticais, linhas horizontais e grids
• Escreva anotações no arquivo quando o design tem elementos interativos (clique, hover) e estados condicionais

Como prevenir:

Tratar responsivo e estado como parte do design, não como conserto no código

Cada estado que tu não anotou vira uma rodada de prompt depois, e essa rodada custa mais caro que a anotação

O código sai com nomes genéricos e não reaproveita os componentes do repositório

O sintoma:

Um mar de div sem semântica

Valor solto de padding e de cor no lugar do token que o projeto já tem

E o pior: um botão novinho em folha, do zero, quando o repo já tinha um componente de botão testado e aprovado

A causa:

Três buracos, geralmente juntos

Camadas com nome padrão do tipo Frame1268 ou Group5, que não dizem nada pro agente

Ausência de variáveis no arquivo, então não tem token nenhum pra ele puxar

E nenhuma ponte entre o que está no design e o que já existe no repositório

Como resolver:

• Use nomes semânticos de camada no lugar dos nomes padrão: CardContainer, ProductImage, CTA_Button
• Aplique variáveis para espaçamento, cor, raio e tipografia, que são a base pro agente acertar o código
• Rode o prompt create_design_system_rules, que o servidor MCP oferece pra gerar um arquivo de regras com o contexto do design system e da stack
• Se o teu plano permite, use Code Connect pra mapear o componente do Figma no componente real do repo. Esse mapeamento passa a fluir nas respostas do servidor MCP, então o agente para de reinventar o que já existe

Como prevenir:

Registrar as regras do design system ANTES de pedir a primeira tela

É chato? É. Mas é a diferença entre revisar um rascunho e reescrever tudo

Erro de resposta que excede o máximo de tokens no get_design_context

O sintoma:

Você seleciona a tela inteira, chama o get_design_context e o retorno morre com erro de resposta excedendo o máximo de tokens permitido

Não é bug exótico, não: a documentação da Figma lista isso como problema conhecido no Claude Code

A causa:

O volume do contexto do design bate no teto de saída de ferramentas MCP

No Claude Code esse teto é a variável de ambiente MAX_MCP_OUTPUT_TOKENS, com padrão de 25.000 tokens, aplicada às ferramentas que não declaram limite próprio

Tela grande com muito nó gera muito contexto, e o contexto não cabe

Como resolver:

A orientação da Figma é aumentar o limite pela variável MAX_MCP_OUTPUT_TOKENS

E quando a resposta vier grande ou truncada, cair no plano B do fluxo: chamar get_metadata pra pegar o mapa de nós e rebuscar só os nós necessários

Como prevenir:

Pedir seleções menores

Um card, uma seção, um header

Tela inteira de uma vez é justamente o pedido que estoura o limite e que devolve o código mais genérico

Limites por plano: quantas chamadas você tem e quem acessa o Code Connect

Esse é o pedaço que decide se o fluxo é viável no teu dia a dia ou se vira demo bonita e nada mais

Seats Dev e Full em planos pagos também têm limites por minuto equivalentes ao Tier 1 da REST API da Figma

Sobre o Professional com seat Full ou Dev: a documentação de rate limits que consultei não fecha um número diário, então não vou chutar valor aqui

A leitura honesta da primeira linha: 6 chamadas por MÊS acabam antes de qualquer avaliação séria

Só o fluxo recomendado (get_design_context, get_metadata, refetch, get_screenshot) já come metade da cota numa tela só

E o Code Connect, que é justamente o que faz o agente reaproveitar teus componentes, só existe em Organization e Enterprise, com seat Full ou Dev

Quando o Figma MCP compensa e quando é mais rápido codar na mão

Compensa quando:

• A tela foi montada com auto layout, variáveis aplicadas e nomes semânticos de camada. Aí o contexto que chega no agente é rico de verdade
• Existe design system com Code Connect mapeando componente do Figma pro componente do repo
• Você já traduziu uma tela do padrão na mão e quer replicar telas parecidas em cima daquele padrão
• Você quer o caminho de escrita: o servidor também escreve no canvas, criando e editando frames, componentes, variáveis e auto layout a partir do cliente MCP. Esse uso é bem menos comentado e é dos mais interessantes

Rende pouco quando:

• O arquivo está bagunçado, cheio de Group5 e valor solto
• É protótipo sem breakpoint nenhum desenhado
• A tela é recheada de estado condicional que ninguém anotou
• A stack do projeto é distante do React + Tailwind da saída padrão, então cada resposta exige uma camada extra de tradução

Um parênteses pra quem chegou aqui sem background de front: dá pra resolver bastante coisa sem programar com esses agentes, mas transformar Figma bagunçado em interface de produto não é um desses casos

Veredito: ponto de partida forte, entrega final não

O Figma MCP no Claude Code resolve muito bem duas coisas: levar o contexto estruturado do design até o agente e produzir a primeira versão do markup

O que continua humano é o time todo do que dá trabalho de verdade

Decidir responsivo, definir estados e interações, traduzir pra stack real do projeto, reaproveitar componente que já existe

Quem senta esperando tela pronta se frustra na primeira resposta

Quem trata o retorno como rascunho de qualidade ganha tempo real, principalmente em telas repetidas

Vale a mesma régua de qualquer ferramenta de IA: saber onde a resposta falha rende mais que confiar cego no primeiro output

Pra quem vale hoje: time com design system organizado, arquivo bem nomeado, variáveis aplicadas e plano pago com seat Full ou Dev

Pra quem não vale agora: quem está no Starter (6 chamadas por mês não dão nem pra testar direito) e quem tem arquivo bagunçado, porque nesse caso o gargalo não é o agente, é o Figma

Conclusão

Se o resultado veio fraco, o próximo passo não é trocar de modelo nem caçar prompt milagroso

É arrumar o arquivo antes de culpar o agente: nomes semânticos de camada, variáveis de espaçamento, cor, raio e tipografia, frames por breakpoint e anotação nos elementos interativos e estados condicionais

Depois disso, rode o create_design_system_rules pra gerar o arquivo de regras com o contexto do teu design system e da tua stack

E tem o caminho inverso, que é bem massa: em 17 de fevereiro de 2026, Figma e Anthropic anunciaram o Code to Canvas, que captura uma interface real rodando no navegador (produção, staging ou localhost) e converte em frames editáveis no canvas do Figma, não em imagem achatada

Design virando código de um lado, código virando design do outro

A ponte está ficando boa, mas quem decide o que atravessa continua sendo você…

Até o próximo post! 😀