Criando consistência de design com tokens
Tags: figma, design, token, frontend
Published: 2022-04-06 20:10:21

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`.


![Exemplo de token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4yav3ovj94yl09ionhq.png)

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.


![Imagem representando a alteração de valores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h3od88g31es7uywmyc8.png)

## 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.


![Uso dos tokens em um elemento](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g49d3mtkhfez4k3wirzl.png)

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!