Dev Mode MCP Server do Figma só gera código fiel se o design system estiver pronto

O problema que o Dev Mode MCP↳MCP7 conteúdosArquitetura de Sistemas Cognitivos: Integração de RAG, MCP e LLMs no Ecossistema .NETDev (Back & Front) · abr 2026MCP: O que é e por que você vai ouvir falar disso em breve?AI · jul 2025Agentes de IA com LLMs de Código Aberto: Integração Prática com o Model Context Protocol (MCP)AI · ago 2025Ver tudo em AI → Server tenta resolver não é a IA escrever código: é a IA escrever o código ERRADO porque nunca viu o design system↳Design system5 conteúdosComo desenvolvemos o novo Design System do AsaasProduto & UX · jul 2024UX e Código: Por que designers que conhecem programação têm uma vantagem estratégicaProduto & UX · abr 2025A importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Ver tudo em Produto & UX → de verdade. Até aqui, um agente de IA só enxergava o que alguém colava num prompt: um print, uma descrição, um link solto. O guia oficial do Figma Help Center para o Dev Mode MCP Server descreve um caminho diferente, em que o agente lê o arquivo de design direto, com variáveis, componentes e metadados reais.

O que o servidor MCP realmente conecta

MCP é sigla para Model Context Protocol, um padrão que permite que agentes de IA conversem com fontes de dados externas sem integração sob medida para cada ferramenta. No caso do Figma, isso significa que um cliente como Claude Code, Cursor, Copilot CLI ou VS Code pode chamar o servidor MCP do Figma e receber de volta dados estruturados do arquivo de design, não uma captura de tela.

O fluxo de uso descrito pela documentação é baseado em link, não em upload: no Figma Design, você clica com o botão direito no frame ou camada desejada, seleciona Copy link to selection e cola esse link no cliente MCP. O cliente não abre o link; ele extrai o node ID que o servidor precisa para identificar o objeto e devolver contexto sobre ele. É esse ID, não a URL inteira, que vira a ponte entre o Figma e o editor de código.

Remoto ou desktop: a escolha muda o que você ganha

A Figma mantém duas formas de conectar o MCP server, com requisitos e alcance diferentes. A tabela resume o que a documentação detalha:

Para contas de Figma for Government, o endpoint remoto muda para https://mcp.figma-gov.com/mcp, e os fluxos comerciais de integração automática (one-click) não configuram essas contas; a documentação remete a um guia de configuração próprio para esse caso.

Gerar código é só uma das pontas

A lista de capacidades do servidor vai além de "transformar frame em código". O agente pode extrair variáveis, componentes e dados de layout para o editor (útil para design systems e fluxos baseados em componente), puxar conteúdo de diagramas do FigJam para dar contexto de fluxo e arquitetura ao código que vai gerar, e recuperar recursos de arquivos do Make ao migrar de protótipo para produção.

Há também a função inversa, de escrita: com a versão remota do servidor e um seat Full fora dos próprios rascunhos, o agente pode criar e atualizar frames, componentes, variáveis e auto layout diretamente no Figma. A documentação é explícita sobre o estágio dessa função: está em beta, é gratuita por enquanto e vai virar um recurso pago por uso. Vale tratar como recurso em amadurecimento, não como capacidade estável de produção.

Onde o design precisa estar pronto antes do agente entrar

O ângulo que mais interessa a quem desenha componentes é este: o servidor MCP não compensa um design system desorganizado, ele expõe exatamente o que esse design system já é. Dois recursos citados no guia decidem se o código gerado vai parecer com o seu codebase ou com uma reinvenção genérica da IA.

O primeiro é o Code Connect, que mapeia componentes do Figma para componentes reais do código. Quando esse mapeamento existe, o agente reutiliza os componentes de verdade do projeto em vez de recriar markup do zero a partir da aparência visual, o que é a diferença entre código consistente com o resto do app e código que parece de outro projeto.

O segundo é o Figma Specs, hoje em beta aberto, acessado pela skill figma-spec. Ele permite que o agente leia, crie e atualize specs da equipe antes de começar a construir, e registre decisões e descobertas de volta na spec enquanto trabalha. Escrever numa spec exige o servidor remoto e acesso de edição ao arquivo, mas é esse texto, não o desenho em si, que carrega requisitos, casos de borda e regras de negócio que nenhum pixel comunica sozinho.

Anotação de acessibilidade é parte do contexto, não detalhe opcional

Nenhum componente, por mais bem nomeado que esteja, informa ao agente qual papel ARIA uma div deveria assumir, qual é a ordem de foco esperada num formulário ou qual texto alternativo uma imagem decorativa dispensa. Essas decisões vivem na cabeça de quem desenhou, e se não forem registradas como anotação ou spec, o agente vai inferir a partir da aparência visual, o que é exatamente o tipo de inferência que produz HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → semanticamente errado mesmo quando o CSS bate pixel a pixel com o Figma.

Tratar acessibilidade como parte do contexto que o agente de IA recebe, e não como revisão posterior do código gerado, é a forma de manter a definição de pronto intacta num fluxo que, de resto, está sendo acelerado. Isso significa anotar estados de foco, hierarquia de heading, rótulos de campos e comportamento esperado de leitor de tela no próprio arquivo Figma, junto das specs e dos componentes, antes de pedir ao agente para implementar.

Os atritos que ainda existem

Nem todo cliente MCP suporta todas as funções: a tabela de compatibilidade do Figma MCP catalog lista clientes como Cursor, Claude Code, VS Code, Android Studio e Amazon Q com níveis diferentes de suporte a servidor desktop, servidor remoto, escrita no canvas e skills, e a própria documentação recomenda checar o catálogo para a lista mais atual antes de prometer um fluxo específico à equipe.

Custos de seat também entram na conta: escrita no canvas fora dos rascunhos exige seat Full, e o servidor desktop exige seat Dev ou Full num plano pago específico. A Figma classifica escrita no canvas e geração de código a partir do canvas como recursos "continuamente melhorados", o que na prática é um aviso de que bugs de fluxo ainda aparecem, reportáveis pelo chatbot de suporte Fig ou por e-mail para contas pagas.

Fonte: Guide to the Dev Mode MCP Server — Figma Help Center