Como os ícones podem ser implementados como Design Tokens?

Embora recebam menos atenção quando se fala em Design Tokens, os tokens de ícones podem ser muito poderosos.

Como qualquer outro tipo de token, os tokens de ícone devem ser de nível 1 e nível 2, sendo o nível 3 opcional.

Há pelo menos 2 benefícios importantes que vale a pena mencionar quando se trata de tokens de ícone:

1. Pensamento mais rigoroso sobre o papel de cada ícone.
2. Conjunto de ícones mais estruturado, escalável e sustentável.

Imagine que escolhemos esses ícones para o produto que estamos desenvolvendo atualmente.

Como você os nomearia?

Acho que pelo menos alguns de vocês escolheriam sua semântica/papel/função, então: Home, Favorito/Curtir, Lixeira, Editar e Notificações.

Embora isso não seja de todo errado, não é a maneira simbólica de fazê-lo.

Então, vamos ver o primeiro e o segundo nível dos Design Tokens:

1. Tokens de referência

Escolha suas armas primeiro, os monstros vêm depois.

É aqui que estabelecemos as nossas escolhas, Ex.:

• Eu escolho esse vermelho #ff0044 e vou chamá-lo de “color.chills”.
• Eu escolho Comic Sans e vou chamá-lo de “font.lovely”.

• Eu escolho esta casa e vou chamá-la de “icon.100”.

• Eu escolho esta casa e vou chamá-la de “icon.house”.

Como você pode ver, existem duas “escolas*” para nomear certos tokens de referência, como cores ou ícones.

*Na verdade não existem tais escolas, só queria dar um toque mais sofisticado às duas formas que costumo usar para nomear ícones de referência.

A escola “semântica” :

• Eu escolho esta casa e vou chamá-la de “icon.house”.
• Eu escolho este coração e vou chamá-lo de “icon.heart”.
• Eu escolho esta lixeira e vou chamá-la de “icon.trash-can”.
• Eu escolho este lápis e vou chamá-lo de “icon.pencil”.
• Eu escolho este sino e vou chamá-lo de “icon.bell”.

• Eu escolho esta casa e vou chamá-la de “icon.100”.
• Eu escolho este coração e vou chamá-lo de “icon.120”.
• Eu escolho este lixo e vou chamá-lo de “icon.155”.
• Eu escolho este lápis e vou chamá-lo de “icon.156”.
• Eu escolho este sino e vou chamá-lo de “icon.172”.

Prós e contras

Se “ agnóstico ” é muito abstrato para comunicar e memorizar, “ semântico ” vai contra o agnosticismo raiz dos tokens de referência (tokens de base AKA, primitivos, tokens globais).

Os tokens de referência geralmente são denominados “font-weight.100” ou “space.400”. Nomear cores e ícones como “color.blue” e “icon.house” não caberia na taxonomia, não é?

Enquanto “icon.100” me permite jogar qualquer ícone dentro, “icon.house” é 1000 vezes mais intuitivo de se trabalhar. Ainda assim, prefiro usar a primeira opção, a “ agnóstica ”. Aqui está o porquê:

Quero que meus tokens de referência sejam caixas vazias. O que quer que eu coloque dentro não deve moldar a caixa. Se eu preencher uma dessas caixas com um ícone de coração hoje, quero poder mudá-la para uma estrela amanhã sem nenhum conflito de nomes.

O “significado” começará no segundo nível de tokens, os “tokens do sistema”.

2. Tokens do sistema

Aqui é onde as coisas ficam mais interessantes: As decisões.

Por decisões entendo:

• Eu decido usar “ rt.icon.house ” ou “ rt.icon.100 ”(rt = tokens de referência) como meu ícone para Home , então “ st.icon.home ” (st = tokens do sistema).
• Eu decido usar “ rt.icon.heart ” ou “ rt.icon.120 ” como meu ícone para Favorito , então “ st.icon.favorite ”.
• Eu decido usar “ rt.icon.trash-can ” ou “ rt.icon.155 ” como meu ícone para Excluir , então “ st.icon.delete ”.
• Eu decido usar “ rt.icon.pencil ” ou “ rt.icon.156 ” como meu ícone para Editar , então “ st.icon.edit ”.
• Eu decido usar “ rt.icon.bell ” ou “ rt.icon.182 ” como meu ícone para Notificações , então “ st.icon.notifications ”.

Provavelmente, o que você usará para informar aos desenvolvedores ou outros designers serão os tokens do sistema, as decisões: “Ei John, por favor, use st.icon.close para o modal”.

1. Pensamento mais rigoroso sobre o papel de cada ícone.

Agora, voltando aos meus dois principais benefícios, e após este pequeno exercício, você pode ver que a escolha e atribuição de ícones passou por um processo extraordinariamente preciso e meticuloso.

Você não apenas escolherá cuidadosamente os ícones que deseja incluir em seu conjunto, mas também atribuirá a eles uma única função semântica, reduzindo assim a redundância e a inconsistência e levando a escolhas e decisões mais eficientes.

2. Conjunto de ícones mais estruturado, escalável e sustentável.

Para explicar esse benefício, vamos relembrar algumas situações recorrentes:

Problema 1: Você não gosta do ícone de cruz e deseja substituí-lo por um mais fino.

Solução: você abre seu token de referência e substitui/ajusta a forma interna.

Resultado: todos os tokens do sistema que apontam para esse token de referência agora serão atualizados, a saber:

• Excluir (para a ação de excluir um elemento)
• Remover (para a ação de remover um elemento)
• Fechar (para a ação de fechar um elemento).
• Erro (juntamente com uma mensagem de erro)

Solução: você cria um novo token de referência " icon.trash " e, em seguida, atualiza o token do sistema " icon.delete " para direcionar o novo "icon.trash" . Isso manterá Remover, Fechar e Erro intactos.

Resultado 1: Qualquer componente que usa “ icon.delete ” agora mostrará uma lixeira.

Como você pode ver, toda essa flexibilidade potencial será útil em algum momento. Por outro lado, o custo do trabalho inicial não é significativo.

Para recapitular…

Você pode alterar um rt.icon e afetar todos os tokens do sistema e do componente direcionados a esse ícone. EG eu mudo um ícone de coração para uma estrela.

Você pode alterar um st.icon e afetar todos os tokens de componente direcionados a esse elemento semântico. EG O “favorito” agora é representado por uma estrela enquanto o coração é usado para “curtir”.

Você pode alterar um ct.icon e afetar apenas um componente muito específico. EX . O componente do cartão, no modo escuro, usará uma estrela cheia ao invés da contornada, usada no modo claro, para “favorito”.

Fichas Figma

O plug-in Figma Tokens começou recentemente a oferecer suporte a “ativos”. Com ele, você pode armazenar facilmente seu logotipo, imagens e iconografia em um repositório remoto e vinculá-lo por meio do plug-in. Isso permitirá que você adicione uma imagem a uma forma no Figma com um clique, garantindo que um guia de estilo de vida informe seu local de armazenamento.

Ainda assim, de acordo com a equipe Figma Tokens, pode ser muito cedo para usar o recurso, pois ainda há trabalho em andamento:

“Atualmente, a fonte da imagem precisa ter sua própria validação CORS (Cross-Origin Resource Sharing). Alguns sites já têm isso implementado (por exemplo, Unsplash), mas, caso contrário, você pode colocar isso atrás de um proxy CORS. Mais informações sobre o CORS podem ser encontradas aqui . Estaremos adicionando um proxy CORS em uma versão futura.” Aqui está o artigo completo.