Dev Mode MCP Server do Figma: o que a IA enxerga no seu arquivo (e o que escapa)

O guia oficial do Figma↳Figma3 conteúdosFigma Dev Mode funciona mesmo? Testando na práticaDev (Back & Front) · mar 2025Claude Design: nova aposta da Anthropic contra Figma e MicrosoftProduto & UX · abr 2026A importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Ver tudo em Produto & UX → detalha quais nós, variáveis e componentes 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 expõe a agentes de IA. A lista também mostra, por omissão, o que um arquivo malorganizado nunca vai entregar.

O Dev Mode MCP Server do Figma está em beta aberto, com uso gratuito enquanto durar essa fase (vai virar recurso pago por uso mais adiante, segundo o Figma Help Center). Ele conecta ferramentas como VS Code, Cursor, Windsurf, Claude Code e Codex diretamente a um arquivo Figma via Model Context Protocol. A promessa é simples de enunciar e difícil de garantir: o agente lê o design e escreve código que bate com o que foi desenhado.

O problema é que "ler o design" não é uma operação mágica. O servidor expõe um conjunto específico e documentado de dados, nó por nó. Quem organiza o arquivo pensando só em como ele fica bonito na tela, sem pensar no que esse protocolo consegue extrair, vai receber código genérico de volta, não importa quão caro seja o modelo de IA do outro lado.

Como o agente chega até o seu design

A extração de contexto é baseada em link, não em busca livre pelo arquivo inteiro. O fluxo documentado pelo Figma é este:

1. Selecionar a camada ou frame desejado no Figma Design;
2. Clicar com o botão direito e escolher Copy link to selection;
3. Colar essa URL no cliente MCP (o editor de código) e pedir para implementar.

O cliente não abre a URL como se fosse um navegador. Ele extrai o node ID embutido no link, e é esse ID que o servidor usa para identificar exatamente qual objeto retornar. Na prática, isso significa que o agente nunca "olha o arquivo todo": ele vê o nó selecionado e o que está estruturalmente ligado a ele.

O que entra na resposta: variáveis, componentes, auto layout

O guia lista explicitamente o que a ferramenta de extração de contexto de design traz para o editor: variáveis, componentes e dados de layout. É a frase usada pelo próprio Figma Help Center para descrever essa função: útil especialmente para sistemas de design e fluxos baseados em componentes.

Em resumo: o agente não infere semântica a partir de pixels, ele lê metadados. A documentação do Figma confirma que variáveis, componentes e dados de layout são extraídos diretamente para o editor; não há detalhamento público sobre como cada tipo de variável é nomeado ou referenciado no código final gerado. Na prática, isso sugere que manter um sistema de variáveis bem nomeado dá ao agente mais contexto estruturado do que valores fixos de cor ou espaçamento, mesmo sem garantia documentada de como esse contexto se traduz no código entregue.

O mesmo vale para auto layout: a documentação do Figma confirma que dados de layout são extraídos junto com variáveis e componentes. Um frame com auto layout configurado carrega informação estrutural (espaçamento, direção, distribuição) que, em tese, dá mais contexto ao agente; um frame posicionado manualmente, sem auto layout, carrega menos informação estrutural, só coordenadas absolutas.

Code Connect decide se a IA reconhece ou reinventa o componente

Existe uma lacuna entre "a IA viu um botão" e "a IA sabe que esse botão é o Button que já existe no design system do time". É exatamente nesse ponto que entra o Code Connect, citado no guia como parte do conjunto de ferramentas: segundo o Figma Help Center, ele existe para "melhorar a qualidade da geração reaproveitando seus componentes reais", mantendo o código gerado consistente com a base de código do time, em vez de recriar um botão do zero com classes CSS↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) → soltas.

Sem esse reaproveitamento, o servidor ainda extrai propriedades do componente Figma, mas o agente não tem garantia de que o código gerado vai corresponder ao componente real do repositório. O resultado nesses casos costuma ser estruturalmente correto, porém desconectado do código-fonte real: HTML e CSS plausíveis, sem relação com o que o time já mantém.

Remoto ou desktop: a escolha muda o que fica disponível

O Figma oferece duas formas de conectar o servidor, e elas não são equivalentes em recursos nem em quem pode usá-las.

A diferença mais relevante para handoff é a escrita no canvas: só o servidor remoto permite que o agente crie ou modifique frames, componentes, variáveis e auto layout diretamente no arquivo Figma, usando o design system como fonte da verdade. É um recurso de mão dupla que muda o fluxo tradicional de handoff: o código também pode alimentar o design de volta, não só o contrário.

O que o guia não lista, e isso importa para acessibilidade

Percorrendo a lista de recursos documentada pelo Figma (write to canvas, gerar design a partir de UI viva, gerar código de frames selecionados, extrair contexto de design, recursos do FigJam, recursos do Make, Code Connect), não aparece nenhuma menção a texto alternativo, papéis ARIA ou ordem de leitura por leitor de tela como dado extraído.

Isso não quer dizer que o recurso não exista ou vá existir: é uma leitura do que está documentado hoje, não uma limitação confirmada pelo fabricante. Mas, para quem trabalha com acessibilidade como parte da definição de pronto, vale tratar como lacuna até o Figma dizer o contrário: nomear camadas de forma descritiva e documentar estados interativos continua sendo trabalho manual, porque não há evidência de que o servidor infira isso sozinho a partir da estrutura visual do frame.

Checklist prático para organizar o arquivo pensando no agente

A partir do que o guia confirma sobre o que é extraído, dá para montar um checklist objetivo antes de apontar um agente para um arquivo Figma:

• Trocar valores fixos de cor, espaçamento e tipografia por variáveis nomeadas, sempre que o design system permitir;
• Aplicar auto layout em frames que representam componentes reais de interface, não só em artboards de apresentação;
• Conectar componentes Figma aos componentes de código via Code Connect, especialmente os mais reutilizados do design system;
• Nomear camadas pelo papel que exercem na interface (button/primary/large), não por descrição visual (retângulo azul);
• Usar Copy link to selection no nó mais específico possível, em vez de apontar para a página inteira, para reduzir ambiguidade na resposta do agente.

Nenhum item dessa lista é novidade de boas práticas de design system. O que muda é a consequência de ignorá-los: antes, um arquivo malorganizado custava retrabalho humano no handoff. Agora, segundo o próprio Figma, ele também produz código pior, porque o protocolo simplesmente não tem o que extrair além do que está estruturado.

Para quem ainda não vale a pena

O servidor desktop exige seat Dev ou Full em planos pagos, mas isso não limita o write-to-canvas: esse recurso depende do servidor remoto, que o Figma Help Center descreve como disponível em todos os seats e planos. A limitação real de acesso recai sobre casos específicos de organizações que precisam do servidor desktop, não sobre a escrita no canvas em si. E arquivos legados, cheios de valores fixos e camadas sem nomenclatura consistente, não viram prontos para IA só porque alguém instalou o MCP server: a reorganização do arquivo continua sendo pré-requisito, não consequência da ferramenta.

Fonte: Guia do Dev Mode MCP Server, Figma Help Center (https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server).

Fonte: Guia do Dev Mode MCP Server — Figma Help Center