O que são Design Tokens?
Design Tokens são apelidos para propriedades de design, permitindo gerenciar:
- Cores
- Tipografia
- Espaçamentos
- Opacidade
- Grids
- Border Radius
- Border Width
- Efeitos (elevation, blur)
Cada token armazena um valor específico, como uma cor, um tamanho, espaçamento ou animação, que pode ser reutilizado em todo o sistema.
Design Tokens armazenam decisões de design.
Imagine que os tokens são como camadas de uma construção, onde cada nível se apoia no anterior para criar significado e especificidade. Na base, temos os valores mais puros e fundamentais. À medida que subimos nas camadas, esses valores ganham contexto e significado através de tokens mais semânticos e específicos.
É como uma pirâmide de abstração, onde cada camada traduz e refina o significado da camada anterior. No topo, temos tokens bem mais específicos que herdam suas características das camadas inferiores, permitindo mudanças consistentes e controladas em todo o sistema.
E isso permite que exista uma integração perfeita entre design e código, garantindo flexibilidade, clareza e consistência.
Quais são os principais benefícios dos tokens?
Facilidade de manutenção
Imagine que você tenha uma cor primária e suas variações todas definidas apenas como valores brutos no design e no código. E aí um belo dia você resolve alterar essa cor primária.
A nível de design, você teria que atualizar todos os componentes manualmente e adicionar os novos valores brutos das cores em cada um.
A nível de código, você teria que rastrear cada local onde a cor é utilizada e alterar manualmente.
Com os tokens bem estruturados você não precisa fazer isso. Você altera o token e ele replica as alterações automaticamente. É uma baita economia de tempo né?
Melhora a comunicação com desenvolvedores
O que seria mais fácil dizer?
- Tivemos uma reunião com a Marina hoje;
- Ou, tivemos uma reunião com aquela mulher de cabelos longos, olhos azuis e estatura média.
Se você escolheu a primeira opção, está correto. Tokens semânticos tornam a comunicação mais clara e fácil de entender. É melhor falar “$color-content-primary” do que “#141414”.
Reduz as chances de erros
Quando você usa apenas os valores brutos, a cada vez que precisar alterar esse valor, você tem que percorrer todo o sistema para realizar a alteração o que pode resultar em erros ou locais onde os valores se diferem.
Com o uso de tokens isso não acontece.
Tipos de tokens
Raw values (Valores brutos)
São os valores brutos, como cores em hexadecimal (#FFFFFF), unidades de tamanho (px, rem, em), percentuais, números, etc. Não são considerados tokens.
Primitivos/Globais
Nos diz quais propriedades e valores existem no nosso produto. É a primeira camada de abstração dos tokens e normalmente usam nomes mais genéricos.
Esses tokens por servirem como referências (Foundation) nunca devem ser aplicados diretamente em um componente ou interface. E normalmente ficam visíveis apenas para a equipe de Design System para dar manutenção e criar as demais camadas de tokens.
Tokens Semânticos (ou Alias)
Os tokens semânticos nos dão um contexto de “Como?” um token deve ser usado, comunicando significado, propósito e o como e onde ele deve ser aplicado. Nessa camada de abstração começamos a ter uma semântica mais específica de uso.
E normalmente são tokens que ficam visíveis e podem ser aplicados no Design pelos usuários que utilizam o Design System.
No exemplo acima, o $color-primary é um token semântico que representa a cor principal do sistema. Ele se conecta ao token global $purple-500 que tem o valor em hexadecimal de #592BCB.
Ao invés de espalharmos vários códigos em hexadecimal pelo código e design, nós podemos usar esse token semântico que nos comunica de forma clara que esta é a cor principal, usada para elementos de destaque e que precisam transmitir a identidade da marca.
E o mais interessante é que isso torna todo o sistema mais flexível e de fácil manutenção. Imagine que no futuro você queira mudar a cor primária para azul, com essa estrutura basta atualizar o token global com o novo valor e todos os lugares que utilizarem a cor primária serão atualizados automaticamente.
Tokens específicos de componentes
Esses tokens dão mais especificidade de uso, dizendo onde o token é utilizado de forma bem específica. Normalmente é utilizado em sistemas maiores, não sendo necessário para todos os cenários.
No exemplo acima, o token $button-primary-background define exclusivamente a cor de fundo do botão primário, criando uma camada de abstração adicional e que, apesar de aumentar a complexidade do sistema, traz benefícios para manutenção e escalabilidade.
Outros exemplos práticos:
- $input-border-color: para cor da borda de campos de input;
- $card-shadow: para efeitos de sombra específico para cards;
- $modal-backdrop-opacity: para opacidade do fundo do modal;
- $tooltip-arrow-size: para o tamanho da seta dos tooltips.
Um ponto interessante é que você pode usar tokens semânticos e específicos de componentes no mesmo nível de hierarquia, não tendo que seguir à risca as camadas de abstração.
Em sistemas menores, você pode optar em trabalhar apenas com os tokens semânticos aplicados diretamente nos componentes, e até mesmo dar significados mais específicos pra eles e remover essa camada de tokens específicos para componentes. Mas isso deve ser avaliado pra cada cenário.
Insights finais
Os tokens são a espinha dorsal de um design system e criam uma base sólida e consistente pro sistema. Além disso, permite que todas as partes envolvidas na construção do Design System se comuniquem na mesma língua (designers e desenvolvedores, por exemplo).
Essa padronização, que é a base para construção de qualquer Design System, torna o sistema escalável, manutenível, eficiente e ágil. Por isso, vale muito a pena planejar e construir esse alicerce com cuidado e atenção.