O que são Design Tokens?

marcelcorradi
5 min readDec 22, 2024

--

Definindo tokens de cores do Design System

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.

Estrutura em camadas dos tokens de design

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.
Exemplo de tokens semânticos para características físicas

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.

Exemplo de token global e seu valor bruto

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.

Relação entre valor bruto, token global e token semântico

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.

Do token semântico ao token de componente

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.

--

--

marcelcorradi
marcelcorradi

No responses yet