Dev Mode MCP Server do Figma deixa agentes de IA lerem variáveis e componentes direto do arquivo

O 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 → publicou no Help Center um guia detalhado sobre 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, o canal que conecta agentes de IA diretamente aos arquivos de design. A ideia central é simples de enunciar e complexa de operar: em vez de o agente "adivinhar" como implementar uma tela a partir de um print ou de uma descrição solta, ele lê a estrutura real do arquivo Figma (variáveis, componentes, auto layout) e usa isso como contexto para gerar código, sempre a partir de um link para um frame ou camada específica.

O MCP (Model Context Protocol) é o padrão que permite essa conversa. Em vez de cada ferramenta de IA inventar sua própria integração com o Figma, o protocolo define uma interface comum para que agentes consultem fontes de dados externas. O servidor do Figma implementa esse padrão expondo o arquivo de design como uma fonte de contexto que qualquer cliente MCP compatível, listado no catálogo oficial, pode consultar.

Dois jeitos de conectar, com consequências diferentes

O guia distingue dois caminhos de instalação, e a escolha não é só técnica, é de permissões e de superfície de recursos.

• Servidor remoto (recomendado): conecta direto ao endpoint hospedado pelo Figma (mcp.figma.com/mcp), sem precisar do app desktop. Segundo o Help Center, é o que oferece "the broadest set of features" e é a escolha indicada para a maioria dos usuários.
• Servidor desktop: roda localmente através do app desktop do Figma e é voltado a necessidades específicas de organização e enterprise. Exige assento Dev ou Full em planos Professional, Education, Organization, Government ou Enterprise.

Contas de governo usam um endpoint próprio (mcp.figma-gov.com/mcp) e têm um conjunto de ferramentas diferente do Figma comercial, com paridade limitada em plugins e skills. Isso importa para quem avalia adoção em contexto regulado: não dá para assumir que tudo que funciona no Figma comercial está disponível ali.

O que o agente consegue fazer no arquivo

A lista de capacidades do MCP server vai além de "gerar código de uma tela". O guia descreve cinco frentes de uso, cada uma com um caso de aplicação distinto:

1. Escrever direto no canvas: com as skills certas, o agente cria e atualiza frames, componentes, variáveis e auto layout dentro do arquivo Figma, usando o design system existente como fonte de verdade. Essa escrita fora dos rascunhos próprios exige o servidor remoto e um assento Full; é gratuita durante o período de beta e, segundo o próprio Figma, vai se tornar um recurso pago por uso.
2. Gerar design a partir da UI ao vivo: captura páginas, elementos ou fluxos inteiros de um app rodando em produção, staging ou localhost e transforma isso em camadas editáveis no Figma Design. É o caminho inverso do fluxo tradicional: em vez de design virando código, código virando design para exploração e alinhamento.
3. Gerar código a partir de frames selecionados: o uso mais direto, útil para times de produto iterando sobre fluxos já desenhados.
4. Extrair contexto de design: puxar variáveis, componentes e dados de layout para dentro do IDE, especialmente relevante em workflows de design systems e componentes.
5. Retomar recursos de FigJam e Make: levar diagramas e fluxos de ideação do FigJam, ou arquivos de prototipagem do Make, para dentro do contexto de código, carregando decisões de estágio inicial até a implementação.

Na prática, isso significa que um time pode pedir ao agente: "copie o link desta seleção e implemente este componente", e o MCP server traduz esse link em um node ID que o servidor usa para buscar as informações estruturais do objeto, não um print estático da tela.

Code Connect como trava de consistência

O ponto mais relevante para quem mantém um design system é o Code Connect. Segundo o guia, ele "melhora a qualidade do output reutilizando os componentes reais", mantendo o código gerado alinhado com a base de código existente em vez de reinventar um componente visualmente parecido mas estruturalmente divergente.

Isso é o que separa um protótipo gerado por IA de um componente que efetivamente entra em produção sem gerar dívida técnica. Sem Code Connect, o agente lê a geometria do frame e tenta inferir qual componente do código mais se parece com aquilo; com Code Connect, ele sabe, com precisão, qual componente real usar. Vale notar que o Figma for Government só suporta a CLI do Code Connect, sem a interface visual.

Onde a curadoria humana continua obrigatória

Aqui está o limite que o ângulo técnico do anúncio não resolve sozinho: o MCP server lê o que está no arquivo, mas não decide se o que está no arquivo é um design system saudável. Variáveis mal nomeadas, componentes duplicados, auto layout inconsistente entre telas, tudo isso vira contexto ruim que o agente herda e replica em escala.

Em resumo: o servidor é tão bom quanto a disciplina de quem mantém a biblioteca de componentes e variáveis no Figma. Isso reforça, e não substitui, o trabalho de governança de design system que já era necessário antes da IA entrar na equação.

O recurso de "figma-spec skill" tenta atacar parte desse problema por outro ângulo: deixar o agente ler, criar e atualizar specs do time, compartilhando requisitos antes de o agente começar a construir e registrando decisões no próprio spec conforme o trabalho avança. Está em beta aberto, e escrever num spec exige o servidor remoto e acesso de edição ao arquivo. É uma tentativa de dar ao agente contexto de produto, não só contexto visual, mas ainda depende de alguém escrever specs minimamente estruturados para que isso funcione.

O que muda no fluxo de quem já usa Figma

Para times de design e engenharia que já trabalham com Dev Mode, a mudança prática é que a ponte deixa de ser manual: em vez de o desenvolvedor abrir o Figma, inspecionar valores de espaçamento e cor, e copiar isso para o editor, o agente de IA faz essa leitura via protocolo, direto no fluxo de prompt. As skills, pacotes de instruções que combinam chamadas de ferramenta MCP com passos recomendados, existem justamente para reduzir a chance de o agente usar a ferramenta errada ou pular uma etapa do fluxo esperado.

O guia deixa claro, porém, que "skills don't replace the MCP connection or add new capabilities" (as skills não substituem a conexão MCP nem adicionam novas capacidades); elas só empacotam fluxos recomendados. Quem for adotar isso em um time precisa, então, de três peças seguras ao mesmo tempo: um design system limpo o suficiente para servir de fonte de verdade, Code Connect configurado para os componentes que realmente importam, e um cliente MCP da lista de suportados, já que a tabela de compatibilidade do catálogo do Figma ainda trata recursos como escrita no canvas e skills como suporte parcial, cliente a cliente.

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