Figma Dev Mode MCP Server deixa agente de IA ler specs direto do editor de código

Da inspeção manual ao contexto automático

Até pouco tempo atrás, o caminho entre o arquivo de design e o código era manual: o time de produto abria o Dev Mode 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 →, copiava valores de espaçamento e cor do painel de inspeção, tirava print do componente e colava tudo num card do Jira ou numa mensagem de Slack para o time de engenharia replicar à mão. O Figma 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, descrito no guia oficial da Figma Developer Docs, propõe outra rota: o agente de IA que já vive dentro do editor de código conversa diretamente com o arquivo do Figma e traz variáveis, componentes e dados de layout sem passar por esse intermediário visual.

O mecanismo por trás disso é o Model Context Protocol (MCP), um padrão aberto que permite a um agente de IA conectar-se a fontes de dados externas de forma estruturada. O servidor MCP do Figma está disponível para contas nos planos Starter, Professional, Education, Organization, Government e Enterprise, desde que o cliente MCP usado (Cursor, Claude Code, VS Code com Copilot, Claude Desktop, Amazon Q, Gemini CLI, entre outros) conste no catálogo oficial de clientes compatíveis.

Dois jeitos de ligar o servidor: nuvem ou desktop

Existem duas formas de conectar o editor ao Figma, e a escolha entre elas não é só técnica, é também de governança de dados:

• Servidor remoto (recomendado pela própria Figma): conecta direto ao endpoint hospedado em mcp.figma.com/mcp, sem precisar do aplicativo desktop do Figma instalado. É quem oferece o conjunto mais amplo de recursos, incluindo escrita no canvas e geração de design a partir da UI ao vivo de um site.
• Servidor desktop: roda localmente através do app desktop do Figma e exige assento Dev ou Full num plano pago. É voltado para necessidades específicas de organização e enterprise, e é a única opção para quem usa Figma for Government, que não suporta o servidor remoto.

Essa divisão importa porque o servidor remoto envia dados do arquivo de design para fora da rede do time até o endpoint da Figma, enquanto o desktop mantém tudo local. Times com políticas rígidas de dados, típicas de setor público ou regulado, acabam restritos justamente à opção com menos recursos.

O que o agente consegue puxar do Figma

Na prática, o fluxo começa no próprio arquivo: o designer clica com o botão direito no frame ou na camada e seleciona "Copy link to selection". Esse link é colado na conversa com o agente, que não abre a URL diretamente, mas extrai dela o ID do nó e usa o servidor MCP para buscar o contexto daquele objeto específico. A partir daí, segundo a documentação, o agente pode:

1. Gerar código a partir de um frame selecionado, útil quando o time constrói um fluxo novo ou itera sobre uma funcionalidade existente.
2. Extrair contexto de design puro, variáveis, componentes e dados de layout, pensado especificamente para fluxos de design system.
3. Recuperar recursos de diagramas do FigJam, carregando fluxos e mapas de arquitetura de uma fase inicial de ideação para o momento de desenvolvimento.
4. Puxar recursos de arquivos do Make, servindo de ponte entre protótipo e produção.
5. Transformar a UI ao vivo de um app (em produção, staging ou localhost) em camadas editáveis de volta no Figma, recurso que exige servidor remoto e é suportado só por clientes selecionados.

Em resumo: o servidor não entrega uma funcionalidade isolada, mas um roteador de contexto que muda de forma dependendo de que pergunta o agente está tentando responder, e de que lado da ponte (design para código, ou código para design) a tarefa está.

Escrever de volta no canvas: comodidade com crédito a vencer

O recurso mais ambicioso da lista é deixar o agente criar e atualizar conteúdo nativo no Figma Design, FigJam e Figma Slides, construindo frames, componentes, variáveis e auto layout usando o design system do time como fonte da verdade. A documentação é direta sobre o custo disso: escrever fora dos próprios rascunhos exige servidor remoto e assento Full, e o recurso é gratuito apenas durante o período de beta, com a ressalva explícita de que "eventually" vira funcionalidade paga baseada em uso.

Isso muda o cálculo de adoção. Um time pode testar hoje sem custo adicional e descobrir depois que o fluxo que incorporou à rotina de design tem um preço variável embutido, ainda não divulgado em números pela Figma. Vale tratar o recurso como piloto, não como parte permanente do processo, até a precificação final ficar clara.

Code Connect é o que evita o componente genérico

Um risco óbvio de gerar código a partir de um frame é o agente inventar markup novo em vez de reaproveitar o componente React↳React37 conteúdos7 erros com React moderno que só aparecem em produção; e como evitarDev (Back & Front) · abr 2026React Native 0.76: o futuro do desenvolvimento mobileDev (Back & Front) · out 2024Simplificando componentes com React HooksDev (Back & Front) · mar 2019Ver tudo em Dev (Back & Front) →, Vue ou Swift que o time já mantém. É aqui que entra o Code Connect: ele mapeia os componentes do Figma aos componentes reais do código-fonte, para que a geração de código reutilize a implementação existente em vez de recriar um <div> do zero. Sem esse mapeamento configurado, a saída do agente tende a ser estruturalmente parecida com o design, mas tecnicamente desalinhada do design system, o que no fim gera mais trabalho de revisão do que economiza.

A Figma também oferece "skills", pacotes de instrução que combinam chamadas de ferramenta MCP com um roteiro de workflow, cobrindo tarefas como conectar componentes ao Code Connect, gerar regras de design system alinhadas ao código ou traduzir telas em código pronto para produção. Skills não adicionam capacidade nova ao protocolo: elas reduzem o trabalho de descobrir, na marra, qual ferramenta chamar e em que ordem.

O ponto cego de acessibilidade

Variáveis, componentes e dados de layout respondem bem a perguntas sobre espaçamento, cor e hierarquia visual, mas nada na documentação indica que esse contexto cubra metadados como papel semântico de acessibilidade, ordem de foco ou texto alternativo de imagem. Na prática, isso sugere que um agente que gera HTML a partir desse contexto corre risco de produzir marcação visualmente fiel e semanticamente pobre, a menos que alguém no time escreva explicitamente essa exigência no prompt ou numa skill dedicada.

O design é argumento: toda escolha de interface carrega um porquê que precisa sobreviver à tradução para código, incluindo a parte que o olho não vê no Figma.

O recurso figma-spec, ainda em beta aberto, ajuda nisso ao deixar o agente ler e atualizar as especificações do time antes de começar a construir, capturando decisões e descobertas de volta na spec conforme o trabalho avança. Times que já documentam requisitos de acessibilidade nessas specs ganham um canal para que o agente pelo menos saiba que a exigência existe; quem não documenta, continua dependendo de revisão humana manual depois que o código sai.

Quando vale a pena ligar o MCP, e quando não vale

O ganho é mais claro em times que já mantêm um design system maduro com Code Connect configurado: ali, puxar contexto direto do Figma corta o tempo gasto copiando valor de token manualmente e reduz divergência entre o que o designer desenhou e o que o engenheiro implementou. Para projetos pequenos sem biblioteca de componentes compartilhada, o retorno é menor, porque o agente não tem o que reaproveitar e acaba gerando código do zero de qualquer forma, com ou sem MCP.

Organizações sob Figma for Government ficam limitadas ao servidor desktop, com tooling mais restrito. Equipes preocupadas com onde o conteúdo do arquivo de design trafega, antes de ligar o servidor remoto, fazem bem em checar a política de dados da Figma para esse endpoint, já que ele sai da rede local por definição.

Fonte: Figma Developer Docs — Guide to the Dev Mode MCP Server