Sem um sistema de design, cada designer e desenvolvedor toma pequenas decisões por conta própria: um azul ligeiramente diferente, um novo estilo de botão, outro valor de espaçamento. Depois de um ano, o produto tem dezenas de quase duplicatas. Um sistema de design substitui essas decisões repetidas por decisões compartilhadas.
A maioria dos sistemas de design possui três camadas. Os tokens de design são valores nomeados, como color.primary, space.4 ou motion.duration.short, que armazenam as decisões brutas. Componentes, como botões, entradas, cartões e caixas de diálogo, são construídos a partir desses tokens e incluem todos os estados. As diretrizes documentam como usar cada componente, como escrever rótulos e mensagens e quais regras de acessibilidade se aplicam.
Um sistema de design reside em dois lugares: na ferramenta de design, como uma biblioteca de componentes, e no código, como um pacote instalado pelos desenvolvedores. Manter os dois sincronizados é a parte mais difícil. Quando o botão codificado não corresponde mais ao projetado, as pessoas deixam de confiar no sistema.
O movimento também pertence ao sistema. Durações, curvas de atenuação e configurações de mola podem ser tokens, e os componentes interativos precisam de comportamento definido para passar o mouse, pressionar, carregar e transições. ExodeUI, que criamos, armazena esse comportamento em um arquivo aberto com estados e física de primavera, de modo que o mesmo componente é reproduzido em React, Vue, SwiftUI, Flutter e outras estruturas.
Exemplos públicos bem conhecidos incluem Material Design do Google, Diretrizes de Interface Humana da Apple, Carbon da IBM e Polaris do Shopify. Lê-los é uma boa maneira de ver como um sistema maduro está organizado.