Tokens e Variables
Tokens são uma forma de armazenar valores de estilo, para que os mesmo valores sejam utilizados de forma consistente em arquivos e plataformas diferentes.
EM ANDAMENTO
O que é um Design Token?
Os Design Tokens representam as pequenas e repetidas decisões de design que compõem o estilo visual do Design System. Os tokens substituem valores estáticos, como hexadecimais para cores, por nomes auto explicativos.
Um token consiste em 2 partes:
Um nome semelhante a um código, como
cifraBrand/foreground/dynamic/70Um valor associado, como
#FF6600
O valor associado ao token pode ser muitas coisas: uma cor, especificações de uma tipografia, uma medida ou até mesmo outro token.
O uso de design tokens em vez de valores codificados pode simplificar o trabalho de criação, manutenção e dimensionamento de produtos com um Design System.
O sistema de tokens é um formato agnóstico, que independe de plataforma, mas pode ser utilizado em cenários específicos de cada linguagem;
Os tokens ajudam a manter o alinhamento e a consistência em um Design System.
Os Design Tokens conectam as escolhas de estilo, entre times, que antes não teriam uma relação clara. Por exemplo, se o designer e o desenvolvedor usarem o mesmo token, como o cifraBrand/foreground/dynamic/70, a mesma cor será usada em ambos os locais, mantendo a consistência. E caso esse estilo seja atualizado, as atualizações de estilo serão propagadas de forma consistente por todo um produto ou conjunto de produtos.
Criação nomenclatura
Para criação das nomenclaturas de tokens e variables que possuem mais de uma palavra, utilizamos a variação de cammel case para documentar.
Princípios Básicos
↳ CammelCase
Para palavras compostas, que juntas significam alguma função atribuída, por exemplo "Border Radius", utilizamos a sequencia de letra minúscula na primeira palavra seguida por letra maiúscula na segunda palavra.
Exemplos:
↳ Hífen
Para descrevermos escalas atribuídas a alguma função mas que não são palavras compostas, utilizamos o hífen "-" como padrão, exemplo: "large-3x"
Exemplo:
Esse tipo de semântica é essencial para facilitar a organização e consistência.
Importante sempre tentar manter o mínimo de palavras possível para facilitar a aplicação tanto no design quanto no desenvolvimento.
Tipografias
Nas aplicações semânticas dos tokens você encontrará a seguinte hierarquia:
$title-strong-large-x que pertence ao estilo TitleAtualizado