Como implementamos Tokens Semânticos no Tangram
No meu último post falei sobre o desafio de manter a consistência nas decisões de design mantendo o ritmo de crescimento de um produto digital.
Quando criamos a nova versão do nosso design system, o Tangram, o processo de rebranding da RD Station estava em andamento e haviam muitas dúvidas sobre como as cores do produto poderiam ser afetadas nesse processo.
Na epoca, nosso produto era predominantemente azul e dispunhamos de três tons da cor primária, alguns tons de cinza e algumas cores de suporte. Como a quantidade limitada de cores já era um problema apontado pelos designers, aproveitamos para adicionar novas cores e multiplicar o número de tons, dando mais flexibilidade para o processo de redesign que estaria por vir.
Inicialmente, elencamos cores básicas que seriam necessárias para o redesign do produto e criamos diversas tonalidades para cada uma delas.
A nomenclatura foi a mais simples e ambígua possível, para permitir que as cores fossem utilizadas de forma mais “criativa” durante o redesign. Por exemplo, a cor roxa foi chamada de “purple” para que pudesse ser utilizada tanto como possível cor secundária (era uma hipótese) quanto como cor de ajuda ou de destaque, caso fosse necessário.
À medida em que as telas iam sendo redesenhadas, percebemos que a aplicação destes tokens estava gerando dúvidas em designers e desenvolvedores e levando inconsistências para o produto.
Entendemos que um dos motivos das dúvidas estava ligado à esta estrutura de tokens ambígua, ou seja, nossa estrutura de cores não deixava claro suas aplicações e, com certa frequência, surgiam perguntas como “o cinza da borda é color-gray-20 ou color-gray-30?” ou então “a cor primária principal é color-primary-60 ou color-primary-70?”. Tinhamos, inclusive, documentações de apoio que precisavam ser consultadas e revisadas durante a aplicação de estilos.
Havia, então, uma boa oportunidade para melhorarmos esta estrutura utilizando os próprios tokens como guias de uso. Para isso, optamos por adotar a abordagem de Tokens Semânticos ou Design Tokens. Tokens Semânticos são tokens que possuem significados e podem ter várias camadas de abstração, de acordo com as necessidades de projeto.
Se quiser saber mais sobre isso, recomendo este ótimo artigo do Carlos Henrique Filho.
Esta pirâmide demonstra os diversos níveis de abstração que Tokens Semânticos podem ter. A variável primary-60, por exemplo, não informa onde e como este estilo deve ser aplicado. É uma cor primária de borda, de superfície ou de texto? Não há como saber sem uma documentação de apoio.
Já a variável surface-actions adiciona sentido ao token, informando que é uma cor para superfícies de objetos acionáveis, como botões, por exemplo.
Reduzindo ainda mais o grau de abstração, os tokens podem estilizar propriedades bem específicas de um componente, como button-background-color. Nesse caso, esta cor só poderá ser aplicada na cor de fundo de um botão.
Quanto menos abstrata for a sua estrutura de tokens, mais clara será a resposta à pergunta “onde aplicá-lo” e também maior será o número de tokens necessários para cobrir todos os casos de uso.
No nosso caso, olhando para a pirâmide, optamos por um nível de abstração por “contexto” que funciona como guia para a aplicação, ao mesmo tempo em que permite a utilização do mesmo estilo em componentes diferentes.
Se você trabalha em um design system que serve à múltiplas marcas, recomendo esta live do pessoal da XP Inc. sobre estruturas de tokens focadas nisso.
Criando Tokens Semânticos
O primeiro passo para a criação da nossa nova estrutura de tokens foi separar as principais cores utilizadas na interface do produto e renomeá-las de forma semântica. Com isso, saimos de color-gray para neutral e de color-functional-red para color-danger. Neste ponto, algumas decisões já haviam sido tomadas, como a adoção da cor da marca como primary e da cor roxa como highlight.
O segundo passo envolveu um levantamento de todas as propriedades que recebem cores em nosso produto. Chegamos em 4 propriedades que se repetem nos componentes: borda, superfície, texto e ícone.
Optamos pelo uso do termo “surface” (superfície) em vez de “background” (plano de fundo) para fazer sentido na aplicação dessas cores também como foreground (primeiro plano) em alguns componentes mais específicos.
O terceiro passo foi listar a proeminência de cada elemento, ou seja, se tem maior ou menor destaque e quantos níveis de destaque precisávamos para cada cor.
Isso resultou em elementos com diferentes níveis de proeminência. Alguns possuem apenas o nível default, como a borda de um botão, por exemplo, enquanto outros possuem 3 níveis, como uma superfície que pode ser default, high-emphasis e low-emphasis.
O quarto passo foi adicionar o estado de cada elemento. Isso pode variar de produto para produto e da forma como componentes são montados. No nosso caso, até o momento, temos os estados default (que omitimos do nome por questões de praticidade), hover, disabled e inverse.
Até o momento, esta foi a estrutura semântica que melhor nos atendeu. Ao criar seus próprios Tokens Semânticos considere os desafios específicos do seu projeto. Neste video, Jina Anne, Ainsley Wagoner, Ivy Wang apresentam o modelo de design tokens utilizado por elas no design system da Asana. Vale assistir!
Criando temas
Além de facilitar a estilização de componentes e interfaces, a abordagem de Tokens Semânticos também facilita a criação de temas.
Nos testes que fizemos para a criação de um tema escuro (”dark mode”), nossa estrutura antiga, composta de uma escala de cinzas de 10 à 100 resultou em telas mais “duras”, já que haviam poucas nuances, enquanto que com os Tokens Semânticos conseguimos fazer ajustes finos, que deixaram a interface mais agradável.
Como a estrutura de tokens é criada a partir da aplicação de cada cor e não de uma lista estática de cores com diferentes tonalidades, a criação de múltiplos temas fica mais fácil, pois cada cor pode ser modificada individualmente de acordo com as necessidades do tema e isso agiliza muito a criação de novos temas.
Já conhecia essa abordagem ou enfrenta um desafio parecido em algum projeto? Deixe um comentário contanto como foi e vamos conversar! ;)
