In dieser Übung lernen Sie die Grundlagen von Smart Animate in Figma kennen. Nutzen Sie die bereitgestellte Vorlage für simple Flows (Page: Simple Transistions) und kopieren Sie diese in Ihre persönlichen Drafts. Die Datei enthält ein einfaches Setup mit zwei Frames und grafischen Elementen.
Ihre Aufgabe:
Erstellen Sie fünf Varianten dieses Setups, indem Sie es jeweils duplizieren. Verbinden Sie die beiden Frames im Prototyping-Modus und experimentieren Sie mit unterschiedlichen Übergängen. Variieren Sie dabei:
Ziel ist es, ein Gefühl für Übergänge, Timing und Bewegung zu entwickeln. Filmen Sie Ihre Varianten auf dem Smartphone via Screencast ab und laden die Filme im ILU hoch.
Zeit: 20 Minuten
In dieser Übung geht es darum, einen einfachen Interface-Flow mit passenden Übergängen zu gestalten. Nutzen Sie die bereitgestellte Figma-Vorlage für simple Flows (Page: Simple Prototype). Diese enthält mehrere vorbereitete Screens, beginnend mit einem Welcome Screen. Ihre Aufgabe ist es, daraus einen klickbaren Prototyp zu erstellen, bei dem die Screens sinnvoll miteinander verbunden sind. Ziel ist es, den Einfluss von Übergängen auf das Nutzungserlebnis sichtbar und spürbar zu machen.
Erstellen Sie anschließend zwei unterschiedliche Varianten dieses Flows, indem Sie jeweils:
Filmen Sie beide Varianten als Screencast direkt auf dem Smartphone ab und laden Sie das Video anschließend im ILU hoch. Ein Upload von gehaltvollen Ergebnissen bringt bis zu 3 Bonuspunkte für das Abschlussprojekt.
Zeit: 40 Minuten
In dieser Übung bauen wir gemeinsam eine interaktive Listenansicht (List View) auf, die sich an einer konkreten Anwendung zur Modul- oder Veranstaltungsplanung orientiert. Nutzen Sie die bereitgestellte Figma-Vorlage für komplexe Flows (Page: Playground).
Ziel ist es, komplexere Interaktionen mit Figma zu gestalten – inklusive Komponenten, Zuständen (Variants) und Prototyping innerhalb von Komponenten.
Ihre Aufgabe: Erstellen Sie eine Listenansicht mit mehreren Listeneinträgen (z. B. Module oder Veranstaltungen). Entwickeln Sie Interaktionen, die folgende Funktionen abbilden:
Setzen Sie für die Listeneinträge eine Komponente mit Varianten ein, um unterschiedliche Zustände (z. B. favorisiert / nicht favorisiert) darzustellen. Nutzen Sie Smart Animate gezielt für die Übergänge zwischen den Zuständen und zur Darstellung der Navigation zur Detailansicht.
Achten Sie bei der Umsetzung darauf:
Diese Übung eignet sich als Basis für spätere Erweiterungen (z. B. Swipe-Interaktionen, Mehrfachauswahl, Filter, etc.).
Teilen Sie Ihr Ergebnis und laden Sie den Share-Link zusammen mit den Namen Ihrer Mitglieder in ILU hoch. Ein Upload eines gehaltvollen Ergebnisses bringt bis zu 3 Bonuspunkte für das Abschlussprojekt.
Für den Share-Link: