Dimension Tokens
Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.
Os Dimension Tokens no Tokens Studio são usados para definir propriedades relacionadas a tamanho, espaçamento, raio de borda e posição de elementos de design. Eles permitem padronizar e centralizar a gestão de medidas em um Design System, garantindo consistência e facilitando a manutenção.
🔎 O que são Dimension Tokens?
Dimension Tokens encapsulam valores numéricos com unidade de medida (px, rem etc).
São diferentes dos Number Tokens, que são apenas números sem unidade.
Exemplos de uso:
- Tamanho (Sizing): largura e altura de elementos.
- Espaçamento (Spacing): padding e margin.
- Raio de borda (Border Radius): arredondamento.
- Largura da borda (Border Width): espessura de linhas.
- Desfoque de fundo (Background Blur): efeitos visuais.
- Posição absoluta (X e Y): posicionamento relativo ao contêiner pai.
Mais detalhes em Tokens de Dimensões.
⚙️ Propriedades e Boas Práticas
Espaçamento (Spacing)
Define a distância entre elementos (padding e margin).
- Recomendado: aplicar espaçamentos individuais (Top, Bottom, Left, Right).
- Evite: aplicar global (All, Horizontal, Vertical), pois pode gerar “links fantasmas”.
Tamanho (Sizing)
Controla largura e altura, incluindo limites (Min/Max Width e Height).
Funciona melhor quando o elemento está com Auto-layout configurado.
Raio de Borda (Border Radius)
Define o arredondamento (todas as bordas ou específicas).
Prefira aplicar de forma segmentada (Top Left, Bottom Right etc.) para consistência.
Largura da Borda (Border Width)
Define a espessura da borda.
Escolha no menu se a aplicação será em todos os lados ou em apenas um.
Desfoque de Fundo (Background Blur)
Adiciona efeito de desfoque em elementos com opacidade.
Atualmente não é exportado como estilo reutilizável no Figma.
Posição Absoluta (X e Y)
Define posição em relação ao contêiner pai.
Exige que a posição absoluta esteja ativada no Figma.
Aplicação via Foundations
Os Dimension Tokens são definidos na camada Primitives como tokens de referência.
Para uso prático, utilize sempre a camada Foundations, que organiza tokens por finalidade (sizing, spacing etc.).
Isso garante propagação correta das alterações e consistência do sistema.
⚠️ Observações Importantes
- Tokens Fantasmas: podem surgir se houver referências incorretas. Sempre valide se o token referenciado está ativo.
- Efeitos de Transparência: background blur e opacidade afetam toda a camada em que são aplicados — use com cautela para preservar a consistência visual.