Boas Práticas e Regras de Uso

info

Conteúdo adaptado da documentação oficial do Tokens Studio (TS). Acesse a referência completa aqui.

Borda vs. Fundo (Fill):
Diferencie se a cor será aplicada como fill (preenchimento) ou border (borda).
→ No Tokens Studio, use o botão direito para escolher explicitamente a propriedade.
→ Clique simples aplica como fill por padrão.
Remoção de Fill:
Remover o fill pela barra lateral do Figma não quebra o vínculo com o token. O vínculo permanece ativo e receberá atualizações futuras.
→ Para remover totalmente a ligação, use as opções do Tokens Studio.
Camada Correta:
Em layouts complexos, tokens aplicados na camada errada podem gerar inconsistências.
→ Sempre verifique a camada ativa antes de aplicar.
→ Utilize a inspeção do Tokens Studio para confirmar o token aplicado.

dica

Para entender os Tokens de Cor, consulte a documentação oficial.

dica

Para Modificadores de Cor, veja as instruções aqui e aqui.

Atualização em Cadeia:
Ao alterar um token base, confirme que todos os tokens que o referenciam estão configurados corretamente. Isso evita inconsistências.
Opacidade:
Defina opacidades usando Number Tokens. Evita problemas quando múltiplos tokens com opacidade são combinados.
Testes de Exportação:
Antes de exportar tokens, valide com o SD-Transforms para garantir conversão correta para formatos rgba() ou hex.

cuidado

Tokens em Gradientes
O Tokens Studio suporta gradientes, mas valide se a exportação mantém a estética desejada antes de usá-los em produção.

Boas Práticas e Regras de Uso​