Pular para o conteúdo principal

Introdução ao Typography Token​

info

Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.

O Typography Token centraliza todas as propriedades tipográficas em um único token, permitindo aplicar estilos completos de texto sem precisar configurar cada atributo manualmente no Figma.

Ele encapsula decisões de design tipográfico em um só lugar, garantindo consistência, eficiência e fácil manutenção no design system. Embora seja tratado como um composite token no Tokens Studio, sua adoção segue as recomendações do W3C DTCG, que prevê tipografia como tipo independente.

🔎 Propriedades Encapsuladas​

O Typography Token pode agrupar diversas propriedades de texto:

  • Font Family: Família de fontes.
  • Font Weight: Peso da fonte (regular, bold, semibold etc.).
  • Font Size: Tamanho da fonte.
  • Line Height: Espaçamento vertical entre linhas.
  • Letter Spacing: Espaçamento entre caracteres.
  • Paragraph Indent: Indentação de parágrafo.
  • Paragraph Spacing: Espaçamento entre parágrafos.
  • Text Decoration: Estilos como sublinhado ou tachado.
  • Text Case: Transformações de capitalização (maiúscula, minúscula etc.).

Essas propriedades asseguram que todo o texto do sistema mantenha uma aparência padronizada.

Informações do Typography Token

dica

Mais detalhes sobre Typography Tokens estão aqui.

⚙️ Manipulação no Tokens Studio​

No plugin, cada propriedade pode ser configurada de três formas:

  1. Definição direta: valores específicos, como 16px para fontSize ou 1.5 para lineHeight.
  2. Referências a outros tokens: o Typography Token pode herdar valores de tokens base, facilitando a atualização global.
  3. Preenchimento completo: mesmo valores nulos (ex.: none em textDecoration) devem ser definidos para evitar inconsistências.

Manipulação de tokens de tipografia

🚨 Boas Práticas​

cuidado

Sempre aplique e edite Typography Tokens pelo Tokens Studio.
Alterações diretas na barra lateral do Figma quebram a sincronização e impedem que atualizações sejam refletidas corretamente no design.

  • Padronize nomes de tokens para facilitar a busca.
  • Prefira referências em vez de valores fixos para escalabilidade.
  • Garanta contraste e legibilidade ao definir estilos tipográficos.
  • Evite múltiplos tokens redundantes, centralizando decisões em tokens base.