Figma: Conditional Prototyping – Logik und Zustände im Prototype

Conditional Prototyping in Figma verbindet Variablen mit Prototype-Aktionen, sodass Übergänge nur unter bestimmten Bedingungen ausgelöst werden – für realistische Prototypen mit Login-Logik, Formularen und dynamischen Zuständen.

Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Variable-basiertes Prototyping, Prototype Conditions, Logik-Prototyp

Was ist Conditional Prototyping?

Conditional Prototyping (eingeführt mit Figma Variables 2023) erlaubt es, Prototype-Verbindungen mit Bedingungen zu verknüpfen. Statt eines einfachen „Klick A → gehe zu Frame B" kann man nun sagen: „Wenn Variable isLoggedIn = true, navigiere zu Home; sonst navigiere zu Login." So lassen sich echte Nutzungsszenarien wie Login-Flows, Warenkorb-Zustände oder Formularvalidierung realitätsnah simulieren.

Erklärung

Grundprinzip: Variablen als Zustandsspeicher

Conditional Prototyping basiert auf Figma Variables (Boolean, Number, String). Diese Variablen speichern Zustände während der Prototype-Session:

• isLoggedIn (Boolean): true = eingeloggt, false = ausgeloggt
• cartCount (Number): Anzahl der Produkte im Warenkorb
• userName (String): Eingegebener Nutzername im Formular

Set Variable – Aktionen

Mit der Aktion Set Variable kann eine Interaktion eine Variable verändern:

• Button „Login" → On Click → Set Variable isLoggedIn = true
• Button „Logout" → On Click → Set Variable isLoggedIn = false
• Stepper + → On Click → Set Variable cartCount = cartCount + 1

Set Variable kann mehrere Variablen gleichzeitig setzen.

Conditional Transitions – Verzweigungen

Beim Erstellen einer Prototype-Verbindung kann man nun Bedingungen hinzufügen:

1. Erste Verbindung von Button zu Frame „Home": Bedingung isLoggedIn == true
2. Zweite Verbindung von Button zu Frame „Login": Bedingung isLoggedIn == false

Figma evaluiert die Bedingungen von oben nach unten. Die erste Bedingung, die zutrifft, wird ausgeführt. Hat keine Bedingung eine zutreffe, wird keine Aktion ausgelöst.

Operators für Conditions

Figma unterstützt folgende Vergleichsoperatoren:

• == (gleich)
• != (ungleich)
• >, >=, <, <= (numerische Vergleiche)
• Boolean: true / false

Mehrere Conditions einer Verbindung können mit AND oder OR verknüpft werden.

Variable-Werte in Designs anzeigen

String und Number Variables können mit Text-Layers oder Component-Properties verknüpft werden. So zeigt ein „Warenkorb"-Label im Prototype die tatsächliche aktuelle Zahl aus der Variable an – dynamische Inhalte ohne externes Tool.

Prototype Reset

Variablen werden beim Prototype Reset (R-Taste im Presentation Mode) auf ihre Standardwerte zurückgesetzt. Das ermöglicht wiederholbare Nutzertests.

Grenzen des Conditional Prototyping

Conditional Prototyping deckt grundlegende Logik ab, ersetzt aber kein vollständiges Frontend-Framework. Komplexe Berechnungen, Arrays oder API-Calls sind nicht möglich. Für high-fidelity Prototypen mit echter Datenbindung empfiehlt sich Framer oder direktes Code-Prototyping.

Beispiele

1. Login-Flow: Variable isLoggedIn (Boolean). Login-Button setzt sie auf true. Navigation-Link prüft: wenn true → Dashboard; wenn false → Login-Screen. Korrekte Simulation des Auth-Flows.
2. Warenkorb: Variable cartCount (Number). Jeder „In den Warenkorb"-Button erhöht sie um 1. Ein Badge-Text zeigt den aktuellen Wert. Beim Checkout: Bedingung cartCount > 0 → Checkout-Screen; sonst → „Warenkorb ist leer"-Screen.
3. Formularvalidierung: Variable emailValid (Boolean). Ein „Weiter"-Button ist nur aktiv (navigiert weiter), wenn emailValid == true. Ein Fehler-State des Input-Fields erscheint, wenn emailValid == false.
4. Onboarding: Variable step (Number). Jeder „Weiter"-Button erhöht step um 1. Conditions auf den Pfeilen steuern, welcher Screen als nächstes erscheint.
5. Dark Mode Toggle: Variable darkMode (Boolean). Toggle setzt sie um. Alle Frames im Prototype wechseln ihren Variable Mode entsprechend.

In der Praxis

Variable erstellen: Rechtes Panel → Variables → Collection → Variable mit Typ und Defaultwert anlegen Set Variable: Prototype-Verbindung → Action: „Set Variable" → Variable und neuen Wert wählen Conditional erstellen: Prototype-Verbindung → „Add Condition" → Variable auswählen → Operator und Wert setzen Mehrere Conditions: Weitere Verbindungen vom gleichen Element zu verschiedenen Ziel-Frames mit unterschiedlichen Conditions Prototype testen: Cmd+Enter → Presentation Mode → Variablen live ändern und Bedingungen testen Reset: Im Presentation Mode R drücken → alle Variablen auf Default zurücksetzen

Vergleich & Abgrenzung

Conditional Prototyping positioniert Figma als direkten Konkurrenten zu einfachen Lo-Code-Prototype-Tools. Für echte Produktions-Prototypen mit komplexer Logik bleibt Framer die bessere Wahl, erfordert aber erheblich mehr technisches Know-how.

Häufige Fragen (FAQ)

Werden Variablen-Werte zwischen Prototype-Sessions gespeichert? Nein. Variablen werden nur innerhalb einer Prototype-Session gehalten und beim Schließen oder Zurücksetzen gelöscht. Es gibt keine Persistenz über Sessions hinweg – das ist für Nutzertests meist gewünscht.

Kann ich Conditions auch auf Hover oder Drag anwenden? Ja. Conditions können auf jeden Trigger-Typ angewendet werden: On Click, On Hover, On Drag, Mouse Enter/Leave, After Delay. Die Logik gilt unabhängig vom Trigger-Typ.

Lassen sich Variablen in FigJam für Workshops nutzen? Nein, Conditional Prototyping und Variables sind auf Figma Design beschränkt. FigJam hat kein Prototyping-System.

Verwandte Einträge

• Figma: Prototyping
• Figma: Smart Animate
• Figma: Variables
• Figma: Variants

Weiterführend

• Figma Help Center – help.figma.com/hc/en-us/articles/14506587589271
• Figma (2024): Prototype with variables and expressions. Figma Docs.
• Online: Figma Blog – „Introducing conditional logic in prototypes"