Variablen in Prototypen verwenden – Figma Learn - Hilfe-Center

Vor dem Start

Wer kann dieses Feature nutzen?

In jedem kostenpflichtigen Abo verfügbar.

Alle Personen mit Schreibzugriff auf eine Datei können Prototypen erstellen.

In Figma sind Variablen gespeicherte Werte, die für Design-Eigenschaften oder einen gespeicherten Status stehen. Sie können Zeichenfolgen, Zahlen, Farben oder boolesche Werte sein.

Du kannst die Werte von Variablen mit Prototyp-Aktionen festlegen und ändern. Dies ermöglicht dir, mit nur ein paar einfachen Rahmen und Interaktionen immersive Prototypen zu erstellen, die sich basierend auf der Auswahl dynamisch verändern. Du kannst Prototyp-Aktionen also verwenden, um:

Textinhalte mit Zeichenfolgen-Variablen zu aktualisieren
Objektabmessungen, Eckenradius oder Auto-Layout-Eigenschaften mit Zahlen-Variablen zu ändern
Ebenensichtbarkeit mit booleschen Variablen umzuschalten

Um mit der Verwendung von Variablen in Prototypen zu beginnen, richte deine Variablen ein. Verwende dann die Aktion Set variable (Variable festlegen), um die Werte von Variablen zu ändern oder zu modifizieren.

Sobald du dich mit dem Umgang mit Variablen und Prototypen vertraut gemacht hast, kannst du ein paar fortgeschrittenere Funktionen ausprobieren, um die Möglichkeiten zu erweitern:

Ausdrücke: Bearbeite Variablen mit grundlegenden Operationen, sodass du komplexere Prototypen mit flexiblen Werten erstellen kannst
Verschiedene Aktionen und Bedingungen: Verwende if/else-Anweisungen, um zu überprüfen, ob eine Bedingung erfüllt ist, bevor du Aktionen durchführst, und staple eine unbegrenzte Menge von Aktionen auf demselben Auslöser

Erfahre mehr über Variablen in Figma.

Ausprobieren

Möchtest du noch mehr üben? Schau dir mal die Datei zum Advanced Prototyping Playground an.

Suchen Sie nach weiteren Beispielen dafür, wie Sie Variablen in Prototypen einsetzen können? Schau dir noch ein paar weitere Beispiele für fortgeschrittenes Prototyping an.

Variablen festlegen

Bevor du Prototypen mit Variablen erstellen kannst, muss du:

Eigene Variablen erstellen: Erfahre, wie du Variablensammlungen erstellen und organisieren kannst.
Variablen anwenden: Erfahre, wie du Variablen auf Textinhalte, Objektabmessungen, Ebenensichtbarkeit und mehr anwenden kannst

Variablenwerte festlegen

Sobald du Variable in deinem gesamten Design erstellt und angewendet hast, kannst du sie mit Prototypen verwenden.

Jede Prototyp-Interaktion weist einen Auslöser (zum Voranbringen des Prototyps) und eine oder mehrere Mehrfachaktionen (als Ergebnis des Auslösers) auf.

Die Aktion Variable festlegen ermöglicht es dir, den Wert einer Variable als Ergebnis eines Prototypen-Auslösers festzulegen oder diesen zu bearbeiten.

So verwendest du die Aktion Set variable (Variable festlegen) für eine Prototypen-Interaktion:

Erstelle eine Prototypen-Interaktion.
Rufe das Modal Interaktion auf und wähle einen Auslöser aus dem Dropdownmenü aus.
Wähle aus dem Dropdownmenü Actions (Aktionen) die Option Set variable (Variable festlegen) aus.
Wähle im Dropdown-Menü Target (Ziel) die Variable aus, der du einen neuen Wert zuweisen möchtest.
Gib im Feld Wert einen neuen Wert für die Variable ein. Der neue Werttyp muss mit dem Typ der Variablen übereinstimmen, die du änderst. Wenn du zum Beispiel eine Zahlenvariable ausgewählt hast, muss der neue Wert ebenfalls eine Zahl sein.
- Zahlenfolgenwerte: Gib ein beliebiges Zeichenfolgenliteral (in Anführungszeichen) ein oder wähle eine beliebige Zeichenfolgen-Variable aus dem Auswahlfeld aus
- Zahlenwerte: Gib einen beliebigen Zahlenwert ein oder wähle einen beliebigen Zahlenwert aus dem Auswahlpanel aus
- Boolesche Werte: Gib wahr oder falsch ein oder wähle eine boolesche Variable aus dem Auswahlpanel aus
- Farbwerte: Gib einen beliebigen Heximalcode ein oder wähle einen Heximalcode aus der Farbauswahl aus
Spiele deinen Prototyp ab, um die Interaktion zu testen.

Ein Design mit zwei Frames. Eine Prototypaktion wird im ersten Frame auf ein Bild angewendet. Wenn auf das Bild geklickt wird, aktualisiert die Variable profileName ihren Wert und der Prototyp navigiert zum nächsten Frame.

Hinweis:

Haben deine Variablen mehrere Modi? Erfahre mehr über das Festlegen von Variablenwerten auf bestimmte Modi-Werte.

Tipp:

Verwende Ausdrücke, um Variablen mit Operationen ändern. Du kannst zum Beispiel grundlegende mathematische Berechnungen mit Zahlen-Variablen durchführen, mehrere Zeichenfolgen-Variablen miteinander kombinieren oder boolesche Ausdrücke verwenden.

Ausprobieren

Lass uns eine Variablen-Sammlung namens „Formen“ erstellen. Diese Sammlung enthält eine Zeichenfolgen-Variable, die für den Namen der Form steht.

Wähle alle Objekte auf der Arbeitsfläche ab. Gehe dann in der rechten Seitenleiste auf den Bereich Local variables (Lokale Variablen) und klicke auf Open variables (Variable öffnen).
Klicke auf Create variable (Variable erstellen) und wähle String (Zeichenfolge) aus.
Gib „shapeName“ in die Spalte Name ein.
Gib in der Spalte Value (Wert) „circle“ (Kreis) ein.

Jetzt kannst du die Variable shapeName auf dein Design anwenden. Für dieses Beispiel haben wir ein einfaches Design erstellt, das einen Rahmen mit zwei Formen (einen Kreis und ein Quadrat) und zwei Textebenen erstellt. Wir wollen die Variable shapeName an die untere Textebene binden, sodass sie sich basierend auf der ausgewählten Form verändert.

Erstelle das unten abgebildete Design erneut. Füge ein elliptisches Objekt, ein rechteckiges Objekt und zwei Textebenen zu einem Rahmen hinzu. Gib „Von dir ausgewählt:“ (you picked) als Inhalt der ersten Ebene ein.
Wähle die untere Textschicht auf deinem Rahmen per Mausklick aus.
Wähle aus dem Tab Design in der rechten Seitenleiste den Bereich Text aus und klicke auf Apply variable (Variable anwenden).
Wähle die Variable shapeName aus dem Variablen-Auswahlpanel aus, um sie auf den Textinhalt anzuwenden.

Füge jetzt eine Interaktion mit der Aktion Set variable (Variable festlegen) hinzu.

Wähle ein elliptisches Objekt aus.
Wechsle in der rechten Seitenleiste zum Tab Prototyp. Klicke im Bereich Interaktions (Interaktionen) auf das Plus-Zeichen, um eine neue Interaktion hinzuzufügen.
Erstelle im Modal Interaction (Interaktion) eine Interaktion mit dem Auslöser Beim Antippen/Beim Anklicken und der Aktion Set variable (Variable festlegen).
Wähle die Variable shapeName aus dem Dropdown-Menü Target (Ziel) aus. Im Wert -Feld setzt du den neuen Wert auf „Kreis“.
Wiederhole die Schritte 1–4 für das rechteckige Objekt. Lege die Variable shapeName diesmal auf „Rechteck“ fest.

Ein Kreisobjekt ist im Rahmen ausgewählt, mit geöffneter Interaktion. Eine Interaktion ist eingestellt: Auslöser ist tippen, Aktion ist Variable setzen, Ziel ist shapeName und Wert ist Kreis.

Jetzt bist du bereit zum Abspielen deines Prototyps und zum Testen. Wenn du auf ein Formobjekt klickst, aktualisiert sich die Textebene basierend auf dem neuen Variables-Wert automatisch. Der Prototyp wird abgespielt. Wenn das Ellipsenobjekt ausgewählt ist, aktualisiert sich die untere Textebene zu Kreis. Wenn das Quadratobjekt ausgewählt ist, aktualisiert sich die untere Textebene zu Quadrat.

Prototyp mit Variablen und Komponenten

Sobald du die Grundlagen gelernt hast, kannst du beginnen, Variablen und Komponenten zusammen in Ihren Prototypen zu verwenden.

Wende Variablen auf Komponenten an, um deine Komponente automatisch zu aktualisieren, Wenn du den Wert einer Variablen in einem Prototyp ändern. Jede Änderung des Variablenwerts aktualisiert auch alle anderen Elemente, die an dieselbe Variable gebunden sind.

Der Wert einer Variablen kann wie folgt geändert werden:

Verwenden der Aktion Variable setzen
Verwenden der Aktion Ändern zu in einer interaktiven Komponente
Verwende die Aktion Variablenmodus setzen

Beispiel

Ein interaktives Schaltflächen-Komponentenset hat einen Zustand Standard und einen Zustand Hover. Die Komponente verwendet die Aktion Zu ändern in, sodass beim Darüberfahren (Hover) der Standard-Variante diese zur Hover-Variante wechselt (und umgekehrt).

Eine boolesche Variable hoverState wird sowohl auf eine Instanz der Variante als auch auf die Sichtbarkeit einer separaten Überlagerung-Ebene angewendet.

Wenn du mit der Maus über die Variante Standard in Ihrem Prototyp fährst:

Die Instanz aktualisiert sich auf die Hover-Variante
Die Boolean-Variable hoverState wird von false auf true aktualisiert.
Die Bildebene wird sichtbar gemacht.

Möchtest du anhand eines ähnlichen Beispiels üben? Schau dir den Abschnitt „Probier’s aus“ weiter unten an.

Die Stelle, an der du die Variable einsetzt, bestimmt den Umfang der Änderungen im Prototyp.

Variable anwenden auf:	Beim Prototyp erstellen:
Varianten-Eigenschaften von Komponenteninstanzen	Ändere den Wert der Variablen, um die Variante der Instanz zu aktualisieren.
Komponenteneigenschaften	Ändere den Wert der Variablen, um alle Instanzen der Komponente zu aktualisieren.

Erfahre mehr über das Anwenden von Variablen auf Komponenten- und Varianten-Eigenschaften.

Probiere es aus: Beispiel 1

Erstelle ein interaktives Komponentenset.
1. Erstelle eine Schaltflächenkomponente, die eine „geklickt“ Varianten-Eigenschaft mit den Werten „wahr“ und „falsch“ hat.
2. Füge bei der „false“-Variante eine Prototyp-Interaktion hinzu, indem du den Auslöser On click und die Aktion Change to verwendest. Jetzt wird beim Klicken auf die falsche Variante zur wahren Variante gewechselt.
Platziere eine Instanz einer Variante von einem interaktiven Komponentenset in einen Rahmen.
1. Füge die falsche Variante zu einem Frame hinzu.
Weise eine Variable der Instanz der interaktiven Komponente zu. Der Wert der Variablen muss einem Varianten-Eigenschaftswert entsprechen.
1. Erstelle eine Boolean-Variable circleVisibility mit einem Standardwert „false“.
2. Wähle die Instanz der Schaltfläche aus.
3. Von der rechten Seitenleiste aus bewege die Maus über die angeklickte Varianten-Eigenschaft.
4. Wähle Variable anwenden aus.
5. Klicke, um die Variable circleVisibility auszuwählen, um an die Eigenschaft zu binden.
Weise dieselbe Variable einer anderen Ebene in deinem Entwurf zu.
1. Füge dem Frame ein Ellipsenobjekt hinzu.
2. Klicke im Abschnitt Darstellung der rechten Seitenleiste mit der rechten Maustaste auf das Symbol Ausblenden.
3. Wähle die Variable circleVisibility aus, um die Boolean-Variable auf die Sichtbarkeit der Ellipsenebene anzuwenden.
Spiele deinen Prototyp ab, um die Interaktion zu testen. Wenn die Interaktion ausgelöst wird und die Komponente sich ändert, ändert sich auch der Wert der Variablen. Das bedeutet, wenn dieselbe Variable an andere Werte gebunden ist, werden diese ebenfalls aktualisiert.

Probieren Sie es aus: Beispiel 2

Erstelle ein Komponentenset mit mindestens zwei Varianten.
1. Erstelle einen Komponentensatz, der eine „Form“-Varianten-Eigenschaft mit den Werten „Kreis“ und „Quadrat“ hat.
Platziere eine Instanz einer Variante in einem Rahmen.
Weise der Instanz eine Variable zu. Der Wert der Variablen muss einem Varianten-Eigenschaftswert entsprechen.
1. Erstelle eine shapeType -String-Variable mit einem Standardwert „circle“.
2. Klicke auf die Instanz, um sie auszuwählen.
3. Bewege den Mauszeiger aus der rechten Seitenleiste auf die rechte Seite einer Varianteneigenschaft und klicke auf Assign variable (Variable zuweisen).
4. Wähle die Variable aus, die du an die Eigenschaft binden möchtest.
Erstelle eine Interaktion mit einem beliebigen Objekt innerhalb des Frames, das die Aktion Variable setzen verwendet. Ändere den Wert der Variablen so, dass er dem Wert der ungenutzten Varianten-Eigenschaft entspricht.
1. Füge eine Prototyp-Interaktion zu einem Objekt hinzu, indem du den Auslöser Bei Klick/Bei tippen und die Aktion Variable setzen verwendest. Setzen Sie den Wert der Variable shapeType auf „Quadrat“.
Spiele deinen Prototyp ab, um die Interaktion zu testen. Beim Auslösen der Interaktion und bei einer Änderung der Variablen wird auch die Variante aktualisiert.