Einführung & Grundlagen
• Überblick über Figma und Einsatzmöglichkeiten im Designprozess
• Vorteile: Cloud-basiertes Arbeiten, Plattformunabhängigkeit, Team-Kollaboration in Echtzeit
• Unterschiede zwischen Figma Web, Desktop-App und FigJam
• Best Practices für Screendesign:
• Grundprinzipien guter Usability
• Raster und Layouts für Struktur und Ordnung
• Designtrends (Dark Mode, Micro-Interactions, Accessibility)
⸻
Phase 1: Screendesign & Usability
• Grundlagen der visuellen Gestaltung: Farben, Typografie, Abstände
• Aufbau logischer Navigations- und Inhaltsstrukturen
• Barrierefreiheit im Design (Farben, Kontraste, Schriftgrößen)
• Erstellung erster Web- und App-Layouts
⸻
Phase 2: Figma kennenlernen
• Oberfläche im Detail: Layers, Pages, Toolbar, Properties Panel
• Grundlegende Werkzeuge (Frames, Shapes, Text, Pen-Tool)
• Komponenten und Varianten für wiederverwendbare Elemente
• Styles für Farben, Texte und Effekte anlegen
• Auto-Layout im Detail: flexible, responsive Elemente gestalten
• Neuere Features wie:
• Auto-Animate für Animationen
• Gestensteuerung für Prototypen
• Responsive Resize für dynamische Layouts
⸻
Phase 3: Praxis & Anwendung
• Erstellung vollständiger Desktop- und Mobile-Designs
• Responsive Design: Breakpoints planen und umsetzen
• Prototyping: Screens verbinden, Übergänge und Animationen gestalten
• Interaktive Clickdummies erstellen und testen
• Zusammenarbeit im Team: Kommentare, Version History, Freigabe-Funktionen
• Export von Assets für Entwickler oder Marketing
⸻
Erweiterte Themenblöcke
Elemente & Komponenten
• Komponenten-Bibliotheken erstellen und verwalten
• Varianten für Zustände (z. B. Buttons: Hover, Disabled, Active)
• Aufbau eines Design Systems in Figma
Layout & Struktur
• Fortgeschrittene Raster und Layout-Grids
• Responsive Patterns (Mobile First, Fluid Layouts)
• Praktische Beispiele: Landing Page, App-Startscreen
Prototyping & Testing
• Micro-Interactions und Übergangseffekte
• Nutzerflows und Gesten einbauen
• Usability-Tests mit Figma-Prototypen durchführen
Teamwork & Kollaboration
• Arbeiten in Echtzeit mit mehreren Personen
• Rechte- und Freigabe-Management
• FigJam für Workshops und Brainstorming nutzen
Übergabe an Entwickler
• Nutzung des Inspect Panels
• Export von Assets in verschiedenen Formaten (PNG, SVG, PDF)
• Nutzung von Plugins wie Zeplin oder Storybook
⸻
Individuelle Anpassung
• Möglichkeit, Schulungsinhalte auf Unternehmensprojekte zuzuschneiden
• Einbindung realer Arbeitsbeispiele aus dem Alltag der Teilnehmenden
• Offene Q&A-Session zum Abschluss