Entenda o que são os Design Tokens de um Design System

O termo “Design Tokens” foi sugerido em 2014 pela Jina Anne, designer da Salesforce enquanto trabalhava, junto com a equipe de Design, no Design System da empresa.

A ideia consistia em trazer uma nomenclatura às fontes indivisíveis de um produto como as cores, formas e tipografias para uma melhor manutenção desses aspectos sem a necessidade de tantos retrabalhos.

Se você já ouviu falar do Atomic Design, pense nos tokens como os íons que compõem os átomos, como na representação abaixo:

O que é um Design Token?

Eles definem Design tokens como “os átomos de design visual do sistema de design — especificamente, eles são entidades nomeadas que armazenam atributos de design visual. Nós os usamos no lugar de valores codificados (como valores hexadecimais para cores ou valores de pixels para espaçamento) a fim de manter um sistema visual escalonável e consistente para o desenvolvimento da UI”.

Simplificando, Design Tokens são variáveis que carregam determinadas informações não dependentes de uma tecnologia específica. São coisas 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.

Ok, mas você deve estar se perguntando: O que são variáveis?

Variáveis são uma espécie de reservatório que pode armazenar um certo tipo de informação, seja ela um número, uma palavra, um valor, etc. Para exemplificar melhor, imagine um arquivo físico com uma gaveta. Dentro desta gaveta guardamos um objeto qualquer, como um lápis, por exemplo. Agora, vamos imaginar que essa gaveta seja uma variável, e o objeto dentro dela seja o seu respectivo valor:

Gaveta = Lápis

Agora imaginemos que o conteúdo da gaveta foi alterado. Alguém retirou o lápis e colocou no lugar um fita adesiva. Se pensarmos como uma variável, ela ficaria assim:

Gaveta = Fita adesiva

Embora a gaveta tenha sofrido alteração em seu conteúdo, ela continua sendo uma gaveta. O mesmo funciona com a variável, que serve como reservatório para informações que eventualmente podem sofrer alterações.

Legal, agora entendi o que são variáveis. Mas o que isso tem a ver com Design?

Essas variáveis são as peças principais em um Design System. Os tokens de Design são usados no lugar de valores e variações embutidas em código, trazendo flexibilidade e unanimidade, o que permite uma colaboração entre as equipes envolvidas com o produto, garantindo consistência e personalidade tanto da plataforma quanto da marca.

Como documentar um Design Token

Um Design Token bem documentado exibe as definições essenciais para manter um sistema coeso. Essas decisões, trazem algumas opções a designers e desenvolvedores na hora de reutilizar ou construir um novo átomo ou componente de forma simples e rápida.

Para melhor entendimento, os Tokens de um Design System devem ser divididos em duas classes: decisão e escolha. As diferenças são mais conceituais do que técnicas, mas o intuito é apresentar uma quantidade finita de escolhas, como as cores disponíveis no sistema, e apresentar decisões como qual cor usar em determinado estado do botão principal.

Escolhas

São caracterizadas como o Design Token principal, em seu estado mais primitivo, como os íons de um átomo, sendo cor, tamanho e fonte os mais comuns encontrados nos sistemas. Dentro das escolhas nós temos:

Valores Brutos: Caracterizados pelos valores de código como: HEX, RGB, para nos referirmos às cores ou outros valores referentes a unidades de comprimento e porcentagens.

Variáveis ​​Básicas: Que representam os valores primitivos, podendo ser uma junção de valores brutos como: o nome de uma cor e sua saturação (black-500).

Decisão

Já as decisões se referem a uma escolha aplicada a um caso de uso (que nada mais é do que uma decisão), gerando um nome para esse token. Dentro das decisões nós temos:

Tokens comuns: atendem um contexto específico, onde ajudam a transmitir a finalidade pretendida de um token que consiste em apresentar um valor (como as cores) e sua ação.

Tokens de componentes: se relacionam a um componente específico e sua tarefa corresponde unicamente ao componente no qual pertence. Essa comunicação não é somente as propriedades de destino, mas também se estende aos estados atribuídos.

Nesse contexto, entendemos que é possível alterar um valor (que seriam nossas escolhas) sem renomear o token. O que facilita o entendimento da decisão tomada para aquele token.

Anatomia de um token

Os nomes dos tokens devem informar quando e onde devem ser usados sem a necessidade de examinar seu valor, ou seja, devem demonstrar clareza em todos os seus aspectos. Abaixo, um exemplo de nome de uma estrutura de token, onde podemos observar que mesmo sem documentação ou valor, é possível dizer que se trata de um token de cor, que será usado no fundo de contêineres, e que poderá apresentar diferentes variantes que definem hierarquias e também os estados que este elemento pode possuir.

Imagem: miro engineering via medium

DT em ferramentas de design

O Design Token não deve ser somente uma ferramenta para os desenvolvedores, mas também uma opção para os designers. Devemos pensar na possibilidade de estendê-lo para ferramentas de design, considerando sempre a configuração e manutenção relativas aos benefícios para experiência do usuário. Embora no geral não tenhamos ferramentas de design que possuam essa função nativamente, ferramentas como o Figma, Sketch, Adobe XD e InVision são boas alternativas de ferramentas para criação de um sistema de design tokens, possibilitando ao designer uma forma mais intuitiva de organização.

Imagem: miro engineering via medium

Quando começar um Design System lembre-se dessa abordagem. A utilização do Design Tokens no processo de criação de um DS torna o processo saudável tanto para o Designer quanto para o Desenvolvedor, evitando atritos e inconsistências, tornando o processo flexível e dinâmico para todos os envolvidos.

Referências:

Design System na visão da Meiuca
Design Tokens: an introduction
Design Tokens on your design system
Design Tokens: what are they & how will they help you?
Design Tokens Cheat Sheet
Nomeando tokens em sistemas de design
O que são Design Tokens

Conteúdo produzido de forma colaborativa pelos UX/UI designers Fabiano Favretto e Giovana Vendramini.

Originally published at https://ateliware.com.