Se você já tentou recriar uma interface no código descrevendo cada detalhe manualmente, sabe onde o processo costuma falhar: espaçamento, hierarquia, componentes e estados visuais se perdem no caminho. O Figma MCP resolve parte desse problema ao entregar ao Claude Code contexto estruturado do design.
A integração oficial do Figma suporta Claude Code e oferece servidor remoto e desktop. Em fevereiro de 2026, o Figma também anunciou fluxos de ida e volta: além de levar contexto do Figma para o Claude Code, é possível levar interfaces que começam em código para o Figma como camadas editáveis em cenários compatíveis.
O que é Figma MCP no Claude Code?
MCP significa Model Context Protocol. Em vez de tratar o Figma como uma imagem anexada, o servidor MCP expõe informações e ferramentas de forma estruturada para o cliente de IA. No Claude Code, isso permite consultar contexto de design, componentes, variáveis, layout e recursos do arquivo.
O catálogo oficial do Figma lista Claude Code com suporte a Figma Design, Figma Make e FigJam, usando servidores remoto e local. O servidor remoto é a opção recomendada para a maioria das pessoas porque tem o conjunto mais amplo de recursos e não depende de manter o aplicativo desktop servindo a conexão.
O que você consegue fazer com Claude Code + Figma MCP
- Ler contexto de frames e componentes do Figma
- Consultar variáveis e informações de layout
- Gerar implementação com mais fidelidade ao design
- Usar Code Connect para aproximar componentes do design e do projeto
- Criar ou atualizar conteúdo nativo no canvas em fluxos compatíveis
- Enviar interfaces web para o Figma como camadas editáveis
- Usar o Figma como referência visual sem depender apenas de screenshots
Como conectar o Figma ao Claude Code
1. Use o plugin oficial do Figma no Claude Code
A documentação atual do Figma recomenda instalar o plugin oficial do Figma para Claude Code. Ele já inclui as configurações do servidor MCP e Agent Skills para fluxos comuns. Depois da instalação, reinicie o Claude Code, abra o menu de plugins e autentique sua conta Figma quando solicitado.
claude plugin install figma@claude-plugins-official2. Alternativa: configure o servidor remoto manualmente
Se você preferir a configuração manual, o Figma documenta o servidor remoto em https://mcp.figma.com/mcp. O comando abaixo adiciona o servidor ao Claude Code. Depois, abra uma nova sessão, use /mcp, selecione o Figma e conclua a autenticação.
claude mcp add --transport http figma https://mcp.figma.com/mcp3. Confirme a conexão
No Claude Code, use /mcp para verificar os servidores disponíveis. O Figma deve aparecer como conectado. A partir daí, você pode trabalhar com links de frames e seleções do arquivo para fornecer contexto específico ao agente.
Como usar um frame do Figma como contexto
O fluxo mais simples é selecionar no Figma o frame ou componente que representa a interface desejada e copiar o link da seleção. Em seguida, forneça esse link ao Claude Code e descreva o resultado esperado. O agente pode usar o MCP para obter o contexto do design em vez de depender somente da sua descrição.
Use este frame do Figma como referência para a página. Preserve hierarquia, espaçamentos, tipografia e componentes. Antes de implementar, identifique os elementos reutilizáveis e depois construa a interface responsiva seguindo o design.Se você ainda não entende bem onde o MCP entra em um fluxo de IA, veja também API, Webhook e MCP: entenda a diferença e quando usar cada um. Esse conteúdo ajuda a separar uma integração MCP de APIs e webhooks tradicionais.
Do Claude Code para o Figma: dá para voltar ao canvas?
Sim, em fluxos compatíveis. O Figma anunciou em fevereiro de 2026 a capacidade de levar trabalho iniciado no Claude Code para o Figma como conteúdo editável. A documentação também descreve escrita no canvas e captura de interfaces web como camadas nativas. Isso cria um fluxo de ida e volta: design pode virar contexto para código, e uma interface que começou em código pode voltar ao canvas para refinamento visual.
Exemplo prático: transformar um layout em página sem explicar tudo por texto
Imagine que você desenhou uma landing page com hero, cards, depoimentos e FAQ. Sem MCP, você poderia enviar screenshots e tentar explicar cores, margens e comportamento. Com o Figma MCP, o Claude Code pode acessar informações estruturadas do frame. Seu prompt passa a se concentrar no objetivo: responsividade, comportamento dos botões, estados e integração com o projeto.
