Dev Mode MCP Server do Figma expõe tokens e componentes para agentes como Claude e Cursor

O guia oficial da Central de Ajuda 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 → para 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 formaliza algo que muda a lógica do handoff entre design e código: em vez de o desenvolvedor abrir o Figma, olhar o frame e traduzir manualmente para componentes, um agente de IA (Claude, Cursor, Copilot CLI, entre outros) lê diretamente as variáveis, os tokens e a estrutura do arquivo de design.

O protocolo por trás disso é o Model Context Protocol (MCP), um padrão aberto para conectar agentes de IA a fontes de dados. O Figma implementou seu próprio servidor MCP para expor o conteúdo de arquivos de Figma Design, FigJam e Figma Slides a qualquer cliente MCP compatível.

Na prática, a extração de contexto é baseada em link. O fluxo descrito no guia é simples: o designer clica com o botão direito no frame ou na camada, escolhe "Copy link to selection" e cola esse link no cliente MCP (o editor de código ou o agente). O cliente não abre o link; ele extrai o ID do nó que o servidor MCP usa para identificar qual objeto retornar. A partir daí, o agente recebe variáveis, componentes e dados de layout prontos para virar prompt de geração de código.

Dois caminhos de conexão, com seats diferentes

O Figma oferece duas formas de ligar o MCP server a um editor, e a escolha não é só técnica: ela muda quem na equipe pode usar o quê.

O guia é direto ao recomendar o remoto para a maioria dos casos, reservando o desktop para necessidades específicas de organização ou enterprise. Uma exceção relevante: o Figma for Government só suporta o servidor desktop, o que limita o acesso aos recursos mais novos para quem está nesse plano.

O handoff vira via de mão dupla

Até aqui, a leitura do arquivo pelo agente já seria notícia suficiente para quem sofre com documentação de design desatualizada. Mas o Dev Mode MCP Server também permite o caminho inverso: o agente escreve direto no canvas do Figma. Com as skills certas, ele pode criar e atualizar frames, componentes, variáveis e auto layout usando o design system existente como fonte de verdade, em vez de desenhar do zero.

Esse recurso de escrita exige o servidor remoto e um Full seat para escrever fora dos drafts pessoais. Está em beta, gratuito por enquanto, e o próprio guia avisa que vai virar recurso pago por uso. Para times de design system, isso significa planejar governança agora: quem tem seat para deixar um agente mexer em componentes publicados, e como revisar o que ele produziu antes de propagar para todos os consumidores da biblioteca.

Outra direção de escrita documentada é a captura de UI viva. O fluxo funciona assim:

1. O usuário pede ao cliente MCP para iniciar um servidor local da aplicação e capturar a UI em um novo arquivo do Figma.
2. O cliente abre uma janela de navegador ou fornece um link para seguir os passos.
3. Uma barra de ferramentas de captura permite registrar páginas, elementos e estados da aplicação (produção, staging ou localhost).
4. Ao avisar que terminou, o cliente devolve o link do novo arquivo Figma com as camadas editáveis.

Isso é útil para auditar visualmente uma interface já em produção, algo que historicamente exigia print, régua e paciência.

Code Connect e Figma Specs: o que evita que o agente alucine componente

Dois recursos citados no guia respondem a um medo legítimo de quem mantém design system: que o agente gere código bonito, mas inconsistente com o que já existe no repositório. O Code Connect resolve isso ligando os componentes do Figma aos componentes reais do código, para que a geração reutilize o que já está implementado em vez de reinventar um botão parecido, porém diferente.

O Figma Specs, acessado pela skill figma-spec, ataca outro ponto de atrito: o contexto de produto antes de o agente começar a codificar. Em beta aberto, ele deixa o agente ler, criar e atualizar specs do time, de forma que requisitos sejam compartilhados antes da implementação e decisões tomadas durante o trabalho sejam capturadas de volta na spec. Escrever em uma spec também exige servidor remoto e acesso de edição ao arquivo.

O que isso muda para design system e acessibilidade

Aqui está o ponto que interessa mais a quem desenha do que a quem só codifica: se o agente lê variáveis e tokens do Figma para gerar código, o design system deixa de ser documentação de referência e passa a ser insumo direto de produção. Na minha leitura, isso eleva a régua sobre como as variáveis são nomeadas e organizadas, porque um nome ambíguo de token não confunde só um designer novo no time, confunde também o agente que vai traduzir aquele token em 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) → ou em props de componente.

O mesmo raciocínio vale para acessibilidade. Se o par de cores de um botão não estiver modelado como variável semântica (algo como color/text/on-primary em vez de um hex solto), o agente não tem como saber que aquele contraste precisa respeitar WCAG. Tokens de espaçamento, estado de foco e texto alternativo de ícones só chegam ao código gerado se já estiverem codificados como parte do sistema de design, não como convenção tácita que vive na cabeça de quem desenha. O MCP Server não cria essa disciplina; ele só torna visível, rápido, o custo de não ter.

Onde ainda não compensa

Para times sem design system maduro, com variáveis inconsistentes ou componentes duplicados, a extração de contexto tende a devolver exatamente essa bagunça para o agente, que vai gerar código tão inconsistente quanto o arquivo de origem. O recurso de escrita no canvas, hoje gratuito, tem data para virar cobrança por uso, o que pode pesar o cálculo de adoção em times grandes antes mesmo de medir ganho de produtividade. E organizações no Figma for Government ficam limitadas ao servidor desktop, sem acesso ao conjunto mais amplo de recursos do servidor remoto descrito no guia.

Fonte: Central de Ajuda do Figma — Guia do Dev Mode MCP Server