30.1 Criando um style guide: tipografia
Hoje, vou te ensinar a montar um style guide tradicional no Figma, sem atalhos ou plugins, essencial para todo designer. Primeiro, começamos com a hierarquia de fontes, do H1 ao H6, e posicionamos suas dimensões corretamente para garantir que o maior texto domine visualmente. Eu também confio em divisores de 8 ou 4 para manter o layout alinhado. Depois, ajusto o peso das fontes; por exemplo, títulos (H1 a H6) em semibold ou medium, e body em regular. Além disso, explico a importância de usar porcentagens (130%) para espaçamento entre linhas, já que permite ajustes responsivos entre dispositivos diferentes, como tablets e celulares. Outra dica é ajustar o espaçamento negativo entre letras para dar um charme no layout, sem exagerar. Quanto às captions, faço o contrário, aumentando o espaçamento para dar um destaque extra, usando uppercase para destacar palavras-chave. Após configurar as fontes, estruturo e nomeio no Figma para facilitar futuros ajustes e reuso. Esta abordagem fortalece não só a estética, mas também a funcionalidade do layout, respeitando as regras de SEO e garantindo uma aparência profissional.
Comentários
Hoje, vou te ensinar a montar um style guide tradicional no Figma, sem atalhos ou plugins, essencial para todo designer. Primeiro, começamos com a hierarquia de fontes, do H1 ao H6, e posicionamos suas dimensões corretamente para garantir que o maior texto domine visualmente. Eu também confio em divisores de 8 ou 4 para manter o layout alinhado. Depois, ajusto o peso das fontes; por exemplo, títulos (H1 a H6) em semibold ou medium, e body em regular. Além disso, explico a importância de usar porcentagens (130%) para espaçamento entre linhas, já que permite ajustes responsivos entre dispositivos diferentes, como tablets e celulares. Outra dica é ajustar o espaçamento negativo entre letras para dar um charme no layout, sem exagerar. Quanto às captions, faço o contrário, aumentando o espaçamento para dar um destaque extra, usando uppercase para destacar palavras-chave. Após configurar as fontes, estruturo e nomeio no Figma para facilitar futuros ajustes e reuso. Esta abordagem fortalece não só a estética, mas também a funcionalidade do layout, respeitando as regras de SEO e garantindo uma aparência profissional.
Comentários
Hoje, vou te ensinar a montar um style guide tradicional no Figma, sem atalhos ou plugins, essencial para todo designer. Primeiro, começamos com a hierarquia de fontes, do H1 ao H6, e posicionamos suas dimensões corretamente para garantir que o maior texto domine visualmente. Eu também confio em divisores de 8 ou 4 para manter o layout alinhado. Depois, ajusto o peso das fontes; por exemplo, títulos (H1 a H6) em semibold ou medium, e body em regular. Além disso, explico a importância de usar porcentagens (130%) para espaçamento entre linhas, já que permite ajustes responsivos entre dispositivos diferentes, como tablets e celulares. Outra dica é ajustar o espaçamento negativo entre letras para dar um charme no layout, sem exagerar. Quanto às captions, faço o contrário, aumentando o espaçamento para dar um destaque extra, usando uppercase para destacar palavras-chave. Após configurar as fontes, estruturo e nomeio no Figma para facilitar futuros ajustes e reuso. Esta abordagem fortalece não só a estética, mas também a funcionalidade do layout, respeitando as regras de SEO e garantindo uma aparência profissional.
Comentários

Nível Hebe

Nível Hebe

Nível Hebe
Especialistas

Henrique Sabino
Fundador da Harena
Mentor
Níveis
Hashtags
#Figma #StyleGuide #Tipografia #DesignWeb #HierarquiaDeFontes

Olá 👋,
Em que posso ajudar?
Sugestões & Feedbacks