Figma Grundlagen: UI-Design, Prototyping & Design-Systeme

So profitieren sie von dieser Schulung:

• Sie erstellen in Figma erste professionelle Layouts für Websites, Apps und digitale Produkte.
• Sie bauen wiederverwendbare Komponenten und schaffen mehr Konsistenz im Design.
• Sie setzen Auto Layout gezielt ein, um responsive Oberflächen effizienter zu gestalten.
• Sie entwickeln klickbare Prototypen, um Abläufe früh sichtbar und testbar zu machen.
• Sie bereiten Designs so auf, dass Zusammenarbeit, Feedback und Handoff deutlich reibungsloser laufen.

Sie möchten eine Website, App oder interne Anwendung nicht nur grob skizzieren, sondern visuell durchdacht, nachvollziehbar und abstimmbar aufbauen. An diesem Punkt wird Figma im Arbeitsalltag wertvoll: Ideen werden zu Wireframes, daraus entstehen Screens, klickbare Prototypen und eine Struktur, mit der Teams effizient weiterarbeiten können.

In dieser Figma Schulung lernen Sie Schritt für Schritt, wie Sie Benutzeroberflächen professionell gestalten und Ihre Arbeit sauber organisieren. Sie entwickeln Layouts, arbeiten mit Komponenten, Varianten und Auto Layout und verstehen, wie ein konsistenter Design-Workflow aufgebaut wird. Ebenso wichtig ist die Zusammenarbeit: Sie lernen, wie Feedback, Freigaben und die Übergabe an Entwicklerinnen und Entwickler oder andere Projektbeteiligte in Figma sinnvoll vorbereitet werden.

Ein typischer Use Case aus der Praxis: Ein Team plant den Relaunch einer Website oder die Oberfläche einer neuen App. Statt Anforderungen in E-Mails, PDFs und statischen Mockups zu verlieren, entsteht in Figma eine gemeinsame Arbeitsgrundlage, auf der Design, Abstimmung und Umsetzung deutlich strukturierter zusammenlaufen.

Einführung in Figma und erste Orientierung

• Ziele, Aufbau und Einsatzmöglichkeiten
• Einrichtung des Zugangs und Überblick über die Arbeitsoberfläche
• Navigation in Dateien, Seiten, Ebenen und Arbeitsbereichen
• Grundformen, Texte, Bilder und grafische Elemente einsetzen
• Objekte auswählen, ausrichten, transformieren und organisieren
• Farben, Verläufe und Effekte gezielt anwenden
• Ebenen, Gruppen und Frames sinnvoll strukturieren

Layouts, Wireframes und responsive Gestaltung

• Unterschiede zwischen Frames, Gruppen und Komponenten verstehen
• Wireframes für Websites und Apps entwickeln
• Grids, Guides und Abstände systematisch nutzen
• Auto Layout für flexible und anpassbare Oberflächen einsetzen
• Grundlagen responsiver UI-Gestaltung in Figma anwenden
• Benennungen, Seitenlogik und Dateistruktur sauber aufbauen

Komponenten, Varianten und Design-Systeme

• Wiederverwendbare Komponenten erstellen und pflegen
• Unterschied zwischen Hauptkomponenten und Instanzen sicher anwenden
• Varianten und Zustände für UI-Elemente aufbauen
• Styles für Farben, Typografie und Abstände konsistent anlegen
• Grundlagen für ein skalierbares Design-System entwickeln
• Komponenten-Bibliotheken strukturieren und erweitern
• Variablen und tokenorientiertes Arbeiten im Designprozess kennenlernen

Prototyping und Interaktionen

• Statische Entwürfe in klickbare Prototypen überführen
• Verknüpfungen, Trigger und Interaktionen definieren
• Transitions, Overlays und Micro-Interactions einsetzen
• Scroll-Verhalten und feste Elemente im Prototyp abbilden
• Interactive Components für realistischere Abläufe nutzen

Kollaboration, Feedback und Übergabe

• Dateien teilen und Berechtigungen passend vergeben
• Kommentare, Review-Prozesse und Abstimmungen effizient organisieren
• Versionen, Änderungen und Entwicklungsstände nachvollziehen
• Designs für die Übergabe an Entwicklerinnen oder Entwickler vorbereiten
• Inspect-Funktionen und Dev Mode im Übergabeprozess einordnen
• Assets, Icons und Spezifikationen strukturiert exportieren

Best Practices für den Arbeitsalltag

• Plugins, Ressourcen und Community-Inhalte sinnvoll nutzen
• Typische Fehler in Aufbau, Benennung und Kollaboration vermeiden
• Workflows für Teams, Projekte und wiederkehrende Aufgaben optimieren