Mehrere Aktionen und Bedingungen – Figma Learn - Hilfe-Center

Bevor du anfängst

Wer diese Funktion verwenden kann

Verfügbar in allen Abos.

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

Alle Personen mit Lesezugriff oder Lesezugriff nur für Prototypen auf eine Datei können Prototypen anzeigen.

Wenn deine Prototypen vielschichtiger und komplexer werden, kannst du mehrere Aktionen und Bedingungen verwenden, um mehrere oder verschiedene Ergebnisse innerhalb derselben Interaktion zu verwalten.

Multiple actions (Mehrere Aktionen): Staple eine unbegrenzte Anzahl von Aktionen mit demselben Auslöser
Conditionals (Bedingungen): Prüfe mit einer bedingten If/Else-Anweisung, ob eine Bedingung erfüllt ist, bevor du eine Aktion ausführst.

Noch nicht viel Erfahrung mit Variablen? Hier kannst du mehr erfahren:

Du möchtest mehr praktische Erfahrungen sammeln?

Entdecke die erweiterte Prototypen-Testumgebung →

Du möchtest mehr Beispiele sehen, wie man Variablen in Prototypen verwenden kann? Schau dir weitere Beispiele für erweitertes Prototyping an →

Mehrere Aktionen

Jede Prototypen-Interaktion hat einen Auslöser und eine oder mehr Aktionen. Ein Auslöser startet die Interaktion und eine Aktion ist die Antwort darauf.

Mehrere Aktionen ermöglichen es dir, eine unbegrenzte Anzahl von Aktionen zu einem Auslöser hinzuzufügen.

Erstelle eine Prototypen-Interaktion.
Wähle im Bereich Interaction details (Interaktionsdetails) eine Aktion aus dem Dropdown-Menü Actions (Aktionen) aus.
Um eine weitere Aktion hinzuzufügen, klicke auf Add action (Aktion hinzufügen).

An prototype Interaction Details modal. There are two actions listed, and the mouse is hovering over the plus icon at the top of the modal.

Tipp: Minimiere oder vergrößere die Details zu jeder Aktion, indem du auf den Pfeil links neben dem Aktionsnamen klickst.

Aktionen neu anordnen

Aktionen werden von oben nach unten in der Reihenfolge ausgeführt, in der sie aufgelistet sind.

So ordnest du Aktionen neu an:

Öffne einen Bereich Interaction details (Interaktionsdetails).
Klicke auf den Pfeil links neben dem Aktionsnamen, um die Aktionsdetails zu minimieren.
Klicke auf und ziehe die Aktion, um die Reihenfolge zu ändern.

An interaction details modal with two actions. The user clicks to collapse the details of the second action, then clicks and drags it to the top of the modal so it becomes the first listed action.

Tipp: Du kannst eine beliebige Aktion ziehen und auf einer bedingten Aktion ablegen.

Durch das Ändern der Reihenfolge der Aktionen kann sich das Ergebnis eines Prototyps ändern.

Beispiel: Unten sind zwei beispielhafte Prototypenaktionen aufgeführt. Für dieses Beispiel lautet der Startwert von numberVar 1.

1. Set numberVar to 2
2. Conditional: if numberVar == 2, Navigate to Frame 2

In der ersten Aktion ist die Nummernvariable auf den Wert 2 gesetzt. Dies bedeutet, dass die bedingte Anweisung (if numberVar == 2) auf „true“ (wahr) gesetzt wird, sodass die Aktion (Navigate to Frame 2 (Navigiere zu Frame 2)) ausgeführt wird.

Ändere nun die Reihenfolge der Aktionen:

1. Conditional: if numberVar == 2, Navigate to Frame 2
2. Set numberVar to 2

In der ersten Aktion wird die bedingte Anweisung (if numberVar == 2) als „false“ (falsch) angesehen, sodass die Aktion nicht ausgeführt wird und der Prototyp im aktuellen Frame bleibt. Dann wird der Wert von numberVar in 2 geändert.

Animationsreihenfolge

Prototypenanimationen können verwendet werden, um reibungslose Übergänge zwischen Seiten zu schaffen und das Verhalten von Aktionen wie Navigate to (Navigieren zu), Scroll to (Scrollen zu), Open overlay (Overlay öffnen) und mehr zu definieren.

Wenn du mehrere Animationen für einen Auslöser hast, werden diese sequentiell ausgeführt.

An interaction with two actions. The first action navigates to frame 2 and has a slide in animation, the second action opens an overlay with a move in animation.

The prototype from the previous image plays. First, it navigates to the next frame with a slide in animation. Then, an overlay opens on the second frame with a move in animation.

Bedingungen

In Bezug auf Prototypen ist eine Bedingung eine Regel, die definiert, wann eine Aktion ausgelöst werden soll. Bedingungen werden mit einer if/else-Logik verfasst.

Stell dir beispielsweise vor, du erstellst einen Bezahlvorgang. Wenn (if) die Gesamtsumme im Warenkorb über einem bestimmten Betrag liegt, ist der Versand kostenlos. Anderenfalls (else) werden die Versandkosten angezeigt.

In Figma kannst du die Prototypenaktion Conditional (Bedingung) verwenden, um Prototypen mit bedingter Logik zu erstellen.

Erstelle eine Prototypen-Interaktion.
Wähle im Bereich Interaction Details (Interaktionsdetails) einen beliebigen Auslöser aus dem Dropdown-Menü aus.
Wähle im Dropdown-Menü Actions (Aktionen) Conditional (Bedingt).
Schließe die If-Bedingung ab:

Gib in das Feld If (Wenn) einen booleschen Ausdruck ein, der die zu erfüllende Bedingung angibt.
Wähle eine (oder mehrere) Aktionen aus dem Dropdown-Menü aus. Diese Aktionen werden ausgelöst, wenn die If-Aussage erfüllt ist.

Schließe die Else-Bedingung ab:

Wähle eine (oder mehrere) Aktionen aus dem Dropdown-Menü aus. Diese Aktionen werden ausgelöst, wenn die If-Aussage nicht erfüllt ist. Alternativ kannst du keine Else-Aktion eingeben.

A checkout cart design with a prototype interaction on the checkout button. The conditional states: if cartTotal > 30, set freeShipping to true. Else, set freeShipping to false.

Nur Bedingungen mit unterstützten Operatoren und Formaten funktionieren. Ungültige bedingte Anweisungen werden in Rot angezeigt.

Bedingte Aussagen bewerten

Bedingte Aussagen sind dasselbe wie boolesche Ausdrücke – die Aussage wird mit dem Wert „true“ (wahr) oder „false“ (falsch) bewertet. Wenn der Wert der Aussage wahr ist, wird die If-Aktion ausgelöst. Wenn der Wert der Aussage falsch ist, wird die Else-Aktion ausgelöst.

Erfahre mehr über die Formatierung und Bewertung von booleschen Ausdrücken →