Advanced Prototyping in Figma

Was ist Advanced Prototyping?

Unter Advanced Prototyping versteht man die Erstellung von detaillierten und interaktiven Prototypen, die dem Endprodukt sehr nahe kommen. Diese Prototypen zeigen nicht nur das Design der Anwendung, sondern auch ihre Funktionen und Interaktionen. So können digitale Produkte umfassend getestet werden.

Advanced Prototyping Features

In Figma ist es bereits möglich, qualitativ hochwertige Prototypen zu erstellen, indem mehrere Screens verknüpft, Interaktionen hinzugefügt und Übergänge animiert werden. Mit den Advanced Prototyping Features geht Figma nun einen Schritt weiter und ermöglicht die Erstellung dynamischer Prototypen.

Variablen

Die Basis für dynamische Prototypen sind Variablen. In Figma sind Variablen »gespeicherte Werte, die für Design-Eigenschaften oder einen gespeicherten Status stehen«. Derzeit gibt es folgende Variablentypen:

• Color: für Farbwerte
• Number: für numerische Werte
• String: für Variantennamen und Texte
• Boolean: für Werte, die wahr oder falsch sind

Modi

Eine Variable kann mehrere Modi haben. Dadurch können die Werte unabhängig voneinander geändert werden. Nehmen wir als Beispiel einen Onlineshop, der zwei Produkte anbietet. Beide Produkte haben unterschiedliche Produktnamen, Preise und Hintergrundfarben. Wählt man im Design nun einen Modus aus, ändern sich die Produkteigenschaften.

Darüber hinaus können Modi auch für Interaktionen und Berechnungen verwendet werden. Bleiben wir beim Beispiel des Online-Shops: Bei der Berechnung des Gesamtpreises werden die Variablen »Menge« und »Preis« multipliziert. Um den Gesamtpreis zu ermitteln, muss der richtige Modus für die Variablen ausgewählt werden.

Bedingungen & Berechnungen

Über die Prototyping-Aktionen können Bedingungen mit if/else-Logik hinzugefügt werden. Wenn die Bedingung erfüllt ist, wird die Aktion ausgeführt. Ist sie nicht erfüllt, findet eine alternative Aktion statt. Innerhalb dieser Bedingungen können Berechnungen durchgeführt werden. Dies ermöglicht die dynamische Anpassung von Werten und Eigenschaften. 

Nehmen wir wieder das Beispiel eines Online-Shops: Ab einem Bestellwert von € 50,00 ist der Versand kostenlos. Die if/else-Logik könnte wie folgt formuliert werden: Wenn der Gesamtpreis höher als € 50,00 ist, wird die Variable »Versandkosten« auf € 0,00 gesetzt. Andernfalls betragen die Versandkosten € 5,00.

Anwendungsbeispiele

Jetzt, da wir mit den Funktionen vertraut sind, die Figma bietet, stellt sich die Frage: Wie lassen sich diese Features in realen Projekten einsetzen? Hier sind einige Beispiele, die verdeutlichen, wie vielseitig Variablen eingesetzt werden können:

• Login-Prozess:
  Der User kann erst fortfahren, wenn die Nutzungsbedingungen akzeptiert wurden.
• Formular:
  Ein nicht ausgefülltes Inputfeld löst eine Fehlermeldung aus.
• Interaktive Elemente:
  Elemente können über einen Button ein- und ausgeblendet, in der Größe oder farblich verändert werden.
• Dropdown:
  Der User kann eine Option auswählen und der Inhalt wird aktualisiert.
• Warenkorb:
  Über Plus- und Minus-Buttons können Produkte dem Warenkorb hinzugefügt oder entfernt werden. 
• Gesamtpreis:
  Automatische Berechnung des Gesamtpreises auf Basis der ausgewählten Produkte und deren Anzahl.
• Gesamtanzahl:
  Die Gesamtzahl der Artikel im Warenkorb ändert sich je nachdem, wie viele Produkte ausgewählt wurden.

Fazit

Mit den Advanced Prototyping Features von Figma ist es möglich, dynamische und realitätsnahe Prototypen zu erstellen. Benutzer:innen können mit einem Prototyp interagieren, wobei sich Werte und Eigenschaften je nach Eingabe anpassen. Wer Variablen & Co. im eigenen Projekt einsetzen möchte, sollte sich ein klares Ziel setzen und strukturiert vorgehen. Das spart Zeit und führt effizient zum gewünschten Prototyp.