Figma Dev Mode MCP Server deixa agentes de código lerem o design direto do arquivo
O MCP Server do Figma conecta Copilot, Cursor, Claude Code e outros agentes direto aos arquivos de design, puxando variáveis, componentes e specs sem passar pelo passo manual de inspecionar e copiar valores. O ganho de velocidade vem com uma pergunta que o time de produto precisa responder antes de ligar o recurso: quem revisa o que o agente lê e o que ele escreve de volta.
O problema que o MCP Server tenta resolver
O atrito clássico entre design e engenharia tem um nome chato: handoff. O designer termina o frame, abre o Dev Mode, copia valores de espaçamento, cor e tipografia um a um, e torce para que o desenvolvedor não precise voltar com dúvida sobre um token que mudou na véspera. Esse processo funciona, mas é manual, lento e propenso a divergência entre o que está no 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 → e o que vira código.
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 esse ponto específico. Ele expõe os arquivos do Figma como fonte de contexto para agentes de IA via Model Context Protocol, o padrão que permite a ferramentas como Copilot, Cursor e Claude Code consultar dados externos durante uma conversa. Na prática, o agente deixa de adivinhar valores de design e passa a lê-los direto do arquivo.
Dois jeitos de conectar, com seats diferentes
A documentação do Figma descreve duas formas de ligar o servidor, com requisitos de plano distintos:
| Modo | Como roda | Requisito de plano/seat | Alcance |
|---|---|---|---|
| Remoto (recomendado) | Endpoint hospedado em mcp.figma.com/mcp, sem precisar do app desktop | Starter, Professional, Education, Organization, Government ou Enterprise | Conjunto mais amplo de recursos, incluindo escrita no canvas |
| Desktop | Roda localmente através do app desktop do Figma | Seat Dev ou Full em Professional, Education, Organization, Government ou Enterprise | Voltado a necessidades específicas de organização/enterprise; Figma for Government só suporta este modo |
A lista de clientes compatíveis já inclui VS Code, Cursor, Claude Code (via plugin), Claude Desktop (via connector), Copilot CLI, Codex by OpenAI (com Codex Skills), Gemini CLI (como extensão), 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, JetBrains (Junie), Replit, Warp e Xcode em beta, entre outros. A lista completa e atualizada fica no catálogo de MCP do Figma, porque novos clientes entram com frequência.
Como o agente lê o arquivo sem exportação manual
O fluxo de extração de contexto é baseado em link, não em arquivo exportado. O desenvolvedor clica com o botão direito no frame ou camada dentro do Figma Design, escolhe Copy link to selection, e cola esse link na conversa com o agente.
O cliente MCP não abre o link como um navegador abriria. Ele extrai o ID do nó que o servidor usa para identificar exatamente qual objeto buscar, e a partir daí recupera variáveis, componentes, dados de layout e, se existir, o mapeamento do Code Connect para aquele componente. É esse último ponto que separa um protótipo gerado por IA de um componente de verdade reaproveitado: sem Code Connect configurado, o agente tende a recriar a estrutura do zero, ignorando o componente real que já existe no código.
Specs, FigJam e Make também entram como contexto
Além de frames de design, o servidor consegue puxar outros tipos de artefato que normalmente ficam fora do radar de quem só olha para telas prontas:
- Figma Specs (via skill
figma-spec, em open beta): o agente lê requisitos antes de começar a implementar e pode escrever de volta decisões e descobertas na própria spec, desde que tenha acesso de edição ao arquivo e esteja usando o servidor remoto. - Recursos do FigJam: diagramas, fluxos e mapas de arquitetura feitos em fase de ideação entram como contexto de código, levando a conversa inicial do time para dentro da implementação.
- Recursos do Make: arquivos de protótipo no Make viram contexto para o agente, ajudando na transição de protótipo para produção.
Em resumo: o MCP Server não se limita a ler pixels e tokens. Ele tenta trazer para dentro do editor de código o raciocínio que normalmente fica espalhado entre documento de requisitos, quadro de brainstorming e arquivo de design, o que reduz a perda de contexto entre essas etapas.
Escrever de volta no canvas: o recurso que inverte o handoff
A parte mais disruptiva do anúncio não é o agente lendo o Figma, é o agente escrevendo nele. Com a combinação certa de skills, o agente consegue criar e modificar frames, componentes, variáveis e auto layout diretamente no arquivo, usando o design system existente como fonte da verdade.
Esse recurso de escrita exige o servidor remoto e um seat Full para escrever fora dos rascunhos pessoais do usuário. Segundo a documentação, ele é gratuito durante o período de beta e vai, eventualmente, se tornar um recurso pago por uso. É um sinal claro de que o Figma trata escrita no canvas como um produto à parte, não como um bônus do servidor de leitura.
Há ainda a direção oposta: capturar a UI ao vivo de um app (em produção, staging ou localhost) e transformá-la em camadas de design editáveis no Figma. O fluxo pede que o agente abra um servidor local, use uma barra de captura para selecionar páginas e elementos, e entregue um link para o arquivo gerado. Esse recurso exige servidor remoto e só é suportado por clientes selecionados.
Onde isso quebra o fluxo tradicional de handoff
O ganho de velocidade cobra um preço em governança, e é exatamente aí que o time de produto e design precisa prestar atenção antes de liberar o acesso:
- Revisão de design vira revisão de código também. Se um agente escreve componentes de volta no canvas, o processo de QA visual que hoje mora no Figma passa a competir com revisão de pull request, e ninguém definiu ainda quem aprova o quê primeiro.
- Code Connect deixa de ser opcional. Sem ele, o agente ignora o componente real do design system e gera uma versão paralela, que passa no olho mas diverge sutilmente do padrão vigente.
- Specs editáveis por agente mudam a autoria do requisito. Se o agente escreve decisões de volta na spec durante a implementação, a linha entre
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.
Muse Wonder, da Meta, é forte como agente de IA mas falha no design, mostra teste independente
Teste independente de Claire Vo, do podcast How I AI, rodou o Muse Wonder contra quase 20 tarefas e chegou a um veredito direto: ótimo como agente, ruim quando o trabalho é desenhar.
