Seminar/Schulung: Figma Design, AI, Dev Mode
In dieser Schulung lernen Design- & Development-Teams, wie mit Figma flexible Komponenten und Layouts erstellt und in Bibliotheken und Design Systemen organisiert werden. Wir gestalten, animieren und präsentieren hochwertige visuelle Prototypen und erklären, was bei der Übergabe von UX/UI an ein Dev-Team oder an KI-Agenten beachtet werden muss.
Kurzbeschreibung
Figma hat die Design-Welt im Sturm erobert und steht nun seit einigen Jahren auf Platz 1 der beliebtesten Tools für UX/UI Design. Figma bietet erstklassige Funktionen für die Gestaltung und das Prototyping von Websites und Apps und hat es geschafft, den Design-Prozess kollaborativ und humorvoll zu gestalten.
Figma dient dabei als zentraler Hub für das gesamte Team und bringt Menschen aus dem Design, der Entwicklung, dem Marketing und der Projektleitung in der Cloud zusammen. Funktionen für künstliche Intelligenz beschleunigen lästige oder zeitintensive Arbeiten und vereinfachen die Zusammenarbeit zwischen Design und Entwicklung. Mächtige Features zur Kommunikation und zum Durchführen von Workshops im Browser runden das Gesamtpaket ab.
In unserer Figma-Schulung beschäftigen wir uns mit allen wichtigen Funktionen des Tools. Neben den programmspezifischen Features, vermitteln wir das notwendige Mindset zur Gestaltung digitaler Produkte.
Direkt starten? Unser Video zu Dev Mode und Hand-Off
Inhalte unserer Figma-Schulung
Die folgenden Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig angefragt. Gerne passen wir die Agenda auf Ihre individuellen Anforderungen hin an, bzw. beziehen aktuelle Praxisprojekte mit ein. Wir stimmen uns dazu im Vorfeld der Schulung persönlich mit Ihnen ab.
Figma administrieren
- Überblick über alle Figma-Tools sowie die Verbindung der Tools untereinander (Design inkl. Dev Mode, Figjam, Make, Buzz, Slides, Weave, Motion … )
- Workspaces, Teams, Personen und Projekte administrieren
- Lizenzen, Pläne & Tokens: Entscheidungshilfe zur kosteneffizienten Nutzung
- Datenstandort & Connected Projects
Figma Design effizient verwenden
- Die Benutzeroberfläche
- Dateiorganisation, Versionierung & Co.
- Pages, Sections und Frames anlegen und organisieren
- Elemente zeichnen, Screens gestalten und Icons entwerfen
- Farben, Filter und Verläufe einsetzen
- Typografie und Textgestaltung
Design Systematiken nutzen
- Gestaltungsraster, Spacing & Co.
- Farben, Schriften und Effekte in Stilen organisieren
- Variablen, Design Tokens & Co.
- Modes organisieren (Light/Dark, Small/Large etc.)
Modulares Design & Komponenten
- Komponenten vs. Instanzen
- Komponenten erstellen und in Bibliotheken organisieren
- Varianten von Komponenten erstellen
- Interaktive Komponenten (Mouse Over-Effekte etc.)
- Erweiterte »Component Properties« einsetzen: »Text«, »Instance Swap«, »Boolean«, »Slot« und »Exposed Properties from nested instances«.
Auto-Layout, Responsive & Intrinsic Design
- Horizontale & vertikale Layouts
- Grid Layouts
- »Resizing« & »Contraints«
- Absolute Positionierung
- Min/Max-Width & Co.
Prototyping und Animation mit Figma
- Scrolling-Effekte und Viewport-Einstellungen
- Frames verknüpfen und Übergangseffekte wählen
- Übergänge gestalten
- Flows erstellen und organisieren
- Prototypen präsentieren
- Animationen gestalten: Smart Animate, Figma Motion etc.
- Vibe Prototyping mit Figma Make
- Advanced Prototyping: Variablen, If/Else & Co.
Figma Dev Mode / Figma für Entwickler
- Style Guides und Datenübergabe an die Entwicklung
- Dateien untersuchen, »Component Playground« & Code-Export
- Dev Mode, Dev Plugins und Integration in den Code-Editor
- Code Layers
Workflow-Optimierung in Figma
- Bibliotheken und UI-Kits verwalten und im Team bearbeiten
- Freigabeeinstellungen
- Kollaboration: Prototypen gemeinsam besprechen, Chat, Audio, Kommentare einfügen etc.
- Empfehlungswerte Plugins & generative Plugins
KI-Features von Figma
- KI-Workflows innerhalb von Figma Design
- Design Agents – mit dem integrieren Agenten in Figma arbeiten
- Unterstützung im Design (Bildgenerierung und Optimierung, Texterstellung etc. )
- Dateiorganisation (Automatisches Aufräumen von Dokumenten etc.)
- Automatisches Erstellen von Prototypen
- KI-spezifische Tools der Figma-Suite wie Make, Weave usw.
- Design Systeme in Figma so vorbereiten, dass sie mittels agentischem Coden möglichst »Production Ready« umgesetzt werden können (Code Connect etc.)
- Figma MCP in Kombination mit KI-Agenten (z.B. Claude.ai bzw. Claude Code)
- Figma Designs mit KI in Code überführen (Design → Code)
- Code-Komponenten in Figma zurückführen (Code → Design)
- Bidirektionale Workflows (Code → Design → Code … )
- Figma-Dateien mittels Prompt aufbauen
- Agent Skills
- Figma & Claude Design
Dozent: Jonas Hellwig
