Aplicação de Tokens no Figma
Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.
O Tokens Studio permite aplicar tokens no Figma de forma consistente e eficiente, garantindo padronização no design. Este guia explica como aplicar tokens corretamente, diferencia tokens normais de tokens de documentação e apresenta boas práticas para o gerenciamento.
Como Aplicar Tokens
Existem duas formas principais:
- Aplicação Padrão (clique esquerdo):
Aplica o token diretamente na seleção atual. Para tipos como cores, o comportamento padrão é aplicar como fill. Pode ser usado em múltiplas camadas ao mesmo tempo.
- Aplicação Específica (clique direito):
Permite escolher a propriedade exata (ex.: Top, Right, Bottom, Left para espaçamentos).
✅ Recomendado, pois evita inconsistências.
Controle de Escopo
No canto inferior direito do Tokens Studio há um seletor de escopo:
- Apply to selection: aplica somente na seleção atual.
- Apply to page: aplica em toda a página.
- Apply to document: aplica em todo o documento (pode ser lento em arquivos grandes).
⚙️ Você pode desativar Update on change. Assim, as alterações só são aplicadas quando clicar manualmente no botão de aplicação.
Mais detalhes em Applying Tokens.
Tokens Normais × Tokens de Documentação
- Tokens Normais: usados diretamente em elementos (cores, tamanhos, espaçamentos etc.), controlando a aparência do design.
- Tokens de Documentação: usados apenas para criar referências em texto (nome, valor ou descrição), atualizadas automaticamente quando o token original muda. Não devem ser aplicados em camadas de design.
Mais detalhes em Documentation Tokens.
Inspeção e Remoção
O Tokens Studio oferece ferramentas para gerenciar tokens aplicados:
- Multi-inspect: lista todos os tokens aplicados na camada.
- Deep Inspect: mostra também tokens aplicados nos filhos.
- Selecionar camadas com tokens específicos: use o ícone de mira.
- Remapear tokens: substitui um token antigo por outro em todas as camadas ligadas.
Não altere variáveis pela barra lateral do Figma.
Sempre use o Tokens Studio. Alterações manuais quebram a sincronização e deixam valores incorretos no Inspect.
Quebre links ao remover tokens.
Se um token não for mais usado, desvincule pelo Tokens Studio. Caso contrário, o valor pode ser reaplicado em atualizações futuras.
➡ Para remover: abra a aba Inspect, selecione o token e clique em Remove selected.
Boas Práticas
- Aplique tokens sempre pelo Tokens Studio.
- Quebre links de tokens não utilizados.
- Use tokens de documentação apenas para documentação.
- Aproveite inspeção e remapeamento para manter o sistema limpo e consistente.