Figma detalha o que o Dev Mode MCP Server extrai sozinho e o que ainda pede anotação manual
A documentação atualizada do MCP Server do Figma separa o que agentes como Cursor, Claude Code e Copilot conseguem puxar direto do arquivo de design (variáveis, componentes, layout) do que continua dependendo de Code Connect e de trabalho manual do time de produto.
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 → atualizou o Guide to the 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, documento que serve de referência oficial para quem já plugou Cursor, Claude Code, VS Code, Codex ou Gemini CLI no Figma via Model Context Protocol. A atualização não anuncia uma versão nova do produto, mas reorganiza e detalha algo que muda a rotina de squads de design e engenharia: exatamente quais dados de um arquivo Figma um agente consegue puxar sozinho, e em que ponto o handoff ainda depende de um humano anotar ou configurar algo antes.
Isso importa porque o MCP Server virou, na prática, o principal ponto de fricção (ou de ganho de velocidade) entre quem desenha e quem implementa. Um agente mal configurado gera componentes visualmente parecidos mas tecnicamente desconectados do design system; um agente bem alimentado com contexto de design produz código que já nasce usando os tokens e componentes reais do time.
Remoto por padrão, desktop para casos específicos
A documentação deixa claro que existem dois jeitos de rodar o servidor, e não são equivalentes. O remote MCP server, hospedado em https://mcp.figma.com/mcp, é a opção recomendada pelo próprio Figma e está disponível em qualquer seat, em qualquer plano pago ou não. É essa versão que habilita os recursos mais recentes, como escrever de volta no canvas do Figma a partir do editor de código.
O desktop MCP server roda localmente através do app do Figma e exige seat Dev ou Full em plano pago. Segundo o guia, ele é "principalmente para casos de uso específicos de organizações e empresas" - ou seja, é a rota para quem tem restrição de rede, exigência de dados não saírem da máquina, ou políticas de segurança corporativa que impedem chamar um endpoint remoto. Para o conjunto mais amplo de funcionalidades, a própria documentação recomenda o remoto.
A diferença não é cosmética: a tabela de compatibilidade publicada no guia mostra que recursos como "write to canvas" (o agente cria ou edita frames, componentes e variáveis direto no arquivo Figma) só funcionam com o servidor remoto, e apenas em uma lista específica de clientes - Claude Code, Claude Desktop, Codex, Cursor, VS Code, Kiro, Warp e Xcode (beta), entre outros. Amazon Q e 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, por exemplo, aparecem na tabela sem suporte a essa função.
O que o agente extrai sem intervenção humana
O fluxo mais básico descrito no guia - "Get design context" - é puramente baseado em link: o designer seleciona uma camada ou frame no Figma, clica em "Copy link to selection" e cola essa URL no cliente MCP (Cursor, Claude Code etc.). O agente não navega até a URL propriamente dita; ele extrai o node ID embutido no link, que é o identificador que o MCP Server usa para localizar o objeto e devolver os dados.
A partir daí, o que volta para o agente inclui:
- Variáveis de design (cores, espaçamentos, tipografia definidos como tokens)
- Componentes e sua estrutura
- Dados de layout, incluindo auto layout
- Recursos do FigJam, permitindo trazer fluxogramas e mapas de arquitetura feitos em fase de ideação direto para o contexto de geração de código
- Recursos de arquivos do Figma Make, útil para quem está migrando um protótipo gerado por IA para uma aplicação de produção
O guia também menciona explicitamente que o servidor e o Figma Agent conseguem usar fontes carregadas na conta do usuário, o que evita que o código gerado caia de volta em fontes padrão do sistema quando a tipografia do design é customizada.
Code Connect: a peça que ainda depende de configuração manual
Aqui está o ponto que separa extração automática de trabalho de time. O guia é explícito: "Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase." Sem Code Connect configurado - isto é, sem que alguém do time de engenharia tenha mapeado previamente cada componente do Figma ao componente equivalente no repositório de código - o MCP Server ainda consegue extrair variáveis e estrutura de layout, mas o agente vai gerar uma aproximação visual do componente, não uma instância real do componente de produção.
Em outras palavras, a extração de "contexto de design" (cores, espaçamento, hierarquia) é automática. A garantia de que o código gerado usa o Button de verdade do design system, com suas props e variantes reais, em vez de reinventar um botão parecido, continua sendo um trabalho de setup que passa por Code Connect, feito por alguém com acesso ao design system e ao repositório de componentes.
Skills: orientação de sequência, não capacidade nova
Outra peça nova na documentação é o conceito de Skills, disponível via plugin ou integração nativa em clientes como Claude Code, Codex, Copilot CLI, Cursor, Gemini CLI, Kiro e Xcode. O texto do Figma é direto sobre o que Skills faz e o que não faz: "Skills don't replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions."
Na prática, Skills funciona como um roteiro que diz ao agente em que ordem chamar as ferramentas do MCP e como interpretar o retorno - por exemplo, orientando um fluxo de "conectar componentes do Figma a componentes de código via Code Connect" ou "traduzir designs em código pronto para produção". É um paliativo de produtividade, não uma nova capacidade técnica: o agente continua limitado às mesmas tools do MCP Server, só que com menos tentativa e erro no meio do caminho.
O que ainda é beta e por que isso importa para o orçamento do time
O guia é transparente sobre um ponto que squads que estão avaliando adoção em escala precisam considerar: recursos como escrever direto no canvas e capturar UI ao vivo do navegador (produção, staging ou localhost) para virar camadas editáveis no Figma estão descritos como "currently available for free during the beta period", com aviso explícito de que "this will eventually be a usage-based paid feature". Ou seja, o modelo de cobrança para essas duas funcionalidades específicas ainda não está fechado, e o texto não esconde isso - o que é diferente de tratar o MCP Server inteiro como uma ferramenta já estabilizada e com custo previsível.
Isso muda o cálculo de quem está decidindo se vale integrar agora ou esperar: os fluxos de leitura de contexto (extrair variáveis, componentes, layout) e o Code Connect são a base mais estável hoje; os fluxos de escrita (canvas e captura de UI ao vivo) ainda carregam incerteza de precificação futura, mesmo estando tecnicamente disponíveis.
Onde isso deixa o handoff na prática
Para quem já usa MCP no dia a dia, a atualização da documentação funciona menos como anúncio de recurso novo e mais como um mapa mais preciso de responsabilidades: extração de dados brutos de design é tarefa do MCP Server e não exige trabalho extra recorrente; garantir que o código gerado reflita os componentes reais do design system é tarefa de Code Connect, que exige manutenção contínua por parte de quem cuida do design system; e orientar o agente a executar workflows complexos corretamente é papel de Skills, que empacota conhecimento institucional em instruções reutilizáveis, mas não substitui nenhuma das duas peças anteriores.
A lição prática para squads que combinam UX e engenharia é que o ganho de velocidade prometido pelo MCP Server só se realiza integralmente quando o Code Connect está mantido em dia - sem isso, o agente ainda entrega uma aproximação, não o componente de produção, e o time de produto continua tendo que revisar manualmente se o que saiu do prompt corresponde ao que foi desenhado.
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.
