Introdução aos Color Tokens
Conteúdo adaptado da documentação oficial do Token Studio (TS), disponível aqui.
Os Color Tokens são representações de propriedades de cor aplicáveis a elementos de design, como contêineres (frames, grupos e formas), textos e elementos gráficos.
Eles encapsulam as decisões de cor do sistema, garantindo consistência visual e facilitando a atualização de paletas.
Com Color Tokens é possível:
- Definir a cor de preenchimento (fill) de elementos.
- Aplicar cores de borda (border).
- Estilizar a cor de sombras (shadow).
Diferentemente do uso direto de cores no Figma, os tokens centralizam as definições, permitindo que ajustes de paleta sejam refletidos automaticamente em todos os componentes vinculados.
Propriedades e usos
Os Color Tokens podem ser aplicados em diferentes propriedades:
- Fill (preenchimento): define cor de fundo de contêineres ou formas.
- Border (borda): controla o contorno dos elementos.
- Shadow (sombra): adiciona profundidade e destaque.
Para detalhes sobre Tokens de Cor, consulte estas instruções.
Criação e aplicação
- Criar tokens: no plugin Tokens Studio, defina nome e valor (hex, RGB, RGBA, etc.).
- Aplicar tokens: selecione a camada desejada e escolha o token.
- Clique direto → aplica como fill (padrão).
- Menu direito → escolha propriedade específica (fill ou border).
Uso de referências
Color Tokens podem referenciar outros tokens ativos.
Isso cria uma hierarquia onde mudanças no token base são propagadas automaticamente.
Se um token referenciado estiver desativado, a referência aparecerá como quebrada até que seja habilitada.