Grafo de tokens e mapa de tokens

Os tokens se referenciam — uma cor semântica aponta para um primitivo, um token de componente aponta para o semântico. O variable Jar mostra essas referências em duas visões: o Grafo de tokens responde a “se eu mudar este token, o que mais muda?”, e o Mapa de tokens dispõe o projeto inteiro numa só imagem.

Abrir o grafo

  • Abra um projeto e escolha a aba Grafo de tokens no trilho à esquerda.
  • Na grade Master, clique com o botão direito numa variável e escolha Ver referências — o grafo abre com esse token já selecionado.
  • A visão é dividida em duas: uma árvore de níveis em cima e uma visão de resumo embaixo. Arraste o divisor para redimensionar; clique duas vezes nele para voltar ao tamanho automático.

Níveis e lentes de cor

A árvore ordena cada token pela distância até um valor direto.

  • Nível 0 contém valores primitivos — tokens que não referenciam nada. Nível 1 referencia o Nível 0, Nível 2 referencia o Nível 1, e assim por diante. Cada cabeçalho de coluna mostra o nível e a quantidade de tokens; ao passar o mouse, você vê a divisão por tipo e se a coluna é Valor primitivo ou Referência.
  • Se nada referencia nada, há uma única coluna Todos os tokens marcada Sem relações de referência.
  • Os tokens são agrupados pelo prefixo do nome. Clique numa linha de grupo para expandir os membros; ↔ N numa linha conta as conexões. Ao passar o mouse sobre um cabeçalho de coluna aparece o controle − / + (Diminuir profundidade do agrupamento / Aumentar profundidade do agrupamento), que muda a profundidade do agrupamento naquela coluna — ele só aparece quando a coluna tem nomes aninhados (a/b/c).
  • Passar o mouse sobre uma linha acende as linhas de conexão dela e esmaece o resto.
  • Colorir por, na barra de ferramentas, pinta um ponto de estado na frente de cada token: Nenhum, Não está no Figma (tokens criados na web que ainda não chegaram ao Figma) ou Escopos. Os cabeçalhos de coluna passam a mostrar selos de contagem (um ponto de cor e um número; passe o mouse para ver o nome) — para Escopos, um para cada estado: com escopo · todos · ocultos · não coletados; para Não está no Figma, um selo com a contagem (veja Metadados de variáveis).

O resumo de impacto

Clique em qualquer token e um painel de resumo aparece no canto inferior direito.

O grafo de tokens com color/accent selecionado — “Mudar isto afeta 1”, a cadeia de referências embaixo e o painel de resumo no canto inferior direito
O grafo de tokens com color/accent selecionado — “Mudar isto afeta 1”, a cadeia de referências embaixo e o painel de resumo no canto inferior direito
  • Mudar isto afeta N — quantos tokens usam este, seguindo a cadeia até o fim. É o número a conferir antes de editar um valor.
  • Valores referenciados: N — de quantos tokens de origem este valor vem, referências diretas e as origens delas.
  • A visão de resumo embaixo da árvore desenha a cadeia em volta do token selecionado: Referências à esquerda, Usado por à direita, com o token no meio. Clique num token da cadeia para destacar só o caminho dele; clique de novo para limpar o destaque. Um token sem relações mostra Este token não tem referências.
  • Chave Foco: ligada, clicar num token da cadeia recentraliza a visão nele e oculta os tokens não relacionados. Desligada, o clique só destaca.
  • Os pontos de tag do painel marcam o token com uma cor enquanto você explora — as mesmas tags que você vê na coluna Tag da grade.
  • Passe o mouse sobre o divisor e clique na alça Recolher resumo para recolher a visão de resumo numa barra fina Resumo; clique na barra (Expandir resumo) para trazê-la de volta. O painel do token selecionado continua nos dois casos.
  • Os botões ‹ / › ao lado do título percorrem os tokens que você viu, como voltar e avançar no navegador. Os atalhos de teclado são [ (“Token visto anteriormente”) e ] (“Próximo token”); eles são ignorados enquanto você digita num campo.
  • Arraste um espaço vazio da visão de resumo para mover; a roda do mouse também move. Clique duas vezes num espaço vazio para voltar ao centro, ou clique no botão Centralizar que aparece no canto inferior esquerdo depois que você move.
  • Abrir no Master abre a grade Master com este token selecionado. Um aviso Voltar ao grafo de tokens fica na grade para você voltar com um clique. Cmd+clique abre numa nova janela.
  • Abrir no mapa de tokens pula para o mapa com o mesmo token selecionado; Abrir no grafo de tokens, no mapa, traz você de volta, com um aviso Voltar ao mapa de tokens no grafo.

Referências circulares

Uma cadeia de aliases que volta para si mesma não tem valor a resolver. O variable Jar impede que essas cadeias se formem e mostra as que herda.

  • Na grade, um alias que fecharia um laço é recusado no seletor com Criaria uma referência circular, e uma colagem que criaria um laço pula essas células: Células ignoradas (referência circular): N.
  • Se um laço já existe, o grafo adiciona uma coluna vermelha Referência circular. Os membros do laço ficam num anel com setas girando ao redor; passe o mouse sobre o anel para ler o caminho e clique num membro para selecioná-lo.
  • Embaixo do anel, Afetados: N — não é possível resolver lista os tokens que apontam para o laço sem fazer parte dele — eles também não podem ser resolvidos.
  • Para corrigir, defina um valor direto em qualquer membro do laço: Defina um valor direto em qualquer membro do ciclo para resolver a cadeia.
A coluna Referência circular — o anel a↔b e a lista de tokens afetados
A coluna Referência circular — o anel a↔b e a lista de tokens afetados

Mapa de tokens

A aba Mapa de tokens do trilho mostra o projeto inteiro de uma vez: cada token é um nó, cada referência uma linha. Os grupos começam como clusters recolhidos, para que um projeto grande continue legível.

O mapa de tokens — cada coleção como um cluster, ligados por linhas de referência
O mapa de tokens — cada coleção como um cluster, ligados por linhas de referência
  • A roda do mouse dá zoom. Clique num cluster para abri-lo (os outros fecham); Shift+clique abre vários juntos. Feche um com o ✕ do rótulo, ou aperte Esc para fechar todos. Clique num token para focá-lo.
  • O menu Todos os tipos no cabeçalho é de seleção múltipla: escolha os tipos a destacar; ao desmarcar o último, volta para todos os tipos. Ao lado, os pontos de cor Tag destacam os tokens com aquela tag — só aparecem as cores usadas no projeto.
  • Ocultar não referenciados remove os tokens sem conexões. A caixa de busca (Pesquisar — destacar correspondências) ilumina as correspondências e esmaece o resto sem ocultá-lo.
  • No canto inferior esquerdo: Agrupar clusters liga e desliga o agrupamento, e Ajustar tudo traz o mapa inteiro de volta à visão.
  • Clique num token e o painel de informações mostra o tipo, Conexões: N, um atalho Centralizar, as listas Referências N e Usado por N, e depois Abrir no grafo de tokens e Abrir no Master. Clique num cluster para ver o selo grupo, a quantidade de tokens, Conectado a N e Membros.
  • Os botões ‹ / › e os atalhos [ / ] funcionam aqui do mesmo jeito que no grafo.