Nessa aula, mergulhamos profundamente no mundo dos design tokens. Abordamos a importância de compreender a anatomia e a taxonomia dos tokens, como eles se traduzem para o código e como o Figma lida com essa estrutura. Pontos importantes que destacamos na aula incluem: - **Design Tokens**: Discutimos o que são design tokens e como eles representam decisões de design codificadas, que podem ser reutilizadas em diferentes partes de um projeto. - **Documentação da W3C**: Analisamos a[documentação da W3C​](https://design-tokens.github.io/community-group/format/), que o Figma utiliza como base para suas variáveis. - **Exportação e Importação de Variáveis**: Falamos sobre a possibilidade de exportar e importar variáveis para dentro do Figma, atualmente feita através de plugins, mas com a expectativa de uma solução nativa futura. - **Colaboração com Desenvolvedores**: Enfatizamos a importância de trabalhar em conjunto com desenvolvedores para auditar e alinhar a nomenclatura e estrutura de tokens usados, sugerindo o uso de um spreadsheet para organização. - **Template Automatizado**: Mencionei que compartilharei um template automatizado para facilitar o trabalho com design tokens. - **Estrutura de Tokens**: Detalhamos a estrutura de um design token em formato JSON, incluindo nome, valor, tipo e descrição, e como isso se reflete no Figma. - **Tipos de Tokens**: Discutimos os diferentes tipos de tokens (cores, números, strings, booleanos) e como o Figma atualmente restringe os tipos disponíveis. - **Case Sensitivity e Caracteres Especiais**: Alertamos que os nomes das variáveis são sensíveis a maiúsculas e minúsculas e que certos caracteres especiais não podem ser usados "{}" "$" "." - **Tokens Primitivos e Semânticos**: Introduzimos o conceito de tokens primitivos e semânticos e como criar uma estrutura que os utilize. - **Referências e Aliases**: Explicamos como fazer referências aos tokens primitivos para criar uma lógica consistente de design tokens. A próxima etapa será aplicar esse conhecimento no Figma e entender como isso se reflete no design e no código.