O que são Design Tokens?

Uma tentativa de tornar acessível um conceito técnico e importante para a construção de design systems.

Estrutura de tokens desenvolvida pelo time da Meiuca Design. Na imagem temos a representação visual de uma escala de cores tokenizadas, com cores da marca e cores neutras que vão em cinco tonalidades do mais escuro para mais claro.

Nas conversas que participo sobre design system, nos artigos, nas palestras e talks online que estão por toda a parte, vejo que o termo design tokens ainda fica vago para alguns. Se você está começando agora na área e não tem background de desenvolvimento pode ser difícil compreender qual a importância e a função dessa variável semântica de estilo.

Variável semântica de estilo

Esse é o termo definido pela Meiuca Design para Design Tokens. Inclusive, super indico a formação de Design Ops que eles oferecem.

Aí eu pergunto, o que é uma variável semântica de estilo?

Variável

Do dicionário:

1. sujeito a variações ou mudanças; que pode variar; inconstante, instável.

2. “clima v.” que pode assumir qualquer um dos valores em um conjunto de valores. “na equação, certos símbolos têm valor v.”

Da Wikipédia:

Na programação, uma variável é um objeto capaz de reter e representar um valor ou expressão. Enquanto as variáveis só “existem” em tempo de execução, elas são associadas a “nomes”, chamados identificadores, durante o tempo de desenvolvimento.

Tá difícil ainda? Ok, vamos explorar um pouco melhor.

Uma variável em nosso contexto, basicamente é uma propriedade que contém uma informação na qual o próprio nome já diz, pode variar.

Por exemplo, ao invés de dizer que uma cor contém a informação hexadecimal: #00C2FF eu crio uma variável para representar a informação.

Então teríamos a variável:
cor-da-marca-principal

e dentro dessa variável eu poderia atribuir a informação do hexadecimal da minha cor.
cor-da-marca-principal = #00C2FF

A partir de agora, toda vez que eu quiser me referir a essa cor, ao invés de usar o código hexadecimal, eu uso a expressão "cor-da-marca-principal".

Certo, mas você ainda pode não saber o que é semântica.

Do dicionário:

1. LINGUÍSTICA
estudo sincrônico ou diacrônico da significação como parte dos sistemas das línguas naturais.

2. LINGUÍSTICA
num sistema linguístico, o componente do sentido das palavras e da interpretação das sentenças e dos enunciados.

Do Wikipédia:

Semântica é o estudo do significado. Incide sobre a relação entre significantes, tais como palavras, frases, sinais e símbolos, e o que eles representam, a sua denotação. A semântica linguística estuda o significado usado por seres humanos para se expressar através da linguagem.

Para compreender melhor em nosso contexto, a semântica seria o significado que essa variável representa, mas um significado que faça sentido para todos os envolvidos do produto de forma acessível.

Então quando mencionei a variável: "cor-da-marca-principal = #00C2FF" fica claro que se trata de uma cor da marca e que ela á cor principal, pressupondo que existe outras cores da marca. Isso vale para diversos cenários, por exemplo:

familia-de-fonte-primaria = Arial

tamanho-de-fonte-pequeno = 16px

bordas-arredondadas-grande = 24px

espacamento-vertical-medio = 32px

Tá, mas esse tal de estilo?

Estilo

Beleza, dessa vez não vou chamar o dicionário tá.

Quando falamos em estilizar um componente, estamos falando de sua forma, cor, tamanho e em geral sua aparência visual.

Eu posso ter um simples botão sem aplicação de estilo (por exemplo o estilo padrão do navegador), ou posso aplicar estilos conforme propriedades da aparência definidas pelo designer. Nesse caso, cantos arredondados, um preenchimento azul e uma fonte sem serifa em branco.

Dois botões representando uma aplicação de estilos com um texto "título do botão". À esquerda um botão com cantos retos, contorno preto e fonte serifada sugerindo um padrão do navegador, e, à direita um botão com as propriedades de estilo aplicada, cantos arredondados, cor de preenchimento azul e fonte sem serifa.

Agora com esses conceitos mais claros, vamos tentar reformular essa tal de variável semântica de estilo.

Podemos definir então que uma variável semântica de estilo é uma propriedade que tenha um significado acessível a todos do time e contém uma informação referente a aparência de um respectivo componente.

Imagem com uma representação visual da estrutura de um design token: onde a semântica abrange a expressão "cor-da-marca-principal", o estilo abrange o valor do hexadecimal da cor "00C2FF" e a variável abrangendo a expressão "cor-da-marca-principal" mais o valor do hexadecimal"00C2FF".

Então é isso? Acabou? Todos sabemos o que é um Design Token?

Imagem animada com 3 carros de corrida, cada carro carrega uma palavra, o primeiro com a palavra "sim", o segundo com a palavra "talvez" e o terceiro com a palavra "não", eles vão oscilando a liderança e no final o carro com a palavra "talvez" vence.

Você pode até ter entendido o que é essa variável semântica de estilo, mas qual é a sua verdadeira importância e função no Design System?

O Design Token é declarado em uma folha de estilos que pode estar em diversas linguagens, como JSON, XML ou CSS por exemplo, e será a partir dela que os objetos terão forma na tela.

O Design Token surgiu para facilitar a vida dos designers e principalmente dos desenvolvedores, pois quanto maior o tamanho do projeto e de pessoas envolvidas nele, maior se torna o problema caso precisarmos ajustar algumas propriedades no código.

Por exemplo, vamos tentar ilustrar alguns componentes da biblioteca:

Imagem ilustrativa de componentes de uma biblioteca de design com toogle, tag, botões de diversos tamanhos, um menu com ícones e um campo de inserção de texto, todos na cor azul.

Se abstrairmos o conceito de design tokens, iremos deixar as cores desses elementos dessa maneira: "#00C2FF"

Até então nenhum problema, a missão foi cumprida e meus componentes estão nas cores corretas que foi definida.

Porém, após um estudo de acessibilidade, foi descoberto que esse tom de azul tem problemas de contraste e prejudica a leitura quando aplicado com uma fonte branca. Será preciso ajustar o tom e deixar mais escuro, a partir de agora a cor passa a ser "009CCE"

Pense no retrabalho que isso pode gerar, podemos estar falando em centenas de componentes espalhados por seu produto que estão com essa cor e será preciso visitar um a um para fazer os ajustes, tanto no software de design, quanto no código.

Agora, vamos aplicar o conceito de tokens nesse cenário e veja a tranquilidade que nos traz nas adversidades.

Vamos definir o token da cor principal da marca que será "00C2FF"

cor-da-marca-principal = #00C2FF

Em todo o momento que desejar usar essa cor vou usar o token ao invés do valor final.

Por ex: cor do botão > cor-da-marca-principal

Botão com cantos arredondados, cor de preenchimento azul e fonte sem serifa.

Agora vamos ao problema de acessibilidade com a cor e será necessário ajustar.

Vamos redefinir o token da cor principal da marca que será “009CCE”

cor-da-marca-principal = #009CCE

Agora não precisamos mudar em cada componente, pois o valor da cor não está nele e sim no token.

Dessa forma, todos os componentes que estiverem com o token "cor-da-marca-principal" passa a ter o novo valor hexadecimal da cor. Ao invés do desenvolvedor ajustar nas linhas de código da aplicação, ele só precisa ajustar a folha de estilos e atualizar de forma que irá ser consumido por todas as plataformas. Na prática funciona assim:

Diagrama representando a distribuição da folha de estilos dos design tokens acima e abaixo temos lado a lado, aplicação web, Android e IOS.

Essa foi uma tentativa de ilustrar melhor o que são os design tokens, esse conceito tão complexo que ainda gera muitas dúvidas na comunidade, ainda mais para quem está começando se aprofundar no tema.

Espero ter ajudado e se tiver mais elementos para ajudar a esclarecer, vou adorar conversar sobre o assunto.

O UX Collective doa US$1 para cada artigo publicado na nossa plataforma. Esta história contribuiu para o UX Para Minas Pretas (UX For Black Women), uma organização Brasileira focada em promover equidade para mulheres Pretas na indústria de tech através de iniciativas de ação, empoderamento, e troca de conhecimento. Silêncio contra o racismo sistêmico enraizado na sociedade não é uma opção. Construa a comunidade de design na qual você acredita.