Figma Prototyping Grundkurs

Lektion 1 • Figma-Ökosystem und Kontoeinrichtung

Behandelt die Web- und Desktop-Apps, Plantypen und die Kontokonfiguration von Figma. Schafft die technische Grundlage, bevor die eigentliche Designarbeit beginnt.

Lektion 2 • Wichtige Tastenkombinationen und Einstellungen

Behandelt die wirksamsten Tastenkombinationen und Voreinstellungen für einen effizienten Arbeitsablauf. Die hier gewonnene Geschwindigkeit und Genauigkeit zahlt sich in jedem weiteren Kapitel aus.

Lektion 3 • Dateien, Seiten und Projektorganisation

Lehrt, wie man Dateien und Seiten innerhalb von Projekten erstellt, dupliziert und organisiert. Eine ordnungsgemäße Struktur verhindert Verwirrung bei späteren Arbeiten an Multi-Screen-Prototypen.

Lektion 1 • Zeichnen und Bearbeiten grundlegender Formen

Behandelt Rechtecke, Ellipsen, Polygone und das Sternwerkzeug mit ihren Eigenschaften. Diese Grundelemente bilden die Bausteine für jedes später erstellte UI-Element.

Lektion 2 • Vektor-Zeichenstift und Pfadbearbeitung

Führt den Zeichenstift für benutzerdefinierte Vektorpfade und die Manipulation von Ankerpunkten ein. Hier erstellte benutzerdefinierte Symbole und Illustrationen erscheinen in späteren Prototyp-Bildschirmen.

Lektion 3 • Ausrichtung, Verteilung und Abstände

Behandelt Ausrichtungswerkzeuge, intelligentes Verteilen und übersichtliche Abstandskontrollen. Präzise Abstände sind unerlässlich, bevor im nächsten Kapitel das automatische Layout eingeführt wird.

Lektion 4 • Verstehen von Rahmen vs. Gruppen

Erklärt den strukturellen Unterschied zwischen Rahmen und Gruppen und wann man welche verwendet. Rahmen sind die Grundlage für Bildschirme, Komponenten und automatisches Layout.

Lektion 1 • Füllungen, Farbverläufe und Bilder

Behandelt einfarbige Füllungen, lineare und radiale Farbverläufe sowie Bildfüllmodi. Diese Techniken erzeugen während des gesamten Projekts ansprechende Hintergründe und UI-Oberflächen.

Lektion 2 • Aufbau einer typografischen Skala

Lehrt, wie man eine modulare typografische Skala für Überschriften, Fließtext und Bildunterschriften definiert. Eine definierte Skala stellt eine visuelle Hierarchie über jeden Bildschirm des Prototyps sicher.

Lektion 3 • Textstile und Stilverwaltung

Behandelt das Erstellen, Benennen und Anwenden gemeinsamer Textstile in der gesamten Datei. Stilverwaltung reduziert Inkonsistenzen, bevor Komponenten eingeführt werden.

Lektion 4 • Erstellen eines lokalen Farbsystems

Lehrt, wie man primäre, sekundäre, neutrale und semantische Farbwerte als lokale Stile definiert. Zentralisierte Farben ermöglichen sofortige globale Aktualisierungen über alle Rahmen hinweg.

Lektion 1 • Einschränkungen und responsive Rahmen

Behandelt Einschränkungseinstellungen, die das Verhalten von Ebenen bei einer Größenänderung des Rahmens steuern. Einschränkungen in Kombination mit dem automatischen Layout ergeben wirklich responsive Bildschirmdesigns.

Lektion 2 • Verschachteln von Auto-Layout-Rahmen

Lehrt, wie man Auto-Layout-Rahmen verschachtelt, um komplexe, anpassungsfähige UI-Strukturen zu erstellen. Verschachtelte Layouts sind das Rückgrat von Kartenrastern, Navigationsleisten und Formularlayouts.

Lektion 3 • Einführung in das automatische Layout

Erklärt das Kernkonzept von Richtung, Abstand und Innenabstand des automatischen Layouts. Das Verständnis dieses Modells ist erforderlich, bevor eine responsive Komponente erstellt wird.

Lektion 4 • Erstellen responsiver UI-Muster

Wendet automatisches Layout und Einschränkungen an, um eine Navigationsleiste, ein Kartenraster und ein Formular zu erstellen. Diese Muster werden in späteren Kapiteln direkt in Prototyp-Bildschirmen wiederverwendet.

Lektion 1 • Aufbau einer Kern-UI-Komponentenbibliothek

Wendet Komponenten und Varianten an, um Schaltflächen, Eingabefelder, Symbole und Karten zu erstellen. Diese Bibliothek ist die direkte Quelle für alle Bildschirme, die im Prototyping-Kapitel erstellt werden.

Lektion 2 • Komponenteneigenschaften

Behandelt boolesche, Text-, Instanzaustausch- und verschachtelte Instanzeigenschaften von Komponenten. Eigenschaften ermöglichen eine kontrollierte Anpassung, ohne die Komponentenstruktur zu zerstören.

Lektion 3 • Komponentenvarianten

Lehrt, wie man verwandte Komponentenzustände in einem Variantensatz mit benannten Eigenschaften gruppiert. Varianten ermöglichen interaktive Zustandsänderungen in Prototypen, ohne Komponenten duplizieren zu müssen.

Lektion 4 • Erstellen und Verwenden von Komponenten

Behandelt die Umwandlung von Rahmen in Hauptkomponenten und das Platzieren von Instanzen in der gesamten Datei. Komponenten stellen sicher, dass eine einzelne Bearbeitung sofort auf jeden Bildschirm übertragen wird.

Lektion 1 • Prototyp-Verbindungen und Interaktionen

Lehrt, wie man Prototyp-Verbindungen, Auslöser und Ziele zwischen Rahmen hinzufügt. Verbindungen verwandeln statische Bildschirme in einen anklickbaren, navigierbaren Prototypen.

Lektion 2 • Entwerfen wichtiger Anwendungsbildschirme

Wendet die Komponentenbibliothek an, um Onboarding-, Dashboard- und Detailbildschirme zu erstellen. Jeder Bildschirm verwendet das automatische Layout und gemeinsame Stile, die in früheren Kapiteln etabliert wurden.

Lektion 3 • Planen von Bildschirmen und Benutzerabläufen

Behandelt die Abbildung von Benutzerabläufen, die Bildschirminventur und Namenskonventionen vor dem Design. Die Planung verhindert strukturelle Nacharbeiten beim Verknüpfen von Bildschirmen in späteren Abschnitten.

Lektion 4 • Übergänge und Animationseinstellungen

Behandelt sofortige, Überblendungs-, Schiebe-, Push- und Smart-Animate-Übergänge. Angemessene Übergänge vermitteln Navigationsrichtung und Oberflächenverhalten klar.

Lektion 1 • Interaktive Komponenten und Zustandsänderungen

Behandelt die Verwendung von Komponentenvarianten mit Prototyp-Verbindungen zur Simulation von Zustandsänderungen. Interaktive Komponenten reduzieren die Anzahl der für komplexe Abläufe benötigten Rahmen.

Lektion 2 • Scrollen, Überlauf und fixierte Elemente

Lehrt vertikales und horizontales Scrollen, Überlaufbeschneidung und fixierte, haftende Ebenen. Diese Einstellungen replizieren natives Scrollverhalten in mobilen und Web-Prototypen.

Lektion 3 • Bedingte Logik und Aktionen

Lehrt Wenn-Dann-Bedingungen und mehrstufige Aktionssequenzen für Prototyp-Interaktionen. Bedingte Logik ermöglicht verzweigende Abläufe, die echte Entscheidungspunkte von Apps widerspiegeln.

Lektion 4 • Einführung in Figma-Variablen

Behandelt die Erstellung von Variablensammlungen für Zahlen, Zeichenfolgen, boolesche Werte und Farben. Variablen ermöglichen dynamische Daten und Zustandsverwaltung, die im grundlegenden Prototyping nicht verfügbar sind.

Lektion 1 • Usability-Tests mit Prototypen

Behandelt die Planung von Testaufgaben, die Rekrutierung von Teilnehmern und die Durchführung moderierter Sitzungen. Strukturierte Tests generieren umsetzbare Rückmeldungen für den Iterationszyklus.

Lektion 2 • Inspektionsmodus und Asset-Export

Lehrt Entwicklern, wie sie das Inspektionsbedienfeld von Figma nutzen, und Designern, wie sie Assets exportieren. Korrekte Exporteinstellungen gewährleisten pixelgenaue Assets in allen Zielauflösungen.

Lektion 3 • Versionsverlauf und Dateipflege

Behandelt das Speichern benannter Versionen, das Wiederherstellen früherer Zustände und die Pflege einer sauberen Datei im Laufe der Zeit. Die Versionskontrolle schützt die Arbeit und unterstützt iteratives Design über Sprints hinweg.

Lektion 4 • Analysieren von Rückmeldungen und Priorisieren von Änderungen

Lehrt Affinitätsdiagramme, Schweregradbewertung und Änderungspriorisierung aus Testergebnissen. Die Priorisierung stellt sicher, dass die Probleme mit der höchsten Auswirkung vor der Übergabe behoben werden.