Dev Mode MCP Server do Figma transforma arquivo de design em contrato para agentes de código
O Dev Mode MCP Server conecta arquivos do Figma a agentes como Cursor, Claude Code e VS Code via Model Context Protocol. Para quem desenha produto, isso redefine o que é um arquivo bem feito: nomenclatura, variáveis e componentes viram dado que a IA lê para gerar front-end.
O que é o Dev Mode MCP Server
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 é a forma 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 → de expor arquivos de design a agentes de IA pelo Model Context Protocol (MCP), o padrão que dá contexto estruturado a LLMs. A documentação do Figma Developers descreve dois jeitos de rodar o servidor: um remoto, hospedado em https://mcp.figma.com/mcp, e um desktop, local pelo próprio app do Figma. Hoje o recurso está em beta e disponível sem custo, mas a própria documentação avisa que vai virar um recurso pago por uso.
Clientes de código como VS Code, Cursor, Windsurf, Claude Code e Codex by OpenAI (este via Codex Skills) já se conectam ao servidor, cada um com seu próprio passo a passo de instalação. A lógica é a mesma em todos: o agente passa a enxergar o arquivo do Figma como fonte de contexto antes de gerar ou alterar qualquer código, em vez de depender só de print de tela ou descrição em texto.
Remoto ou desktop: a escolha muda o que dá para fazer
A documentação é explícita sobre as diferenças de acesso entre os dois modos, e isso importa para quem vai decidir qual seat e qual fluxo o time precisa:
| Servidor remoto | Servidor desktop | |
|---|---|---|
| Disponibilidade | Todos os seats e planos | Seat Dev ou Full, planos pagos |
| Indicação do Figma | Preferido, mais recursos | Casos específicos de organizações e empresas |
| Escrever de volta no Figma | Suportado | Não suportado |
| Capturar UI ao vivo do navegador | Suportado em clientes selecionados | Não suportado |
Na prática, quem quer o conjunto completo de ferramentas, incluindo escrever direto no canvas, precisa do servidor remoto. O desktop fica reservado a cenários corporativos mais fechados.
Da seleção no Figma ao código no editor
O fluxo mais comum começa numa seleção simples: você escolhe um frame ou camada no Figma, clica em "Copy link to selection" e cola a URL no cliente MCP. O agente não navega até a URL, ele extrai o node ID necessário para o servidor identificar qual objeto retornar. A partir daí, um conjunto de ferramentas fica disponível:
- Generate code from selected frames: transforma o frame escolhido em código, pensado para times de produto construindo ou iterando um fluxo.
- Extract design context: traz variáveis, componentes e dados de layout direto para o editor, útil sobretudo em workflows baseados em design system.
- Retrieve FigJam resources: puxa conteúdo de diagramas do FigJam (fluxos, mapas de arquitetura) como contexto para geração de código.
- Retrieve Make resources: recupera recursos de código de arquivos do Figma Make, a ponte entre protótipo e aplicação em produção.
O arquivo de design virou o contrato que o agente lê
Aqui está a virada que interessa a quem desenha produto, não só a quem programa. O agente não lê um frame do Figma como um designer lê uma referência visual: ele lê estrutura. Nome de camada, nome de componente, variáveis de design (os tokens de cor, espaçamento, tipografia) e a ligação feita pelo Code Connect entre um componente do Figma e seu equivalente real no repositório. Um frame chamado "Frame 847" com uma camada "Rectangle 12" não entrega contexto nenhum a um LLM; um frame chamado "Card de produto" usando a variável color/surface/primary entrega.
Isso redefine o que significa um "arquivo bem feito" dentro de um time de produto. Nomenclatura consistente, variáveis organizadas como tokens de verdade e componentes reaproveitados (em vez de cópias soltas por camadas desconexas) deixavam de ser só boa prática de organização visual; agora são a diferença entre o agente gerar algo aproveitável ou alucinar um componente que não existe no sistema. A qualidade do design system virou, na prática, qualidade de dado para IA.
A documentação oficial do Dev Mode MCP Server não lista anotações de acessibilidade como um tipo de dado extraído explicitamente, hoje o servidor expõe variáveis, componentes e layout. Mas a mesma lógica estrutural vale: informação de acessibilidade que vive só num comentário avulso, fora de uma variável ou de um componente nomeado, não chega ao agente. Minha leitura é que times que já documentam contraste, texto alternativo e estado de foco como parte da estrutura do arquivo, e não como anotação paralela, saem na frente quando o código passa a sair direto do Figma.
Code Connect: evitar que a IA reinvente o componente
O Code Connect é a peça que liga um componente desenhado no Figma ao componente real do código. Sem essa ligação, o agente tenta inferir como implementar um botão ou um card a partir só da aparência visual, e o resultado tende a divergir do que o time de engenharia já mantém. Com o Code Connect configurado, o Dev Mode MCP Server usa essa referência para gerar código consistente com a base existente em vez de criar uma versão paralela do mesmo componente.
Duas vias: o agente também escreve de volta no Figma
O recurso de escrita no canvas, disponível só no servidor remoto, permite que o agente crie e modifique frames, componentes, variáveis e auto layout diretamente num arquivo do Figma, usando o design system como fonte de verdade. Outra ferramenta, ainda restrita a clientes selecionados, captura a UI ao vivo de um app em produção, staging ou localhost e transforma páginas, elementos ou fluxos inteiros em camadas editáveis no Figma Design. É o caminho inverso do fluxo habitual: em vez de design virar código, o código renderizado vira material de design para revisão e alinhamento.
Quem deveria testar e o que ainda falta resolver
Vale testar o Dev Mode MCP Server já num time que tem design system maduro, variáveis nomeadas de forma consistente e Code Connect configurado: é nesse cenário que o agente tem contrato suficiente para gerar algo útil. Vale menos num arquivo organizado em cima da hora, com camadas sem nome e sem tokens, porque o agente vai herdar exatamente essa desorganização.
Três ressalvas pesam na decisão: o recurso está em beta, com instabilidades esperadas; o acesso gratuito tem prazo de validade, já que o Figma avisa que vai cobrar por uso; e escrever de volta no canvas, hoje, só funciona pelo servidor remoto, o que empurra organizações que preferem o desktop para um conjunto menor de ferramentas. Para equipes de produto e UX, o ponto prático que fica é este: o próximo passo de qualidade de design não é mais só visual, é a estrutura do arquivo que o agente vai ler.
Fonte: Figma Developers — Dev Mode MCP Server (documentação oficial)
Este artigo foi escrito por Yara Uchôa, colunista de UX e product design. Conteúdo produzido por agente de IA da redação iMasters, sob revisão editorial humana. Saiba como produzimos no expediente.
Comprar ou construir virou decisão de design, não só de produto e finanças
Com IA, criar uma ferramenta interna ficou tão fácil quanto assinar uma. A diferença real agora está na manutenção, nas emendas entre sistemas e em quem controla os dados, e isso é trabalho de design.
