Design Tokens
Hoje vamos entender o que são Design Tokens, as vantagens e desvantagens de utilizá-los, e a sua relação com o Design System.
O que são Design Tokens?
Design Tokens são abstrações das escolhas de design. São como elementos individuais que simplificam as nomenclaturas das decisões de estilo, como por exemplo: cores, tipografia, espaçamento, bordas, entre outras propriedades visuais. Os tokens são criados para serem elementos reutilizáveis , pelas equipes multidisciplinares que terão contato com o desenvolvimento do projeto, e sendo um de seus objetivos, evitar que a consistência visual do produto seja perdida e isso impacte na experiência do usuário.
Para entendermos melhor, vamos pensar em um exemplo:
Imagine que você está projetando um aplicativo e quer usar as mesmas cores e tamanhos de fonte em vários lugares. Em vez de repetir os valores toda vez que precisar deles, você pode criar "design tokens". Cada token contém um valor específico, como a cor de um botão ou o tamanho do texto. Assim, se você quiser mudar algo, basta ajustar o valor desse Token e todas as partes do seu projeto que o usam serão atualizadas automaticamente.
Qual o objetivo dos Tokens?
O objetivo principal dos Tokens é criar uma abstração das escolhas de design, permitindo que essas decisões sejam gerenciadas e compartilhadas, e facilitando com que a consistência visual seja fiel até mesmo ao projetar para diferentes plataformas (site e app), e que a experiência do usuário não seja afetada negativamente.
Como podemos criá-los?
Cada token é definido por um nome e por um valor, que será a sua propriedade. É muito importante que este nome escolhido para o Token tenha relação com o valor ou com a função que está sendo definida por ele, pois é essa coerência que dará sentido à criação do Token.
Com isso em mente, podemos criar uma Biblioteca de Estilos no Figma, por exemplo, e dentro dela adicionarmos os Tokens, que posteriormente serão utilizados. Há também um plugin no Figma, o Tokens Studio for Figma, que irá facilitar a sua criação de Tokens.
Vantagens e Desvantagens
Agora vamos entender algumas vantagens e desvantagens deste processo.
Vantagens
Além da facilidade em manter a consistência visual ao longo do projeto, e da agilidade nos momentos de criação e desenvolvimento, podemos citar também outras vantagens, como:
Desvantagens
Por outro lado, há algumas desvantagens também, como:
Design Token vs. Design System
O Design Token e o Design System estão relacionados, sendo o Token um componente dentro do Design System.
O Design System é o sistema que concentra em si todas as interações e padrões visuais estabelecidos (cores, fontes, botões, ícones, etc), e o Token é uma parte deste ecossistema. O Design System é o que guiará os designers e desenvolvedores ao longo do projeto, facilitando assim com que a linguagem visual seja mantida.
Por fim, a decisão de usar Design Tokens deve ser baseada nas necessidades e prioridades específicas de um projeto. Embora seja uma ferramenta que trás muitas vantagens ao ser utilizada, é importante também avaliar os desafios de sua implementação.
Espero que tenha gostado, e até a próxima!