​Nessa aula, eu mostro como os estilos tipográficos são refletidos no código e como isso pode indicar o futuro das variáveis tipográficas no Figma. Comecei mostrando no Figma onde definimos nossa tipografia e como acessar o Dev mode para visualizar as propriedades do texto selecionado, como família tipográfica, estilo da fonte, tamanho, peso, altura da linha e espaçamento entre letras.

Pontos importantes que destaquei para os alunos:

• Dev Mode no Figma:Ao ativar o Dev mode, é possível ver todas as propriedades CSS do texto, como família da fonte, estilo, tamanho, peso, altura da linha e espaçamento entre letras. Isso facilita a comunicação com desenvolvedores, que podem extrair essas propriedades diretamente de lá.

• Peso da Fonte:Nas fontes variáveis, não falamos em termos como "bold" ou "semibold", mas sim em números exatos, que podem ser definidos nas propriedades da fonte variável.

• Variáveis Tipográficas:É possível que no futuro, cada um dos valores numéricos possa ser substituído por variáveis no Figma, embora ainda não saibamos como isso será implementado dessa forma.

• Figma e Variáveis:Embora o Figma já permita customizar propriedades de fontes variáveis, ainda não é possível integrar esses valores às variáveis de estilo. Há uma expectativa de que isso mude no próximo ano, permitindo agrupar valores de variáveis dentro dos estilos e explorá-los no Dev mode.

Espero que, com essa aula, vocês tenham uma melhor compreensão de como as propriedades tipográficas funcionam no Figma e como elas podem evoluir para facilitar ainda mais o trabalho de design e desenvolvimento.