Dev Mode MCP Server deixa VS Code e Cursor lerem o arquivo Figma direto, sem handoff manual

Dev Mode MCP Server deixa VS Code e Cursor lerem o arquivo Figma direto, sem handoff manual

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 → expõe tokens, componentes e especificações de design direto no editor de código via protocolo MCP. O ganho é real, mas a curadoria humana continua sendo parte do fluxo.

Nota da redação: este artigo descreve funcionalidades do Dev Mode MCP Server com base na documentação oficial do Figma Help Center. Recursos como escrita no canvas e a skill figma-spec estão em beta aberto e sujeitos a mudança; a redação não testou de forma independente o comportamento do servidor MCP, então detalhes de funcionamento prático podem divergir da experiência real de uso.

O problema que o handoff manual sempre teve

Quem trabalha na ponte entre design e engenharia conhece o ritual: o time de design termina um frame no Figma, exporta specs, anota medidas, escreve um comentário explicando o comportamento de um componente, e espera o desenvolvedor abrir o arquivo, interpretar tudo isso e traduzir para código. Nesse meio de campo, informação se perde. Token de cor vira valor hardcoded, variante de componente vira if/else solto, e o contexto de por que aquele espaçamento existe simplesmente não chega ao editor de código.

O Dev Mode MCP Server, documentado no Help Center do Figma, ataca esse problema de um jeito direto: em vez de o desenvolvedor sair do editor para olhar o Figma, o agente de IA dentro do próprio editor lê o arquivo Figma como fonte de dados. A ponte deixa de ser um documento intermediário e passa a ser uma conexão via protocolo MCP (Model Context Protocol), o padrão que permite a agentes de IA consultar fontes de dados externas em tempo real.

Como a conexão funciona por baixo

O MCP server do Figma pode rodar de duas formas, com trade-offs claros entre elas.

• Servidor remoto (recomendado): conecta direto ao endpoint hospedado pelo Figma em https://mcp.figma.com/mcp, sem precisar do aplicativo desktop. Oferece o conjunto mais amplo de recursos, incluindo escrita no canvas e captura de UI ao vivo.
• Servidor desktop: roda localmente através do aplicativo Figma desktop e exige assento Dev ou Full em planos Professional, Education, Organization, Government ou Enterprise. É voltado para necessidades específicas de organizações e empresas, como ambientes do Figma for Government, que só suporta o servidor desktop.

O servidor remoto oferece o conjunto mais amplo de recursos: escrita no canvas e captura de UI ao vivo, por exemplo, exigem exclusivamente essa opção. A escolha entre um e outro, portanto, muda diretamente o que o time consegue fazer depois.

Do frame selecionado ao contexto no editor

O fluxo documentado pelo Figma é baseado em link, não em busca livre pelo arquivo inteiro. O desenvolvedor clica com o botão direito no frame ou camada desejada dentro do Figma Design e seleciona Copy link to selection. Esse link, colado no cliente MCP (VS Code, Cursor e outros clientes listados no catálogo MCP do Figma), não é aberto como página: o servidor extrai dali o ID do nó e usa isso para buscar os dados reais daquele objeto.

A partir desse node ID, o agente consegue puxar variáveis, componentes e dados de layout diretamente para dentro do IDE. Isso é particularmente útil para fluxos baseados em design system, onde o valor não está só no visual do frame, mas na estrutura de tokens e componentes por trás dele. O mesmo mecanismo funciona para gerar código a partir de um frame selecionado, recurso pensado para equipes de produto construindo fluxos novos ou iterando sobre funcionalidades existentes.

Code Connect e Figma Specs: contexto além do pixel

Extrair variáveis e layout resolve parte do problema, mas não resolve a consistência com o código que já existe no repositório. É aí que entra o Code Connect: ele mapeia os componentes do Figma aos componentes reais do codebase, para que o código gerado pelo agente reuse o que já existe em vez de recriar um botão do zero a cada prompt.

O guia também descreve a skill figma-spec, hoje em beta aberto, que permite ao agente ler, criar e atualizar specs do time. Na prática, isso inverte a ordem usual de trabalho: em vez de o time de produto escrever requisitos num documento separado que o agente nunca vê, a spec vira um artefato que o próprio agente consulta antes de começar e atualiza com decisões e descobertas conforme avança. Escrever numa spec exige o servidor MCP remoto e acesso de edição ao arquivo.

Vale separar o que são ferramentas do que são skills, porque o guia trata os dois como camadas diferentes:

• Ferramentas (tools): as funções individuais que o MCP server expõe, como extrair variáveis ou obter código de um frame.
• Skills: instruções de agente que combinam várias chamadas de ferramenta com um roteiro de como usá-las, reduzindo a chance de o agente escolher a ferramenta errada ou pular uma etapa. Skills não adicionam capacidade nova, só empacotam fluxos recomendados.

Escrever de volta no canvas, e o que isso significa

O recurso mais estrutural do pacote é a via contrária: o agente conseguir escrever diretamente no canvas do Figma Design, FigJam e Figma Slides, criando ou atualizando frames, componentes, variáveis e auto layout usando o design system do time como fonte de verdade. Esse recurso exige o servidor remoto e um assento Full para editar fora dos próprios rascunhos do usuário. O Figma deixa explícito que é gratuito durante o período de beta e vai virar um recurso pago por uso.

Na mesma linha, o MCP server permite capturar a UI real de um app rodando em produção, staging ou localhost e transformá-la em camadas editáveis no Figma. O fluxo é conversacional: o desenvolvedor pede ao cliente MCP para iniciar um servidor local e capturar a UI, usa uma barra de ferramentas de captura para escolher páginas e estados, e recebe de volta um link para o arquivo Figma gerado. É o caminho inverso do design-to-code: código vivo virando material de design.

Onde a curadoria humana continua obrigatória

Em resumo: o MCP server reduz a distância entre arquivo de design e editor de código, mas não elimina a necessidade de revisão humana em nenhuma das pontas. Três pontos merecem atenção de quem for adotar o fluxo:

• Fidelidade do Code Connect depende de mapeamento correto. Se o componente no Figma não estiver conectado de verdade ao componente do codebase, o agente gera código plausível, mas divergente do que o time realmente usa.
• Specs e escrita no canvas estão em beta. Tratar decisões capturadas automaticamente como definitivas, sem revisão de alguém do time, é assumir risco desnecessário enquanto o recurso ainda está sendo endurecido pelo próprio Figma.
• Nada no guia fala de acessibilidade do código gerado. Extrair layout e variáveis não garante estrutura semântica correta, rótulos ARIA ou ordem de foco coerente; isso continua sendo trabalho de revisão de quem entende o requisito de acessibilidade do produto, não do agente.

A extração automática de tokens e componentes tira trabalho repetitivo das mãos do desenvolvedor. Mas o julgamento sobre se aquele código resultante serve de verdade ao usuário final, incluindo o usuário que depende de leitor de tela ou navegação por teclado, continua sendo humano. O MCP server encurta a distância entre design e código; não substitui a decisão de quem valida se o resultado está correto.

Fonte

Guia oficial do Dev Mode MCP Server, Figma Help Center: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server.

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