Variablen auf Designs anwenden

Bevor du anfängst

Wer kann diese Funktion verwenden?

Variablen stehen allen Nutzer*innen in jedem Abo zur Verfügung

Alle Nutzer*innen, die Zugriff auf eine Datei haben, können Variablen aus dieser Datei verwenden

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

Wende Variablen auf verschiedene Eigenschaften der Ebenen in der rechten Seitenleiste an. Du kannst auch Variablen auf Eigenschaften in Textstilen und Farbstilen anwenden. Erfahre mehr darüber, welche Eigenschaften jeder Variablentyp unterstützt.

Du kannst alle Variablen verwenden, die in der aktuellen Datei erstellt wurden, oder Variablen aus einer veröffentlichten Team-Bibliothek, auf die du Zugriff hast.

Farbvariable anwenden

Farbvariablen können auf einfarbige Füllungen oder Farbverlaufsstopps für Füllungen, Konturfarben und Farbstile angewendet werden. Obwohl Schattenfarben keine Farbverlaufsstopps haben, kannst du trotzdem Farbvariablen auf die Schattenfarbe anwenden.

Farbvariablen und Farbstile werden aus demselben Bibliotheken-Auswahlwerkzeug ausgewählt.

1. Farbvariablen werden in quadratischen Feldern angezeigt.
2. Farbstile werden in kreisförmigen Farbfeldern angezeigt.
3. Verwende die Suchleiste, um nach Variablennamen oder -gruppen zu suchen.
4. Öffne die Dropdown-Liste, um nach Bibliotheken zu filtern.

Einfarbige Füllungen

So verwendest du eine Farbvariable auf einer ausgewählten Ebene:

1. Klicke im rechten Panel auf Stile und Variablen anwenden in den Abschnitten Füllung oder Kontur.
2. Wähle eine Variable aus dem Auswahlwerkzeug aus, die angewendet werden soll.

Du kannst Farbvariablen auch innerhalb einer gemischten Auswahl anwenden.

Erfahre mehr über Füllungs- und Kontureigenschaften.

Farbverlaufsstopps

Wende Farbvariablen auf die Farbverlaufsstopps einer beliebigen Füll- oder Kontureigenschaft an.

1. Wähle die Ebene aus und füge eine Füllung oder Kontur hinzu, falls noch nicht vorhanden.
2. Klicke auf das Farbfeld für deine Füllung oder Kontur.
3. Wähle in der Farbauswahl das Farbverlauf-Symbol aus und klicke auf ein Farbfeld aus der Liste der Stopps.
4. Öffne im neuen Menü die Registerkarte Bibliotheken und wähle eine Variable aus, die du auf den Farbverlaufsstopp anwenden möchtest.
5. Wiederhole diesen Vorgang für alle verbleibenden Farbverlaufstopps.

Erfahre mehr über die Verwendung von Farbvariablen bei Farbverläufen.

Schatteneffekte

Um eine Farbvariable auf die Farbeigenschaft eines Schatteneffekts anzuwenden:

1. Wähle die Ebene aus.
2. Füge im rechten Panel einen Schatteneffekt hinzu, falls noch keiner vorhanden ist.
3. Klicke auf das Effekteinstellungen-Icon des Innenschattens oder Schlagschattens.
4. Klicke auf das Farbfeld.
5. Öffne die Registerkarte Bibliotheken und wähle eine Variable aus, die du anwenden möchtest.

Mehr über Schatteneffekte erfahren.

Stile

Farbvariablen können sowohl auf neue und bestehende Farbstile als auch auf die Farbeigenschaft von Schatteneffekten angewendet werden.

Farbstil mit einfarbiger Füllung

So verwendest du eine Variable bei einem einfarbigen Stil:

1. Hebe die Auswahl auf der Arbeitsfläche auf, indem du Esc drückst.
2. Bearbeite im rechten Bedienfeld einen vorhandenen Farbstil oder erstelle einen neuen.
3. Klicke im Menü auf ein Farbfeld im Abschnitt Eigenschaften.
4. Öffne die Registerkarte Bibliotheken und wähle eine Variable aus, die du anwenden möchtest.

Farbstil mit Farbverlaufsstopps

So verwendest du Variablen für einen Farbverlaufsstil:

1. Hebe die Auswahl auf der Arbeitsfläche auf, indem du Esc drückst.
2. Bearbeite im rechten Bedienfeld einen vorhandenen Farbstil oder erstelle einen neuen.
3. Wähle im Fenster das Icon Farbverlauf aus.
4. Klicke unter Stopps auf ein Farbfeld aus der Liste.
5. Öffne im neuen Menü die Registerkarte Bibliotheken und wähle eine Variable aus, die du auf den Farbverlaufsstopp anwenden möchtest.
6. Wiederhole diesen Vorgang für alle verbleibenden Farbverlaufstopps.

Effektstil mit einer Farbeigenschaft

Um eine Variable für die Farbe eines Schatteneffekt-Stils zu verwenden:

1. Hebe die Auswahl auf der Arbeitsfläche auf, indem du Esc drückst.
2. Bearbeite im rechten Bedienfeld einen vorhandenen Schattenstil oder erstelle einen neuen.
3. Klicke auf das Effekteinstellungen-Icon des Innenschattens oder Schlagschattens.
4. Klicke auf das Farbfeld.
5. Öffne die Registerkarte Bibliotheken und wähle eine Variable aus, die du anwenden möchtest.

Zahlenvariable anwenden

So wendest du eine Zahlenvariable auf ein ausgewähltes Objekt an:

1. Klicke in das Eigenschaftsfeld.
2. Drücke =, um das Bibliotheken-Auswahlwerkzeug zu öffnen.

Du kannst auch eine der folgenden Methoden auswählen:

Eigenschaft	Zusätzliche Methoden
Schriftgröße Lücke zwischen Anzahl der Layout-Hilfslinien Breite und Höhe Maximale Breite und Höhe	Öffne das Drop-down-Menü und wähle Apply variable (Variable anwenden) aus
Eckradius Effekte Breite, Höhe, Rand, Versatz und Spaltenabstand der Layout-Hilfslinien Objektabstand	Klicke auf Apply variable (Variable anwenden) Halte die Umschalttaste gedrückt und klicke in das Feld
Ebenendeckkraft Zeichenabstand Zeilenhöhe Absatzeinzug Absatzabstand Strickstärke	Halte die Umschalttaste gedrückt und klicke in das Feld Klicke mit der rechten Maustaste und wähle Apply variable (Variable anwenden)

Wähle aus dem Bibliotheken-Auswahlwerkzeug eine Variable aus. Variablen werden mit einem Icon gekennzeichnet.

Zeichenfolgenvariable anwenden

Textinhalt

Zeichenfolgen-Variablen können auf den Textinhalt jeder Textebene angewendet werden. Das bedeutet, wenn die Zeichenfolgen-Variable den Wert Figma aufweist, wird der Text auf der Arbeitsfläche als Figma angezeigt. 

1. Wähle eine Textebene aus.
2. Klicke im Abschnitt Text oben in der rechten Seitenleiste auf Variable anwenden.
3. Wähle aus dem Bibliotheken-Auswahlwerkzeug eine Variable aus, die angewendet werden soll.

Eigenschaften von Schriftarten

Zeichenfolgen-Variablen können auf die Schriftartfamilie oder Schriftartstärke und Stil angewendet werden.

So wendest du eine Zeichenfolgenvariable auf eine Textebene an:

1. Öffne die Dropdown-Liste für die Schriftart oder die Schriftstärke.
2. Wähle Variable anwenden aus.
3. Wähle eine Variable aus dem Auswahlwerkzeug aus.

So wendest du eine Zeichenfolgenvariable auf einen neuen oder vorhandenen Textstil an:

1. Bearbeite oder erstelle einen neuen Textstil.
2. Öffne im Fenster die Dropdown-Liste für die Schriftart oder Schriftstärke.
3. Wähle Variable anwenden aus.
4. Wähle eine Variable aus dem Auswahlwerkzeug aus.

Boolesche Variable anwenden

Boolesche Variablen können auf Ebenen-Sichtbarkeit angewendet werden.

Wenn der Wert der booleschen Variable true ist, wird die Ebene eingeblendet Wenn der Wert der booleschen Variable false ist, wird die Ebene ausgeblendet.

1. Klicke im Abschnitt Darstellung in der rechten Seitenleiste mit der rechten Maustaste auf das Icon sichtbar / ausgeblendet.
2. Wähle eine Variable aus dem Auswahlwerkzeug aus.

Variablen auf Varianteninstanzen anwenden

Boolesche, Zahlen- und Zeichenfolgen-Variablen können auf Instanzen mit Varianten-Eigenschaften angewendet werden, um zwischen Varianten eines Komponentensatzes zu wechseln. Dies kann dir helfen, je nach Modus des übergeordneten Elements zwischen Varianten zu wechseln.

Erfahre, wie du Variablenmodi für Varianten-Instanzen erstellst.

Variable entfernen

So löst du eine Variable:

• Für Farb-, Zeichenfolgen- und boolesche Variablen: Bewege den Mauszeiger über die Variable im entsprechenden Abschnitt der rechten Seitenleiste und klicke auf das Icon Variable entfernen
• Für Zahlenvariablen: Klicke in das Eigenschaftenfeld und. drücke Entf / Backspace. Für bestimmte Eigenschaften kannst du auch auf das Icon Variablen entfernen klicken.

Unveröffentlichte Variablen in andere Dateien einfügen

Wenn du ein Objekt von einer Datei in eine andere kopierst und einfügst, möchtest du möglicherweise die unveröffentlichten Variablen des Objekts in die zweite Datei duplizieren, um die Bearbeitung der Variablen am eingefügten Objekt fortzusetzen – zum Beispiel, wenn du einen Prototyp erstellst. 

Dies ist für Objekte mit folgenden Eigenschaften möglich:

• Unveröffentlichte Variablen, die direkt auf ihre Eigenschaften angewendet werden (z. B. Füllfarbe).
• Oder unveröffentlichte Stile, die direkt auf ihre Eigenschaften angewendet werden, wobei diese Stile unveröffentlichte Variablen verwenden. In diesem Fall verliert das eingefügte Objekt seine Verbindung zum unveröffentlichten Stil, wenn du dich entscheidest, Variablen zu kopieren.

Nachdem du diese Objekte in eine andere Datei eingefügt hast, wird am unteren Rand der Datei eine Toastbenachrichtigung ausgelöst. Wenn du dich entscheidest, die Variablen zu kopieren, werden sie in eine neue Collection kopiert, und die eingefügten Objekte werden den neuen Variablen zugeordnet.

Wenn das Objekt, das du kopiert hast, eine veröffentlichte Komponente ist und die Datei am Bestimmungsort Zugriff darauf hat, erfolgt keine Neuzuordnung.