- Grundlagen und Struktur von Design Systemen
- Einführung: Was ist ein Design System?
- Unterschied
- Warum Unternehmen Design Systeme nutzen
- Skalierbarkeit von Produkten
- Zusammenarbeit zwischen Design und Entwicklung
- Bausteine eines Design Systems - Die wichtigsten Elemente:
- Design Tokens (Farben, Typografie, Spacing)
- Komponenten
- Patterns
- Layout-Systeme
- Interaction Patterns
- Dokumentation
- Governance
- Design Tokens definieren
- Farbstruktur
- Typografie-System
- Spacing-System
- Grid-System
- Naming-Konventionen
- Komponenten richtig denken
- Atomic Design Prinzip
- Komponenten-Hierarchie
- Wiederverwendbarkeit
- Varianten und States
- Responsives Verhalten
- Design Systeme konkret in Figma umsetzen
- Aufbau eines Design Systems in Figma
- Struktur von Libraries
- Seitenstruktur
- Komponentenorganisation
- Naming-Systeme
- Best Practices für Teams
- Tokens und Styles in Figma
- Color Styles
- Text Styles
- Variables
- Design Tokens in Figma
- Themes und Dark Mode
- Komponenten-System bauen
- Auto Layout richtig nutzen
- Varianten
- Interaktive Komponenten
- skalierbare Komponenten
- Design System testen
- funktioniert das System wirklich?
- Skalierbarkeit prüfen
- typische Fehler in Design Systemen
LernzieleNach dem Seminar sind Sie in der Lage, Design Systeme einzuordnen und deren Bedeutung für konsistente und skalierbare digitale Produkte zu erklären. Sie definieren Foundations wie Design Tokens, Typografie und Farbstrukturen und entwickeln darauf aufbauend skalierbare Komponenten. Zudem bauen Sie Design Systeme strukturiert in Figma auf, legen Libraries an und verbessern die Konsistenz Ihrer Benutzeroberflächen nachhaltig.
ZielgruppenDas Seminar eignet sich besonders für:
UI Designer, UX Designer, Product Designer & Teams, die ein Design System aufbauen möchten
Voraussetzungen für Ihre Teilnahme:
Sie benötigen Grundkenntnisse in Figma.
Sie verfügen über Erfahrung im UI-Design.