UI-Design Weiterbildung mit Figma

UI-Design entscheidet darüber, ob eine digitale Anwendung intuitiv bedienbar ist oder Nutzer:innen verwirrt. Dieser Kurs vermittelt, wie aus einer Idee ein durchdachtes, skalierbares Designsystem entsteht — mit stimmigen Farben, klaren Typografie-Regeln, wiederverwendbaren Komponenten und einheitlichen Layoutprinzipien. Ausgangspunkt ist die Analyse bekannter Designsysteme wie Material Design, bevor Teilnehmende ein eigenes System in Figma aufbauen: von Farblehre und Barrierefreiheit über Auto-Layout, Grids und Component-Libraries bis zu interaktiven Prototypen mit Smart Animate und Lottie-Animationen. Am Ende steht ein vollständiges, eigenständig umgesetztes Webdesign-Projekt im Portfolio.

Modul 1 — Designsysteme verstehen: Der Einstieg analysiert, wie professionelle Designsysteme aufgebaut sind und welche Prinzipien sie tragfähig machen.

• Aufbau und Bestandteile von Material Design als Referenzsystem
• Vergleich unterschiedlicher Designsystem-Ansätze
• Konsistenz, Skalierbarkeit und Wiederverwendbarkeit als Designprinzipien
• Beziehung zwischen Designsystem und Markenidentität
• Dokumentation von Designentscheidungen für Teams
• Übertragung fremder Systemlogik auf eigene Projekte

Modul 2 — Farbe, Typografie und Barrierefreiheit: Dieser Block legt das visuelle Fundament, das jedes weitere Design trägt.

• Farbenlehre und Farbpsychologie im UI-Kontext
• Kontrastverhältnisse nach Barrierefreiheits-Standards berechnen und einhalten
• Aufbau eines eigenen Farbsystems mit Primär-, Sekundär- und Statusfarben
• Typografische Hierarchien und Schriftpaarungen
• Lesbarkeit auf unterschiedlichen Bildschirmgrößen sicherstellen
• Barrierefreies Design als durchgängiges Qualitätskriterium

Modul 3 — Struktur, Komponenten und Auto-Layout: Im Zentrum steht der technische Aufbau skalierbarer Designs in Figma.

• Grids und Layoutraster für konsistente Seitenstrukturen
• Styles für Farbe, Typografie und Effekte anlegen und pflegen
• Auto-Layout für responsive, dynamisch anpassbare Elemente
• Komponenten und Varianten strukturiert aufbauen
• Component-Libraries für Team- und Projektübergreifende Nutzung
• Pflege und Versionierung eines wachsenden Designsystems

Modul 4 — Prototyping und Animation: Dieser Block macht Designs erlebbar, bevor sie entwickelt werden.

• Grundlagen des Prototypings in Figma
• Smart Animate für flüssige Übergänge zwischen Screens
• Mikrointeraktionen und deren Wirkung auf die Nutzerführung
• Einbindung von Lottie-Animationen in Prototypen
• Testbarkeit von Prototypen für Nutzerfeedback vorbereiten
• Grenzen und sinnvoller Einsatz von KI-Tools im Prototyping

Praxis-Block — Vom Redesign zum eigenen Projekt

• Analyse einer bestehenden Website auf Stärken und Schwächen
• Ableitung konkreter Redesign-Ziele aus der Analyse
• Aufbau eines eigenen Farb- und Typografiesystems für das Projekt
• Erstellung eines Grid-Systems für Desktop- und Mobile-Ansichten
• Aufbau einer Component-Library mit Buttons, Cards und Formularelementen
• Umsetzung von Varianten für unterschiedliche Interaktionszustände
• Erstellung eines klickbaren Prototyps mit Smart Animate
• Integration von mindestens einer Lottie-Animation
• Überprüfung des Designs auf Kontrast- und Barrierefreiheits-Kriterien
• Dokumentation des eigenen Designsystems für Dritte
• Präsentation des fertigen Webdesign-Projekts
• Einordnung des Projekts als Portfolio-Baustein

Der Kurs ist Teil einer größeren UX/UI-Design-Weiterbildung und fokussiert bewusst auf die visuelle und interaktive Umsetzungsebene: Wie werden Ideen zu konkreten, funktionierenden Oberflächen? Die Arbeit mit echten Designwerkzeugen und einem realen Redesign-Projekt sorgt dafür, dass Teilnehmende nicht nur Theorie kennen, sondern ein vorzeigbares Ergebnis erarbeiten.

Der Kurs richtet sich sowohl an Menschen mit Vorerfahrung in Design oder verwandten Feldern als auch an klassische Quereinsteiger:innen ohne Design-Hintergrund.

• Absolvent:innen von Geistes- und Sozialwissenschaften, die sich beruflich neu orientieren
• Personen mit Design-Studium oder Design-Ausbildung, die sich auf UI-Design spezialisieren möchten
• Klassische Quereinsteiger:innen ohne bisherige Design-Erfahrung
• Kreative, die von grafischer Gestaltung in digitales Interface-Design wechseln möchten
• Personen, die bestehende Websites professionell analysieren und redesignen möchten

Der Kurs umfasst 275 Unterrichtseinheiten und ist auf eine Dauer von fünf Wochen in Vollzeit ausgelegt. Dieser kompakte Zeitrahmen erfordert eine hohe wöchentliche Lernintensität, ermöglicht dafür aber einen zügigen Abschluss mit unmittelbar einsetzbaren Fähigkeiten in Figma und UI-Design.

Der Kurs schließt mit einem zertifizierten und anerkannten trägerinternen Zertifikat als UX/UI Designer:in ab. Es handelt sich um einen träger-internen Nachweis der erworbenen praktischen Fähigkeiten, nicht um eine externe Herstellerzertifizierung. Das eigenständig umgesetzte Redesign-Projekt dient zusätzlich als Arbeitsprobe für Bewerbungen.

UI-Design ist die Schnittstelle, an der gute Ideen entweder nutzbar oder frustrierend werden. Wer versteht, wie Designsysteme strukturiert sind, warum Kontrastverhältnisse wichtig sind und wie Komponenten skalierbar aufgebaut werden, liefert Ergebnisse, die nicht nur gut aussehen, sondern auch funktionieren und barrierefrei zugänglich sind. Die konsequente Arbeit mit Figma als Branchenstandard-Werkzeug sorgt dafür, dass die erworbenen Fähigkeiten unmittelbar in Design-Teams einsetzbar sind. Von der Farblehre bis zum interaktiven Prototyp mit Smart Animate deckt der Kurs den gesamten Weg von der Idee bis zum testbaren Interface ab — inklusive der Fähigkeit, bestehende Produkte kritisch zu analysieren und gezielt zu verbessern. Für Quereinsteiger:innen bietet der kompakte, praxisorientierte Aufbau einen realistischen Weg in ein gefragtes Berufsfeld: UI-Designer:innen werden in Agenturen, Produktteams und bei Selbstständigkeit gleichermaßen gesucht. Das im Kurs entstehende eigene Redesign-Projekt liefert dabei ein konkretes, vorzeigbares Ergebnis für den Einstieg in den Arbeitsmarkt.