Sizing Tokens
Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.
Os Sizing Tokens representam valores numéricos usados para definir o tamanho de elementos.
Eles permitem padronizar dimensões em largura e altura, incluindo variações mínimas e máximas, fundamentais para criar layouts consistentes e responsivos.
Exemplos de uso:
- Width / Height: tamanhos fixos ou responsivos em elementos de layout.
- Min / Max Width / Height: controle de limites de expansão ou contração em elementos com auto-layout.
Mais detalhes sobre Sizing Tokens podem ser encontrados aqui.
🔎 Propriedades e Aplicação
- All: aplica o mesmo valor de tamanho à largura e à altura.
- Width: define a largura horizontal.
- Height: define a altura vertical.
- Min Width/Height: define o menor tamanho permitido, garantindo flexibilidade com limite inferior.
- Max Width/Height: define o maior tamanho permitido, controlando a expansão do elemento.
✅ Boas Práticas
- Prefira Dimension Tokens: embora os Sizing Tokens sejam úteis, a especificação DTCG recomenda Dimension Tokens para maior conformidade e consistência.
- Aplicar valores específicos: utilize propriedades individuais (Width, Height) em vez de All. Isso evita “links fantasmas” e facilita ajustes.
- Aplicação via Foundations: no Opala DS, os Sizing Tokens devem ser aplicados sempre pela camada Foundations, garantindo propagação correta e padronização global.
Unidades de Medida e Responsividade
Os Sizing Tokens aceitam valores com ou sem unidade.
Para design responsivo, prefira unidades relativas como rem, que se ajustam ao tamanho base da fonte.
O plugin converte automaticamente valores em rem para px no Figma e no código.
Transformação para Código
O Style Dictionary junto com @tokens-studio/sd-transforms converte Sizing Tokens para o formato dimension, conforme a especificação DTCG.
Valores numéricos sem unidade são transformados em pixels (px) como padrão.