Variablen-Metadaten

Variablen tragen mehr als Werte – sie tragen auch die Information, wo sie verwendet werden dürfen. variable Jar verwaltet drei Arten von Metadaten im Master-Raster und im Detailbereich.

MetadatenZweckFigma-Synchronisierung
ScopesBeschränkt, in welchen Eigenschaftsauswahlen die Variable erscheint✓ hin und zurück
BeschreibungEine Notiz, wofür die Variable gedacht ist✓ hin und zurück
TagFarbcodierte interne GruppierungNur im Web

Scopes und Beschreibungen werden bei der Synchronisierung aus Figma gelesen, und Ihre Änderungen im Web landen wieder im Variablenbereich von Figma. Tags gibt es nur im Web – sie berühren Figma nie.

Wie Werte können auch Scopes und Beschreibungen in Konflikt geraten. Wurden die Scopes oder die Beschreibung derselben Variable vor einer Synchronisierung in Figma und im Web unterschiedlich geändert, zählt das Konflikt-Banner sie als Auch Scopes weichen ab · N / Auch Beschreibungen weichen ab · N, und Sie wählen in dieser Spalte Zeile für Zeile die Seite Figma oder VA – genau wie bei einem Wertkonflikt (In der Spalte Scope pro Zeile wählen / In der Spalte Beschreibung pro Zeile wählen). Auswahl und Übernahme funktionieren wie im Konfliktabschnitt von Figma-Synchronisierung beschrieben.

Metadaten-Spalten einblenden

Drücken Sie das Spaltensymbol in der Symbolleiste (Tooltip Ansicht — Spalten & Farbe) und schalten Sie im Abschnitt Spalten die Spalten Modi · Beschreibung · Tag · Scopes ein oder aus. Das Menü bleibt offen, sodass Sie mehrere Spalten nacheinander umschalten können.

Das Menü Ansicht – der Abschnitt Spalten schaltet Modi, Beschreibung, Tag und Scopes
Das Menü Ansicht – der Abschnitt Spalten schaltet Modi, Beschreibung, Tag und Scopes

Mit allen dreien liest das Master-Raster Beschreibung, Tag und Scopes in einer Zeile.

Das Master-Raster mit eingeblendeten Spalten Beschreibung, Tag und Scopes
Das Master-Raster mit eingeblendeten Spalten Beschreibung, Tag und Scopes

Kommentare lassen sich wie an Wertzellen auch an Beschreibungs-, Tag- und Scopes-Zellen anheften. Ist die Spalte ausgeblendet, bleibt der Kommentar erhalten, und beim Springen zu ihm wird die Spalte wieder eingeblendet.

Scopes – wo eine Variable verwendet werden kann

Scopes legen fest, in welchen Eigenschaftsauswahlen von Figma die Variable angeboten wird. Beschränken Sie eine Farbvariable auf die Text-Füllung, erscheint sie nicht mehr, wenn jemand die Hintergrundfarbe eines Frames wählt.

  • Die Zelle Scopes fasst den aktuellen Stand zusammen – Alle (alle unterstützten Eigenschaften), Keine, die Namen der gewählten Scopes (z. B. „Frame, Text“ – ist die Spalte zu schmal, fasst ein +N-Badge den Rest zusammen) oder „—“ bei Variablen, deren Scopes noch nicht aus Figma gelesen wurden. Beim Überfahren von „—“ erscheint Noch nicht aus Figma erfasst – erfolgt bei der nächsten Synchronisierung.
  • Ein Klick auf die Zelle öffnet eine Liste mit derselben Hierarchie und denselben Symbolen wie der Scope-Dialog von Figma, in der Sie mehrere Scopes nacheinander umschalten. Die Liste zeigt nur Scopes, die für den Typ der Variable gültig sind – Farbe hat Füllung mit Frame · Form · Text darunter sowie Kontur · Effekte; Zahl reicht von Eckenradius bis zur Gruppe Typografie; Zeichenfolge hat Textinhalt · Schriftfamilie · Schriftstärke oder -stil.
  • In allen unterstützten Eigenschaften anzeigen bedeutet schlicht, dass alle Scopes gleichzeitig angehakt sind – schalten Sie es ein, leuchten alle einzelnen Scopes auf; nehmen Sie irgendeinen heraus, wird die oberste Zeile abgewählt, der Rest bleibt an. Bei Farbvariablen funktioniert Füllung genauso für Frame-, Form- und Textfüllungen.
  • Scope-Zellen von Booleans sind schreibgeschützt – Figma unterstützt keine Scopes für boolesche Variablen.
Die aus einer Zelle geöffnete Scope-Liste – dieselbe Hierarchie wie im Scope-Dialog von Figma
Die aus einer Zelle geöffnete Scope-Liste – dieselbe Hierarchie wie im Scope-Dialog von Figma

Beschreibung

  • Tippen Sie direkt in die Spalte Beschreibung oder bearbeiten Sie sie im Detailbereich. Beschreibungen werden mit der Beschreibung der Variable in Figma ausgetauscht.
  • Das Löschen einer Beschreibung im Web entfernt nie die in Figma – die Synchronisierung löscht keine Beschreibungen auf der Figma-Seite.

Tags

  • Ein Tag ist eine interne Gruppierung aus einer Palette mit 7 Farben (Rot · Bernstein · Grün · Blau · Lila · Magenta · Grau). Klicken Sie auf eine Zelle der Spalte Tag, um Farben in der Palette umzuschalten; eine Variable kann mehrere Tags tragen.
  • Die Zelle zeigt die Tag-Farben als Punkte nebeneinander; ab vier fasst +N den Rest zusammen. Kein Tag in der Palette entfernt alle.
  • Tags gibt es nur im Web – sie werden nie nach Figma geschrieben und nie durch die Synchronisierung gelöscht.

Viele Variablen auf einmal bearbeiten

Öffnen Sie den Detailbereich über das Detailsymbol, das beim Überfahren einer Zeile erscheint. Mit mehreren ausgewählten Zeilen wechselt der Bereich zu N ausgewählt und bearbeitet die gesamte Auswahl.

  • Eine eingegebene Beschreibung gilt für alle ausgewählten Variablen.
  • Scopes und Tags zeigen Gemischt, wenn die Auswahl nicht übereinstimmt; ein Klick auf ein Scope-Kontrollkästchen oder einen Tag-Farbpunkt vereinheitlicht alle.
  • Scopes lassen sich nicht über gemischte Typen hinweg bearbeiten – wählen Sie Variablen eines Typs.
  • Ein einziges Ctrl(⌘)+Z macht den ganzen Stapel rückgängig.
Der Detailbereich – Name, Beschreibung, Tag-Palette und Scope-Liste an einem Ort
Der Detailbereich – Name, Beschreibung, Tag-Palette und Scope-Liste an einem Ort

Status in Farbe sehen – der Graph

Im Tab Token Graph lassen sich Metadaten auf die Struktur malen, sodass Sie sie auf einen Blick erfassen.

  • Wählen Sie unter Färben nach in der Graph-Symbolleiste Nicht in Figma, um Variablen hervorzuheben, die es in Figma noch nicht gibt; jede Referenzstufe zeigt einen Chip Nicht in Figma: N mit der Anzahl. Im Master-Raster wird dieser Status angezeigt, sobald das Projekt mit einer Figma-Datei verknüpft ist – beim Überfahren des Punkts neben dem Namen erscheint Noch nicht in Figma – verschwindet, sobald die nächste Synchronisierung die Variable erstellt.
  • Wählen Sie Scopes, zeigt jede Referenzstufe die Chips Mit Scope: N · Alle: N · Ausgeblendet: N (keine Scopes – die Variable erscheint in keiner Auswahl) · Nicht erfasst: N, sodass Sie unfertige Tokens direkt in der Struktur erkennen.
  • Tag-Farbpunkte erscheinen auch neben den Tokens im Graph.