MCP Server do Figma transforma design system malfeito em bug para a IA
O Dev Mode MCP Server do Figma deixa agentes de IA lerem variáveis, componentes e Auto Layout direto do arquivo de design. Isso significa que nomenclatura e organização que antes só incomodavam o dev humano hoje quebram o código que a máquina gera.
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 → documentou, em seu Help Center, o funcionamento do 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: um servidor que conecta arquivos do Figma ao Model Context Protocol, o padrão que permite a agentes de IA ler dados de uma fonte externa e agir sobre eles. Na prática, isso significa que um cliente MCP como Claude Code, Cursor ou VS Code pode puxar variáveis, componentes e estrutura de layout de um arquivo Figma e usar isso como contexto para gerar código, em vez de depender só de um print de tela ou de uma descrição em texto do design.
O guia do Figma deixa claro que o servidor não é um gerador de código isolado: é uma camada de contexto. Ele extrai design tokens, componentes e dados de Auto Layout para o editor, e também permite o caminho inverso, com o agente escrevendo conteúdo nativo de volta no canvas do Figma Design, do FigJam e do Figma Slides.
O que o agente consegue puxar do arquivo
O fluxo mais comum descrito pelo Figma é baseado em link: o designer copia o link de um frame ou camada específica (botão direito, "Copy link to selection") e cola esse link no cliente MCP. O cliente não abre o link, ele extrai o node ID e pede ao servidor os dados daquele objeto.
Com esse node ID, o agente consegue:
- Gerar código a partir de um frame selecionado, útil para times de produto construindo um fluxo novo.
- Extrair variáveis, componentes e dados de layout para o IDE, pensado especificamente para workflows de design system.
- Puxar conteúdo de diagramas do FigJam, levando fluxos e mapas de arquitetura feitos em fase de ideação para dentro do código.
- Recuperar recursos de arquivos do Make, trazendo contexto de protótipo para o ambiente de produção.
O ponto comum entre essas quatro capacidades é que todas dependem da qualidade de quem organizou o arquivo original. Um componente sem variantes nomeadas, uma cor aplicada como valor fixo em vez de variável, ou um frame sem Auto Layout chegam ao agente exatamente como estão: sem estrutura para o agente inferir.
Escrever de volta no canvas tem um preço
Além de ler, o MCP Server do Figma permite que o agente escreva diretamente no arquivo: criar e atualizar frames, componentes, variáveis e Auto Layout, usando o design system existente como fonte da verdade. Esse recurso de write to canvas, segundo o próprio guia, exige o servidor remoto do Figma (hospedado em https://mcp.figma.com/mcp) e uma licença Full seat para editar fora dos próprios rascunhos do usuário.
O Figma também avisa que o recurso é gratuito durante o período de beta, mas vai se tornar um recurso pago baseado em uso. É uma peça importante para quem está avaliando adoção: o custo de operação de um agente que lê e escreve no Figma não é zero, e o modelo de cobrança ainda está em definição.
Code Connect: a trava contra código reinventado
Um dos riscos óbvios de deixar um agente gerar código a partir de um componente visual é ele reinventar a roda: criar um novo botão do zero em vez de importar o Button que já existe no repositório. O Figma resolve isso parcialmente com o Code Connect, que mapeia componentes do Figma para os componentes reais do código e mantém o resultado do agente consistente com a base existente.
Sem Code Connect configurado, o MCP Server ainda extrai a estrutura visual do componente, mas o agente não sabe que aquele botão já tem uma implementação testada e acessível no código. O risco é duplicar lógica, estilos e, eventualmente, bugs de acessibilidade que o componente original já havia corrigido.
Specs e skills: contexto antes do agente começar a construir
O guia descreve ainda o recurso figma-spec, em beta aberto, que deixa o agente ler, criar e atualizar specs do time direto no Figma. A ideia é que requisitos sejam compartilhados antes do agente começar a trabalhar, e que decisões tomadas durante a implementação sejam registradas de volta na spec.
As "skills" funcionam como uma camada de instrução acima das chamadas de ferramenta brutas do MCP: elas combinam chamadas ao servidor com instruções específicas sobre qual ferramenta usar, em que ordem, e como aplicar o resultado. Skills não adicionam capacidade nova, apenas empacotam fluxos recomendados, como conectar componentes do Figma a componentes de código via Code Connect ou traduzir um design em código pronto para produção.
Remoto ou local: duas formas de conectar
O Figma oferece dois caminhos de instalação, com escopos de recurso diferentes:
| Modo | Onde roda | Quem precisa |
|---|---|---|
| Servidor remoto (recomendado) | Endpoint hospedado do Figma, sem o app desktop | A maioria dos times; é o único que suporta write to canvas |
| Servidor desktop | Localmente, via Figma desktop app | Necessidades específicas de organização/enterprise; exige seat Dev ou Full em planos Professional, Education, Organization, Government ou Enterprise |
O Figma for Government, segundo o guia, suporta apenas o servidor desktop, com limitações de recursos ainda em aberto. A lista de clientes compatíveis inclui nomes como Claude Code, Cursor, VS Code, Amazon Q, Gemini CLI 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, mas o suporte a write to canvas e a skills varia de cliente para cliente, e a lista oficial e atualizada fica no catálogo de MCP do Figma.
Por que isso muda o peso da nomenclatura
Aqui está o efeito prático que interessa a quem cuida de design system: até pouco tempo, um layer chamado "Rectangle 234" ou uma cor aplicada como hexadecimal fixo em vez de variável era um incômodo estético, resolvido manualmente pelo desenvolvedor durante o handoff. Esse desenvolvedor sabia ler o contexto visual, perguntar no Slack, inferir a intenção.
Um agente de IA consumindo o mesmo arquivo via MCP não tem esse jogo de cintura. Ele recebe a estrutura bruta: nome de camada, hierarquia de Auto Layout, nome de variável. Se a variável de cor se chama Fill 3 em vez de color/brand/primary, o código gerado provavelmente herda esse nome sem sentido, ou o agente precisa adivinhar, o que aumenta a chance de erro.
Em resumo: a disciplina de nomeação, organização de variáveis e uso correto de Auto Layout deixa de ser só uma boa prática de design system e passa a ser literalmente a especificação que o agente de IA vai interpretar. Arquivo malfeito não gera só retrabalho humano, gera código malfeito automaticamente.
O que o MCP Server não resolve
Vale uma ressalva que não está explícita no guia do Figma, mas que decorre direto da lista de dados extraídos: variáveis, componentes e layout não cobrem semântica de acessibilidade. Texto alternativo, papel ARIA, ordem de foco e contraste efetivo em contexto de uso não fazem parte do que o MCP Server descreve extrair.
Isso quer dizer que um componente visualmente correto, com variáveis bem nomeadas e Auto Layout limpo, ainda pode gerar código sem atributos de acessibilidade se ninguém documentar essa informação em algum lugar que o agente leia, seja na spec, seja em Code Connect. O MCP Server melhora a fidelidade visual e estrutural do código gerado; não substitui uma revisão de acessibilidade feita por humano ou por ferramenta especializada.
Quando não compensa adotar ainda
Times com design system desorganizado, sem Code Connect configurado e sem variáveis consolidadas tendem a sentir mais dor do que ganho ao plugar um agente via MCP Server: o agente vai expor, em código gerado, exatamente a bagunça que já existia no arquivo, só que automatizada e em escala. Antes de conectar o agente, o trabalho que compensa é o mesmo de sempre, nomear tokens, consolidar variantes de componente e aplicar Auto Layout de forma consistente, só que agora esse trabalho tem um segundo consumidor direto além do time de produto: o modelo de IA.
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.
O painel de IA genérico virou sinal de que ninguém desenhou a feature
De bloco de notas a banco, o mesmo painel com sparkle no canto superior direito se espalhou por produtos que não têm nada em comum. A pergunta que interessa a quem desenha produto não é se a IA funciona, é se alguém pediu aquela feature.
