Como utilizamos design tokens na Trybe
Published: 2022-08-31 17:42:23


Em uma [publicação anterior](https://dev.to/trybe/criando-consistencia-de-design-com-tokens-1j2), apontamos a importância da consistência no design de uma aplicação e como isso pode ser alcançado com o uso de design tokens.

Neste post, vamos mostrar como a Trybe utiliza os tokens de design no dia a dia.

## Nossos tokens

Nosso time de design definiu 6 categorias de tokens que são usados nos nossos produtos:

- Cor
- Tipografia
- Sombra
- Borda
- Espaçamentos
- Z-index

Não cabe a este post entrar em detalhes de cada valor dos nossos tokens e como foram definidos. A definição dos valores dos tokens de um produto deve partir de uma análise feita pelo time de design para encontrar padrões que irão representar a marca/produto em questão.

## Fonte da verdade

Um ponto muito importante para sucesso e adoção dos tokens é ter uma maneira simples onde design e desenvolvimento possam **_consumir os mesmos valores_**.

Como fonte da verdade dos nossos tokens, adotamos um arquivo JSON.

![Visualização do JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6ocperfk38pp7pstrbt.png)

### Como design constrói e utiliza o JSON?

Sabemos que não é uma experiencia muito boa definir manualmente valores em um JSON. Pensando nisso, buscamos uma ferramenta que nos auxiliasse no processo e encontramos o [Figma Tokens](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens).

O Figma Tokens é um plugin disponível na comunidade do Figma, que possibilita a administração de tokens que podem ser aplicados durante a construção de um layout, dessa forma o próprio plugin gera e consome o arquivo JSON.

No caso da Trybe, demos um passo a mais e conectamos o plugin à nossa conta do Github e o JSON oficial fica armazenado no repositório do nosso Design System.

![Imagem representação do figma tokens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4qk04sizjmouzhwbwj1.png)

O Figma Tokens também  possibilita a adição de temas relacionados aos tokens, como por exemplo um tema escuro. Mas vamos falar sobre _dark mode_ em um outro post.

### Como desenvolvimento constrói e utiliza o JSON?

Outro ponto importante da adoção dos tokens de design é o uso deles no nosso código. Mas como podemos usar valores de um JSON no nosso CSS?

O primeiro passo é converter esse JSON em um padrão que possa ser usado pela nossa linguagem de programação. Para isso nós usamos o [Style Dictionary](https://amzn.github.io/style-dictionary/#/). Essa ferramenta nos possibilita converter o JSON em muitos outros formatos, como por exemplo, variáveis de CSS puras.

No caso da Trybe, estamos utilizando uma biblioteca de estilização no JavaScript chamada [Stitches](https://stitches.dev/). Essa biblioteca já tem suporte a variáveis e nos da uma ótima experiência de desenvolvimento.

Para utilizarmos as variáveis do _Stitches_, usamos o _Styled Dictionary_ para converter os valores do JSON para variáveis JavaScript e passamos esses valores para a [configuração do Stitches](https://stitches.dev/docs/tokens).

Assim utilizamos nossos tokens de maneira direta no momento de estilização de um componente.

![Exemplo de código com Stitches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bajvp5rmqdewo0vxyc23.png)

## Conclusão

Utilizando as ferramentas _Figma Tokens_, _Style Dictionary_ e _Stitches_ a Trybe garante que tanto o time de design quanto o time de desenvolvimento falem a mesma linguagem e utilizem os mesmos valores durante o desenvolvimento. 

Esse padrão garante não só um bom alinhamento entre os times, mas diminui a carga cognitiva que nosso time precisa durante a execução de uma tarefa, pois todos esses valores já estão definidos e são usados de maneira semântica. 

E assim estamos cada vez mais perto de alcançar a consistência de design no nosso produto.