Weiterlesen … Figma Prototyping Masterclass

• Kurstitel: Figma 201
• Kurs_Untertitel: Vertiefen Sie Ihre Figma-Kenntnisse in diesem Intensivkurs für fortgeschrittene Workflows. Meistern Sie Auto Layout, interaktive Prototypen und Designsysteme, um effizienter, systematischer und professioneller zu gestalten. Inklusive Teilnahmezertifikat.
• Kurs Dauer: 9
• Anzahl_Module: 3
• Kurs_Schwierigkeitsgrad: Fortgeschrittene
• Kurs_Preis: 449,- € inkl. MwSt.
• Komplettkurs_Beschreibung:

  Bringen Sie Ihre Figma-Skills gezielt auf das nächste Level – mit unserem praxisnahen Figma 201 Live-Online-Kurs für Fortgeschrittene. Dieser Kurs richtet sich an alle, die bereits mit den Grundlagen vertraut sind und jetzt schneller, smarter und systematischer gestalten möchten.

  In 9 Stunden intensiver Live-Sessions vertiefen Sie Ihr Können in Figma: Sie beherrschen Auto Layout für responsive Interfaces, nutzen Komponenten und Varianten für skalierbare UI-Strukturen und erstellen interaktive High-Fidelity-Prototypen mit Smart Animate. Darüber hinaus lernen Sie, wie Sie Designsysteme effizient aufbauen und Ihren Workflow mit Design Token und Plugins messbar beschleunigen.

  Alle Teilnehmenden erhalten ein Teilnahmezertifikat nach jedem absolvierten Modul, beziehungsweise nach Abschluss des gesamten Kurses. Der Kurs ist live online, praxisnah und interaktiv ausgerichtet.

  Nach dem Kurs behalten Sie vollen Zugriff auf alle Lernmaterialen und die Aufzeichnungen in unserem Campus für ein volles Jahr! Auf Wunsch können Sie auch jederzeit nach Abschluss des Kurses eine Mentorenstunde mit Ihrem Trainer zu einem rabattierten Preis buchen. 

• Kurs_Lernziele:
  • Auto Layout souverän für skalierbares, responsives Design einsetzen
  • komplexe Komponentenstrukturen und Bibliotheken effizient managen
  • interaktive High-Fidelity-Prototypen mit fortgeschrittenen Übergängen entwickeln
  • Styles und Plugins strategisch zur Workflow-Optimierung nutzen
  • Design-System-Prinzipien gezielt in Ihre Projekte integrieren
• Kurs_Voraussetzungen:

  Kenntnisse aus dem Anfängerkurs Figma 101: Erste Schritte im UI/UX Design“ werden vorausgesetzt. Dieser Kurs ist für alle: 

  • Designer:innen mit grundlegenden Figma-Kenntnissen,
  • Personen, die ihre Fähigkeiten in Figma vertiefen und effizienter arbeiten möchten. 
• Kurs_Lektionen:

  1. Wiedereinstieg Frames und Autolayout
  • Vertiefung von Auto Layout
  • Fixed vs. Hug Contents vs. Fill Container
  • Negative Spacing und Absolute Positioning in Auto Layout
  • Komplexe verschachtelte Auto Layouts
  2. Komponenten und Varianten 
  • Was sind Komponenten?
  • Komponenten erstellen und verwalten
  • Varianten: Zustände und Eigenschaften von Komponenten
  • Interaktive Komponenten erstellen
  • Best Practices für die Komponentenbenennung

  
  3. Styles & Design Tokens (ca. 90 Minuten)
  • Farb-Styles erstellen und anwenden
  • Text-Styles erstellen und anwenden
  • Effekt- und Grid-Styles
  • Grundlagen von Design Tokens

  
  4. Fortgeschrittenes Prototyping (ca. 180 Minuten)
  • Smart Animate für flüssige Übergänge
  • Overlays und Scrolling-Effekte
  • Conditional Logic und Variables (Einführung, falls bereits verfügbar in Figma zum Kurszeitpunkt)
  • Multiple Flows in einem Prototyp
  • Testing mit Benutzern und Feedback einholen

  
  5. Plugins und Integrationen (ca. 75 Minuten)
  • Nützliche Plugins für Figma
  • Installation und Verwaltung von Plugins
  • Integrationen mit anderen Tools

  
  6. Design Systems – Der Einstieg (ca. 105 Minuten)
  • Was ist ein Design System und warum ist es wichtig?
  • Grundstruktur eines einfachen Design Systems in Figma
  • Dateistruktur und Organisation von Design Libraries
  • Publishing und Aktivieren von Libraries

  
  7. Effizienter Workflow & Tipps & Tricks (ca. 60 Minuten)
  • Shortcuts und Tastenkombinationen
  • Organisation von Figma-Dateien und Projekten
  • Versionskontrolle und Branching (Einführung)
  • Best Practices für die Dateibenennung

  Gesamtdauer Kurs: ca 13 Stunden

• Inhalt_Modul 1:
  1. Wiedereinstieg Frames und Auto-Layout
  • Vertiefung von Auto Layout
  • Fixed vs. Hug Contents vs. Fill Container
  • Negative Spacing und Absolute Positioning in Auto Layout
  • Komplexe verschachtelte Auto Layouts
  2. Komponenten und Varianten
  • Was sind Komponenten?
  • Komponenten erstellen und verwalten
  • Varianten: Zustände und Eigenschaften von Komponenten
  • Interaktive Komponenten erstellen
  • Best Practices für die Komponentenbenennung
  Übung: 
  Button erstellen in Small, Large, X-Large, sowie Default, Hover und Disabled als Eigenschaften erstellen
   
  3. Smart Animate
  • Smart Animate für flüssige Übergänge
  • Overlays und Scrolling-Effekte
  • Conditional Logic und Variablen
  • Multiple Flows in einem Prototypen
  • Testing mit Benutzern und Feedback einholen
  Übung: 
  Eigene Animation erstellen, zum Beispiel Warenkorb Item hinzugefügt oder Bestellungsformular abgesendet oder eine zu Ihrem Projekt passende Screen Animation
• Inhalt_Modul 2:
  4. Design Systeme 
  • Design System vs. Style Guide - Was ist der Unterschied? 
  • Grundstruktur eines einfachen Design Systems in Figma 
  • Struktur und Organisation von Design Libraries
  • Publishing und Aktivieren von Libraries
  5. Design token
  • Was sind Token?
  • Token organisieren: 
    • primitive token
    • semantische token
    • komponentenspezifische token
  • Styles und Variablen mit Token verbinden
  Übung: 
  Anlegen von primitiven und semantischen Token, Anwendung der Token auf bestehende Button Komponenten und Variablen
• Inhalt_Modul 3:
  6. Praxis 
  • Erstellen und Anlegen eines grundlegenden Designsystems
  • Erstellen wiederkehrender Komponenten mithilfe von Token
  • Organisieren des eigenen Designsystems

  In diesem Modul wenden Sie das Gelernte direkt an. Erstellen Sie unter persönlicher Anleitung Ihres Trainers ein grundlegendes Designsystem mit wiederkehrenden Komponenten, Varianten und Token. Bringen Sie Ihre eigenen Anwendungsfälle mit – in Breakout-Sessions erhalten Sie individuelle Unterstützung und lösungsorientierte Hilfestellung, um Herausforderungen gezielt zu meistern.

Weiterlesen … Figma 201: Effizientes Design & Interaktives Prototyping

• Kurstitel: Figma 101
• Kurs_Untertitel: Der perfekte Einstieg in Figma. Wir zeigen Ihnen live und praxisnah, wie Sie ohne Vorkenntnisse Logos, Wireframes und Prototypen erstellen. Holen Sie sich das Wissen, das Ihnen aufgezeichnete Tutorials nicht geben können. Inklusive Teilnahmezertifikat.
• Kurs Dauer: 9
• Anzahl_Module: 3 Module je 3 Stunden
• Kurs_Schwierigkeitsgrad: Einsteigende
• Kurs_Preis: 249,- € inkl. MwSt.
• Komplettkurs_Beschreibung:

  Unser Figma 101: Die ersten Schritte im Design Tool Komplettkurs, richtet sich an Alle die lernen möchten, wie man die Grundlagen in Figma auf professioneller Ebene beherrscht. Für den Kurs werden keine Vorkenntnisse aus anderen Design Tools oder Figma benötigt. 

  Unsere erfahrenen Trainer zeigen Ihnen, in kleinen Gruppen Lernender, live wie Sie am Besten in Figma einsteigen und begleiten Sie vom Erstellen Ihres Figma Kontos bis hin zu Ihrem ersten eigenen einfachen Prototypen. Der Komplettkurs Figma 101 beinhaltet 3 Module je 3 Stunden, welche Sie entweder als vollständigen Kurs oder auch einzeln buchen können. Die Termine finden Sie weiter unten. 

  Sie lernen wie Sie selbst Logos, Avatare, Wireframe Prototypen und vieles mehr erstellen können. Wir zeigen Ihnen die Grundlagen in Figma, einschließlich Figma Draw, Grids, einfaches Autolayout und Interaktionen. Die Inhalte der einzelnen Module finden Sie hier. 

  Alle Teilnehmenden erhalten ein Teilnahmezertifikat nach jedem absolvierten Modul, beziehungsweise nach Abschluss des gesamten Kurses. Der Kurs ist live online, praxisnah und interaktiv ausgerichtet. Nach dem Kurs behalten Sie vollen Zugriff auf alle Lernmaterialen und die Aufzeichnungen in unserem Campus für ein volles Jahr! Auf Wunsch können Sie auch jederzeit nach Abschluss des Kurses eine Mentorenstunde mit Ihrem Trainer zu einem rabattierten Preis buchen. 

• Kurs_Lernziele:
  • Die grundlegende Benutzeroberfläche von Figma verstehen und navigieren.
  • Erste einfache UI-Elemente und Layouts erstellen.
  • Kollaborative Funktionen von Figma verstehen und anwenden.
  • Erste einfache Klick-Pototypen erstellen.
• Kurs_Voraussetzungen:

  Für diesen Kurs benötigen Sie keine Voraussetzungen. Der Kurs ist ideal für: 

  • Absolute Neueinsteiger*innen im UI/UX Design, die keinerlei Vorkenntnisse in Design-Software haben,
  • Quereinsteiger*innen,
  • Studierende oder
  • Alle, die an der Arbeit in Figma interessiert sind
• Inhalt_Modul 1:
  1. Einführung in Figma
  • Was ist Figma?
  • Einrichtung des Figma Kontos
  • Figma Oberfläche kennenlernen
  2. Erste Schritte mit Formen, Farben und Text
  • Erstellen und Bearbeiten von Grundformen:
    • Auswahl, Skalierung und Positionierung von Objekten
    • Gruppieren und Ungruppieren von Elementen
  • Arbeiten mit Farben:
    • Farbauswahl
    • Colorpicker
    • Farbverläufe erstellen und anwenden
  • Textwerkzeug nutzen
   
  3. Figma Draw
   
  Übung: 
  ein einfaches Logo mittels Grundformen und/oder Text erstellen
   
  4. Bilder importieren und verwenden: 
  • Bilder in Figma importieren
  • Bilder als Füllung verwenden
  • Bilder zuschneiden und maskieren
  Übung: 
  einen Avatar aus Grundformen, Hintergrund und Bild erstellen
• Inhalt_Modul 2:
  5. Einführung in Frames & einfache Layouts
  • Was sind Frames?
  • Vordefinierte Frame-Größen (Desktop, Mobile, Tablet)
  • Einfache Grids und Culumns für Layouts verwenden
  • Wireframe Platzhalter erstellen
  • Auto Layout Grundlagen
  Übung: 
  Erstellen von wiederkehrenden Elementen wie Button, Header und Footer mittels Autolayout
   
  Übung: 

  3 - 4 Wireframe Screens erstellen und Platzhalter mittels Auto Layout anordnen. Verwendung der wiederkehrenden Elemente.
   
• Inhalt_Modul 3:
  6. Der erste Hi-Fidelity Prototyp
  • Verbindungen zwischen Frames herstellen (Prototyping Grundlagen)
  • Interaktionen
  • Prototyp im Präsentationsmodus testen und freigeben
  • Figma Mirror App
  • Nützliche Plugins
  Übung: 
  Zusammenfügen der Inhalte aus Modul 1 und Modul 2: 
  Den Wireframe Prototypen mit Bildern, Text und Farbe zu einem Hifi-Prototypen ausbauen. 
  Den Prototypen um Verbindungen zwischen den Frames und einfache Übergänge ergänzen. 
  Den Hifi-Prototypen anschließend im Präsentationsmodus testen und freigeben. 

Weiterlesen … Figma 101: Die ersten Schritte im Design Tool

• Kurs Dauer: 1
• Kurs_Schwierigkeitsgrad: Einsteigende

Weiterlesen … Wie wird im Kurs auf Nachhaltigkeit, Inklusivität und Barrierefreiheit geachtet?