Figma - Grundlagen

UX/UI-Design leicht gemacht: Figma Grundlagen und Praxis 

Figma ist das ideale Tool für modernes UX/UI-Design und ermöglicht Ihnen, Benutzeroberflächen in Echtzeit gemeinsam mit anderen zu gestalten. In unserer Schulung lernen Sie die Grundlagen von Figma kennen und erhalten einen umfassenden Einblick in die wichtigsten Funktionen und Techniken, um Skizzen, Wireframes und Prototypen für Websites und Apps zu erstellen.

Von den ersten Schritten im UX/UI-Design über die Einrichtung von Komponentenbibliotheken bis hin zum Erstellen interaktiver Prototypen erfahren Sie, wie Sie mit Figma effizient und kreativ arbeiten. Gemeinsam mit anderen Teilnehmenden erlernen Sie, wie Sie Figma für Ihr Team optimal nutzen und Ihren Workflow nachhaltig verbessern.

Wir bieten Ihnen dieses Thema auch als individuelle Schulung an

• individueller Terminabstimmung
• individueller Betreuung durch unsere Dozenten
• individueller Abstimmung Ihrer Schulungsinhalte
• effizientes Trainingsmanagement

Die individuellen Schulungen können Sie als Inhouse Schulung bei Ihnen im Unternehmen oder als Live-Online-Schulung buchen.

Figma Grundlagen und Interface Design

• Überblick über das Seminar und Lernziele
• Figma Account erstellen und erste Orientierung
• Interface-Tour: Werkzeuge, Panels und Navigation
• Erste einfache Formen und Objekte erstellen
• Shapes, Text und Bilder einfügen
• Eigenschaften und Transformationen
• Ebenen und Gruppen verwalten
• Farben, Verläufe und Effekte anwenden
• Übung: Einfaches Icon-Set erstellen
• Frames vs. Gruppen verstehen
• Auto Layout Grundlagen
• Grids und Guides einrichten
• Responsive Design-Prinzipien
• Übung: Mobile App-Screen layouten
• Best Practices für Design-Organisation
• Naming Conventions und Strukturierung
• Wireframing in Figma
• Praxis-Projekt: Einfache Landing Page skizzieren

Komponenten und Design-Systeme

• Was sind Komponenten und warum sind sie wichtig?
• Master Components vs. Instances
• Komponenten-Eigenschaften definieren
• Varianten und States erstellen
• Übung: Button-Komponente mit verschiedenen States
• Farb-Paletten und Styles verwalten
• Typography-System einrichten
• Spacing und Sizing-Standards
• Component Library organisieren
• Übung: Basis Design-System erstellen
• Nested Components und Overrides
• Auto Layout in Komponenten nutzen
• Boolean Properties und Conditional Logic
• Responsive Komponenten gestalten
• Übung: Komplexe Card-Komponente entwickeln
• Projekt: Mobile App Interface mit Design-System
• Komponenten-Bibliothek erweitern
• Konsistenz und Skalierbarkeit sicherstellen

Prototyping und Kollaboration

• Von statischen Designs zu interaktiven Prototypen
• Prototype-Modus verstehen
• Trigger und Actions definieren
• Transitions und Animations-Optionen
• Übung: Einfacher Click-Through Prototyp
• Overlays und Modals erstellen
• Smart Animate für flüssige Übergänge
• Scroll-Verhalten und Fixed Elements
• Interactive Components
• Plugins und erweiterte Funktionen
• Masken und erweiterte Effekte
• Übung: Animierte Mikro-Interaktionen
• Sharing und Permissions verwalten
• Kommentare und Review-Prozesse
• Version History und Branching
• Handoff für Entwickler vorbereiten
• Übung: Collaborative Review-Session
• Inspect-Panel für Entwickler
• Assets und Icons exportieren
• Code-Snippets und Specifications
• Design Tokens und CSS-Export
• Übung: Vollständiges Handoff-Paket erstellen
• Best Practices und Workflow-Tipps
• Figma Community und Resources