Figma Dev Mode MCP Server deixa agentes de código lerem o arquivo de design direto, sem handoff manual

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 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 → expõe frames, variáveis e componentes para o editor de código do desenvolvedor. A promessa é matar o descompasso entre protótipo e implementação, mas o que ele não vê do arquivo importa tanto quanto o que ele vê.

O problema que o MCP tenta resolver

Quem já fez a ponte entre design e engenharia conhece o ritual: o designer termina o protótipo no Figma, exporta specs, escreve comentários explicando espaçamento e estado de hover, e torce para que o desenvolvedor não precise adivinhar o resto. O mercado costuma chamar esse gargalo de handoff, e é nele que o Dev Mode MCP Server mira, segundo a documentação oficial do Figma sobre o recurso.

MCP é sigla para Model Context Protocol, um padrão aberto que permite que agentes de IA conversem com fontes de dados externas de forma estruturada. O servidor do Figma implementa esse protocolo para expor o conteúdo de um arquivo de design (frames, componentes, variáveis, layout) a qualquer cliente MCP compatível, do Cursor ao Claude Code, passando por VS Code e Android↳Android46 conteúdosAndroid push notifications com Quasar Framework, Firebase e integração com WordPressDev (Back & Front) · mai 2019O X do Xamarin Forms – O guia das funcionalidades nativas - Parte 02: AndroidDev (Back & Front) · abr 2019Modularização de AndroidDev (Back & Front) · ago 2019Ver tudo em Dev (Back & Front) → Studio.

Como o fluxo funciona na prática

O acesso é baseado em link, não em busca livre pelo arquivo. O desenvolvedor abre o Figma Design, clica com o botão direito no frame ou camada que quer implementar e seleciona "Copy link to selection". Esse link vai colado no prompt do cliente MCP, que não abre a URL diretamente: ele extrai o node ID que o servidor usa para identificar qual objeto retornar.

Existem dois modos de conexão, com diferenças que afetam quem pode usar o quê:

• Servidor remoto (recomendado pelo próprio Figma): conecta direto ao endpoint hospedado em mcp.figma.com/mcp, sem precisar do app desktop, e concentra o conjunto mais amplo de funcionalidades.
• Servidor desktop: roda localmente through o aplicativo Figma e exige seat Dev ou Full em planos Professional, Education, Organization, Government ou Enterprise, voltado a necessidades específicas de organização.

Contas de Government usam um endpoint separado (mcp.figma-gov.com/mcp) e têm um conjunto de ferramentas diferente do Figma comercial, segundo a documentação.

O que o agente consegue fazer

A lista de capacidades vai além de "gerar código de um frame". O guia descreve seis frentes de uso:

1. Gerar código a partir de frames selecionados, útil para times de produto construindo novos fluxos ou iterando sobre uma feature existente.
2. Extrair contexto de design: variáveis, componentes e dados de layout direto no editor de código, especialmente valioso para quem trabalha com design systems.
3. Escrever de volta no canvas: o agente cria e atualiza frames, componentes, variáveis e auto layout no Figma Design, FigJam ou Figma Slides, usando o design system como fonte da verdade. Esse recurso exige servidor remoto e seat Full para escrever fora dos rascunhos próprios.
4. Gerar design a partir da UI ao vivo: capturar páginas, elementos ou fluxos inteiros de um app em produção, staging ou localhost e transformá-los em camadas editáveis no Figma, disponível apenas em clientes selecionados.
5. Recuperar recursos do FigJam e do Figma Make, levando diagramas de ideação e protótipos de código para o fluxo de implementação.
6. Manter consistência com Code Connect, mapeando os componentes gerados para os componentes reais do código-fonte do time.

Em resumo: o MCP Server não é só um leitor de specs, é uma via de mão dupla entre canvas e código, com a escrita de volta ainda em fase inicial e sujeita a restrições de plano.

Skills, Code Connect e Figma Specs: a parte que evita bagunça

Expor os dados do arquivo é só metade do trabalho. Sem orientação, um agente pode interpretar mal um componente de design system e gerar código divergente do que o time realmente usa. É para isso que existem as skills do Figma, que combinam chamadas às ferramentas do MCP com instruções detalhadas sobre quando e como usá-las.

As skills não substituem a conexão MCP nem adicionam novas capacidades: elas reduzem a configuração e o tentativa-e-erro ao empacotar fluxos de trabalho recomendados em instruções reutilizáveis.

Documentação oficial do Figma, guia do Dev Mode MCP ServerSkills don't replace the MCP connection or add new capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.

O Code Connect entra como camada de verdade: em vez de o agente inventar uma estrutura de componente do zero, ele reutiliza o componente real do codebase, mantendo o código gerado alinhado ao que já existe em produção. Já a skill figma-spec permite que o agente leia, crie e atualize specs do time, de forma que requisitos sejam compartilhados antes de o agente começar a construir, e decisões tomadas durante o trabalho voltem para o documento. O recurso está em beta aberto e escrever numa spec exige servidor remoto e acesso de edição ao arquivo.

O que o MCP Server não resolve

A documentação detalha bem o que o servidor expõe: variáveis, componentes, layout, conteúdo do FigJam, recursos do Make. O que ela não promete é contexto semântico de acessibilidade. Variáveis e auto layout não equivalem a ordem de leitura de leitor de tela, rótulos ARIA ou texto alternativo de imagem, porque esses atributos nem sempre existem como metadado estruturado dentro do próprio arquivo Figma.

Isso é leitura minha, não afirmação da fonte: um agente que gera código a partir de um frame tende a reproduzir fielmente a hierarquia visual e os tokens de design, mas a responsabilidade de verificar contraste, foco de teclado e semântica de HTML continua sendo humana, porque o Figma não guarda essa informação como dado de primeira classe no arquivo. Tratar a saída do MCP como código pronto para produção, sem essa checagem, reintroduz pelo canvas automatizado o mesmo risco de acessibilidade que já existia no handoff manual.

Para quem vale e quais os limites de hoje

O recurso de escrita no canvas é gratuito durante o período de beta, mas o próprio Figma avisa que ele "eventualmente se tornará um recurso pago baseado em uso". A geração de design a partir da UI ao vivo exige servidor remoto e está disponível apenas em clientes selecionados, segundo a documentação, que não menciona preço para essa funcionalidade específica. Isso muda o cálculo de custo de times que pensam em adotar o fluxo de escrita no canvas como parte permanente do processo, não como experimento pontual.

O suporte varia por cliente MCP: a tabela de compatibilidade do Figma lista dezenas de integrações (Cursor, Claude Code, VS Code, Android Studio, Gemini CLI, entre outras), mas nem todas suportam servidor desktop, servidor remoto, escrita no canvas e skills ao mesmo tempo. Antes de prometer o fluxo completo para o time, vale checar o catálogo oficial de clientes MCP do Figma, porque a combinação de recursos disponíveis muda de ferramenta para ferramenta.

Para quem faz a ponte entre design e engenharia, o ganho real não é eliminar a conversa entre as duas áreas, é eliminar a parte burocrática dela: copiar valores de espaçamento, adivinhar nome de variável, reescrever à mão o que já existe estruturado no arquivo. A parte que exige julgamento humano, legibilidade, acessibilidade, coerência de interação, continua fora do que o protocolo promete entregar.

Fonte: Documentação oficial do Figma — Dev Mode MCP Server