Em uma publicação anterior, 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.
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.
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.
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. 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. 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.
Assim utilizamos nossos tokens de maneira direta no momento de estilização de um componente.
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.
Top comments (1)
Massa, parabéns pelo post @claudiofurinijr!