Spacing Tokens
Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.
Os Spacing Tokens foram criados para padronizar os espaçamentos em layouts.
Eles podem ser aplicados em padding, margin, gap e row gap.
Embora o Tokens Studio ofereça suporte direto a Spacing Tokens, a especificação do W3C DTCG recomenda o uso de Dimension Tokens para decisões de tamanho.
Exemplos de uso:
- Padding: espaçamento interno de contêineres.
- Margin: espaçamento externo entre elementos.
- Gap / Row Gap: distância entre itens em contêineres com auto-layout.
Mais detalhes sobre Spacing Tokens estão aqui.
🔎 Propriedades e Aplicação
- Gap: espaço entre elementos filhos em um contêiner.
- All: aplica padding igual em todos os lados.
- Horizontal / Vertical Padding: aplica espaçamento apenas nos eixos horizontal ou vertical.
- Row Gap: adiciona espaço vertical entre linhas em layouts com
wrap. - Top / Right / Bottom / Left: controle granular de cada lado do contêiner.
✅ Boas Práticas
- Aplique segmentado: prefira usar Top, Bottom, Left, Right em vez de All ou Horizontal/Vertical para evitar “links fantasmas”.
- Use Foundations: no Opala DS, aplique sempre pela camada Foundations para garantir propagação global.
- Camada correta: verifique em qual camada está aplicando o espaçamento, especialmente em auto-layout, já que ele pode alterar o comportamento responsivo.
- Valor AUTO: é aceito como string especial (em maiúsculas) para layouts com
justify-content: space-between.
Transformação para Código
Ao exportar Spacing Tokens, o pacote @tokens-studio/sd-transforms converte automaticamente para o tipo dimension conforme a especificação DTCG.
Valores sem unidade são transformados em px.
Limitação no Figma
Tokens de espaçamento com múltiplos valores (ex.: padding: 8px 16px;) não são suportados como variáveis no Figma.
Somente tokens com um único valor são exportados corretamente.