O que são Design Tokens

E sua importância na criação de um Design System consistente

Quando desenhamos uma interface web ou mobile, conforme ela vai ganhando escala, assim como número de páginas, o time de desenvolvimento também cresce e a aparência do produto começa a perder consistência, o que pode afetar a experiência. Com a entrada de novos membros ao time, fica cada vez mais difícil que entendam os componentes do sistema, principalmente sem um guideline definido previamente, e o risco é que cada um crie seus próprios estilos e códigos.

Essa prática cria pedaços não reutilizáveis pelo time, e experiências inconsistentes geram atrito com as interfaces criadas pelos designers. Pensando na solução para este problema, foi criado o Design System.

Design System

Para garantir a consistência e padronização de um produto digital, é preciso criar um design system — uma entidade viva que contém a linguística, os princípios e as ferramentas comuns para ajudar as equipes a criar produtos de maneira coerente. Design System é essencial quando o projeto começa a escalar e tomar uma proporção maior. Para proporcionar tal estruturação, o atomic design é empregado.

Atomic Design

O Atomic Design é uma metodologia desenvolvida por Brad Frost em 2013 para a criação de design systems. Ela é composta por cinco estágios, trabalhando juntos para criar interfaces de maneira simples e hierárquica. Os cinco estágios são: átomos, moléculas, organismos, templates (ou modelos) e páginas.

Nesse modelo, os átomos são como os botões e links de um design system, e as moléculas, quando agrupadas, formam os organismos que dão origem aos templates. Esses, por sua vez, formam as páginas.

Os estágios do Atomic Design (átomos, moléculas, organismos, templates e páginas), criado por Brad Frost em 2013

Importante ressaltar que o Atomic Design não é um processo linear, mas um modelo mental para nos ajudar a pensar em nossas interfaces como uma unidade inteira e um conjunto de peças ao mesmo tempo. Cada um dos cinco estágios desempenha um papel fundamental na hierarquia de um design system.

E quando os Design Tokens entram em ação?

Design Tokens são um arquivo central que contém todos os elementos fundamentais de design como: fontes, espaçamento, cores, borda, ícones, entre outros. Os design tokens se inserem como os ‘elétrons’, ou seja, partículas subatômicas que guardam as propriedades e atributos de cada ‘átomo’ da interface em variáveis. Uma vez que é feita uma mudança na cor primária, por exemplo, de um elemento, ela é propagada pra todo website ou aplicação mobile, sem a necessidade de checar o código.

Design Tokens adicionados antes dos Átomos como partículas subatômicas

Dentro do ecossistema de desenvolvimento de uma interface, os design tokens também são uma forma de facilitar a linguagem entre Designers e Desenvolvedores, já que eles podem ser criados pelos designers e utilizados pelos desenvolvedores para criar os produtos digitais.

Frase dita pela Jina Anne — “Com design tokens, você pode capturar valores de baixo nível e usá-los para criar estilos para seu produto ou aplicativo. Você pode manter um sistema visual escalonável e consistente para o desenvolvimento da IU.”

Essa prática ajuda e diminuir os conflitos de comunicação entre os times de design e desenvolvimento, permitindo a criação de soluções ainda mais fiéis ao design, criando consistência e escalabilidade nas diretrizes desenvolvidas pelos times.

Abaixo, é explicado como funciona um design token na prática. O botão a seguir é um componente simples com duas camadas simples, um container e um texto.

Imagem de um botão simples com as propriedades de CSS background-color, border-radius, color e font-size

Podemos identificar algumas propriedades de CSS que armazenadas em variáveis ficariam assim:

• Background-color: $background-color = #1972E8;
• Color: $primary-color = #F4ECD6;
• Border-radius: $border-radius = 10px;
• Font-size: $font-size =32px;

Cada pequeno componente é repleto de micro-decisões que os designers tomam ao desenhar uma interface. Essas decisões podem ser armazenadas em variáveis de código e permitem que as usemos sempre, garantindo a consistência da interface, tão importante no processo de desenvolvimento.

Esse código é transformado em um arquivo JSON ou YAML e então o desenvolvedor o converte em formatos utilizados na web ou mobile podendo ser:

• XML para desenvolvimento Android;
• JSON para iOS e Web;
• SASS, LESS ou CSS para Web;

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 será consumido por todas as plataformas como mostra a imagem abaixo:

Diagram representando que um mesmo Design Token é aplicável para Aplicações Web, Android e iOS

E aí, conseguiu entender o que são Design Tokens?

De forma resumida, Design Tokens são atributos visuais de design:

• Armazenáveis;
• Organizados;
• Centralizados;
• Propagáveis;

E que visam:

• Comunicação (através de variáveis nomeadas);
• Consistência através de tecnologias e plataformas;
• Reutilização;
• Fácil manutenção;

Espero que este artigo tenha sido útil no seu processo de aprendizado, lembrando que é apenas uma introdução ao assunto. Design Tokens são essenciais na criação de um Design System consistente, e o ideal é que tenha um time dedicado no seu desenvolvimento.

O artigo foi escrito após a realização do curso de DesignOps na HOW Bootcamps através de bolsa de estudos fornecida pela PretUX, uma iniciativa que busca a inserção de mais profissionais negros na área de UX Design.