Graphe des tokens et carte des tokens

Les tokens se référencent les uns les autres — une couleur sémantique pointe vers un primitif, un token de composant pointe vers le sémantique. variable Jar montre ces références dans deux vues : le Graphe des tokens répond à « si je change ce token, qu’est-ce qui change d’autre ? », et la Carte des tokens dispose tout le projet en une seule image.

Ouvrir le graphe

  • Ouvrez un projet et choisissez l’onglet Graphe des tokens dans le rail de gauche.
  • Depuis la grille Master, faites un clic droit sur une variable et choisissez Voir les références — le graphe s’ouvre avec ce token déjà sélectionné.
  • La vue est coupée en deux : un arbre de niveaux en haut et une vue de synthèse en bas. Faites glisser le séparateur pour redimensionner ; double-cliquez dessus pour revenir au dimensionnement automatique.

Niveaux et filtres de couleur

L’arbre classe chaque token selon sa distance à une valeur directe.

  • Niveau 0 contient les valeurs primitives — des tokens qui ne référencent rien. Niveau 1 référence le niveau 0, Niveau 2 référence le niveau 1, et ainsi de suite. Chaque en-tête de colonne indique le niveau et son nombre de tokens ; au survol, vous voyez la répartition par type et si la colonne est Valeur primitive ou Référence.
  • Si rien ne référence rien, il n’y a qu’une seule colonne Tous les tokens, marquée Aucune relation de référence.
  • Les tokens sont regroupés par préfixe de nom. Cliquez sur une ligne de groupe pour déplier ses membres ; ↔ N sur une ligne compte ses connexions. Au survol d’un en-tête de colonne apparaît le sélecteur − / + (Réduire la profondeur des groupes / Augmenter la profondeur des groupes), qui change la profondeur de regroupement de cette colonne — il n’apparaît que si la colonne contient des noms imbriqués (a/b/c).
  • Le survol d’une ligne éclaire ses lignes de connexion et atténue le reste.
  • Colorer par dans la barre d’outils peint un point d’état devant chaque token : Aucun, Absent de Figma (tokens créés sur le web qui n’ont pas encore atteint Figma) ou Portées. Les en-têtes de colonne affichent alors des badges de comptage (un point de couleur et un nombre ; survolez pour le nom) — pour Portées, un badge chacun pour portée définie · tous · masqués · non récupérés ; pour Absent de Figma, un badge avec le nombre (voir Métadonnées des variables).

La synthèse d’impact

Cliquez sur un token et un panneau de synthèse apparaît en bas à droite.

Le graphe des tokens avec color/accent sélectionné — « Modifier ceci affecte 1 », la chaîne de références en dessous et le panneau de synthèse en bas à droite
Le graphe des tokens avec color/accent sélectionné — « Modifier ceci affecte 1 », la chaîne de références en dessous et le panneau de synthèse en bas à droite
  • Modifier ceci affecte N — combien de tokens utilisent celui-ci, en suivant la chaîne jusqu’au bout. C’est le chiffre à vérifier avant de modifier une valeur.
  • Valeurs référencées : N — de combien de tokens sources provient cette valeur, références directes et leurs sources.
  • La vue de synthèse sous l’arbre dessine la chaîne autour du token sélectionné : Références à gauche, Utilisé par à droite, le token au milieu. Cliquez sur un token de la chaîne pour ne mettre en évidence que son propre chemin ; cliquez à nouveau pour effacer. Un token sans relation affiche Ce token n’a aucune référence.
  • Interrupteur Focaliser : activé, un clic sur un token de la chaîne recentre la vue sur lui et masque les tokens sans rapport. Désactivé, un clic ne fait que mettre en évidence.
  • Les points de tag du panneau marquent le token d’une couleur pendant votre exploration — les mêmes tags que dans la colonne Tag de la grille.
  • Survolez le séparateur et cliquez sur la poignée Réduire le résumé pour replier la vue de synthèse en une fine barre Résumé ; cliquez sur la barre (Développer le résumé) pour la rétablir. Le panneau du token sélectionné reste dans les deux cas.
  • Les boutons ‹ / › à côté du titre parcourent les tokens consultés, comme précédent et suivant dans un navigateur. Les raccourcis clavier sont [ et ] (infobulles Token consulté précédemment ( [ ) / Token suivant ( ] )) ; ils sont ignorés pendant la saisie dans un champ.
  • Faites glisser un espace vide de la vue de synthèse pour vous déplacer ; la molette déplace aussi. Double-cliquez sur un espace vide pour revenir au centre, ou appuyez sur le bouton Centrer qui apparaît en bas à gauche après un déplacement.
  • Ouvrir dans Master ouvre la grille Master avec ce token sélectionné. Une notification Retour au graphe des tokens reste sur la grille pour revenir en un clic. Cmd+clic l’ouvre dans une nouvelle fenêtre.
  • Ouvrir dans la carte des tokens saute vers la carte avec le même token sélectionné ; Ouvrir dans le graphe des tokens sur la carte vous ramène, avec une notification Retour à la carte des tokens sur le graphe.

Références circulaires

Une chaîne d’alias qui revient sur elle-même n’a aucune valeur à résoudre. variable Jar empêche la formation de telles chaînes et affiche celles dont il hérite.

  • Dans la grille, un alias qui fermerait une boucle est refusé dans le sélecteur avec Créerait une référence circulaire, et un collage qui en créerait une ignore ces cellules : Cellules ignorées (référence circulaire) : N.
  • Si une boucle existe déjà, le graphe ajoute une colonne rouge Référence circulaire. Les membres de la boucle se placent sur un anneau parcouru de flèches ; survolez l’anneau pour lire le chemin, et cliquez sur un membre pour le sélectionner.
  • Sous l’anneau, Affectés : N — résolution impossible liste les tokens qui pointent vers la boucle sans en faire partie — ils ne peuvent pas être résolus non plus.
  • Pour corriger, définissez une valeur directe sur n’importe quel membre de la boucle : Définissez une valeur directe sur n’importe quel membre de la boucle pour résoudre la chaîne.
La colonne Référence circulaire — l’anneau a↔b et la liste des tokens affectés
La colonne Référence circulaire — l’anneau a↔b et la liste des tokens affectés

Carte des tokens

L’onglet Carte des tokens du rail montre tout le projet d’un coup : chaque token est un nœud, chaque référence une ligne. Les groupes démarrent sous forme de clusters repliés pour qu’un grand projet reste lisible.

La carte des tokens — chaque collection sous forme de cluster, reliée par des lignes de référence
La carte des tokens — chaque collection sous forme de cluster, reliée par des lignes de référence
  • La molette zoome. Cliquez sur un cluster pour l’ouvrir (les autres se ferment) ; Shift+clic en ouvre plusieurs à la fois. Fermez-en un avec le ✕ de son étiquette, ou appuyez sur Esc pour tout fermer. Cliquez sur un token pour le focaliser.
  • La liste Tous les types de l’en-tête est à sélection multiple : choisissez les types à mettre en évidence ; désélectionner le dernier revient à tous les types. À côté, les points de couleur Tag mettent en évidence les tokens portant ce tag — seules les couleurs utilisées dans le projet apparaissent.
  • Masquer les non référencés retire les tokens sans connexion. Le champ de recherche (Rechercher — surligner les correspondances) éclaire les correspondances et atténue le reste sans le masquer.
  • En bas à gauche : Regrouper en clusters active ou désactive le regroupement, et Tout afficher ramène toute la carte dans la vue.
  • Cliquez sur un token et le panneau d’informations affiche son type, Connexions : N, un raccourci Centrer, les listes Références et Utilisé par avec leur nombre, puis Ouvrir dans le graphe des tokens et Ouvrir dans Master. Cliquez sur un cluster pour voir son badge groupe, son nombre de tokens, Connecté à N et Membres.
  • Les boutons ‹ / › et les raccourcis [ / ] fonctionnent ici comme dans le graphe.