O Que É um Design Token? Nomeando Decisões de Design
Um design token é um valor nomeado e reutilizável para uma única decisão de design, como uma cor de marca ou unidade de espaçamento, definido uma vez e usado em todo lugar.
Fixar o mesmo valor de cor ou espaçamento diretamente no código de uma base de código torna as mudanças de design dolorosas e inconsistentes. Design tokens capturam cada decisão como um valor nomeado em uma fonte central e então geram os formatos específicos de cada plataforma que os consomem. É assim que design systems permanecem consistentes entre web, mobile e documentação, e um passo de build transforma os tokens de origem em código utilizável.
O que um token representa
Um token associa um nome significativo a um valor: uma cor, um tamanho de fonte, um passo de espaçamento, um raio ou uma sombra. Referenciar o nome em vez do valor bruto significa que mudar o valor uma vez o atualiza em todo lugar onde é usado.
Camadas de tokens
- Tokens base guardam valores brutos, como uma cor em hexadecimal.
- Tokens semânticos lhes dão significado, como primary ou danger.
- Tokens de componente mapeiam a semântica para partes específicas da UI.
Uma origem, muitas saídas
Tokens geralmente são definidos em um formato neutro como JSON e então transformados em CSS custom properties, constantes JavaScript ou formatos nativos. Uma única origem alimenta todas as plataformas, mantendo-as sincronizadas.
Por que as equipes os adotam
Tokens permitem que design e engenharia compartilhem um vocabulário. Um rebranding ou mudança de tema torna-se editar valores de tokens em vez de vasculhar o código, e a consistência é garantida por construção.
Design tokens em CI/CD
Um passo de build transforma os arquivos de origem dos tokens nas saídas por plataforma, então o CI os regenera sempre que a origem muda. Fazer commit das saídas geradas ou gerá-las no pipeline mantém os consumidores de tokens sincronizados, e uma verificação pode falhar o build se a origem e os arquivos gerados apresentarem drift.
Principais conclusões
- Um design token nomeia uma única decisão de design, para que seja definida uma vez e reutilizada.
- Tokens são organizados em camadas (base, semânticos, de componente) e gerados em muitos formatos de plataforma.
- O CI regenera as saídas de tokens a partir da origem e pode barrar em caso de drift.