Design Tokens: como pode ajudar desenvolvedores Front-End
O Design Token nasceu para tornar a vida dos designers e desenvolvedores mais prática e com o menor número de problemas na hora de ajustar propriedades no código.
O termo se refere aos atributos dos elementos de User Interface (UI) como cor, espaçamento, família tipográfica, etc., e serve para garantir a consistência visual de produtos digitais.
No entanto, esse conceito ainda provoca muitas dúvidas, principalmente quando vamos relacionar com sua função no design system.
O foco deste conteúdo é explicar para desenvolvedores o funcionamento dos design tokens e como estes podem auxiliar nos desenvolvimentos de aplicações. Para isso, organizamos o post da seguinte maneira:
- O que é Design Tokens?
- A Semântica
- Como Design Tokens impacta no Front-End?
- Aplicando do Root
- Aplicando no Sass
- Criando um Framework
- O Conceito de Micro Front-End
Continue lendo e aprenda como melhorar seu desempenho tanto em performance como no meio organizacional.
O que é Design Tokens?
O termo Design Tokens foi criado em 2014 pela designer Jina Anne que atuava na Sales Force. Os tokens foram criados para padronizar valores dos elementos que compõem uma interface como cores, espaçamentos, família tipográfica, tamanho de fontes, etc.
A aplicação de tokens costuma ser utilizada em projetos que contém o conceito de Design System. Quando um Designer System Ops aplica esse conceito, umas de suas tarefas é padronizar quais serão os tokens que ele irá inserir em todo seu projeto.
A Semântica
A semântica utilizada nos tokens vem padronizada pelo Design, ou seja, cada um deles terá o aspecto de como irá se comportar de acordo com o que o ele se refere.
Exemplo:
Para cores
Este exemplo foi dividido em três estados. A primeira palavra se refere ao o que esse token está se atribuindo, no caso cor ou “color”. A segunda palavra indica qual o nome da cor, sendo ela “primary” ou “secondary”. A terceira aponta o valor do token “dark” para a cor mais escura, “pure” para a cor nativa e “light” para a cor mais clara.
1- color
2- primary, secondary
3- dark, pure, light
O exemplo acima não é uma regra na criação de tokens para cores, uma vez que o Designer System Ops tem como objetivo analisar qual a melhor forma de trabalhar com as cores da marca que tem em mãos. Por isso, quando esse processo for iniciado é muito importante a presença de um Front-End.
Como Design Tokens impacta no Front-End?
O termo variável semântica de estilo foi criado pela Meuica Design para ressignificar o Design Tokens.
Ou seja, os Design Tokens são nada mais do que variáveis.
Se você for um Front-End que já desenvolveu com Sass, Less, SCSS, Styled Components e afins, já se deparou com utilização de variáveis para auxiliar no seu processo de desenvolvimento.
Quando os tokens chegam para o desenvolvedor, é papel dele pensar na forma de distribuição ao longo do projeto.
As práticas que podemos então aplicar, seriam simplesmente alojando essas variáveis em seu projeto, como por exemplo no :root, aplicando em algum arquivo de variável (Sass, Less, SCSS), criando um framework para o seu projeto, ou executando o conceito de micro Front-End.
Aplicando do Root
No arquivo do html. no index do seu projeto vamos abrir uma tag “style” e dentro será colocado o atributo “:root” e nele ocorrerá a distribuição de suas variáveis.
Segue abaixo o exemplo:
<style>
:root {
— color-primary-dark: #3C145C;
— color-primary-pure: #8F30DB;
— color-primary-light: #B175E1;
— color-secondary-dark: #803700;
— color-secondary-pure: #FF6F00;
— color-secondary-light #FF9A4D;
}
</style>
O root é uma pseudo-classe que serve para aplicar regras na raiz de seu html, nele podemos aplicar as variáveis em outro elemento, mas é aconselhado utilizar o root uma vez que ele se aplica diretamente ao seu html, ou seja, você poderá utilizá-lo em qualquer circunstância no seu projeto. Segue abaixo um exemplo de como você pode chamar a variável no css:
.title { color: var( — color-primary-pure); }
Aplicando no Sass
Em um projeto que se utiliza o Sass ou Less, a sintaxe entre os dois muda um pouco, mas o conceito é o mesmo. Iremos utilizar o Sass como exemplo.
Na arquitetura de pastas em que se utiliza a tecnologia, pode-se criar um arquivo denominado de “variáveis”, “variable” ou até mesmo “tokens”, nesse documento serão distribuídas todas as variáveis que se tem a disposição assim como já foi citado acima no :root.
Segue o exemplo abaixo:
//brand colors
$color-primary-dark: #3C145C;
$color-primary-pure: #8F30DB;
$color-primary-light: #B175E1;
$color-secondary-dark: #803700;
$color-secondary-pure: #FF6F00;
$color-secondary-light #FF9A4D;
Para aplicar no seu projeto, primeiramente deve-se importar o arquivo de variáveis na base que está sendo trabalhada, a estrutura que estou utilizando neste exemplo é essa:
helpers/_tokens.scss
style.scss
No style.scss a importação das variáveis é feita colocando um “@import”.
Segue abaixo o exemplo:
//helpers
@import “helpers/tokens”;
Para utilizar a variável selecionada, faremos como o exemplo abaixo:
.title { color: $color-primary-pure; }
Criando um Framework
Antes de criar um framework precisa-se saber se há a real necessidade de sua criação, pois um framework exige um nível de complexidade maior no projeto em que está se atuando. Afinal, um framework tem relação com tokens? Sim.
Um Framework além de instanciar suas variáveis, vai auxiliar na criação das regras de uso para outros desenvolvedores além de ajudar no desempenho de suas entregas.
Um framework simples utilizando apenas css não será necessária uma tecnologia maior como React, Angular, Vue e etc, um Webpack já resolve o problema. Portanto como já citado, quando um Designer System Ops está criando tokens, é importante ter um Front da equipe acompanhando.
“Já participei de um projeto que precisou da criação de um framework e na época utilizamos o Gulp, atualmente não é uma tecnologia recomendada pois está sendo descontinuado, sendo assim me atualizei para o Webpack.”
Nesse primeiro momento o Framework irá distribuir apenas um folha de estilo para o projeto, como se fosse um Boostrap. Se você já for familiarizado com ele, deve compreender o está sendo falado.
O framework irá imprimir classes que serão utilizadas no projeto. As cores, fontes, espaçamentos e outros, serão organizadas de acordo com a aplicação dos atributos do css, como padding, margin, background, color e etc.
Além dos tokens pode-se trabalhar com a criação dos componentes, colocando uma regra semântica para declarar esse componente com suas variações definidas pelo time de Design.
O Conceito de Micro Front-End
O conceito de Micro Front-End refere-se a um trabalho com as tecnologias Angular, React e Vue em uma só aplicação a fim de segmentar certas áreas de um projeto para cada equipe.
Quando o projeto utiliza desse conceito, pode ser desenvolvido uma espécie de “framework segmentado”. Nesse caso, é necessário a utilização de uma tecnologia que vá de acordo com que o time de desenvolvimento está trabalhando.
O conceito é bem parecido com um framework, no entanto, ao invés de chamar uma folha de estilo que vale para toda sua aplicação, ela será segmentada chamando um token ou mesmo um componente somente quando for necessária sua utilização, colocando os tokens como propriedades do componente.
Espero que esse artigo tenha ampliado sua visão como desenvolvedor utilizando tokens. Existem várias maneira de como podemos segmentar os tokens em nosso projeto, o que vale mais é sua criatividade de como distribuí-los.
O que não devemos nunca esquecer é o dever de manter a organização, desempenho e o mais importante: documentação para a equipe que estamos trabalhando.
Baixe nosso ebook gratuito e conheça várias estratégias para construir design systems!
REFERÊNCIAS BIBLIOGRÁFICAS
