Tipografia no Figma: Como Criar um Style Guide Completo (Hierarquia e Baseline)

Aprenda a criar uma Hierarquia Tipográfica Profissional no Figma e monte seu Style Guide do zero! Neste tutorial de UI Design, ensino como escolher fontes no Google Fonts, definir escalas de tamanho (H1, H2, Body) e, o mais importante: como alinhar tudo perfeitamente usando um Baseline Grid de 4px. 📐 Nesta aula você vai ver: Como configurar estilos de texto no Figma, a regra de ouro para espaçamento entre linhas (line height), como organizar seus Styles em pastas (Headlines/Body) e como garantir que seu texto esteja sempre alinhado à grade, melhorando a legibilidade e o ritmo vertical do seu layout. 👇 Tópicos do Vídeo (Timestamps): 00:00 - Introdução: O que é um Style Guide de Tipografia 00:40 - Usando o Google Material Design como referência 01:22 - Como escolher e instalar fontes (Google Fonts & Figma) 03:00 - Criando o estilo de Body (Corpo de texto) 04:49 - Definindo a escala: Subtitles, H6 até H1 07:57 - Ajustando pesos (Bold/Medium) e Botões 09:09 - Dica de Organização com Auto Layout 10:17 - Como criar e nomear Text Styles corretamente (Pastas) 13:38 - Técnica Avançada: Configurando o Baseline Grid (4px) 18:16 - Ajustando o Line Height para o Grid 20:40 - Corrigindo problemas com fontes (ex: Roboto) Links Úteis: 🔗 Google Fonts: https://fonts.google.com/ 🔗 Material Design Typography: https://m3.material.io/foundations/wr... Ferramentas: 🛠️ Figma 🛠️ Google Fonts #Figma #Tipografia #UIDesign #StyleGuide #WebDesign #FigmaTutorial