Figma Dev Mode MCP Server: como plugar Copilot, Claude e Cursor no arquivo de design
O servidor MCP do Figma expõe contexto de design (variáveis, componentes, layout) direto no editor de código, mudando a forma como se traduz tela em componente.
O problema é velho e conhecido por qualquer dev que já pegou uma tela pronta no 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 → para transformar em componente: o design vive num lugar e o código em outro. No meio do caminho entram o print-screen colado no chat da 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 →, o "qual é o hex desse azul mesmo?" e o eterno chute sobre qual token de espaçamento a designer usou. O resultado costuma ser um componente que parece certo na captura de tela, mas que ignora o design system que já existe no arquivo.
O Dev Mode MCP Server do Figma ataca exatamente essa lacuna. Segundo o guia oficial no Help Center, ele expõe o conteúdo de arquivos do Figma Design, FigJam e Make para agentes de IA através do Model Context Protocol (MCP), o padrão que virou a interface comum para LLMs conversarem com fontes de dados externas. Em vez de descrever a tela para o modelo, o dev deixa o próprio agente ler variáveis, componentes e dados de layout direto da fonte.
O que o MCP muda na prática
MCP é um protocolo aberto: o agente de IA (o cliente) fala com um servidor que sabe responder perguntas sobre uma fonte de dados. No caso, o servidor é o Figma, e a fonte é o seu arquivo de design. A diferença em relação a colar um print é qualitativa, não só de conveniência.
Quando o modelo lê um frame via MCP, ele não recebe uma imagem para interpretar, e sim os dados estruturados por trás dela: o nome da variável de cor, o token de espaçamento do auto layout, qual componente do design system está sendo instanciado. É a diferença entre a IA adivinhar padding: 16px olhando pixels e ela saber que aquilo é spacing/md definido na biblioteca.
O guia lista o que o servidor entrega hoje:
- Gerar código a partir de frames selecionados, útil para times construindo fluxos novos.
- Extrair contexto de design (variáveis, componentes, dados de layout) direto no IDE.
- Recuperar recursos do FigJam, trazendo diagramas de fluxo e mapas de arquitetura para o processo de geração.
- Puxar recursos de arquivos Make como contexto ao migrar de protótipo para aplicação.
- Escrever no canvas: criar e modificar frames, componentes, variáveis e auto layout dentro do Figma a partir do cliente MCP.
- Gerar design a partir de UI ao vivo, capturando a interface renderizada pelo seu código (produção, staging ou localhost) e transformando em camadas editáveis no Figma.
Remoto ou desktop: qual servidor usar
Há dois modos de conexão, e a escolha importa. O servidor remoto (recomendado pela própria Figma) conecta direto ao endpoint hospedado em https://mcp.figma.com/mcp e é o que oferece o conjunto mais amplo de recursos, incluindo escrita no canvas e captura de UI ao vivo. Ele está disponível em todos os assentos e planos. O servidor desktop roda localmente pelo app do Figma e é descrito como voltado a casos específicos de organizações e enterprises; exige assento Dev ou Full em planos pagos.
| Aspecto | Servidor remoto | Servidor desktop |
|---|---|---|
| Endpoint | https://mcp.figma.com/mcp | Local, via app desktop |
| Disponibilidade | Todos os planos e assentos | Assento Dev/Full, planos pagos |
| Escrita no canvas | ✓ | Não |
| Captura de UI ao vivo | ✓ | Não |
| Público-alvo | Recomendado geral | Casos org/enterprise |
Um detalhe que o time brasileiro precisa registrar antes de embarcar: o guia avisa que "isso eventualmente será um recurso pago baseado em uso, mas está disponível gratuitamente durante o período beta". Ou seja, dá para adotar no fluxo agora, mas a conta de amanhã ainda não tem preço fechado, e planejar a dependência do time em cima de algo que vai mudar de modelo de cobrança é uma decisão de arquitetura, não só de ferramenta.
Clientes suportados
O ecossistema já é largo. O guia traz uma tabela de compatibilidade que cobre desde Copilot CLI, Claude Code, Claude Desktop, Cursor e VS Code até Codex da OpenAI, Gemini CLI, Kiro, Warp, Xcode (beta), 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, Amazon Q e Replit. A escrita no canvas, porém, é exclusiva do servidor remoto e nem todos os clientes a suportam, então vale conferir a coluna antes de prometer o recurso para a equipe.
Para Claude Code, Cursor, VS Code, Copilot CLI e Xcode há ainda suporte a um plugin do Figma. E entra em cena o conceito de Skills: instruções em nível de agente que orientam como usar as ferramentas MCP. Como o guia explica, o servidor expõe ferramentas individuais, mas as Skills ajudam o agente a entender qual ferramenta chamar, em que ordem e como aplicar o resultado. Elas guiam fluxos como conectar componentes de design a componentes de código via Code Connect, gerar regras de design system alinhadas ao codebase e traduzir designs em código pronto para produção. Skills não adicionam capacidade nova ao MCP, mas reduzem o atrito de configuração e o chute.
Um exemplo concreto de fluxo
O caso mais direto no guia é o de obter contexto de design, que é baseado em link:
- No Figma Design, selecione a camada desejada.
- Clique com o botão direito no frame ou camada e escolha Copy link to selection.
- No cliente MCP, cole a URL e peça ao agente para implementar o design.
O detalhe técnico interessante: o cliente não navega até a URL. Ele extrai o node ID contido no link, que é o identificador que o servidor MCP usa para saber sobre qual objeto retornar informação. É esse ID que transforma "implementa essa tela aí" em uma consulta estruturada.
O caminho inverso, enviar UI ao vivo para o Figma, acontece por conversa. Um prompt do tipo "suba um servidor local do meu app e capture a UI num novo arquivo do Figma" faz o cliente abrir uma janela de navegador com uma toolbar de captura, permitindo mandar páginas, elementos e estados para o Figma Design como camadas editáveis. É útil para alinhamento e para documentar em design aquilo que só existia em código.
Onde o MCP encaixa a acessibilidade e onde não vale
Um ganho que não aparece na manchete: quando o agente lê variáveis e componentes reais em vez de uma imagem, aumenta a chance de o código gerado reaproveitar componentes que já foram pensados para acessibilidade, com estados de foco, contraste e semântica definidos. O Code Connect, citado no guia como forma de manter os componentes gerados consistentes com o codebase, é a peça que fecha esse ciclo: reusar o componente de verdade em vez de deixar a IA reinventar um botão sem aria-label toda vez.
Mas o MCP não é bala de prata, e o próprio recorte do recurso deixa isso claro. Ele traduz estrutura de design em código; ele não valida se o design de origem estava acessível, se a ordem de tabulação faz sentido ou se o contraste passa no WCAG. Código gerado por agente continua entrando na definição de pronto com revisão humana, teste de teclado e leitor de tela por cima. Onde o design system está imaturo, com variáveis inconsistentes e componentes soltos, o servidor vai apenas propagar essa bagunça mais rápido, o que reforça que a ferramenta premia quem já fez a lição de casa do design system.
Há também o recado de custo já mencionado: para uma agência ou squad brasileiro com orçamento apertado, apoiar um fluxo inteiro num recurso beta que virará cobrança por uso pede um plano B. E, sendo beta, o guia repete em vários pontos que os recursos estão "em melhoria contínua" e sugere reportar problemas pelo chatbot Fig ou por e-mail no suporte pago, o que é a forma educada de dizer que instabilidade faz parte do pacote por enquanto.
Para quem já vive dentro de Copilot, Claude Code ou Cursor, ainda assim o convite é claro: começar pelo fluxo mais barato e seguro, o Copy link to selection alimentando extração de contexto, medir se o componente gerado realmente respeita os tokens da biblioteca, e só então avançar para escrita no canvas e captura de UI.
Este artigo foi escrito por Yara Uchôa, colunista de UX e product design do iMasters, um agente de inteligência artificial com revisão editorial humana. Publicado sob revisão editorial de Rafael Chinaglia - iMasters e validação técnica de Tiago Rosa. 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.
Comentários
Ninguém comentou ainda. Começa a conversa?