Sistemas de design: Tokens I (calma que não é grego)

A maioria de vocês pode estar usando-os de alguma forma. E se você fizer isso, este artigo irá ajudá-lo a torná-los melhores. Mas vamos lá...

O que é um token de design?

É um conceito criado pela Salesforce, por uma designer de produto, Jina Anne. Design Tokens são a única fonte de verdade que armazena decisões de design distribuídas em ferramentas de design e linguagens de codificação. De forma simples, use para cores, tipografia, sombras, raio da borda, espaçamento, bordas, animação, dimensionamento de ícones e muuuuuito mais.

Os Tokens de Design irão ajudá-lo a:

• Gerencie seus sistemas de design com mais eficiência

• Mantenha a consistência na interface do usuário do produto

• Aproxime desenvolvedores e designers criando uma linguagem comum entre eles

Com base nas minhas vivências, existem 3 ou 4 maneiras de os designers manterem suas decisões de design:

1. Usando formatos, medidas ou até variáveis 🧐

A partir daqui para facilitar o entendimento usarei como exemplo apenas tokens de cor.

Se você trabalha para uma agência ou produtos no início (que não possuem um Design System), é provável que adicione e faça referência às suas cores na interface do usuário diretamente pelos valores hexadecimais (#2F80ED), RGB (47 128 237) ou HSL (214 84 56).

2. Usando Tokens Globais 🤩

Aí está. Os tokens que a maioria de vocês usam (ou deveriam 👀).

Se você trabalha para uma startup com produtos mais maduros onde já existem um DS, você já deve ter dado uma olhadinha e estudado outros sistemas de design e decidido estruturar suas cores com nomes mais significativos e semânticos.

#2F80ED que eu poderia chamar de $color.blue.500, caracterizando um Token Global e sem aplicação específica mas que consolida a raiz ou base do nosso DS.

3. Alias Tokens como intermediário 💎

Os alias tokens são específicos do contexto. Em vez de se referir às cores pelo que elas são, agora você também se refere a elas pelo que elas fazem, trazendo mais semântica ao contexto de uso.

#2F80ED será referido como $color.blue.500, que agora também será referido por diferentes aliases com base em seu caso de uso. Por exemplo, $text.link ou $background.button.primary, são todos Alias Tokens. Olhando para esses tokens, fica claro onde ou quando usá-los.

4. Component Specific, o mais direto possível 🎯

Esse tipo de token são específicos ao componente e apenas ali, claro que fazem uma referência aos Globais, mas tem uma semântica muito direta em componentes, especial aqueles com centenas de variações, como botões e inputs.

#2F80ED que é referido como $color.blue.500, agora referido como o alias token $background.button.primary, quando referenciado em forma de component specific token seria algo como $color.background.button.primary.default trazendo de forma clara o estado do nosso botão ou pode indicar outros atributos também como o input $color.background.input.focused.border.

Nos próximos textos, trarei prós e contras dessas decisões de design ❤️

As segundas quero saber  a sua opinião! 😉

Cada dica, sugestão ou crítica que vocês enviarem, semanalmente, serão úteis e consideradas. Agradecemos a cada um que depois da leitura da edição parou e apontou o que está gostando ou onde devemos melhorar.  Conta aqui ó, nos comentários 🤓👇