Aplicação e Uso de Tokens de Composição
Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.
Os tokens de composição permitem agrupar múltiplas propriedades de design em um único token.
Essa funcionalidade (disponível apenas na licença PRO) é útil para aplicar sombras, bordas e outros estilos combinados em um único passo.
No entanto, no Opala DS, adotamos diretrizes específicas: propriedades como tipografia devem ser controladas por tokens independentes, garantindo padronização e compatibilidade com a especificação do W3C DTCG.
🔎 O que é Composição?
A composição no Tokens Studio consiste em combinar várias propriedades em um único token.
Isso facilita a aplicação de estilos complexos em um contêiner ou camada no Figma.
⚠️ Limitação: os tokens compostos afetam apenas a camada onde são aplicados.
Ou seja, em componentes complexos, eles não propagam automaticamente para filhos como ícones ou textos.
✍️ Uso Correto da Tipografia
Para tipografia, não usamos tokens de composição.
O tipo Typography é um token independente que encapsula:
- fontFamily
- fontSize
- fontWeight
- lineHeight
- letterSpacing
Esse modelo garante consistência, facilidade de manutenção e conformidade com o W3C DTCG.
Não use composição para tipografia
Sempre utilize tokens Typography. Eles são independentes e encapsulam todas as definições tipográficas de forma confiável.
🚀 Aplicação de Tokens de Composição
- Selecione a camada desejada no Figma.
- Aplique o token pelo Tokens Studio. Alterações manuais na barra lateral do Figma quebram a sincronização.
- Para tipografia, aplique sempre tokens do tipo Typography, nunca composição.
Transformação em código
Tokens de composição precisam ser convertidos em múltiplos tokens individuais (ex.: shadow, border, color) para uso em desenvolvimento. Isso aumenta a complexidade na exportação.
📌 Diferença entre Tokens
-
Tokens de Composição → agrupam múltiplas propriedades (ex.: sombra + borda).
Úteis para aplicar estilos prontos, mas limitados em cenários complexos. -
Tokens Individuais (ex.: Typography) → representam propriedades específicas.
São mais flexíveis, fáceis de manter e transformam melhor em código.
✅ Boas Práticas
- Aplique sempre pelo Tokens Studio, nunca manualmente no Figma.
- Prefira tokens independentes (Typography, Shadow, Border etc.) sempre que possível.
- Evite tokens compostos para propriedades temáticas como tipografia.
- Desvincule tokens obsoletos no plugin para evitar valores desatualizados.
Mais detalhes sobre Tokens de Composição estão aqui.