O mundo do design digital está em constante evolução e, para permanecer competitivo, é essencial manter a consistência visual em todas as plataformas e dispositivos. É aqui que entram os tokens de design. Essas pequenas unidades de design, embora muitas vezes esquecidas, desempenham um papel essencial na criação de experiências de usuário harmoniosas e eficazes.

O que é um token de design?

Os tokens de design são valores padronizados que representam os elementos básicos de um sistema de design.
Como lembrete, um sistema de design é um repositório que reúne todos os componentes de um projeto digital. Estes permitem desenhar uma lógica coerente ao longo da produção e orientar todas as equipas envolvidas no desenho de uma interface.
Os Design Tokens podem ser usados ​​para definir cores, fontes, tamanhos, margens, espaços em branco e outros elementos de design. Estas são ferramentas poderosas que podem ajudar a melhorar o consistência e a qualidade design, bem como colaboração entre designers e desenvolvedores.
Em vez de usar um valor, usamos o token. Isso permite que você tenha apenas uma página com todos os tokens inseridos e possa contar com um Fonte única.

Exemplo para um token de uma cor:

Neste nível, o design de um token é um pouco parecido com os estilos em Figma ou Esboço (cores, fontes, sombras, etc.) mas com muito mais possibilidades e muito mais flexibilidade. Um token de design é mais frequentemente usado para cores, tamanho, margens, opacidade, bordas, etc.

Então, em vez de ter:

Nós teríamos:

O design do token nos permite mudar valor instantaneamente de “{primary}” se necessário, sem ter que retornar às diferentes linhas.
Além disso, em caso de Sistema de Design Multimarcas, isso também torna possível ter apenas um uma e única página para editar para mudar o estilo.
O ideal é ter o mesmo nome nos estilos do nosso software de design para maior consistência e simplicidade na hora de não interferir entre designers e desenvolvedores.
No entanto, o uso de tokens de design como parte integrante de um sistema de design é muito mais do que isso. Eles também permitem uma maior escalabilidade, melhor comunicação entre as equipes e, portanto, melhor tomada de decisão.

Os dois tipos de tokens de design

• Primitivas de token
  As primitivas de token são valores básicos do sistema de design. Eles incluem cores, fontes, tamanhos de fonte, margens, espaços em branco e outros elementos de design. As primitivas de token são geralmente armazenadas em um formato de dados padronizado, como JSON, APF ou Yaml. Isso torna mais fácil para designers e desenvolvedores compartilhá-los e usá-los.
• Tokens semânticos
  Tokens semânticos são combinações de tokens primitivos que possuem um significado específico no sistema de design. Por exemplo, um token semântico pode ser uma cor específica usada para um botão de comando ou uma fonte específica usada para o título de uma página. Os tokens semânticos permitem que você crie um design coerente e homogêneoe simplificar a colaboração entre designers e desenvolvedores.

Primitivos e semântica são dois elementos essenciais de um sistema de design. Eles permitem definir os elementos básicos projetá-los e organizá-los para que sejam fáceis de encontrar e usar. Ao usar tokens, designers e desenvolvedores podem criar interfaces consistentes e de alta qualidade com mais rapidez e facilidade.

Os benefícios dos tokens de design

• consistência
  Os tokens de design respondem, entre outras coisas, a um problema de negócios : como garantir a identidade gráfica da marca com o mínimo de atrito?
  No caso de uma mudança nas fundações (uma mudança de marca, por exemplo), os tokens de design permitem implementar rapidamente essas modificações.
  Os estilos são unificados em todos os produtos e plataformas.
• Reutilização
  Os tokens de design podem ser reutilizados em um ou mais produtos, o que permiteeconomizar tempo e recursos em desenvolvimento. Os desenvolvedores recuperam os tokens diretamente, em vez de ter que criar novos estilos a cada vez.
  Os tokens de design evitam a gravação de valores no código.
• Manutenibilidade
  Os tokens de design facilitam a manutenção do projeto porque permitem atualização rápida de estilo. Como ? Tokens são dados que contêm um nome e um valor centralizados.
  Simplesmente modificando o valor de um token, como o da cor de um botão principal, isso impactará todos os botões da aplicação/site em uma única intervenção! Assim, os desenvolvedores podem manter mais facilmente os estilos de projeto, mesmo quando as escolhas de design evoluem.

Os limites dos Design Tokens

• As ferramentas não estão prontas
  Como o formato dos tokens de design não é imutável, ninguém ainda concordou sobre como usá-los. Cada equipe e empresa tem seu próprio funcionamento e sua própria linguagem. Atualmente o o W3C (Consórcio Mundial da Internet) está atualmente trabalhando em um formato que resolveria esse problema. Mas, por enquanto, é apropriado contentar-se com as ferramentas disponíveis e as suas limitações. Figma indicou que está trabalhando nesse assunto, mas provavelmente esse recurso não será lançado antes do final do ano.
• Uma desaceleração no fluxo de trabalho
  Encontre um nomenclatura compreendida por todos é uma verdadeira busca pelo Santo Graal. Além disso, como qualquer sistema, deverá evoluir de acordo com um bom número de parâmetros. A isto é adicionado o complexidade da documentação e o tempo necessário para escrevê-lo. Equipes especializadas em Design System ainda não estão difundidas, e isso é ainda mais verdadeiro para pessoas que se dedicam a escrever documentação.
  A menor modificação de uma dessas primitivas pode gerar inúmeras atualizações que devem ser levadas em consideração.
  Ter uma visão geral do sistema é essencial ao implementar tokens de design.
  O a implementação é complexa e exige um esforço popular significativo, mas estou confiante de que tal abordagem é largamente compensada pelos benefícios exponenciais que pode trazer.

Conclusão

Design Tokens são entidades com nome e nomenclatura específicos que armazenam dados indivisíveis (como espaçamento ou cor, por exemplo). São todos valores necessários para construção e manutenção do sistema. Usamos esses valores em vez de “codificá-los” no código para garantir o máximo flexibilidade, homogeneidade e para escalabilidade em diferentes produtos e experiências… Eles também são agnósticos e devem funcionar em qualquer plataforma.
Mas acima de tudo representam uma metodologia e não apenas “variáveis”. Eles permitem que qualquer Design System cresça em todas as plataformas, dispositivos e produtos que uma marca possa ter. A parte variável é apenas uma gota no oceano.

Tirar

• Os tokens de design não apenas armazenam informações, mas também também transmitir informações.
• Eles são usados ​​para indicar valores primitivos, mas seu verdadeiro potencial é revelado quando são usados ​​em Documentação do componente UI.
• Eles são semelhantes a um metodologia e uma maneira de construir um sistema complexo.

Recursos para ir mais longe

• Tokens em sistemas de design: 10 dicas para arquitetar e implementar decisões de design para todos: Leia aqui 
• Tokens de design além de cores, tipografia e espaçamento: Leia aqui

 

 

 

Alexandre Caillé, líder de UI e sistema de design da UX-Republic