Criando consistência de design com tokens

Imagine você entrar em um site e cada elemento da página possui um estilo diferente. Múltiplos tipos de fonte, cada texto com um tamanho, uso de diversos tipos e tons de cores sem nenhuma lógica aparente, espaçamentos entre componentes que nunca se alinham... é um pesadelo tentar entender qualquer coisa nesse cenário.

Para diminuir a carga cognitiva, usuários buscam padrões e modelos que tornem as interações simples e fáceis. No design da experiência do usuário, um dos fatores que contribui para esse objetivo é a consistência.

O que significa consistência em design?

A consistência no design une os elementos, facilita o entendimento da conexão entre os componentes e garante que o seu usuário sinta-se seguro para aprender e a explorar seu produto.

Ao garantir que a consistência seja prioridade, seu produto terá ótima usabilidade e acessibilidade. Os usuários poderão navegar facilmente pelo seu produto sem parar para questionar se estão fazendo algo errado.

Existem diversas maneiras de buscar e garantir consistência no design de um produto. Principalmente no momento de concepção das ideias e protótipos.

O propósito deste artigo não é detalhar todos os métodos. Mas sim falar de um em específico: design tokens.

O que são design tokens?

De maneira resumida, Design Tokens são variáveis semânticas que carregam determinadas informações. Como cores, espaçamentos e tamanhos, que quando sozinhos parecem não ter muita importância, mas que em conjunto são muito relevantes para determinar a consistência de um produto.

Cada token tem um nome exclusivo que faz referência a um valor específico. Por exemplo, quando a pessoa designer precisa definir uma cor de fundo, ao invés de usar o valor #ffffff no elemento, passaria a usar background-primary.

Pode parecer desnecessário, em primeiro momento, utilizar background-primary sendo que essa variável tem o valor #ffffff. Mas imagine que no futuro queremos alterar a cor de fundo do nosso produto para um tom mais cinza, como #fafafa. Como isso seria feito sem tokens?

Teríamos que localizar todos os lugares do nosso produto que estão usando o valor #ffffff, garantir que estão sendo usado para cor de fundo e ai substituir todos para #fafafa. Já com o uso do token background-primary, nós já garantimos que todos os usos são referentes a cor de fundo (o nome semântico nos ajuda a garantir isso) e caso necessitamos alterar o valor, basta alterar em um único lugar para que todo o seu produto reflita essa mudança.

Como design tokens garantem consistência?

Definindo uma lista semântica de variáveis, faz com que a pessoa responsável pela implementação (seja no Figma ou o código CSS) selecione apenas valores existentes ao invés de usar valores e variações específicas.

Introduzir um novo valor, como por exemplo tamanho de fonte, se torna mais difícil. Pois o fluxo de trabalho, das pessoas designers e desenvolvedoras, passa a ser de utilizar valores pré-existentes. Qualquer valor que não tenha uma variável estabelecida, é facilmente identificado como variante.

A utilização do tokens torna o processo saudável, evitando atritos e inconsistências, tornando o processo flexível e dinâmico para todos os envolvidos.

Nos próximos artigos, vamos mostrar a implementação dos design tokens da Trybe e como garantimos que pessoas designers e desenvolvedoras utilizem o mesmo valor tendo uma única fonte da verdade. Aguarde!