Ziel der Übung
Sie bauen in Figma eine funktionale, dynamisch befüllbare Veranstaltungsliste als Organism – unter Verwendung von Komponenten, Auto Layout und dem Google Sheets Sync Plugin.
Diese Übung ist technisch und methodisch ausgerichtet – der Fokus liegt auf Struktur, Modularität und Datenhandling, nicht auf finalem Look & Feel.
Material
Figma Template
Kleines Video zur Nutzung des Google Sheets Sync Plugins
Schritt 1: Komponentenstruktur aufbauen
Aufgabe:
- Erstellen Sie eine Komponente für einen Veranstaltungseintrag.
- Überlegen Sie, ob und welche Sub-Komponenten sinnvoll sind (z. B. Zeitangabe, Titel, Raum, Dozent*in, etc.).
- Bauen Sie die Komponenten reaktionsfähig auf, sodass sie gut über Auto Layout organisiert und später dynamisch befüllt werden können.
Hinweise:
- Arbeiten Sie mit Auto Layout innerhalb der Komponente(n).
- Achten Sie auf sauberes Spacing, konsistente Typografie, Wiederverwendbarkeit.
- Nutzen Sie die Vorlage und die darin enthaltenen Styles
- Ziehen Sie bei Bedarf die Ergebnisse des Workshops «Gestaltungsrichtlinien und Spielräume» zu rate. Passwort screendesign
Schritt 2: Google Sheets Sync Plugin integrieren
Aufgabe:
- Verwenden Sie das Plugin Google Sheets Sync Plugin, um Ihre Komponenten dynamisch mit Daten zu befüllen.
- Erstellen Sie dazu das bereitgestellte Google Sheet mit relevanten Spalten (z. B. Titel, Uhrzeit, Ort, etc.).
- Verbinden Sie das Sheet mit Ihrer Figma-Datei und mappen Sie die Inhalte auf die Komponenten-Felder.
Hinweise:
- Testen Sie, ob mehrere Einträge automatisch generiert werden.
- Prüfen Sie, ob Formatierungen konsistent übernommen werden.
Optionaler Schritt 3: Responsives Verhalten gestalten
- Bauen Sie das Layout so um, dass es sich an verschiedene Bildschirmgrößen anpassen kann.
- Nutzen Sie Auto Layout + Constraints, um das Verhalten bei Größenänderung zu testen (z. B. Smartphone vs. Desktop).
Ergebnis am Ende:
- Eine in Figma aufgebaute Veranstaltungsliste,
- modular als Organism strukturiert,
- befüllbar mit dynamischen Daten,
- optional responsive.
Upload
Ein Upload von gehaltvollen Ergebnissen bringt bis zu 5 Bonuspunkte für das Abschlussprojekt.
Laden Sie Ihre Ergebnisse im ILU hoch.
Verwenden Sie beim Dateinamen bitte die folgende Nomenklatur:
sd-veranstaltungsliste-NACHNAME.png
