Como utilizamos design tokens na Trybe

Claudio Furini Jr. — Wed, 31 Aug 2022 17:42:23 +0000

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.

Criando consistência de design com tokens

Claudio Furini Jr. — Wed, 06 Apr 2022 20:10:21 +0000

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.

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.

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.

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!

Forem: Claudio Furini Jr.