Tipos de Valores e Relação com o Style Dictionary

info

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

Os Typography Tokens permitem diferentes formas de configuração:

Valores Diretos
Ex.: 16px para fontSize ou 1.5 para lineHeight. Garantem precisão imediata.
Referências a Outros Tokens
Ex.: fontSize vinculado a baseFontSize.
✅ Boa prática → facilita atualização global e consistência.
Valores Matemáticos
Ex.: baseFontSize * 1.2 → útil para criar escalas tipográficas proporcionais.

🔎 Recomendação: Sempre que possível, use referências para manter consistência em todo o sistema.

O Style Dictionary transforma tokens de design em código. Como os Typography Tokens são compostos, exigem atenção na exportação.

Transformação via @tokens-studio/sd-transforms
- Expande o token composto em múltiplos tokens individuais (fontFamily, fontSize, etc).
- Necessário para permitir manipulação separada no código.
Configuração expand
- Deve ser ativada no arquivo de configuração do Style Dictionary.
- Garante que os Typography Tokens sejam decompostos corretamente.
Tipos de variáveis geradas
- fontFamily: string
- fontWeight: string ou número
- lineHeight, letterSpacing, paragraphSpacing, paragraphIndent: numéricos

Essas variáveis tornam a implementação tipográfica mais direta no desenvolvimento, mantendo a consistência do design.

Visualização de JSON de tokens

Use sempre o SD-Transforms → garante compatibilidade entre Figma, Tokens Studio e ambientes de código.
Trate valores percentuais de lineHeight → podem não mapear diretamente para variáveis; normalize-os para evitar comportamento inesperado.
Valide em múltiplas plataformas → teste a saída em web, mobile e outros contextos antes da integração final.

dica

Mais detalhes sobre Typography Token estão aqui.

Tipos de Valores e Relação com o Style Dictionary​