Pular para o conteúdo
Compound Design
5

Estado do Design 2026 · Parte 4 de 5

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.

Prioridades

Onde você vai investir nos próximos 12 meses?

Onde você vai investir nos próximos 12 meses? (escolha 3)
investing_next
Código gerado por IA — 64,0%Código gerado por IA64,0%Workflows com agentes — 46,3%Workflows com agentes46,3%Design systems e tokens — 40,2%Design systems e tokens40,2%Ferramentas de canvas — 21,3%Ferramentas de canvas21,3%Vídeo, motion e 3D — 20,4%Vídeo, motion e 3D20,4%Simplificar meu stack — 17,5%Simplificar meu stack17,5%Geração de imagem — 14,7%Geração de imagem14,7%No-code (sem IA) — 13,7%No-code (sem IA)13,7%Código manual — 9,5%Código manual9,5%Sem grandes mudanças — 6,1%Sem grandes mudanças6,1%
Ver tabela
Prioridade%
Código gerado por IA64,0%
Workflows com agentes46,3%
Design systems e tokens40,2%
Ferramentas de canvas21,3%
Vídeo, motion e 3D20,4%
Simplificar meu stack17,5%
Geração de imagem14,7%
No-code (sem IA)13,7%
Código manual9,5%
Sem grandes mudanças6,1%

Fonte: UX Tools, State of Prototyping Spring 2026 (CC BY 4.0)

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.

Leitura

Canvas virou commodity

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.

Ferramentas semanais

Um terminal à frente do FigJam

Ferramentas usadas toda semana, top 10
tools · múltipla escolha · % dos 1.478 respondentes
  • Ferramenta de IA
  • Não IA
Figma — 82,6% · n=1.221Figma82,6%Claude — 50,8% · n=751Claude50,8%ChatGPT — 48,2% · n=712ChatGPT48,2%Claude Code — 38,4% · n=568Claude Code38,4%Figma Make — 34,8% · n=514Figma Make34,8%FigJam — 34,0% · n=502FigJam34,0%Slack — 32,7% · n=483Slack32,7%Gemini — 32,3% · n=478Gemini32,3%Google Meet — 24,8% · n=366Google Meet24,8%Notion — 24,5% · n=362Notion24,5%
Ver tabela
Ferramenta%n
Figma82,6%1.221
Claude50,8%751
ChatGPT48,2%712
Claude Code38,4%568
Figma Make34,8%514
FigJam34,0%502
Slack32,7%483
Gemini32,3%478
Google Meet24,8%366
Notion24,5%362

Fonte: UX Tools, State of Prototyping Spring 2026 (CC BY 4.0)

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.

Qualidade da saída

O bloqueio que os tokens resolvem

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.

Prática

O que um design system pronto para IA tem

  • 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.

Ideia

Tokens como alavanca

Limites

O que a pesquisa não diz

Pergunta

Para a plateia

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.

Continua

No próximo artigo

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.