Nessa aula, abordamos a integração da tipografia no nosso Design System, um passo crucial para garantir que o time receba todas as decisões tipográficas junto com os componentes e outros elementos definidos na biblioteca. Estamos em um momento de transição no Figma dos Estilos para Variáveis, e discutimos os usos para cada um e o que podemos esperar do futuro do Figma em relação às propriedades de tipografia nas variáveis.

Pontos importantes destacados na aula:

• Transição de Estilos para Variáveis:Estamos em um período de mudança onde o Figma planeja incorporar propriedades de texto em variáveis, mas ainda não está claro como isso funcionará.

• Atualizações do Figma:O Figma lançou recentemente seis novas atualizações para variáveis, incluindo layout, grid, borda e propriedades de corner radius.

• Futuro dos Estilos de Tipografia:Discutimos como o Figma está dividindo o trabalho com estilos e variáveis. Onde os estilos são agrupamentos de diversos valores, enquanto as variáveis são para valores únicos. No futuro, espera-se que possamos incorporar valores das propriedades tipográficas nas variáveis do Figma também.

• Fontes Variáveis:Exploramos o conceito de fontes variáveis, que permitem a transição de estilos tipográficos (como de serifada para não serifada, entre outros) através de valores ajustáveis.

• Implementação de Estilos e Variáveis:Atualmente, devemos continuar usando estilos e, quando o Figma permitir, substituiremos os valores específicos por variáveis.

• Referências de Estilos Tipográficos:Analisamos os estilos tipográficos do iOS (Human Interface Guidelines da Apple) e comparamos com as abordagens mais otimizadas do Google (Material Design 3) e da Uber (Base Design System).

• Convenção de Nomes para Tipografia:Decidimos adotar uma estrutura simplificada para nosso Design System, consistindo emDisplay,Heading,LabeleParagraph, para atender às nossas necessidades do nosso DS de forma otimizada.

• Aplicação dos Estilos:Discutimos como cada estilo tipográfico é aplicado dentro do Design System, desde textos chamativos (Display) até textos de corpo (Paragraph).

Ao final da aula, os alunos devem ter uma compreensão clara de como a tipografia é incorporada em um Design System, a importância de manter uma estrutura otimizada e como se preparar para as futuras atualizações do Figma que afetarão a maneira como trabalhamos com tipografia e fontes variáveis.