Figma Grundlagen - Schulung

Als Last-Minute buchbar -10% Rabatt:
Termin: 10. - 12.11.2025 - Ort: Hamburg ➔ Zum Angebot

• Dank Figma gestalten Sie Benutzeroberflächen gleichzeitig mit anderen Nutzer:innen. Das Online-Tool gehört zu den führenden Programmen für die Konzeptionierung und Entwicklung von Designs. In unserer Schulung lernen Sie die wichtigsten Techniken, um mit Figma erfolgreich zu arbeiten.

  Figma ist browserbasiert und erlaubt somit das gemeinsame Erstellen und Bearbeiten von Designs in Echtzeit. Alle Nutzer:innen haben von jedem Gerät aus Zugriff auf dieselben Ressourcen und können so ihren Workflow deutlich verbessern. Für Wireframes, Konzepte und Prototypen ist Figma die ideale Software.

  Unser Kurs bringt Ihnen zunächst alle Grundlagen näher und arbeitet Sie anschließend in die einzelnen Funktionen von Figma ein. Sie erhalten somit einen tiefgreifenden Einblick in das browserbasierte UX/UI-Design und sind anschließend dazu in der Lage, Skizzen, Konzepte und Prototypen für Webseiten und Apps zu gestalten.

  mehr anzeigen

• Kursinhalte

  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

  Tipp: Empfohlene Trainingsdauer für alle Kursinhalte: 1 Tag

  1 - 2 Personen: 2 Tage - 3 Tage

  3 - 8 Personen: 3 Tage

  mehr anzeigen