Projeto · Abril de 2023

Design Tokens: Construindo uma base

Defini as regras de estruturação dos Design Tokens do Letras, criando a base pra uma renovação completa das Foundations do produto.

Durante esse projeto, meu foco foi definir as regras de estruturação dos Design Tokens, peças fundamentais para o próximo passo do Letras, que consistiria em uma renovação completa das nossas Foundations.

Enfrentei o desafio de entender claramente o conceito de tokens. Inicialmente, havia uma percepção equivocada de que eram apenas chaves com códigos, mas descobrimos que se referem apenas a atributos de design como cores, fontes, tamanhos e espaçamentos.

Para alinhar essa perspectiva entre o time de design e os desenvolvedores, preocupado com design tokens já existentes no código, examinando sua utilização e abertura para ajustes. Estudei diversas fontes, destacando a documentação do Material Design 3.

Adotamos o Material Design 3 como base, estruturando nosso guia:

1. O que é um Design Token?: Explicação da definição e propósito.

2. Como ler tokens: Descrição da estrutura, exemplificada como “cosmos-ref-color-neutral600,” onde cada parte representa um aspecto específico.

   • “cosmos”: Nome do Design System.
   • “ref”: Tipo do token.
   • “color”: Representação da foundation.
   • “neutral600”: Categoria e escala da foundation.

   Essa estrutura foi projetada para comunicar de forma concisa, levando em consideração a organização prioritária pelo time de Android, onde usamos ponto final para indicar subpastas. Os demais times seguiram a mesma estrutura, mudando apenas o caractere de separação. Frontend hífen, iOS underline e Android ponto final.

3. Tipos de tokens: Aprofundamos o significado do “ref” como “reference”, o nosso tipo de token base. E introduzimos “Alias”, os tipos de tokens que permitem camadas adicionais e reutilização, token dentro de token, oferecendo flexibilidade ao sistema.

Com essa estrutura, implementamos Design Tokens padronizados, facilitando a compreensão dos atributos de design no código e permitindo manutenção eficiente e padronizada. Mudanças, como a alteração de uma cor, são feitas centralizadas nos tokens, eliminando a modificação de hexadecimal em várias partes do código.