Variablen und Collections erstellen und verwalten

Bevor du anfängst

Wer kann diese Funktion verwenden?

Jede Person in jedem Abo

Jede Person mit Schreibzugriff auf eine Datei kann Variablen erstellen und bearbeiten.

Suchst du nach weiteren Ressourcen zu Variablen? Sieh dir unseren Leitfaden zu Variablen an.

Auf die Ansicht „Variables“ (Variablen) zugreifen

Verwende das Modal Variablen, um Folgendes zu erstellen und zu verwalten:

1. Variablen-Collections
2. Variablen
3. Variablenmodi
4. Variablengruppen

So greifst du auf das Modal Variablen zu:

1. Hebe alle Auswahlen auf der Arbeitsfläche auf, indem du Esc drückst oder auf die Arbeitsfläche klickst.
2. In der rechten Seitenleiste findest du den Abschnitt Local variables (Lokale Variablen).
3. Klicke auf Open variables (Variablen öffnen).

Du kannst auf Seitenleiste umschalten klicken, um zusätzliche Optionen im Variablen-Modal zu sehen.

Eine Variable erstellen

1. Klicke in einer beliebigen Sammlung auf + Create variable (+ Variable erstellen).
2. Wähle aus dem Drop-down-Menü einen variable type (Variablentyp) aus.
3. Gib der Variable in der ersten Spalte einen Namen und einen Wert in der zweiten.

Jede Variablen-Collection kann bis zu 5.000 Variablen enthalten.

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.

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:

1. Öffne das Variablen-Modal.
2. Klicke mit der rechten Maustaste auf den Wert einer Variablen und wähle Alias erstellen.
3. Wähle im Tab Bibliotheken eine Variable aus, um einen Alias festzulegen. Du kannst die Suchleiste verwenden, um eine Variable nach Namen zu suchen oder durch die verfügbaren Bibliotheken zu stöbern.

Um einen Alias zu lösen, bewege den Mauszeiger über das Wertfeld und klicke auf Detach alias (Alias lösen).

Variablen kopieren und einfügen

Du kannst Variablen in jede Collection kopieren und einfügen, einschließlich Collections in einer anderen Datei.

1. Öffne die gewünschte Variablen-Collection aus dem Variablen-Modal.
2. Wähle eine oder mehrere Variablen aus.
   • Halte die ⌘ Befehlstaste für Mac oder ⌃ Strg für Windows gedrückt, um mehrere Variablen auszuwählen.
   • Halte die ⇧ Umschalttaste gedrückt, um einen Variablenbereich auszuwählen.
3. Klicke mit der rechten Maustaste auf die Auswahl und wähle Kopieren.
4. Klicke mit der rechten Maustaste auf eine beliebige Collection und wähle Einfügen.

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:

1. Den Namen der Variablen ändern.
2. Eine Beschreibung hinzufügen, um zu erklären, wie die Variable verwendet werden soll.
3. Die Werte der Variablen ändern.
4. Codesyntax hinzufügen.
5. Die Variable vor der Veröffentlichung verbergen.
6. Einen Variablenbereich festlegen, um zu begrenzen, auf welche Eigenschaften die Variable angewendet werden kann.

Festlegen des Variablenbereichs

Lege den Anwendungsbereich einer Variable fest, um einzuschränken, auf welche Eigenschaften die Variable angewendet werden kann. Das reduziert das Rätselraten bei der Entscheidung, welche Variablen du für deine Entwürfe verwenden willst.

Zum Beispiel kann, wenn du eine Zahlenvariable auf den Eckradius beschränkst, die Variable nur auf den Eckradius angewendet werden und wird nicht als Option für andere unterstützte Eigenschaften angezeigt.

Für Zahlen-, Farb- und Zeichenfolgenvariablen können Anwendungsbereiche festgelegt werden.

So legst du den Bereich einer Variablen fest:

1. Klicke mit der rechten Maustaste auf eine oder mehrere Variablen und wähle Variable bearbeiten. Du kannst auch auf Variable bearbeiten klicken, das sich rechts neben einer einzelnen Variablen befindet.
2. Öffne den Tab Bereich.
3. Verwende die Kontrollkästchen, um die Verfügbarkeit der Variablen in dieser Eigenschaft umzuschalten. Aktiviere In allen anzeigen, um die Variable für alle unterstützten Eigenschaften verfügbar zu machen.

Codesyntax hinzufügen

Die Codesyntax ermöglicht es dir, Variablen im Code mit gültigen Variablennamen darzustellen, um ein nahtloses Übergabeerlebnis zu unterstützen. Die Codesyntax einer Variablen wird in Code-Schnipseln im Dev Mode angezeigt, wenn Elemente mit der Variablen untersucht werden. Derzeit werden Code-Schnipsel für Variablen in CSS, SwiftUI und Compose unterstützt. 

Du kannst pro Plattform einen Namen erstellen, einschließlich Web, Android und iOS. Dies ermöglicht bis zu drei Codesyntaxen pro Variable. 

So fügst du einer Variablen Codesyntax hinzu:

1. Klicke im Abschnitt Codesyntax des Modals Variable bearbeiten auf Codesyntax hinzufügen.
2. Wähle aus der Dropdown-Liste „Web“, „Android“ oder „iOS“.
3. Verwende das Eingabefeld, um einen Variablennamen einzugeben. Eine Vorschau zeigt, wie der Variablenname in Code-Schnipseln erscheint.

Variablen in großen Mengen bearbeiten

So bearbeitest du mehrere Variablen gleichzeitig:

1. Öffne eine beliebige Collection aus dem Variablen-Modal.
2. Wähle mehrere Variablen mit Tastenkürzel aus:
   • Halte die ⌘ Befehlstaste / Strg gedrückt und klicke, um einzelne Variablen auszuwählen
   • Halte die Umschalttaste gedrückt und klicke, um einen Variablenbereich auszuwählen
3. Klicke mit der rechten Maustaste auf eine ausgewählte Variable und klicke auf Variablen bearbeiten.
4. Im Modal Variablen bearbeiten kannst du:
   • Den Variablenbereich festlegen, falls vom Variablentyp unterstützt
   • Variablen aus der Veröffentlichung ausblenden

Variablensammlungen erstellen und verwalten

Eine Collection ist ein Satz von Variablen und Modes. Collections können verwendet werden, um zusammengehörige Variablen gemeinsam zu ordnen. Zum Beispiel kannst du eine Collection für in verschiedenen Sprachen lokalisierten Text und eine weitere Sammlung für räumliche Werte verwenden.

Eine Variablen-Collection erstellen

Um eine Variablen-Collection zu erstellen, gehe zur Seitenleiste des Variablenmodals und klicke auf Weitere Optionen > Collection erstellen.

Wenn eine Variable nicht in einer Datei erstellt wurde, musst du zuerst eine Variable erstellen, um neue Variablen-Collections zu erstellen.

Eine Variablen-Collection umbenennen

So benennst du eine Variablen-Collection um:

1. Öffne in der Seitenleiste des Variablenmodals die Dropdown-Liste „Collections“ und wähle die Collection aus, die du verwalten möchtest.
2. Klicke Weitere Optionen und wähle Collection umbenennen aus.

Eine Variablen-Collection löschen

Das Löschen einer Variablen-Collection löscht auch alle darin enthaltenen Variablen. Alle Eigenschaften, die die Variablen verwendet haben, sind nicht mehr mit der Variable und den vorhandenen Modi verbunden. Die Variablen und die Variablen-Collection können nur wiederhergestellt werden, indem die Aktion sofort rückgängig gemacht wird oder eine frühere Version der Datei wiederhergestellt wird. 

So löschst du eine Variablen-Collection:

1. Öffne in der Seitenleiste des Variablenmodals die Dropdown-Liste „Collections“ und wähle die Collection aus, die du verwalten möchtest.
2. Klicke auf Weitere Optionen und wähle Collection löschen aus.

Variablen-Collections in einer Datei neu anordnen

Ordne deine Variablen-Collections neu an, um Variablen schneller zu organisieren und zu finden, wenn du sie auf Designs anwendest. Wenn du die Reihenfolge der Variablen-Collections änderst, beeinflusst das die Reihenfolge, in der sie im Variablenmodus-Selektor und in den Variablen-Selektoren erscheinen.

Um Variablen-Collections in einer Datei neu anzuordnen:

1. Klicke in der Seitenleiste des Variablenmodals auf Weitere Optionen und wähle Collection neu anordnen.
2. Im Collections-Popup kannst du:
   • Klicken und ziehen, um die Collections neu anzuordnen
   • Oder auf Von A bis Z sortieren klicken, um die Collections in alphanumerischer Reihenfolge zu ordnen

Eine Auswahl von Variablen gruppieren

Du kannst Variablen noch weiter ordnen, indem du diese zu Gruppen innerhalb einer Collection hinzufügst. So kannst du zum Beispiel eine Gruppe für Textfarben und eine weitere Gruppe für Strichfarben verwenden.

So organisierst du Variablen in einer Gruppe:

1. 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.
2. Klicke mit der rechten Maustaste auf die Auswahl und wähle New group with selection (Neue Gruppe mit Auswahl) aus.

Klicke und ziehe Gruppen in der Seitenleiste des Variablenmodals, um die Reihenfolge der Gruppen zu ändern. Du kannst Gruppen auch anklicken und in andere Gruppen ziehen, um sie zu verschachteln. 

Eine Gruppe umbenennen

1. Doppelklicke in der Seitenleiste des Variablenmodals auf den Gruppennamen.
2. Gib einen neuen Namen für die Variablengruppe ein.

Eine Gruppe verwalten

1. Klicke in der Seitenleiste des Variablenmodals mit der rechten Maustaste auf den Gruppennamen in der Seitenleiste.
2. Wähle im Menü eine der folgenden Optionen ein:
   • Gruppierung aufheben
   • Duplicate group (Gruppe duplizieren)
   • Delete group (Gruppe löschen)