Nessa aula, começamos a criar a estrutura ou taxonomia dos nossos tokens de design. Eu expliquei a lógica de como criar os tokens primitivos e como vocês podem copiar e colar o nosso design system. Pontos importantes destacados na aula:

• Uso do Template: Utilizamos uma planilha​ como fonte de verdade para facilitar alterações e ter uma visão holística dos tokens. A planilha contém colunas para nome da coleção, nome do token, valor, tipo e descrição. Além do construtor de token automático!

• Criação de Tokens Primitivos: Focamos nos tokens primitivos, que são a base da nossa coleção de tokens. Expliquei como preencher as informações de nome, valor, tipo e descrição na planilha.

• Categorias e Construtor de Tokens: A parte da categoria para frente na planilha é onde se encontra o construtor de tokens. Apenas a descrição e o valor do token precisam ser preenchidos manualmente.

• Visualização no Figma: Mostrei como visualizar e criar tokens no Figma para aqueles que preferem uma abordagem mais visual. Utilizamos o Toolkit de Design Tokensdisponibilizado na aula de fundamentos para documentar as cores e criar a taxonomia.

• Estrutura de Tokens: Discutimos a importância de definir uma estrutura clara para os tokens, incluindo categorias como cores, fontes, espaço, tamanho e elevação.

• Documentação e Referências: Enfatizei a importância da documentação e forneci referências, como oartigo do Nathan Curtis, para ajudar na criação dos tokens.

• Automatização com Funções: Demonstrei como usar funções e expressões para automatizar a criação de tokens, economizando tempo e garantindo consistência.

• Criação de Paletas de Cores: Usei o exemplo de criação de uma paleta de cores n Supa Palette para mostrar como os tokens são criados e documentados no sistema.

Importante:O nome dos tokens é sensível a maiúsculas e minúsculas (case sensitive) e que normalmente mantemos tudo em caixa baixa, exceto em casos específicos.

Na próxima aula vamos explorar a criação de tokens semânticos e como referenciar cores para criar versões Light e Dark de forma eficiente. Mostrarei como extrair as variáveis do template e como adicioná-las no Figma, mantendo a planilha como a fonte de verdade para futuras alterações.