Modi für Variablen

Bevor du anfängst

Wer kann diese Funktion verwenden?

Jede Person mit einem Bildungs-, Professional-, Organization- oder Enterprise-Abo kann Modi für Variablen erstellen und verwenden

Die Anzahl der Modi, die du pro Variablen-Collection erstellen kannst, ist abhängig von deinem Abo

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

Mithilfe von Variablen können wir wiederverwendbare Werte speichern, die auf verschiedene Designeigenschaften angewendet werden können, wie z. B. Farbe, Abstandswerte und Dimensionen.

Variablenmodi ermöglichen es uns, verschiedene Kontexte unserer Entwürfe darzustellen, ohne dass wir für jeden benötigten Kontext mehrere Frames erstellen müssen. Dies liegt daran, dass Variablen mehrere Werte enthalten können, die durch Variablenmodi organisiert sind, wobei jeder Variablenmodus einen Wert pro Variable speichert.

Nehmen wir zum Beispiel an, dass wir helle und dunkle Modusversionen für ein Design erstellen müssen:

Ohne Variablenmodi könnten wir Designs für den hellen Modus (unsere Standardeinstellung) erstellen, diese Designs dann duplizieren und alle für den dunklen Modus erforderlichen Farbfüllungen aktualisieren.

Wenn wir Variablenmodi verwenden, würden wir eine Collection von Variablen mit zwei Wertemengen – oder Modi – erstellen, eine für den hellen Modus als Standardeinstellung und eine für den dunklen Modus. Wir würden die Variablen auf ein Set von Designs anwenden. Dann könnten wir die Designs schnell zwischen dem hellen und dem dunklen Modus wechseln.

Wenn wir ein drittes Farbthema brauchen, müssen wir nur einen neuen Modus erstellen und Werte für dieses Thema eingeben. Wir müssten die Werte nicht erneut auf unsere Designs anwenden.

Es gibt viele Kontexte, die durch den Variablenmodus unterstützt werden können. Hier sind ein paar Ideen für den Einstieg:

• Erstelle barrierefreie Farbdesigns, wie z. B. den Modus mit hohem Kontrast oder verschiedene Designs für Farbenblindheit, mithilfe von Farbvariablen
• Lokalisiere den UI-Text, um zu sehen, wie der Text in Designs mit Zeichenfolgen-Variablen verläuft
• Berücksichtige mehrere Gerätegrößen, wie Armbanduhr, Handy und Desktop, um zu sehen, wie Elemente auf unterschiedliche Abstände und Innenabstände mit Variablen reagieren

Einen Modus erstellen

1. Hebe die Auswahl aller Objekte auf, indem du auf eine beliebige Stelle auf der Arbeitsfläche klickst.
2. Öffne die Ansicht Variablen, indem du in der rechten Seitenleiste im Abschnitt Lokale Variablen auf Variablen öffnen klickst.
3. Öffne die Collection, in der du einen neuen Modus erstellen möchtest.
4. Klicke bei einer vorhandenen Variablen rechts neben den Spaltenüberschriften auf Neuer Variablenmodus. Figma dupliziert Werte aus der ersten Spalte in die neue Spalte.

Du kannst auch einen Modus duplizieren, indem du mit der rechten Maustaste auf die Modusüberschrift klickst und Modus duplizieren wählst.

Den Standardmodus ändern

In der Ansicht Variablen ist der Standardmodus einer Variable-Collection die Modus-Spalte ganz links.

Wenn ein Objekt ein Variablenobjekt verwendet oder eine Seite Objekte enthält, die Variablen verwenden, nutzt das Objekt oder die Seite Werte aus dem Standardmodus, bis du dem Objekt oder der Seite explizit einen bestimmten Modus zuweist.

Ändere den Standardmodus einer Variablen-Collection, indem du die Modi neu anordnest.

Um den Standardmodus in einen anderen zu ändern:

1. Öffne in der Ansicht Variablen die Variablensammlung, in der sich der Variablenmodus befindet.
2. Finde den Modus und entweder:
   • klicke mit der rechten Maustaste und wähle Als Standard festlegen aus,
   • oder klicke und ziehe den Variablenmodus in die Spalte ganz links.

Wenn der Variablenmodus eines Objekts oder einer Seite auf „Auto“ oder „Standard“ anstatt auf einen bestimmten Modus gesetzt wurde, erben sie den neuen Standardmodus.

Wenn ein Objekt oder eine Seite explizit auf einen Modus gesetzt wurde, der zufällig der Standardmodus war, bleiben sie mit diesem Modus verknüpft, auch wenn er nicht mehr der Standardmodus ist.

Modi neu anordnen

Um die Modi in einer Variablen-Collection neu anzuordnen, kannst du entweder:

• Rechtsklick und Spalte nach rechts verschieben oder Spalte nach links verschieben wählen
• Oder Spalte nach links oder rechts ziehen

Wenn du eine Spalte in einer Variablen-Collection ganz nach links verschiebst, wird diese Spalte zum Standardmodus.

Zwischen den Modi wechseln

Wechsle den Modus eines Objekts oder einer Seite, damit die Designs die gewünschten Variablenwerte verwenden. Du kannst den Mode umschalten auf:

• Ebenen
• Frames
• Komponenten und Komponentensätze
• Abschnitte
• Gruppen
• Seiten

Modi eines Objekts wechseln

Für Ebenen: Du kannst ihre Modi umschalten, wenn mindestens eine Variable angewendet wird und die Variable mehrere Modi hat.

Für Gruppen, Frames, Komponenten, Komponentensätze und Abschnitte: Du kannst ihre Modi wechseln, wenn verschachtelte Ebenen mindestens eine Variable haben und die Variable mehrere Modi hat.

So wechselst du den Modus eines Objekts:

1. Wähle die Ebene, die Gruppe oder das Containerobjekt aus.
2. Klicke im Abschnitt Appearance (Darstellung) in der rechten Seitenleiste auf Variablenmodus anwenden).
3. Fahre mit der Maus über eine Variablen-Collection und wähle einen Modus aus. 

Sobald du einen Modus für ein Objekt angegeben hast, erscheint ein Tag mit dem Modussymbol und dem Modusnamen neben dem Ebenennamen im Ebenen-Tab der linken Seitenleiste. Falls es mehrere Modi gibt, fahre mit dem Mauszeiger über das Tag, um eine Liste der Modi zu sehen.

 

Modi auf einer Seite wechseln

Du kannst die Modi auf den Seiten wechseln, wenn eine lokale Variablen-Collection mehrere Modi enthält.

1. Hebe die Auswahl für alles auf der Arbeitsfläche auf.
2. Klicke im Abschnitt Seite in der rechten Seitenleiste auf Variablenmodus anwenden.
3. Fahre mit der Maus über eine Variablen-Collection und wähle einen Modus aus.

Auf Auto-Modus einstellen (nur Objekte)

Bei Objekten mit Variablen ist der Modus standardmäßig auf Auto eingestellt. Das bedeutet, dass sie den Modus ihres übergeordneten Elements übernehmen.

• Wenn ihr übergeordnetes Element ebenfalls auf Auto gesetzt ist, setzen Objekte ihre Ebenenhierarchie fort, bis sie einen Container mit einem festgelegten Modus erreichen.
• Wenn keine übergeordneten Container einen Modus festgelegt haben, fallen die Objekte auf den Standardmodus der Collection zurück, der in Klammern angezeigt wird.

Verwendung mit Varianteninstanzen

Booleschen Variablen, Zahlen- und Zeichenfolgenvariablen können Komponenteninstanzen mit Varianteneigenschaften zugewiesen werden.

Zeichenfolgen- und Zahlenvariablen

Zeichenfolgen- und Zahlen-Variablen können auf Varianteninstanzen abgebildet werden, sodass sie zu einer anderen Variante wechseln, wenn sich ihr Modus ändert. Dazu muss der Wert der Variable mit den Werten der Varianteneigenschaft übereinstimmen.

1. Erstellen einer Zeichenfolgen- oder Zahlenvariable mit mehreren Werten (oder Modi).
2. Setze die Werte der Variablen so, dass sie mit den Werten der Varianteneigenschaft übereinstimmen.
3. Greife auf eine Instanz der Variante zu und fahre mit der Maus über die Eigenschaft der Variante in der rechten Seitenleiste.
4. Klicke auf Variable zuweisen und wähle die Variable aus.

Jetzt wechselt die Instanz zu einer anderen Variante, sobald der Modus wechselt.

Boolesche Variablen

Boolesche Variablen können auf Varianteneigenschaften mit den Werten true und false abgebildet werden.

1. Erstelle eine Boolesche Variable mit mehreren Werten (oder Modi).
2. Erstelle zwei Varianteninstanzen innerhalb desselben Komponentensatzes.
3. Setze den Wert einer Variante auf True und den der anderen auf False.
4. Greife auf eine Komponenteninstanz einer der Varianten zu und fahre mit der Maus über die Eigenschaft der Variante in der rechten Seitenleiste.
5. Klicke auf Variable zuweisen und wähle die Boolesche Variable aus.

Erfahre, wie du Varianten und Variablen in Prototypen verwendest →

Verschachtelte Instanzen

Du kannst auch Variablen an Varianteneigenschaften in verschachtelten Instanzen binden.

1. Erstelle eine Komponente mit einer verschachtelten Instanz einer anderen Komponente.
2. Erstelle eine Zeichenfolgen-, Zahlen- oder Boolesche Variable mit mehreren Werten (oder Modi).
3. Setze die Werte der Variablen so, dass sie mit den Werten der Komponenteneigenschaften der geschachtelten Instanz übereinstimmen.
4. Erstelle eine Instanz der Komponente.
5. Weise die Variable der Varianteneigenschaft der verschachtelten Instanz zu.

Jetzt wechselt die verschachtelte Instanz bei jedem Moduswechsel zu einer anderen Variante.

Moduskonflikte

Bei allen Modi mit Konflikten wird im Mode-Umschalter ein Informationssymbol daneben angezeigt. Konflikte entstehen, wenn Objekte in einer Datei verschiedene Versionen derselben Variablen nutzen.

Wenn du einen Modus mit einem Konflikt auswählst, wird der Modus nur auf Ebenen angewendet, die ihn rendern können. Die Ebene muss eine Version der Variable verwenden, die diesen Mode enthält.

Um Konflikte zwischen Modi zu lösen:

1. Öffne die Datei, in der sich die Hauptvariable befindet, und veröffentliche sie in den Teambibliotheken. 
2. Überprüfe und akzeptiere die Aktualisierungen aus der Bibliotheksansicht der Datei, in der die Konflikte auftreten.

Denke daran, dass nur diejenigen, die Schreibzugriff auf eine Datei haben, diese bearbeiten, veröffentlichen und Bibliotheken-Updates überprüfen und akzeptieren können. 

Moduskonflikte verhindern

Moduskonflikte können auftreten, wenn ein Modus aus der Variable gelöscht oder ihr hinzugefügt wird und die Aktualisierungen nicht in eine Datei oder ein Objekt gelangt sind. 

Hier sind einige Möglichkeiten, wie diese Konflikte entstehen können und was du dagegen unternehmen kannst.