O MCP Server do Dev Mode conecta IA generativa ao design system do Figma

O problema é conhecido por qualquer squad que já pediu para uma IA↳Inteligência artificial440 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025MCP: O que é e por que você vai ouvir falar disso em breve?AI · jul 2025IA generativa e a urgência de reconstruir nossa relação com a verdadeAI · jun 2025Ver tudo em AI → "transformar essa tela 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 → em código": o modelo entrega algo que parece certo, mas com nomes de componente inventados, tokens hardcoded (#4A90E2 no lugar de color.primary) e uma prop variant="big" que nunca existiu no design system. O resultado é um Frankenstein visualmente próximo e estruturalmente inútil, porque ignora tudo que o time construiu para manter consistência.

O Dev Mode MCP Server do Figma ataca exatamente essa lacuna. Segundo o guia oficial no Help Center, ele expõe o conteúdo do Figma através do Model Context Protocol, o padrão que permite a agentes de IA conversarem com fontes de dados externas. Na prática, é a ponte entre o design system que vive no Figma e o agente que escreve código no seu editor.

O que é MCP e por que isso muda o jogo

MCP (Model Context Protocol) é uma interface padronizada para que agentes de IA acessem dados. Em vez de o modelo "adivinhar" a estrutura de uma tela a partir de um print ou de um trecho de descrição, o servidor MCP entrega contexto estruturado: as variáveis, os componentes, os dados de layout e o auto layout que compõem aquele nó do arquivo.

A diferença é a fonte de verdade. Sem MCP, o design system é, no máximo, uma referência que o dev cola no prompt. Com o MCP Server ligado, o agente puxa diretamente do Figma quais componentes existem, quais tokens estão definidos e como o layout se organiza. É a diferença entre pedir para alguém copiar uma tela olhando de longe e dar a essa pessoa o arquivo-fonte.

Como conectar no editor que a squad já usa

O Figma oferece duas formas de conexão, com trade-offs claros:

O servidor remoto está disponível em todos os planos e assentos; o desktop exige assento Dev ou Full em planos pagos. Do lado do cliente, a lista de editores suportados é longa e cobre o que os times brasileiros de fato usam:

• Cursor, VS Code, Claude Code, Windsurf (via catálogo), Codex, Gemini CLI, Warp, Kiro, entre outros.

Vale reparar numa coluna importante da tabela do guia: escrita no canvas (write to canvas) só funciona no servidor remoto e apenas em alguns clientes, como Cursor, Claude Code, VS Code, Codex e Copilot CLI. Ou seja, gerar código a partir do design é amplamente suportado; deixar o agente criar e modificar frames, componentes e variáveis dentro do Figma é um recurso mais restrito e ainda em beta.

O fluxo concreto: link-based, não print-based

Extrair contexto de design é baseado em link, e esse detalhe importa. O caminho proposto no guia é direto:

1. No Figma Design, selecionar a camada ou frame desejado.
2. Clicar com o botão direito e escolher Copy link to selection.
3. Colar a URL no cliente MCP e pedir para implementar o design.

O agente não navega até a URL. Ele extrai dela o node ID, o identificador que o MCP Server usa para saber exatamente qual objeto descrever. É por isso que o resultado tende a ser mais fiel: o modelo não está interpretando uma imagem renderizada, está lendo a definição do nó.

Code Connect: o pedaço que evita a prop inventada

Aqui está a peça que resolve o Frankenstein de props. O Code Connect mapeia os componentes do Figma para os componentes reais do seu codebase. Com ele configurado, quando o agente encontra um botão no design, ele não gera um genérico com classes improvisadas: ele reusa o seu , com as props que de fato existem no repositório.

Nas palavras do próprio material:

Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

Figma Help Center, Guide to the Dev Mode MCP Server

Sem Code Connect, o MCP ainda entrega variáveis e layout, mas a amarração com os componentes de código fica a cargo da inferência do modelo, que é justamente onde nascem as props fantasma. Para um design system maduro, configurar o Code Connect é o que separa "código que compila" de "código que passa no code review".

Skills: reduzir o chute do agente

O guia introduz também as Skills, instruções que orientam o agente sobre quais ferramentas MCP usar, em que ordem e como aplicar o resultado. Elas não adicionam capacidades novas nem substituem a conexão MCP; empacotam workflows recomendados. Um exemplo citado é gerar regras de design system alinhadas ao codebase, ou traduzir designs em código pronto para produção. É uma forma de reduzir setup e adivinhação, especialmente útil para padronizar como toda a squad interage com o servidor.

Além de gerar código: capturar UI ao vivo

Um recurso menos óbvio, e que inverte o fluxo, é o envio de UI ao vivo para o Figma. Via conversa com o cliente MCP, é possível pedir algo como "suba um servidor local do meu app e capture a UI em um novo arquivo do Figma". O cliente abre o navegador, oferece uma barra de captura para pegar páginas, elementos e estados, e devolve um link para o arquivo Figma gerado com as camadas editáveis.

Na leitura desta autora, isso é interessante para times que têm o código à frente do design (o clássico "o Figma nunca reflete o que está em produção"): dá para trazer a interface real de volta ao design como camadas editáveis, útil para alinhamento e refinamento. O recurso depende do servidor remoto e só funciona em clientes selecionados.

Quando o MCP Server não vale a pena

Adotar não é gratuito, nem em esforço nem em risco. Alguns cenários em que vale segurar:

• Design system imaturo ou inexistente. Se não há componentes bem definidos nem variáveis (tokens) no Figma, o MCP vai entregar contexto pobre, e a IA volta a inventar. A ferramenta amplifica um sistema bom; ela não cria um do nada.
• Sem Code Connect configurado. Colher variáveis e layout ajuda, mas sem a amarração componente-Figma → componente-código, o ganho de fidelidade cai bastante em bases grandes.
• Beta e cobrança futura. O Figma é explícito: a escrita no canvas e o suporte a agentes serão eventualmente um recurso pago por uso, hoje gratuito durante o beta. Construir um fluxo crítico em cima de algo que "está sendo continuamente melhorado" e vai mudar de preço pede cautela.
• Acessibilidade não vem de brinde. E aqui vai um alerta que não está no guia: o MCP entrega estrutura visual e componentes, mas fidelidade ao design system não garante aria-label, ordem de foco correta ou contraste validado. Se esses critérios não estiverem embutidos nos seus componentes de código (via Code Connect), a IA não vai inventá-los. Acessibilidade continua sendo parte da definição de pronto, e revisão humana segue obrigatória.

Para a squad brasileira que já vive no Cursor ou no Claude Code com um design system organizado, o MCP Server é um upgrade concreto de qualidade de output. Para quem ainda tem o design system pela metade, o retorno honesto é: arrume a casa no Figma primeiro, porque a IA só é tão boa quanto o contexto que você consegue entregar a ela.

Fonte: Figma Help Center — Guide to the Dev Mode MCP Server