Nessa aula, eu apresentei como funciona a estrutura de tokens do nosso design system (Hive). Expliquei os processos necessários para chegar a uma estrutura organizada.

Pontos importantes da aula:

• Estrutura de Tokens: Mostrei a estrutura de tokens do nosso design system no Figma, incluindo como adicionar novidades nas variáveis como layout grid e espessura de borda.

• Processo Manual: Enfatizei que, apesar de haver um processo manual envolvido, o uso do template de taxonomia facilita a organização dos tokens.

• Colaboração com Desenvolvedores: Destaquei a importância de trabalhar em conjunto com os desenvolvedores para entender como eles utilizam as variáveis de design, como cores, espaçamentos e tipografia, em diferentes plataformas (web, Android, iOS).

• Convenção de Nomes: Discuti a necessidade de alinhar a convenção de nomes entre design e desenvolvimento para garantir uma comunicação clara e evitar redundâncias ou confusões.

• Variáveis Primitivas: Apresentei as variáveis primitivas, como cores, espaços, opacidade, fontes, tamanhos e sombras, e como elas são estruturadas no nosso design system.

• Tipografia: Expliquei que, embora o Figma ainda não suporte variáveis tipográficas, é possível documentar essas variáveis e preparar-se para quando essa funcionalidade estiver disponível.

• Cores no Modo Escuro: Mostrei como ajustar as cores para o modo escuro, mantendo a consistência da cor principal, mas fazendo ajustes sutis para garantir a legibilidade.

• Auditoria de Design: Instruí sobre a importância de realizar uma auditoria de design para documentar todos os elementos visuais que serão transformados em variáveis primitivas.

• Template de Taxonomia: Comentei sobre o meu template modular e programável que facilita a criação e organização de tokens, e mencionei que disponibilizarei esse recurso para os alunos.

A importância da colaboração com desenvolvedores e como utilizar ferramentas e templates para otimizar esse processo.