Variablen im Dev Mode
Als Entwickler*in stößt du im Dev Mode bei der Überprüfung von Designs auf Farb-, Zahlen-, Zeichenfolgen- und boolesche Variablen. Die Werte dieser Variablen können von Faktoren wie dem Variablenmode abhängen, was es manchmal erschwert, die exakten Werte zu bestimmen, die du aus dem Design extrahieren möchtest.
Figma bietet im Dev Mode einige Optionen, um die Arbeit mit Variablen für Entwickler*innen zu erleichtern:
Variablendetails
Wenn du ein Design im Dev Mode inspizierst, kannst du Details zu den im Design verwendeten Variablen einsehen. Das Modal „Variablendetails“ listet Informationen zu einer Variable auf, einschließlich:
- dem Namen der Variablen
- einem Link zur Datei, die die Variable hostet
- dem Namen der Variablen-Collection, die die Variable enthält
- dem Mode der Variablen
- dem Wert der Variablen und, falls relevant, der Kette von Aliasen zu einem Rohwert
- dem Gültigkeitsbereich der Variablen (wo sie verwendet werden kann)
- einem Codeausschnitt zur Verwendung der Variablen
Eine nützliche Funktion ist die Möglichkeit, eine Kette von Variablen-Aliasen bis zu einem bestimmten Wert zurückzuverfolgen. Zum Beispiel verwendet die Variable „Hintergrund/Positiv/Standard“ im vorherigen Bild „Grün/500“ als Alias, was dem Farbwert #14AE5C entspricht.
Mit dem Modal „Variablendetails“ kannst du auch die Modes ändern, um die anderen Werte anzuzeigen, die die Variable haben kann.
Öffne das Modal „Variablendetails“
Es gibt zwei Möglichkeiten, das Modal „Variablendetails“ zu öffnen:
Klicke bei Variablen, die in einem Codeausschnitt erscheinen, wie z. B. Design-Token in CSS, auf den Variablennamen im Inspektionsfenster, um das Variablendetails-Modal zu öffnen.
Für andere Variablen, wie die, die im Abschnitt „Auswahlfarben“ erscheinen, klickst du im Inspektionsfenster auf „Variablendetails“, um das Modal „Variablendetails“ zu öffnen.
Empfohlene Variablen
Wenn du ein Design inspizierst, stößt du im Dev Mode manchmal auf Rohwerte anstelle von Variablen oder Stilen. Dies kann aus verschiedenen Gründen passieren, zum Beispiel, wenn ein Designer während der Designphase versehentlich eine Variable getrennt hat. Wenn du auf einen Rohwert stößt, möchtest du vielleicht prüfen, ob es eine vorhandene Variable gibt, die stattdessen verwendet werden sollte.
Um die Identifizierung entsprechender Variablen zu erleichtern, kann der Dev Mode Variablen vorschlagen.
Für einen solchen Vorschlag muss die Variable folgende Eigenschaften aufweisen:
- exakt denselben Wert
- einen geeigneten Anwendungsbereich
Du kannst auf eine vorgeschlagene Variable klicken, um den Namen zu kopieren.
Vorgeschlagene Variablen abrufen
Um im Dev Mode Variablenvorschläge für einen Wert zu erhalten, klickst du im Inspektionsfenster auf den Wert, für den du einen Vorschlag erhalten möchtest. Das Modal „Vorgeschlagene Variablen“ erscheint neben dem Wert, auf den du geklickt hast.
Lokale Variablen-Collections aufrufen
Im Dev Mode kannst du auf die lokalen Variablen-Collections in der Datei zugreifen und sie anzeigen.
Zum Beispiel ist im vorherigen Bild im Abschnitt „Collections aus dieser Datei“ die Collection „Farbprimitive“ ausgewählt. Diese Namen sind nur Beispiele – die tatsächlichen Collection- und Variablennamen entsprechen den lokalen Variablen und Collections in deiner Datei.
Unter dem Abschnitt „Collections aus dieser Datei“ befindet sich eine Liste aller Variablengruppen, die in der Collection vorkommen, wie „Marke“, „Schwarz“ und „Weiß“. Standardmäßig ist „Alle Variablen“ ausgewählt. Die Gruppen sind in derselben Reihenfolge angeordnet, in der sie im Variablen-Modal organisiert sind.
Für die ausgewählte Gruppe zeigt die Variablentabelle die Variablen zusammen mit den Werten für jeden Mode einer Variablen an. Wenn du „Alle Variablen“ ausgewählt hast, wird die Tabelle nach Gruppen organisiert.
Du kannst auf einzelne Variablen und Werte klicken, um sie in die Zwischenablage zu kopieren und Details zur jeweiligen Variable anzuzeigen.
Öffne die Variablentabelle
Um die Variablentabelle zu öffnen, klickst du im Variablen-Abschnitt des Inspektionsfensters auf „Variablen öffnen“. Die Variablentabelle wird auf die ganze Arbeitsfläche erweitert.