Flow & Transition


Warmup

Duplizieren Sie sich die Datei Figma Scroll to Playground aus der Figma-Community und folgen Sie den Anweisungen in der Datei. Diese beschäftigt sich primär mit dem gezielten Scrollen und damit verbundenen Schwierigkeiten und deren Lösung.

Flow & Transition in der Audio App

Die Basis für den heutigen Workshop bildet eine kleine Audio Demo App. Hier sind bereits verschiedene Pages und Organisims fertig und sollen jetzt zum Leben erweckt werden, damit verschiedene User Flows erlebbar gemacht werden:

  • Song abspielen und stoppen
  • Song zu Favoriten hinzufügen
  • Informationen zur Künstler:in anzeigen
  • ggf. weitere

mögliche Heransgehgensweise

  1. einzele Pages verknüpfen um basale User Flows erlebbar zu machen
  2. Animationen und Übergänge addieren und evaluieren
  3. Microinteraktionen addieren
  4. weitere Interaktionselelemente für erweiterte User Flows integrieren
  5. mal die Nebenfrau testen lassen, Feedback einsammeln und dann optimieren

Figma Vorlage

Sie können die unten dargestellte Vorlage verwenden. Zur Nutzung Datei in Figma öffnen, auf den Pfeil oben in der Titelleiste neben view only klicken und aus dem Dropdown Feld Duplicate to your Drafts auswählen. Dann kann mit der Vorlage im persönlichen Bereich in Figma gearbeitet werden.

Time to Play / Loading Animation

In der nächsten Phase existieren weniger Leitplanken. Versuchen Sie das Erlernte sinnvoll in einer Ladeanmimation/ Ladescreen für die Anwendung zu integrieren.

Recap zum Google Sheets Sync Plugin