Kann Figma in zwei Tagen gelernt werden, ganz ohne Design-Vorkenntnisse?
Wir haben es ausprobiert: Entwickler*innen und Sales-Mitarbeiter*innen einer langjährigen Kundin aus dem Bereich Software-Entwicklung, bisher kaum mit Design-Tools vertraut, wagten den Test. Ziel war es, innerhalb von zwei Tagen eigenständig einfache Screens mit Formularen, Tabellen und Dialogen zu erstellen, mithilfe der firmeneigenen Figma-Komponenten-Library.
Ziele
- Figma-Oberfläche und Grundfunktionen kennenlernen
- Eigene Screens erstellen (Dialoge, Formulare, Tabellen)
- Komponenten aus ihrer Library einsetzen: Buttons, Felder, Checkboxen, Radiobuttons
- Text- und Farbstile anwenden
- Am Ende: klickbaren Prototyp erstellen
Herausforderung
Die Teilnehmenden hatten keinerlei Design-Erfahrung. Die grösste Schwierigkeit: Figma ist sehr mächtig, wir mussten uns auf das absolut Notwendige konzentrieren, um niemanden zu überfordern. Schritt für Schritt, von ganz einfachen Formen bis hin zu Prototyping.
So lief der 2-Tages-Workshop
Tag 1: Grundlagen & schnelle Erfolge
Ziel: schnelle Erfolgserlebnisse und eine solide Basis für Tag 2.
Aufgaben am ersten Tag:
- Eigene Seite erstellen
- Frame für Desktop anlegen
- Titel-Text einfügen
- Zwei Buttons bauen – Rechteck + Text kombinieren
- Farbe & Ausrichtung anpassen
- Ersten Dialog bauen → mit Auto-Layout (Header – Content – Button-Leiste)
- Komponenten aus der Library verwenden (z. B. Buttons, Input-Felder)
Jede*r Teilnehmer*in hatte am Ende von Tag 1 einen ersten Screen mit Titel, Buttons und einem funktionalen Dialog mit Auto-Layout.
Tag 2: Komponenten, Tabellen & Prototyp
Am zweiten Tag ging es einen Schritt weiter. Von der Anwendung hin zur eigenen Gestaltung:
Komponenten
- Eigene Komponenten erstellen
- Zusätzliche Varianten der Komponente anlegen (z. B. Button: Primary, Secondary, Disabled)
- Instanzen erstellen → lernen, was sich ändern lässt und was fix ist
- Komponente anpassen → beobachten, was mit einer «detachten» Instanz passiert
Tabellen
- Eigene Tabelle mit Auto-Layout erstellen
- Header-Row, Content-Rows und Actions (Bearbeiten/Löschen) anlegen
Dialog
- Eigenen Dialog als wiederverwendbare Komponente bauen
Prototyping
- Klickbaren Flow erstellen:
- «Neu»-Button öffnet Dialog
- Eintrag wird visuell in Tabelle ergänzt
- Buttons für «Bearbeiten» und «Löschen» verlinkt
Ergebnisse
Nach nur zwei Tagen konnten alle Teilnehmer*innen:
- eigene Komponenten und Varianten erstellen,
- Tabellen und Dialoge selbst gestalten,
- klickbare Prototypen bauen, die sich testen und teilen lassen.
Das Beste: Das Team hatte nicht nur die Technik gelernt, sondern auch Lust bekommen, Figma als gemeinsames Kommunikations- und Prototyping-Tool einzusetzen.
Fazit
Figma ist nicht nur für Designer*innen. Mit einer fokussierten, praxisnahen Schulung können auch Entwickler- und Sales-Teams in kürzester Zeit lernen, eigene Screens zu erstellen und Prototypen zu bauen.
Wichtig: Schrittweise vorgehen, Überforderung vermeiden und viel Zeit zum Ausprobieren geben.
