···

    Variablen in Prototypen verwenden

    🚧 „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 verwenden kann

    In jedem zahlungspflichtigen Abo verfĂĽgbar

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

    Alle Personen mit Lesezugriff oder Lesezugriff nur für Prototypen können sich Prototypen anzeigen lassen.

    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

    Noch nicht viel Erfahrung mit Variablen? Erfahre mehr über Variablen in Figma →

    Ausprobieren

    Um praktischere Erfahrungen zu sammeln, kannst du dir die „Ausprobieren“-Tutorials in jedem Bereich ansehen. Verwende diese einfachen Beispiele, um die Arbeitsweise dieser Funktion besser zu verstehen.

    Du willst noch mehr üben? Sieh dir die Datei für den fortgeschrittenen Prototypen-Playground → an

    Variablen festlegen

    Bevor du Prototypen mit Variablen erstellen kannst, muss du:

    1. Eigene Variablen erstellen: Erfahre, wie du Variablensammlungen erstellen und organisieren kannst →
    2. 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 Set variable (Variable festlegen) ermöglicht es dir, den Wert einer Variable als Ergebnis eines Prototypen-Auslösers festzulegen.

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

    1. Erstelle eine Prototypen-Interaktion.
    2. Rufe das Panel Interaktionsdetails auf und wähle einen Auslöser aus dem Dropdownmenü aus.
    3. Wähle aus dem Dropdownmenü Actions (Aktionen) die Option Set variable (Variable festlegen) aus.
    4. Wähle aus dem Dropdownmenü Pick target variable (Ziel-Variable auswählen) die Variable aus, für die du einen neuen Wert festlegen möchtest.
    5. Gib in das Feld Write expression (Ausdruck schreiben) einen neuen Wert für die Variable ein. Der neue Werttyp muss mit dem Werttyp übereinstimmen, den du veränderst. Wenn du zum Beispiel eine Zahlen-Variable auswählst, 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
    6. Spiele deinen Prototyp ab, um die Interaktion zu testen.

    Four examples of interactions. 1: A cake design, with a Set Variable action setting a boolean sprinkleVisibility variable to true. 2. A background color setting setting, with a Set Variable action setting a color variable bgColor to a new hex code. 3. A design of a square with a Round Corners button beaneath it, with a Set Variable action setting a number variable borderRadius to 20. A select profile design with two avatars, with a Set Variable action setting a string variable, sampleString, to Ernie.

    Hinweis:

    Haben deine Variablen mehrere Modi? Erfahre mehr über die Einstellung von Variablenwerten für spezifische Modiwerte →

    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.

    1. 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).
    2. Klicke auf Create variable (Variable erstellen) und wähle String (Zeichenfolge) aus.
    3. Gib „shapeName“ in die Spalte Name ein.
    4. Gib in der Spalte Value (Wert) „circle“ (Kreis) ein.The variables authoring panel, with a string variable named shapeName and a value of Circle.

    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.

    1. 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.
    2. Wähle die untere Textschicht auf deinem Rahmen per Mausklick aus.
    3. Wähle aus dem Tab Design in der rechten Seitenleiste den Bereich Text aus und klicke auf Apply variable (Variable anwenden).
    4. Wähle die Variable shapeName aus dem Variablen-Auswahlpanel aus, um sie auf den Textinhalt anzuwenden.

    A frame with an ellipse object, a square object, a text layer that says YOU PICKED and a selected text layer that says CIRCLE. With the second text layer selected, the mouse is hovering over the Apply variable icon from the Text section of the right sidebar.

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

    1. Wähle ein elliptisches Objekt aus.
    2. Wechsle in der rechten Seitenleiste zum Tab Prototyp. Klicke im Bereich Interaktions (Interaktionen) auf das Plus-Zeichen, um eine neue Interaktion hinzuzufĂĽgen.
    3. Erstelle im Panel Interaction details (Interaktionsdetails) eine Interaktion mit dem Auslöser Beim Antippen/Beim Anklicken und der Aktion Set variable (Variable festlegen).
    4. Wähle aus dem Dropdownmenü die Variable shapeName aus. Lege im Feld bis die neue Variable auf „Kreis“ fest.
    5. Wiederhole die Schritte 1-4 für das rechteckige Objekt. Lege die Variable shapeName diesmal auf „Rechteck“ fest.

    try

    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.

    The ellipse object is selected. From the Prototype tab, and interaction has been created, with an On Tap trigger and a Set Variable action. The shapeName variable is being set to Circle.

    Prototyping mit Variablen in der Praxis

    Sobald du die Grundlagen gelernt hast, kannst du die Prototypen und Variablen auf vielfältige Weise verwenden.

    Variablen mit Komponentenvarianten verwenden

    Du kannst Variablen mit Komponentenvarianten anwenden. So kannst du deine Komponente automatisch aktualisieren, indem du die Aktion Set variable (Variable festlegen) verwendest.

    1. Erstelle ein Komponentenset mit mindestens zwei Varianten. (Erstelle zum Beispiel ein Komponentenset, das die Varianteneigenschaft „Form“ mit den Werten „Kreis“ und „Quadrat“ aufweist.)
    2. Platziere eine Instanz einer Variante in einem Rahmen.
    3. Weise der Instanz eine Variable zu. Der Wert der Variable muss mit dem Varianteneigenschaftswert übereinstimmen. (Weise der Instanz zum Beispiel eine shapeType-Variable mit dem Standardwert „circle“ (Kreis) zu).
      1. Klicke auf die Instanz, um sie auszuwählen.
      2. Bewege den Mauszeiger aus der rechten Seitenleiste auf die rechte Seite einer Varianteneigenschaft und klicke auf Assign variable (Variable zuweisen).
      3. Wähle die Variable aus, die du an die Eigenschaft binden möchtest.
    4. Erstelle eine Interaktion mit einem beliebigen Objekt innerhalb des Rahmens, das die Aktion Set variable (Variable festlegen) verwendet. Ändere den Wert der Variablen so, dass er mit dem Wert der nicht genutzten Varianteneigenschaft übereinstimmt. (Lege zum Beispiel die Variable shapeType auf „quadratisch“ fest).
    5. Spiele deinen Prototyp ab, um die Interaktion zu testen. Wenn die Interaktion ausgelöst wird und die Variable geändert wird, wird die Variante ebenfalls aktualisiert.

    Screenshot 1: The variable authoring panel, with a string variable ShapeType created, with a default value of Circle. Screenshot 2: A component set, with a Shape property with two values: square, circle. Screenshot 3: An instance of the circle variant on a frame, with the ShapeType variable applied to the component property. Screenshot 4: A button beneath the instance on the frame, with an interaction: Set variable ShapeType to Square.

    Hinweis:

    Variablen können nur auf oberste Instanzen angewendet werden und sind nicht verfügbar für eingebettete Varianteninstanzen.

    Ausprobieren

    1. Erstelle eine neue lokale Zeichenfolgen-Variable namens colorName und mache „blau“ zum Standardwert.
    2. Erstelle ein Komponentenset mit zwei Varianten: ein blaues Quadrat und ein gelbes Quadrat. Benenne die Varianteneigenschaft „Farbe“ mit den Wertnamen „blau“ und „gelb“.A component set with two variants, a blue square and a yellow square. From the Properties section of the right sidebar, the variant property is named Color, and has two values: blue and yellow
    3. Platziere eine Instanz der blauen Variante in einem Rahmen.
    4. Wende die Variable colorName auf die Instanz an, indem du neben der Varianteneigenschaft „Color“ (Farbe) auf Assign variable (Variable zuweisen) klickst.An istance of the blue variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    5. Füge dem Rahmen zwei Ebenen unterhalb des Quadrats hinzu. Auf einer Textebene sollte „blau“ und auf der anderen „gelb“ stehen.
    6. Wähle die Textebene aus, auf der „blau“ steht und füge eine Prototypen-Interaktion mit einem On click/On tap-Auslöser (Beim Antippen/Beim Anklicken) und der Aktion Set variable (Variable festlegen) hinzu. Lege den Wert colorName auf „blau“ fest.try
    7. Wähle die Textebene aus, auf der „gelb“ steht, und füge eine Prototyinteraktion mit einem On click/On tap-Auslöser (Beim Antippen/Beim Anklicken) und der Aktion Set variable (Variable festlegen) hinzu. Lege den Wert colorName auf „blau“ fest.
    8. Spiele deinen Prototyp ab, um die Interaktion zu testen. Wenn du auf den Text „gelb“ klickst, wird die Komponente auf die gelbe Quadratvariante aktualisiert. Wenn du auf den Text „blau“ klickst, aktualisiert sich die Komponente auf die blaue Quadratvariante.The prototype is being played. When the blue text layer is clicked, the square changes to the blue variant. When the Yellow text layer is clicked, the square changes to the yellow variant.

    Variablen mit interaktiven Komponenten verwenden

    Ă„hnlich wie bei der Verwendung von Variablen mit Komponentvarianten kannst du Variablen auch auf interaktive Komponenten anwenden.

    Wenn du auf eine interaktive Komponente klickst:

    • Wird die Variante aktualisiert
    • Die Variable wird aktualisiert, was wiederum alle anderen Elemente aktualisiert, die an diese Variable gebunden sind

    So verwendest du interaktive Komponenten mit Variablen:

    1. Erstelle ein interaktives Komponentenset. (Erstelle zum Beispiel eine Schaltflächen-interaktive Komponente, die eine „angeklickte“ Varianteneigenschaft mit den Werten „wahr“ und „falsch“ hat.)
    2. Platziere eine Instanz einer Variante von einem interaktiven Komponentenset in einen Rahmen.
    3. Weise der interaktiven Komponenteninstanz eine Variable zu. Der Wert der Variablen muss mit einem Varienteneigenschaftswert übereinstimmen. (Weise zum Beispiel einem standardmäßigen „falsch“-Wert der Instanz eine boolesche circleVisibility-Variable zu).
      1. Wähle die Instanz aus.
      2. Wähle aus der rechten Seitenleiste das Dropdownmenü für eine der Varianteneigenschaften aus.
      3. Wähle Assign variable (Variable zuweisen) aus.
      4. Klicke, um eine Variable auszuwählen, die du an die Eigenschaft binden möchtest.
    4. Spiele deinen Prototyp ab, um die Interaktion zu testen. Wenn die Interaktion ausgelöst und die Komponente geändert wird, ändert sich auch der Wert der Variable. Das heißt: Wenn du dieselbe Variante an andere Werte gebunden hast, werden diese ebenfalls aktualisiert.

    Screenshot 1: An interactive component of a button, with a Clicked variant property with true and false values. Screenshot 2: A circle placed on a frame, with the layer visibility bound to a circleVisibility boolean variable. Screenshot 3: An instance of the button on the same frame, with the circleVisibility boolean variable bound to the variant property. Screenshot 4: A GIF of the prototype in action. When the button is clicked, the circle's visibility toggles on and off.

    Hinweis:

    Variablen können nur auf oberen Instanzen angewendet werden und sind für eingebettete Varianteninstanzen nicht verfügbar.

    Ausprobieren

    1. Erstelle einen lokalen booleschen Wert. Benenne die Variable mit ausgewählt und lege den Anfangswert auf „falsch“ fest.
    2. Erstelle ein Komponentenset mit zwei Varianten: einen ausgewählten Status und einen nicht ausgewählten Status. Benenne die Varianteneigenschaft „ausgewählt“ mit den Wertnamen „wahr“ und „falsch“.A component set with two variants of a button. The variant property is named SELECTED, and has true and false values.
    3. FĂĽge Prototypen-Interaktionen zwischen den Varianten in dem Komponentenset hinzu. Wenn darauf getippt wird, sollte die falsche Variante zur wahren Variante wechseln. Wenn darauf getippt wird, sollte die wahre Variante zur falschen Variante wechseln.
    4. Platziere eine Instanz der falschen Variante auf dem Rahmen.
    5. Wende die Variable ausgewählt auf die Instanz an, indem du neben der Varianteneigenschaft „ausgewählt“ auf Assign variable (Variable zuweisen) klickst.An instance of the false variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    6. Füge dem Rahmen ein sternförmiges Objekt hinzu.
    7. Wende die ausgewählte Variable auf die Sichtbarkeit des sternförmigen Objekts an:
      1. Wähle den Stern aus.
      2. Wähle in der rechten Seitenleiste den Bereich Layer (Ebene) aus und klicke mit der rechten Maustaste auf das Sichtbarkeitssymbol.
      3. Klicke im Variablen-Auswahlpanel auf die Variable ausgewählt. Jetzt wird der Stern nur dann sichtbar sein, wenn der Variablenwert ausgewählt wahr ist.A star object is placed on the frame. With the star selected, the mouse is hovering over the visibility icon from the Layer section of the right sidebar.
    8. Spiele deinen Prototypen ab. Wenn du auf die Schaltfläche klickst, wird das sternförmige Objekt sichtbar bzw. unsichtbar.The prototype is being played. When the button is clicked, it switches to the true variant, and the star becomes visible.
    War dieser Beitrag hilfreich?

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Thank you for helping us improve Figma’s Help Center!

    ZurĂĽck an den Anfang