O Figma acabou por propulsionar o tema Design Tokens durante seus lançamentos no evento Figma’s Annual Conference (Config 2023). Por ser uma das ferramentas para UI/UX design que oferece ferramentas poderosas, o Figma gerou ainda mais interesse na temática que existe desde 2014 com a Salesforce.
Durante a conferência, a empresa comprada recentemente pela Adobe lançou diversas ferramentas, de plugins relevantes para o VS Code ao Design Token que já está disponível na ferramenta com o nome “Variáveis”.
Por ter se tornado uma das principais ferramentas de UI/UX Design, é relevante entendermos sobre os Design Tokens e os impactos do cenário do design e desenvolvimento. Acompanhe a leitura para ficar por dentro.
O que são Design Tokens?
Os Design Tokens são um conceito fundamental na construção e manutenção de Design Systems e podem ser vistos como módulos de informação reutilizáveis que compõem a linguagem visual de um sistema. Isso inclui cores, tipografia, espaçamento, arredondamento, sombras e outros elementos de design que podem ser usados para criar uma experiência de usuário consistente e coesa em todas as interfaces de um produto.
Design Tokens estão muito relacionados a metodologia de Atomic Design, que consiste em quebrar os elementos de uma interface em pedaços cada vez menores e reutilizáveis. Portanto, podemos imaginar os Design Tokens como sendo os átomos indivisíveis de uma interface.
Tipos de Design Token
Existem vários tipos diferentes de Design Tokens e cada tipo inclui um conjunto diferente de informações de design. Alguns tipos comuns incluem:
- Tokens de cores: as cores usadas em um Design System, como cores primárias, secundárias e de feedback.
- Tokens de tipografia: as fontes, tamanhos de fonte, pesos de fonte e alturas de linha e outras características.
- Tokens de espaçamento: os valores de espaçamento e margem usados para criar um ritmo consistente entre os elementos.
No geral, os tipos usados em um Design System dependerão das necessidades e objetivos específicos do produto. Alguns Design Systems podem incluir apenas alguns tipos de tokens, enquanto outros podem incluir muitos tipos diferentes para atender a uma ampla gama de necessidades de design.
Por que utilizar Design Tokens?
Um dos maiores benefícios dos tokens é sua flexibilidade. Ao contrário das abordagens de design tradicionais, que geralmente dependem de valores e estilos fixos, os Design Tokens permitem que os designers criem Design Systems dinâmicos e personalizáveis que podem ser facilmente atualizados e ajustados para atender às necessidades de um projeto ou marca específica.
Essa flexibilidade permite que o Design System possa ser facilmente atualizado e mantido ao longo do tempo, o que é crucial para um rápido desenvolvimento e entrega de produtos.
Outro benefício importante é sua capacidade de melhorar a colaboração e a comunicação entre designers, desenvolvedores e outras partes interessadas.
Como os Design Tokens fornecem uma linguagem comum e um conjunto de princípios de design que podem ser compartilhados entre as equipes, eles tornam mais fácil para designers e desenvolvedores trabalharem juntos para criar Design Systems.
Essa colaboração aprimorada pode levar a processos mais eficientes e eficazes, obtendo-se melhores resultados em todas as frentes.
Como utilizar Design Tokens e seu impacto no desenvolvimento
Geralmente armazenados em um repositório remoto (Gitlab, Github ou outros), os Design Tokens podem ser acessados e usados por designers e desenvolvedores durante todo o processo de desenvolvimento do produto. Isso permite um alto nível de consistência e reutilização, pois os designers podem facilmente referenciar e aplicar os tokens em uma interface, e os desenvolvedores podem usar os tokens para implementar os designs no código.
Por exemplo, um designer pode criar um conjunto de tokens de cores em uma ferramenta de design como Figma e, em seguida, exportar essas cores como variáveis que podem ser usadas em CSS, Kotlin ou Swift.
Com isso, o desenvolvedor pode então fazer referência a essas variáveis em seu código, permitindo-lhes aplicar facilmente as cores corretas aos vários elementos da interface do produto.
Do lado do Design
Para isso, pode ser necessário o uso de ferramentas adicionais por parte do Designer. Duas delas bem conhecidas são: “Token Studio” e o “Style Dictionary”.
O Token Studio é um plugin gratuito (com alguns recursos pagos) de criação, gestão e vinculação dos tokens com o layout, além de gerar arquivos JSON contendo os tokens criados.
Por sua vez, o Style Dictionary é a ferramenta da Amazon que permite traduzir o arquivo JSON para diversas linguagens. Isso permite uma comunicação direta entre o Figma e o código implementado. Além de permitir agilidade em alterações de grande escala.
Do lado do Desenvolvimento
Em HTML e CSS, por exemplo, os desenvolvedores podem usar os tokens de várias maneiras. A partir do arquivo gerado pelo Style Dictionary podem ser criadas variáveis para armazenar os Design Tokens e, em seguida, fazer referência a essas variáveis em seu código. Aqui está um exemplo de como isso pode ser feito:
Tokens.css
:root {
--primary-color: #3f51b5;
--secondary-color: #ff4081;
--tertiary-color: #009688;
--primary-font: "Roboto", sans-serif;
--secondary-font: "Open Sans", sans-serif;
--body-font-size: 14px;
--header-font-size: 24px;
}Style.css
body {
font-family: var(--primary-font);
font-size: var(--body-font-size);
}
h1 {
font-family: var(--secondary-font);
font-size: var(--header-font-size);
color: var(--primary-color);
}
button {
background-color: var(--secondary-color);
color: #fff;
}
a {
color: var(--tertiary-color);
}Home_page.html
...
<body>
<h1>Hello World</h1>
<button>Clique aqui!</button>
<p>
Clique <a href="#">neste link</a> para mais informações.
</p>
</body>
...Neste exemplo, os tokens foram definidos como variáveis e, em seguida, usou-se essas variáveis para criar os estilos CSS para um elemento de botão. Isso permite que eles apliquem facilmente os estilos corretos ao botão e atualizem esses estilos. Se os tokens forem alterados no futuro, será necessário alterar somente o arquivo “Tokens.css”.
Atualizando Tokens
Design systems não são estáticos e geralmente precisam ser atualizados ao longo do tempo para oferecer suporte a novos recursos, designs e tecnologias. Existem diversas maneiras diferentes pelas quais os tokens podem ser atualizados, dependendo das ferramentas e tecnologias específicas que estão sendo usadas. Algumas abordagens comuns incluem:
Atualização dos valores dos tokens diretamente no repositório central
Se a cor primária de um Design System for alterada, o designer pode simplesmente atualizar o valor do token de cor primária no repositório e as alterações serão aplicadas automaticamente a todas as interfaces implementadas que usam esse token.
Usando uma ferramenta de design para atualizar os tokens
Um designer pode usar uma ferramenta como Sketch ou Figma para atualizar as cores, fontes e outros elementos de design que compõem os tokens e, em seguida, exportar os tokens atualizados para o repositório central.
Usando uma ferramenta de gerenciamento de token
Existem várias ferramentas disponíveis que podem ajudar designers e desenvolvedores a gerenciar e atualizar seus tokens, bem como a já citada Style Dictionary e outras como a Supernova ou Specify. Essas ferramentas permitem atualizar os tokens, bem como gerar o código e os elementos necessários para implementá-los em várias plataformas e tecnologias.
O Futuro dos Design tokens
Os Design Tokens são um conceito relativamente novo no mundo do design e estão rapidamente ganhando popularidade.
O futuro dos Design Tokens parece brilhante, pois cada vez mais designers e equipes de desenvolvimento estão começando a adotar essa abordagem para criar e manter Design Systems. À medida que essa evolução continua e se tornar mais complexa, os Design Tokens irão desempenhar um papel cada vez mais importante para ajudar os designers a gerenciar e manter a consistência em vários projetos de design.
Por fim, podemos ver essa ferramenta como uma parte importante de criar e manter um Design System robusto e escalável. Afinal, ele permite que designers e desenvolvedores se adaptem de forma rápida e fácil às mudanças nas necessidades e requisitos dos produtos, mantendo uma experiência consistente e centrada no usuário.
Faz sentido essa reflexão pra você? Me conte nos comentários!
