Figma Dev Mode MCP Server expõe nós, variáveis e tokens para agentes de IA

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 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 → não é mais uma promessa de roadmap: o Figma Help Center publicou um guia detalhado ("Guide to the Figma MCP server") explicando exatamente quais ferramentas o servidor expõe para clientes MCP como GitHub Copilot, Claude Code, Cursor e Windsurf. O documento é a referência mais completa até agora sobre o que um agente de IA passa a enxergar dentro de um arquivo de design do Figma, e vale destrinchar node por node o que isso significa na prática para quem faz o handoff entre design e código.

O que o servidor expõe, nó por nó

Segundo o guia, o MCP server dá acesso a um conjunto específico de dados por trás do canvas: variáveis (variables), componentes, dados de layout (auto layout, medidas, hierarquia de frames) e, quando configurado, os vínculos do Code Connect entre um componente do Figma e seu equivalente no seu repositório. Isso é diferente de "exportar uma imagem da tela": o agente recebe a estrutura semântica do design, não um screenshot para adivinhar.

O fluxo de acesso é baseado em link, não em busca livre pelo arquivo inteiro. O guia descreve o passo a passo: você seleciona uma camada ou frame no Figma Design, clica com o botão direito e escolhe "Copy link to selection", cola essa URL no seu cliente MCP e pede para ele implementar o design. O cliente não abre a URL como um link comum; ele extrai o node ID contido nela, que é o identificador que o MCP server usa para saber exatamente qual objeto retornar. Ou seja, o escopo de acesso do agente é definido por você, nó a nó, no momento em que copia o link, não por uma permissão ampla sobre o arquivo todo.

Dois jeitos de rodar o servidor, com consequências diferentes

O guia distingue duas formas de conexão. O servidor remoto (endpoint hospedado em https://mcp.figma.com/mcp) é a opção preferida da própria Figma e está disponível em qualquer seat, em todos os planos. O servidor desktop roda localmente através do app Figma e exige seat Dev ou Full em planos pagos; a documentação é explícita ao dizer que ele é voltado para "casos de uso específicos de organizações e empresas" e que, para o conjunto mais amplo de funcionalidades, o caminho recomendado é o remoto.

Essa diferença importa porque nem toda funcionalidade está nos dois modos. A capacidade de escrever de volta no canvas (write to canvas), por exemplo, é restrita ao servidor remoto. É a ferramenta que deixa o agente criar e modificar frames, componentes, variáveis e auto layout diretamente no arquivo Figma, usando o seu design system como fonte de verdade, segundo o texto oficial. Isso inverte o fluxo tradicional: em vez de o design sempre virar código, o código (ou o prompt) também pode virar design.

Capturar UI viva e trazer para o Figma

Uma das ferramentas mais específicas do guia é a que transforma a UI ao vivo de um app ou site (produção, staging ou localhost) em camadas editáveis dentro do Figma Design. O fluxo descrito é conversacional: você pede ao cliente MCP para "iniciar um servidor local para o app e capturar a UI num novo arquivo Figma", o cliente abre uma janela de navegador (ou fornece um link), você usa uma barra de captura para selecionar páginas, elementos ou estados, e ao final recebe o link do arquivo Figma gerado. O guia deixa claro que essa função exige o servidor remoto e hoje só é suportada por clientes selecionados, o que é um limite real: nem todo editor MCP compatível com Figma já tem essa capacidade liberada.

O caso de uso aqui não é design a partir do zero, é auditoria reversa: pegar o que já está em produção e trazer de volta para exploração, alinhamento e refinamento visual, fechando um ciclo que hoje costuma depender de print de tela e anotação manual.

Skills: a camada que decide o que fazer com as ferramentas

O guia separa claramente tools de skills. As tools são as chamadas individuais que o MCP server expõe (buscar contexto de design, gerar código, escrever no canvas). As skills são pacotes de instrução que orientam o agente sobre quando e em que ordem usar essas tools, para tarefas como conectar componentes Figma a componentes de código via Code Connect, gerar regras de design system alinhadas ao seu próprio codebase, ou traduzir um design em código pronto para produção. O texto é explícito: "Skills don't replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions." Ou seja, sem uma skill bem escrita, o agente tem acesso aos dados mas não necessariamente sabe qual sequência de chamadas produz um resultado útil, e o guia aponta que algumas dessas skills já circulam pela Figma Community e por um repositório de contribuições no GitHub.

Code Connect: a peça que evita que o agente reinvente o componente

A ferramenta de retrieve design context, que puxa variáveis, componentes e dados de layout direto para o seu IDE, fica sensivelmente mais útil quando combinada com Code Connect. Sem esse vínculo configurado entre o componente Figma e o componente real do seu repositório, o agente tem a estrutura visual mas não sabe que aquele botão já existe como no seu design system, e corre o risco de gerar uma implementação nova, redundante, ou pior, divergente de padrões de acessibilidade e nomenclatura já validados. É por isso que o próprio guia trata Code Connect como parte do pacote, não como um item avançado à parte: ele é o que garante que "o código gerado não apenas combine com seu sistema de design, mas também com seu design" de fato.

O que o guia não promete: acessibilidade e FigJam/Make ficam em segundo plano

Vale registrar o que o documento não cobre com o mesmo detalhe. As ferramentas de recuperar recursos de FigJam e de arquivos Make (protótipos) aparecem descritas em poucas linhas, como formas de trazer diagramas, fluxos ou mapas de arquitetura em estágio inicial para o fluxo de geração de código, mas sem o mesmo nível de exemplo prático dado ao fluxo principal de design context. E, do ponto de vista de quem trabalha com UX, o guia não menciona nenhuma exposição de anotações de acessibilidade, contraste, hierarquia semântica de leitura de tela ou estados de foco como parte dos dados que o MCP server extrai. O que o agente recebe é estrutura de layout e variáveis visuais, não os metadados que hoje normalmente vivem em plugins de auditoria de acessibilidade separados. Isso significa que o handoff via MCP acelera a tradução de layout em código, mas não substitui a checagem manual (ou automatizada por outra ferramenta) de que o componente gerado é operável por teclado, tem contraste adequado e expõe os atributos ARIA certos. Quem adotar o MCP server como único elo entre design e implementação corre o risco de levar para produção exatamente os mesmos problemas de acessibilidade que já existiam no arquivo original, só que mais rápido.

Para quem vale a pena hoje

O acesso remoto está liberado gratuitamente durante o período de beta, segundo o próprio guia, que também avisa que a feature "eventualmente será paga, baseada em uso". Times com design system maduro e Code Connect já configurado tendem a extrair o maior ganho, porque o agente reaproveita componentes reais em vez de recriar do zero. Times sem esse alicerce vão sentir o MCP server como uma ferramenta de leitura de layout um pouco mais estruturada que um export de imagem, útil, mas sem o salto de consistência que o guia promete quando o design system é tratado como fonte de verdade.

Fonte: Guia oficial do Dev Mode MCP Server — Figma Help Center