Design system nasce no código, não no Figma: o fluxo com MCP de Christine Vallaure

Durante anos o caminho era sempre o mesmo: a designer desenhava 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 →, um desenvolvedor traduzia aquilo em código e os detalhes que não sobreviviam à viagem eram resolvidos numa conversa de corredor. Foi quando a designer Christine Vallaure entregou essa mesma tarefa 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 → que ela percebeu o problema: o resultado parecia correto, porque a IA lia o arquivo Figma com fidelidade e preenchia tudo que o arquivo não dizia com o que parecia mais plausível.

Em um artigo publicado no UX Collective, Vallaure descreve a decisão que tomou depois disso: inverter a direção do fluxo. Seu design system agora nasce em código, e a biblioteca no Figma é gerada a partir dele, não o contrário. Código sempre vence; Figma é espelho, não uma segunda verdade.

Por que Figma para código quebra com IA

O problema, segundo ela, não é falta de capricho da ferramenta: é que o arquivo Figma nunca foi feito para ser uma instrução completa. Vallaure comparou o que um componente React↳React37 conteúdos7 erros com React moderno que só aparecem em produção; e como evitarDev (Back & Front) · abr 2026React Native 0.76: o futuro do desenvolvimento mobileDev (Back & Front) · out 2024Simplificando componentes com React HooksDev (Back & Front) · mar 2019Ver tudo em Dev (Back & Front) → consegue expressar com o que um componente Figma consegue expressar e chegou a uma cobertura de cerca de 17%; para CSS, o número sobe para perto de 45%, ainda longe do total. São números dela, de uma comparação informal e não uma estatística oficial, como a própria autora faz questão de avisar.

Ordem de foco no teclado, estados de erro, o que um leitor de tela anuncia, o que acontece quando uma lista volta vazia: nada disso aparece num print de tela, e por isso ninguém pega isso em revisão quando é a IA, e não um desenvolvedor, quem preenche essas lacunas sozinha.

Tudo que o Figma não consegue dizer costumava ser preenchido por um desenvolvedor que podia simplesmente ir até a mesa de alguém e perguntar.

Everything Figma cannot say used to be filled in by a developer who could walk over and ask a question.Christine Vallaure, designer e autora no UX Collective

A mesma literalidade que é um problema numa direção vira vantagem na outra: gerando a partir do código, a IA lê exatamente o que existe, e o que existe são props reais, valores reais, estados reais.

O que é MCP e como a biblioteca é construída

MCP é a sigla de Model Context Protocol, o padrão que permite a uma IA ler e escrever diretamente em variáveis e componentes de um arquivo Figma, em vez de apenas sugerir texto numa conversa. Vallaure usa especificamente o Figma Console MCP, da Southleft, porque ele lida bem com variáveis, algo que a conexão básica do Figma não faz direito.

O fluxo que ela demonstra começa longe do Figma: acesso a um repositório de código com Storybook rodando (a vitrine local, em algo como localhost:6001, que mostra cada componente vivo e clicável a partir do código real). Depois vem um arquivo Figma vazio, conectado ao Console MCP, com Claude Code fazendo a ponte entre os dois lados.

A ordem importa: tokens e estilos de texto primeiro, porque componentes dependem deles. Tokens são os valores atômicos de cor, espaçamento, raio e tipografia que alimentam todo o sistema; no caso dela, viram coleções de variáveis e estilos de texto no Figma, usando exatamente os mesmos nomes do código. Só depois ela testa com dois componentes, um simples e um mais complicado (Button e Alert, no exemplo dela), antes de rodar a biblioteca inteira.

O critério de sucesso não é visual. É se as duas pontas usam os mesmos nomes de propriedade, letra por letra: nada de danger num lado e error no outro, nenhum componente que secretamente é outro com nome diferente. É esse alinhamento de nomenclatura que sustenta tudo que vem depois, inclusive prototipagem com IA em cima do sistema real.

GAPS.md: o arquivo que vale mais que os componentes

A cada rodada, Vallaure pede ao agente um arquivo específico: GAPS.md, listando tudo que não pôde ser expresso no Figma, tudo que ficou incerto e tudo que precisa de revisão manual. Segundo ela, esse documento acabou sendo mais útil que os próprios componentes gerados.

O arquivo dela acumula coisas como alturas de linha que são sem unidade no código e precisam virar pixels no Figma, estados que só existem em comportamento (não em aparência) e regras de layout para as quais o Figma simplesmente não tem equivalente. Cada item vem com uma nota de como ela decidiu resolver aquilo.

Depois de repetir esse processo algumas vezes, ela percebeu que estava digitando as mesmas correções toda vez, e transformou isso numa skill: um conjunto empacotado de instruções que o agente carrega automaticamente para esse tipo de tarefa, incluindo comparar prints dos componentes gerados com as histórias do Storybook. Ela faz um alerta de segurança explícito: uma skill roda código na máquina de quem a instala, então só vale instalar a de alguém de confiança, ou pedir para um desenvolvedor revisar antes.

Manter a paridade é o trabalho de verdade

Gerar a biblioteca uma vez é a parte fácil. Mantê-la fiel enquanto o código muda toda semana é o problema em aberto, tanto no setup dela quanto na indústria em geral, nas palavras da própria autora.

A solução que ela construiu é simples e determinística:

• O Storybook, a partir da versão 10, pode gerar automaticamente um manifest.json com cada componente, suas propriedades, valores permitidos e padrões, direto do código.
• Com o MCP aberto, ela pede ao Claude para escrever uma lista equivalente do que realmente existe na biblioteca Figma.
• As duas listas JSON são comparadas nome a nome, propriedade a propriedade, padrão a padrão: o que bate fica verde, o que mudou fica vermelho.

Ela publica esse resultado como uma página de status dentro do próprio Storybook. A comparação em si não usa IA nenhuma: mesma entrada, mesma resposta, sempre. A IA só entra para disparar o processo, e isso ainda é manual no setup dela, algo que ela reconhece como limitação. Importante: por enquanto a checagem cobre só arquitetura (nomes, propriedades, valores, padrões), não o lado visual em CSS.

Atualizando uma biblioteca que já existe

Muitos times não vão começar do zero: já têm uma biblioteca Figma com anos de trabalho dentro. Vallaure mostra que a mesma conexão serve para comparar em vez de criar, pedindo ao agente para checar um componente específico contra sua versão em código e propor um relatório, uma versão de referência ao lado, ou uma correção direta.

Três cuidados que ela destaca para quem for tentar isso num sistema real:

1. Trabalhe numa cópia. Nunca deixe um agente solto numa biblioteca viva da qual outros arquivos dependem.
2. Variantes deletadas não voltam. Cada variante tem uma chave interna; apagar e recriar com o mesmo nome não reconecta as instâncias que já usam aquele componente em outros arquivos. O caminho é renomear e consertar, nunca deletar e recriar.
3. Ainda precisa de babysitting. Num sistema real, com histórico real, isso é trabalho assistido, não mágica: a IA é rápida e não cansa, mas não sabe quais diferenças importam de verdade.

O que fica para quem lidera design system

O ganho real do método, pelo relato de Vallaure, não é visual: é que as duas pontas passam a falar a mesma língua de nomes e propriedades, o que vira pré-requisito para prototipar com IA em cima de componentes de verdade, sem inventar uma interface paralela. Mas o custo inicial é alto (gerar a biblioteca inteira custa tempo e tokens), e o trabalho de manter a paridade depois, segundo a própria autora, ainda não é automático em quase nenhum time, incluindo o dela.

A pergunta que fica para quem cuida de um design system: se uma IA tivesse que preencher hoje, sozinha, tudo que seu Figma não diz sobre foco, estados de erro e comportamento de acessibilidade, o que ela inventaria no seu lugar? Esse é o tipo de lacuna que só aparece quando alguém, como Vallaure fez, pede explicitamente a lista do que ficou de fora.

Fonte: UX Collective