Token Graph und Token Map

Tokens verweisen aufeinander – eine semantische Farbe zeigt auf ein primitives Token, ein Komponenten-Token auf das semantische. variable Jar zeigt diese Referenzen in zwei Ansichten: Der Token Graph beantwortet „Wenn ich dieses Token ändere, was ändert sich noch?“, und die Token Map legt das ganze Projekt als ein Bild aus.

Den Graph öffnen

  • Öffnen Sie ein Projekt und wählen Sie links in der Leiste den Tab Token Graph.
  • Klicken Sie im Master-Raster mit der rechten Maustaste auf eine Variable und wählen Sie Referenzen anzeigen – der Graph öffnet sich mit diesem Token bereits ausgewählt.
  • Die Ansicht ist zweigeteilt: oben ein Stufenbaum, unten eine Übersichtsansicht. Ziehen Sie den Trenner, um die Größe zu ändern; ein Doppelklick stellt die automatische Größe wieder her.

Stufen und Farblinsen

Der Baum ordnet jedes Token nach seinem Abstand zu einem direkten Wert.

  • Stufe 0 enthält primitive Werte – Tokens, die auf nichts verweisen. Stufe 1 verweist auf Stufe 0, Stufe 2 auf Stufe 1 und so weiter. Jeder Spaltenkopf zeigt die Stufe und ihre Tokenanzahl; beim Überfahren sehen Sie die Aufteilung nach Typ und ob die Spalte Rohwert oder Referenz ist.
  • Verweist nichts auf etwas, gibt es nur eine Spalte Alle Tokens mit dem Hinweis Keine Referenzen.
  • Tokens werden nach Namenspräfix gruppiert. Klicken Sie auf eine Gruppenzeile, um ihre Mitglieder aufzuklappen; ↔ N in einer Zeile zählt ihre Verbindungen. Beim Überfahren eines Spaltenkopfs erscheint der Stepper − / + (Gruppentiefe verringern / Gruppentiefe erhöhen), der die Gruppierungstiefe dieser Spalte ändert – er erscheint nur, wenn die Spalte verschachtelte Namen (a/b/c) enthält.
  • Beim Überfahren einer Zeile leuchten ihre Verbindungslinien auf, der Rest wird abgeblendet.
  • Färben nach in der Symbolleiste malt einen Statuspunkt vor jedes Token: Keine, Nicht in Figma (im Web angelegte Tokens, die Figma noch nicht erreicht haben) oder Scopes. Die Spaltenköpfe zeigen dann Zähl-Chips (ein Farbpunkt und eine Zahl; Name beim Überfahren) – bei Scopes je einen für Mit Scope · Alle · Ausgeblendet · Nicht erfasst, bei Nicht in Figma einen Chip mit der Anzahl (siehe Variablen-Metadaten).

Die Wirkungsübersicht

Klicken Sie auf ein Token, und unten rechts erscheint ein Übersichtsbereich.

Der Token Graph mit ausgewähltem color/accent – „Änderung wirkt sich aus auf: 1“, darunter die Referenzkette, unten rechts der Übersichtsbereich
Der Token Graph mit ausgewähltem color/accent – „Änderung wirkt sich aus auf: 1“, darunter die Referenzkette, unten rechts der Übersichtsbereich
  • Änderung wirkt sich aus auf: N – wie viele Tokens dieses verwenden, wenn man der Kette bis zum Ende folgt. Das ist die Zahl, die Sie vor dem Bearbeiten eines Werts prüfen sollten.
  • Referenzierte Werte: N – aus wie vielen Quell-Tokens dieser Wert stammt, direkte Referenzen und deren Quellen.
  • Die Übersichtsansicht unter dem Baum zeichnet die Kette um das ausgewählte Token: links Referenziert, rechts Verwendet von, das Token in der Mitte. Klicken Sie auf ein Token der Kette, um nur dessen eigenen Pfad hervorzuheben; ein erneuter Klick hebt die Hervorhebung auf. Ein Token ohne Beziehungen zeigt Dieses Token hat keine Referenzen.
  • Schalter Fokus: Ist er an, zentriert ein Klick auf ein Token der Kette die Ansicht darauf und blendet nicht zugehörige Tokens aus. Ist er aus, hebt ein Klick nur hervor.
  • Tag-Punkte im Bereich markieren das Token beim Erkunden mit einer Farbe – dieselben Tags wie in der Spalte Tag des Rasters.
  • Überfahren Sie den Trenner und klicken Sie auf den Griff Übersicht einklappen, um die Übersichtsansicht zu einer schmalen Leiste Übersicht einzuklappen; ein Klick auf die Leiste (Übersicht ausklappen) holt sie zurück. Der Bereich des ausgewählten Tokens bleibt in beiden Fällen.
  • Die Buttons ‹ / › neben dem Titel bewegen sich durch die angesehenen Tokens, wie Zurück und Vor im Browser. Die Tastenkürzel sind [ (Zuvor angesehenes Token) und ] (Nächstes Token); beim Tippen in ein Feld werden sie ignoriert.
  • Ziehen Sie eine leere Stelle der Übersichtsansicht, um zu verschieben; auch das Mausrad verschiebt. Ein Doppelklick auf eine leere Stelle springt zur Mitte zurück, ebenso der Button Zentrieren, der nach dem Verschieben unten links erscheint.
  • Im Master öffnen öffnet das Master-Raster mit diesem Token ausgewählt. Auf dem Raster wartet eine Meldung Zurück zum Token Graph, mit der Sie per Klick zurückkehren. Cmd+Klick öffnet es in einem neuen Fenster.
  • In Token Map öffnen springt mit demselben ausgewählten Token zur Map; Im Token Graph öffnen in der Map bringt Sie zurück, mit einer Meldung Zurück zur Token Map im Graph.

Zirkuläre Referenzen

Eine Alias-Kette, die zu sich selbst zurückkehrt, hat keinen auflösbaren Wert. variable Jar verhindert, dass solche Ketten entstehen, und zeigt die an, die es übernimmt.

  • Im Raster wird ein Alias, der eine Schleife schließen würde, in der Auswahl mit Würde eine zirkuläre Referenz erzeugen abgelehnt, und ein Einfügen, das eine erzeugen würde, überspringt diese Zellen: Übersprungene Zellen (zirkuläre Referenz): N.
  • Existiert bereits eine Schleife, fügt der Graph eine rote Spalte Zirkuläre Referenz hinzu. Die Mitglieder der Schleife sitzen auf einem Ring, um den Pfeile laufen; überfahren Sie den Ring, um den Pfad zu lesen, und klicken Sie auf ein Mitglied, um es auszuwählen.
  • Unter dem Ring listet Betroffen: N – nicht auflösbar die Tokens auf, die in die Schleife zeigen, ohne dazuzugehören – auch sie lassen sich nicht auflösen.
  • Zur Behebung setzen Sie bei einem beliebigen Mitglied der Schleife einen direkten Wert: Setzen Sie bei einem Glied der Schleife einen direkten Wert, um die Kette aufzulösen.
Die Spalte Zirkuläre Referenz – der Ring a↔b und die Liste der betroffenen Tokens
Die Spalte Zirkuläre Referenz – der Ring a↔b und die Liste der betroffenen Tokens

Token Map

Der Tab Token Map in der Leiste zeigt das ganze Projekt auf einmal: Jedes Token ist ein Knoten, jede Referenz eine Linie. Gruppen beginnen als eingeklappte Cluster, damit auch ein großes Projekt lesbar bleibt.

Die Token Map – jede Sammlung als Cluster, verbunden durch Referenzlinien
Die Token Map – jede Sammlung als Cluster, verbunden durch Referenzlinien
  • Das Mausrad zoomt. Klicken Sie auf einen Cluster, um ihn zu öffnen (andere schließen sich); Shift+Klick öffnet mehrere zusammen. Schließen Sie einen mit dem ✕ an seiner Beschriftung, oder drücken Sie Esc, um alle zu schließen. Ein Klick auf ein Token fokussiert es.
  • Das Dropdown Alle Typen in der Kopfzeile ist eine Mehrfachauswahl: Wählen Sie die hervorzuhebenden Typen; wird der letzte abgewählt, gelten wieder alle Typen. Daneben heben Tag-Farbpunkte Tokens mit diesem Tag hervor – es erscheinen nur im Projekt verwendete Farben.
  • Unreferenzierte ausblenden entfernt Tokens ohne Verbindungen. Das Suchfeld (Suchen – Treffer hervorheben) hellt Treffer auf und blendet den Rest ab, ohne ihn auszublenden.
  • Unten links: Cluster gruppieren schaltet die Cluster-Bildung ein und aus, und Alles einpassen holt die ganze Map wieder ins Bild.
  • Klicken Sie auf ein Token, zeigt der Infobereich seinen Typ, Verbindungen: N, eine Abkürzung Zentrieren, die Listen Referenziert N und Verwendet von N, dann Im Token Graph öffnen und Im Master öffnen. Ein Klick auf einen Cluster zeigt sein Badge Gruppe, die Tokenanzahl, Verbunden mit: N und Mitglieder.
  • Die Buttons ‹ / › und die Kürzel [ / ] funktionieren hier genauso wie im Graph.