Mehrere Aktionen und Bedingungen
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).
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.
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
.
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:
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.
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.
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 →