Dev Mode MCP Server do Figma muda o handoff: agente lê componentes e variáveis direto no arquivo
Com o servidor MCP do Figma, ferramentas como Cursor, VS Code e Claude Code param de depender de screenshot ou export manual e passam a consultar nós, variáveis e componentes do arquivo de design em tempo real.
O handoff entre design e código sempre teve um ponto cego: o desenvolvedor abre 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 →, olha o frame, tenta adivinhar qual token de espaçamento ou variável de cor foi usada e recria aquilo no código, de memória ou copiando valores um a um. 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, documentado no help center do Figma, ataca justamente essa lacuna: em vez de o agente de IA "olhar" para uma imagem exportada da tela, ele consulta a estrutura real do arquivo, nó por nó, via protocolo MCP (Model Context Protocol).
O que o servidor expõe, na prática
Segundo o guia oficial, o servidor MCP do Figma não é uma única funcionalidade, mas um conjunto de capacidades que ficam disponíveis para qualquer cliente compatível com MCP, entre eles VS Code, Cursor, Windsurf, Claude Code e Codex. As principais, listadas na documentação, são:
- Extrair contexto de design: variáveis, componentes e dados de layout são trazidos direto para a IDE, algo que o Figma descreve como "especialmente útil para workflows de design system e componentes".
- Gerar código a partir de frames selecionados: um frame específico do Figma pode ser transformado em código, útil para times de produto iterando em uma feature.
- Escrever de volta no canvas: com o servidor remoto, o agente consegue criar e modificar frames, componentes, variáveis e auto layout diretamente no arquivo Figma, usando o design system existente como fonte da verdade.
- Capturar UI viva como camadas de design: a interface renderizada em produção, staging ou localhost pode ser convertida em camadas editáveis dentro de um arquivo Figma Design.
- Recuperar recursos do FigJam e do Figma Make: diagramas, fluxos e mapas de arquitetura feitos no FigJam, ou protótipos gerados no Make, entram como contexto para geração de código.
A integração com Code Connect é o ponto que mais interessa a quem mantém design system: ela garante que o código gerado reutilize os componentes reais do repositório em vez de recriar um botão do zero a cada prompt.
Como o fluxo funciona no dia a dia
O exemplo que o Figma dá no guia é direto: você seleciona uma camada ou frame no Figma Design, clica com o botão direito e escolhe "Copy link to selection", depois cola esse link no cliente MCP (Cursor, Claude Code, o que for) e pede para implementar o design. O cliente não navega até a URL, mas extrai o ID do nó, e é esse ID que o servidor MCP usa para devolver a estrutura completa daquele objeto: hierarquia, variáveis aplicadas, componentes referenciados.
Há também o caminho inverso, batizado de "Send UI to Figma": o desenvolvedor pede ao cliente MCP para iniciar um servidor local do app e capturar a UI renderizada em um novo arquivo Figma. O cliente abre uma janela de navegador, o desenvolvedor usa uma barra de captura para escolher páginas, elementos ou estados específicos, e o resultado vira camadas editáveis no Figma. É o inverso do handoff tradicional: em vez de design gerar código, a interface já implementada gera design.
Duas formas de instalar, com diferenças reais
O Figma distingue dois servidores com escopos diferentes, e isso importa para quem vai decidir a arquitetura de acesso do time:
- Servidor remoto (endpoint hospedado em
https://mcp.figma.com/mcp): disponível em qualquer seat e plano, é o caminho preferido do próprio Figma e o único que sustenta escrita no canvas e captura de UI viva. - Servidor desktop: roda localmente via app desktop do Figma, exige seat Dev ou Full em planos pagos, e a documentação é clara ao dizer que ele é "principalmente para casos de uso específicos de organizações e empresas" — ou seja, cenários com restrição de rede ou governança que impeça tráfego para fora do perímetro da empresa.
A tabela de compatibilidade no guia mostra que nem todo cliente suporta as mesmas capacidades: Claude Code, Cursor, VS Code, Codex e Claude Desktop suportam os dois servidores e escrita no canvas; 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 e Gemini CLI cobrem os dois servidores mas sem escrita no canvas; Replit só tem servidor remoto; Amazon Q e Openhands só desktop, sem escrita.
Skills: a camada que decide como usar as ferramentas
Um detalhe que passa fácil batido, mas que o Figma trata como peça central do fluxo, são as Skills. O servidor MCP expõe ferramentas individuais ("tools"), mas não decide por si só a ordem certa de chamá-las nem como interpretar o resultado. As Skills empacotam instruções de workflow, como conectar componentes de design a componentes de código via Code Connect, gerar regras de design system alinhadas ao codebase, ou traduzir designs em código pronto para produção.
O texto do Figma é explícito: "Skills não substituem conexões MCP nem adicionam novas capacidades MCP. Elas reduzem setup e tentativa e erro empacotando workflows recomendados em instruções reutilizáveis." Clientes como Claude Code, Cursor, Codex e Kiro já têm suporte a Skills via plugin do Figma ou extensões próprias; outros, como Amazon Q e Warp, ainda não aparecem na tabela com essa coluna marcada.
O que isso muda para quem faz handoff todo dia
Para o desenvolvedor que hoje recebe um link do Figma e precisa decifrar visualmente qual variável de espaçamento foi usada, a mudança é de categoria: o agente para de "ver" a tela e passa a ler a estrutura de dados que gerou aquela tela. Isso reduz o retrabalho clássico de recriar um componente que já existe no design system só porque o desenvolvedor não sabia que ele existia, e é o motivo pelo qual o Figma faz tanta questão de amarrar isso ao Code Connect: sem o mapeamento entre componente de design e componente de código, o agente ainda pode gerar HTML/CSS genérico que ignora o que já está no repositório.
Vale registrar o que fica em aberto na própria documentação do Figma: o recurso está em beta e gratuito, mas o texto avisa que "eventualmente será um recurso pago baseado em uso". Times que forem construir workflow em cima disso devem tratar isso como uma dependência que muda de custo, não como ferramenta gratuita permanente. Também não há, no material, benchmark de qualidade do código gerado nem comparação entre o que a escrita no canvas produz versus o que um designer faria manualmente — o guia descreve capacidades, não resultados medidos.
Quando não faz sentido usar
Se o time não mantém um design system com Code Connect configurado, boa parte do ganho desaparece: o agente ainda vai buscar variáveis e componentes, mas sem o mapeamento para código real, o resultado tende a divergir do codebase da mesma forma que uma implementação manual apressada divergiria. E para organizações com restrição de rede que impeça chamadas para mcp.figma.com, o servidor desktop existe como alternativa, mas o próprio Figma recomenda o remoto para o conjunto mais amplo de recursos, o que significa aceitar uma trade-off entre governança de rede e funcionalidade completa.
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.
