Variablen erstellen und verwalten
đ§ âVariablesâ (Variablen) befindet sich derzeit in der offenen Beta-Phase. Wir fĂŒgen kontinuierlich neue Funktionen hinzu und verbessern die Benutzererfahrung. Mehr ĂŒber die zukĂŒnftigen Funktionen erfahren â
Bevor du anfÀngst
Wer diese Funktion nutzen kann
Jede Person in jedem Abo
Jede Person mit Schreibzugriff auf eine Datei kann Variablen erstellen und bearbeiten.
Noch nicht viel Erfahrung mit Variablen? Unseren Leitfaden zu Variablen ansehen â
Auf die Ansicht âVariablesâ (Variablen) zugreifen
Ăber die Ansicht Variables (Variablen) kannst du Variablen, Modi, Gruppen und Sammlungen erstellen und verwalten.
- Hebe alle Auswahlen auf der ArbeitsflĂ€che auf, indem du Esc drĂŒckst oder auf die ArbeitsflĂ€che klickst.
- In der rechten Seitenleiste findest du den Abschnitt Local variables (Lokale Variablen).
- Klicke auf Open variables (Variablen öffnen).
Eine Variable erstellen
- Klicke in einer beliebigen Sammlung auf + Create variable (+ Variable erstellen).
- WĂ€hle aus dem Drop-down-MenĂŒ einen variable type (Variablentyp) aus.
- Gib der Variable in der ersten Spalte einen Namen und einen Wert in der zweiten.
WĂ€hle eine oder mehr Variablen aus und drĂŒcke auf ⧠Shift (⧠Umschalt) Enter, um eine Variable zu duplizieren.
Um eine Variable zu löschen, klicke mit der rechten Maustaste auf die Variable und wÀhle Delete variable (Variable löschen) aus.
Tipp: Eine Variable kann mehrere Werte speichern, was dynamischere Designs ermöglicht. Erfahren, wie du mehrere Modi fĂŒr Variablen erstellen kannst â
Einen Alias erstellen
Erstelle einen Alias fĂŒr eine Variable, um seinen Wert mit einer vorhandenen Variable zu verknĂŒpfen. So kannst du Design-Tokens implementieren und die Verwaltung von Aktualisierungen deiner Designs effizienter gestalten.
Beispiel: Du hast mehrere Farbvariablen, die auf dieselbe Farbvariable verweisen. Wenn diese Farbe aktualisiert werden muss, musst du nur die Quelle aktualisieren, anstatt jede Instanz der Farbe manuell zu aktualisieren.
Eine Variable kann auf andere Variablen desselben Typs verweisen.
So erstellst du einen Alias fĂŒr eine Variable:
- Klicke in der Ansicht Variables (Variablen) mit der rechten Maustaste auf den Wert einer Variablen und wÀhle Create alias (Alias erstellen) aus.
- WĂ€hle im Tab Libraries (Bibliotheken) eine Variable aus, um einen Alias festzulegen. Du kannst ĂŒber die Suchleiste eine Variable nach Namen suchen oder die aktivierten Bibliotheken durchsuchen.
Um einen Alias zu lösen, bewege den Mauszeiger ĂŒber das Wertfeld und klicke auf Detach alias (Alias lösen).
Eine Variable bearbeiten
Bewege den Mauszeiger ĂŒber die Zeile einer Variablen und klicke auf das Symbol Edit variable (Variable bearbeiten), um die Bearbeitungsansicht zu öffnen.
Hier kannst du folgende Aktionen ausfĂŒhren:
- Den Namen der Variable Àndern
- Eine Beschreibung hinzufĂŒgen, um die Verwendung einer Variable zu erlĂ€utern
- Den Wert einer Variable Àndern
- Mithilfe der KontrollkĂ€stchen wĂ€hlen, auf welche Eigenschaften die Variable angewendet werden kann â
- Codesyntax â hinzufĂŒgen
- Variable aus der Veröffentlichung ausblenden â
Eine Variable in bestimmten Eigenschaften anzeigen
Variablen können standardmĂ€Ăig auf alle unterstĂŒtzten Designeigenschaften angewendet werden.
Du kannst Zahlenvariablen einschrÀnken, indem du die Eigenschaften, auf die sie angewendet werden können, begrenzt.
Schalte in der Ansicht Edit variable (Variable bearbeiten) die Designeigenschaften, in denen die Variable verfĂŒgbar sein soll, ein oder aus.
Die vollstĂ€ndige UnterstĂŒtzung fĂŒr Farbvariablen ist in KĂŒrze verfĂŒgbar. Derzeit kannst du deine Auswahl auf Farbvariablen beschrĂ€nken. Diese EinschrĂ€nkungen treten jedoch nicht in Kraft. Das bedeutet, dass du weiterhin Farbvariablen aus allen unterstĂŒtzten Eigenschaften verwenden kannst, auch wenn du sie eingeschrĂ€nkt hast.
Codesyntax (bald verfĂŒgbar)
Die Codesyntax ermöglicht es dir, Variablen im Code mit gĂŒltigen Variablennamen darzustellen. Du kannst verschiedene Namen pro Plattform erstellen, einschlieĂlich CSS, JS, Kotlin und Swift.
Eine Codesyntax der Variable wird in Codeschnipseln in Dev Mode angezeigt, wenn Elemente mit der Variable untersucht werden.
Hinweis: Codesyntax ist noch nicht verfĂŒgbar, wird jedoch in KĂŒrze freigeschaltet.
Eine Auswahl von Variablen gruppieren
So organisierst du Variablen in einer Gruppe:
- WĂ€hle mehrere Variablen in der Ansicht Variables (Variablen) aus:
- Halte die â Befehlstaste/Strg gedrĂŒckt, um mehrere Variablen auszuwĂ€hlen.
- Halte die⧠Umschalttaste gedrĂŒckt, um einen Variablenbereich auszuwĂ€hlen.
- Klicke mit der rechten Maustaste auf die Auswahl und wÀhle New group with selection (Neue Gruppe mit Auswahl) aus.
Du kannst Gruppen neu anordnen, indem du sie in der Seitenleiste der Variablen-Ansicht anklickst und ziehst. So kannst du auch Gruppen in andere Gruppen ziehen, um sie einzubetten.
Eine Gruppe umbenennen
- Klicke in der Ansicht Variables (Variablen) auf Toggle sidebar (Seitenleiste umschalten), damit sie angezeigt wird.
- Doppelklicke auf den Gruppennamen.
- Gib einen neuen Namen fĂŒr die Variablengruppe ein.
Eine Gruppe verwalten
- Klicke in der Ansicht Variables (Variablen) auf Toggle sidebar (Seitenleiste umschalten), damit sie angezeigt wird.
- Klicke mit der rechten Maustaste auf den Gruppennamen in der Seitenleiste.
- WĂ€hle im MenĂŒ eine der folgenden Optionen ein:
- Ungroup (Gruppierung aufheben)
- Duplicate group (Gruppe duplizieren)
- Delete group (Gruppe löschen)
Variablensammlungen erstellen und verwalten
So erstellst du eine Variablensammlung:
- Klicke in der Ansicht Variables (Variablen) auf Toggle sidebar (Seitenleiste umschalten), damit sie angezeigt wird.
- Ăffne das Drop-down-MenĂŒ und wĂ€hle Create collection (Sammlung erstellen) aus.
So benennst du eine Variablensammlung um oder löschst sie:
- Klicke in der Ansicht Variables (Variablen) auf Toggle sidebar (Seitenleiste umschalten), damit sie angezeigt wird.
- Ăffne das Drop-down-MenĂŒ âCollectionsâ (Sammlungen) und wĂ€hle die Sammlung aus, die du verwalten möchtest.
- Ăffne das Drop-down-MenĂŒ âCollectionsâ (Sammlungen) erneut und wĂ€hle Rename collection (Sammlung umbenennen) oder Delete collection (Sammlung löschen) aus.
Du möchtest noch mehr ĂŒber Variablen erfahren? Sieh dir folgende Themen an: