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

Beginn 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

Zu den Buchungsoptionen

Diese Figma Schulung richtet sich an Einsteigerinnen und Einsteiger aus UI-/UX-Design, Marketing, Produktmanagement, Webentwicklung und digitalen Projektteams, die Website-, App- oder Produktideen strukturiert gestalten, abstimmen und für die Umsetzung vorbereiten möchten.
 

Besonders geeignet ist der Kurs für alle, die Wireframes, UI-Layouts, klickbare Prototypen und wiederverwendbare Komponenten in Figma erstellen und die Zusammenarbeit mit Team, Stakeholdern oder Entwicklerinnen und Entwicklern verbessern wollen. Spezielle Figma-Vorkenntnisse sind nicht erforderlich.

Zu den Buchungsoptionen

Zu den Buchungsoptionen