Pular para o conteúdo principal

Opacity Tokens​

info

Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.

Os Opacity Tokens são usados para definir níveis de transparência de elementos no design.
Eles se aplicam a qualquer camada ou componente do Figma que suporte opacidade reduzida, permitindo criar variações de estado (hover, pressed etc.) de forma padronizada e consistente.

Exemplos práticos:

  • Normal: button.opacity.default = 1 (opaco).
  • Hover: button.opacity.hover = 0.8 (80% opacidade).

Opacity Tokens

dica

Mais detalhes em Tokens de Opacidade.

🔎 Propriedades e Aplicação​

Os Opacity Tokens aceitam valores de 0 (transparente) até 1 (opaco), incluindo decimais para granularidade.

Para aplicar corretamente:

  1. Selecione a camada desejada e aplique o token via Tokens Studio, garantindo o vínculo.
  2. Referências entre tokens: Tokens de opacidade podem referenciar outros tokens ativos. Se o token de origem estiver inativo, a referência aparecerá como quebrada até ser ativada.

Aplicação de tokens de opacidade

cuidado

Impacto em camadas agrupadas

Ao aplicar um Opacity Token em um grupo, todos os elementos internos serão afetados.
Isso pode comprometer contraste e legibilidade — sempre valide antes de aplicar globalmente.

⚠️ Problemas Conhecidos e Limitações​

  • Uso com Color Tokens: Quando um Opacity Token é referenciado em um Color Token, ele não altera a cor em si, apenas a transparência da camada. Isso pode gerar comportamentos inesperados ou variáveis em branco na exportação para o Figma.
  • Transformações no Style Dictionary: Na exportação, valores de opacidade precisam ser convertidos para o formato correto (entre 0 e 1).

    O pacote @tokens-studio/sd-transforms faz essa conversão automaticamente (por exemplo, de 80% para 0.8).