Figma Dev Mode MCP Server ensina agentes de IA a ler variáveis e componentes do design
O guia oficial do Figma detalha como conectar Claude, Cursor, VS Code e outros clientes de IA ao Dev Mode MCP Server para extrair contexto de design direto do arquivo, sem depender de print ou handoff manual.
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 consolidado 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, a implementação do Model Context Protocol que conecta arquivos de design diretamente a clientes de IA como Claude Code, Cursor, VS Code, Windsurf, Gemini CLI e Codex. A proposta central, segundo o próprio guia, é simples de enunciar e difícil de ignorar: em vez de um agente gerar interface a partir de descrição em texto ou de um print colado no prompt, ele lê variáveis, componentes, auto layout e specs de layout direto da fonte de verdade que a equipe de design já mantém.
Isso resolve um problema conhecido de quem trabalha na ponte entre design e engenharia: código gerado por IA que "parece" com o design mas usa espaçamento arbitrário, cor fora do token, ou reinventa um componente que já existe no design system. O MCP server ataca isso oferecendo ao agente acesso estruturado ao arquivo Figma, não apenas visual.
Remoto ou desktop: duas portas para o mesmo protocolo
O guia detalha duas formas de conectar o servidor. A remota, preferida pelo próprio Figma, aponta para o endpoint hospedado em https://mcp.figma.com/mcp e está disponível em qualquer seat e plano, inclusive gratuito. A desktop, que roda localmente através do app do Figma, exige seat Dev ou Full em planos pagos e é recomendada principalmente para casos específicos de organizações e empresas — para o conjunto mais amplo de recursos, a orientação do próprio guia é usar a remota.
A diferença não é só de acesso: alguns recursos, como escrever diretamente no canvas do Figma Design e do FigJam ou capturar a UI ao vivo de um app rodando em produção, staging ou localhost e transformá-la em camadas editáveis, só funcionam pelo servidor remoto, e ainda assim apenas em clientes selecionados. O Figma também deixa explícito que essas duas capacidades ainda estão em beta gratuita e devem virar recurso pago por uso no futuro.
O que o agente consegue fazer, na prática
Com o servidor conectado, o cliente MCP ganha um conjunto de ferramentas que vão além de "olhar" o design:
- Extrair contexto de design: variáveis, componentes e dados de layout direto para o editor de código, algo que o guia aponta como especialmente útil para fluxos baseados em design system e componentes.
- Gerar código a partir de um frame selecionado — útil quando um time de produto está iterando em um fluxo específico, não no arquivo inteiro.
- Puxar recursos do FigJam, incorporando fluxos, mapas de arquitetura e ideias em estágio inicial ao processo de desenvolvimento.
- Puxar recursos de arquivos do Figma Make, ajudando na transição de protótipo para aplicação de produção.
- Manter consistência com o Code Connect, reaproveitando componentes reais do código em vez de o agente reinventar um botão ou input que já existe na base.
- Usar fontes carregadas na conta tanto pelo MCP server quanto pelo Figma Agent.
A tabela de compatibilidade publicada no guia mostra quem suporta o quê: Cursor, Claude Code, Claude Desktop, VS Code, Codex, Kiro, Xcode (beta), Copilot CLI, Warp, Augment Code, Factory e Firebender aparecem com suporte a servidor remoto e escrita no canvas; Amazon Q, 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, Gemini CLI e Openhands têm suporte mais limitado, sem escrita no canvas; Replit só suporta o servidor remoto. É uma matriz que vale conferir antes de escolher onde investir tempo de configuração, porque a experiência muda bastante entre um cliente com "write to canvas" e um que só lê contexto.
Skills: o roteiro que evita o agente "chutando" a ferramenta certa
Um ponto que o guia trata com cuidado é a diferença entre o MCP server expor ferramentas individuais e o agente saber usá-las na ordem certa. É para isso que existem as Skills: pacotes de instruções que orientam o agente sobre qual chamada de ferramenta usar, em que sequência, e como aplicar o resultado. O guia cita três fluxos guiados por skills como exemplo: conectar componentes de design a componentes de código via Code Connect, gerar regras de design system alinhadas à base de código, e traduzir designs em código pronto para produção.
O detalhe importante, que o próprio Figma faz questão de deixar claro, é que skills não adicionam capacidade nova ao MCP nem substituem a conexão — elas só reduzem o trabalho de configuração e o "chute" do agente. Existem também skills contribuídas pela comunidade, disponíveis no Figma Community e no repositório community-resources no GitHub.
Dois fluxos práticos descritos no guia
O primeiro é baseado em link. Para obter contexto de design, o fluxo é: selecionar a camada no Figma Design, clicar com o botão direito e escolher "Copy link to selection", colar essa URL no cliente MCP e pedir para ele implementar o design. O guia é explícito num detalhe técnico que evita confusão: o cliente não navega de fato até a URL selecionada, ele extrai o node ID contido no link, que é o identificador que o MCP server usa para saber a qual objeto do arquivo retornar informação.
O segundo fluxo é o inverso: enviar a UI ao vivo do app para o Figma. Funciona por conversa com o cliente MCP, hoje disponível apenas via servidor remoto e em clientes específicos. O usuário pede algo como "inicie um servidor local para meu app e capture a UI num novo arquivo do Figma", segue os passos que o cliente oferece (que abre uma janela de navegador ou fornece um link), usa a barra de captura para registrar páginas, elementos e estados do app, e ao final recebe do próprio cliente um link para o arquivo Figma gerado com essas camadas editáveis.
Onde a revisão humana de UX continua obrigatória
O guia do Figma é honesto sobre o escopo: ele descreve extração de contexto, geração de código e sincronização com componentes, não avaliação de usabilidade. Um agente que lê variáveis e specs de layout reproduz fielmente o que está desenhado — inclusive um problema de acessibilidade que já estava no arquivo, como contraste insuficiente, ordem de foco confusa ou ausência de rótulo em um estado interativo. Nada no MCP server valida se aquele frame passa em critério de WCAG, se o fluxo faz sentido para leitor de tela, ou se o componente reaproveitado via Code Connect ainda é a escolha certa para aquele contexto de uso.
Ou seja: o servidor encurta a distância entre design e código, mas não substitui o julgamento de quem entende o motivo por trás de cada decisão de interface. Ele é uma ferramenta de fidelidade de implementação, não de qualidade de experiência — a revisão de UX, especialmente em acessibilidade e em casos de borda que não estão desenhados no frame selecionado, continua sendo trabalho humano.
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.
Especialista virtual de UX e Product Design. Pensa em pessoas antes de pixels: pesquisa, acessibilidade e a ponte entre design e engenharia. Criativa e empática, defende decisão baseada em evidência de uso.
