Design system é a nova API

Designers planejam investir mais em design systems e tokens do que em ferramentas de canvas. Este artigo é sobre por que isso é a decisão certa.

Código gerado por IA em 64,0%. Agentes em 46,3%. Design systems e tokens em 40,2%. E só então, em quarto, as ferramentas de canvas, com 21,3%. Código manual: 9,5%, uma razão de quase 7 para 1 em relação ao código gerado.

O Figma é usado por 82,6% toda semana e continuará sendo. Mas só um quinto dos designers planeja investir mais em ferramentas de canvas. Isso não é declínio; é saturação. O canvas está resolvido. Ninguém precisa de mais uma ferramenta de desenhar retângulos.

O dinheiro novo vai para o que ainda não está resolvido: fazer a IA gerar código que pareça, funcione e se comporte como o produto. E isso depende de uma coisa que muitos times tratam como documentação de segunda classe.

Cinco das dez ferramentas semanais são de IA. Claude Code (38,4%) está à frente de Figma Make (34,8%) e FigJam (34,0%). A ferramenta de prototipagem com IA do próprio Figma perde para um terminal. E Slack e Notion ficam abaixo de três assistentes de IA.

Entre os bloqueios de workflow, 52,2% citam a qualidade da saída da IA. Quando peço a uma IA uma tela sem contexto, ela devolve uma tela genérica: cinza médio, cantos de 8 pixels, o botão azul de sempre. Não porque a IA seja ruim, mas porque ninguém disse a ela o que é este produto.

Um design system com tokens em código diz. Cores, espaçamentos, tipografia, raios, sombras, estados: nomeados, versionados, consumíveis por máquina. A IA lê o token e gera a tela certa. O design system deixa de ser documentação para humanos e vira a API que a IA consome.

• Tokens em código, não só no Figma: JSON, CSS custom properties, tema do Tailwind. Se a IA não consegue importar, não existe.
• Nomes semânticos, não literais: color-surface-raised, não gray-100. A IA acerta a intenção quando o nome carrega a intenção.
• Componentes com exemplos vivos, em Storybook ou similar. Um exemplo funcional vale mais do que dez páginas de guideline.
• Regras de uso escritas para máquina: quando usar cada variante, o que nunca combinar. Isso vira instrução de agente.
• Um ponto de entrada: um arquivo ou servidor MCP que o agente consulte antes de gerar. Sem isso, cada prompt reinventa o produto.

O seu design system está pronto para ser consumido por uma IA? Se você pedisse uma tela nova agora, ela sairia com a cara do produto?

O que fazer na segunda-feira: faça o teste. Peça a uma IA a mesma tela duas vezes: uma sem contexto, outra com os tokens e um componente de exemplo. Compare. Depois audite: quais tokens existem só no Figma? Quais nomes são literais? Qual é o ponto de entrada que um agente usaria? Comece pelo que aparece em toda tela: cor, espaçamento e tipografia.

53% dos designers dizem que há ferramentas demais. Nos últimos seis meses, 3,8% consolidaram o stack. Nos próximos doze, 64% pretendem adicionar mais IA. O último artigo é sobre essa contradição, e sobre o que a pesquisa não consegue dizer sobre o Brasil.