Pular para o conteúdo principal

Exportando Tokens como Styles ou Variables​

info

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

O Tokens Studio permite exportar tokens como Estilos (Styles) ou Variáveis (Variables) no Figma, centralizando a gestão e facilitando a manutenção do design system.
Essa integração garante consistência visual: alterações feitas nos tokens são refletidas automaticamente nos elementos vinculados dentro do Figma.

Tipos de Tokens Suportados​

O plugin suporta a exportação de diversos tipos de tokens — cores, tipografia, espaçamento, entre outros.
Cada tipo é exportado com suas propriedades correspondentes em Estilos ou Variáveis, mantendo o alinhamento com o design system.

Exportação e Themes

Como Exportar para o Figma​

  1. Selecionar Exportação: Na página de tokens do plugin, clique em Exportar Styles e Variables.
  2. Definir Opções:
    • Escolha exportar como Styles, Variables ou ambos.
    • Personalize nomes e referências, se necessário.
    • Habilite a opção de atualizar ou remover Estilos/Variáveis não conectados a tokens ativos.
  3. Escolher o Método de Exportação:
    • Por Themes (Temas): Cria Variáveis com múltiplos modos dentro de uma coleção (requer licença Pro).
    • Por Token Sets: Cria coleções independentes de Variáveis. Recomendado para projetos simples, sem múltiplos modos.
  4. Confirmar Exportação: Após revisar as configurações, confirme para que os Estilos ou Variáveis sejam criados e sincronizados no Figma.

Exportação e Sets

Ponto de Decisão no Opala DS​

cuidado

Uso de Variáveis em vez de Estilos

No nosso design system, optamos por não utilizar Styles em componentes como tipografia.
Motivo: ao aplicar um Style no Figma, qualquer alteração direta em uma propriedade (por exemplo, fontSize ou lineHeight) quebra a referência ao Style, gerando inconsistências visuais.

➡️ Para evitar esse risco, utilizamos exclusivamente Variáveis.
Assim, cada elemento mantém a configuração definida pelo token, garantindo robustez, flexibilidade e rastreabilidade.

Considerações sobre Tokens Ignorados​

Alguns tokens podem ser ignorados na exportação devido a limitações do Figma ou do plugin.
É recomendável revisar o guia oficial do Tokens Studio para identificar esses casos e planejar alternativas.

dica

Para mais detalhes sobre o processo de exportação, consulte esta documentação.