Figma – Design / Development-Workflow

In diesem Figma-Training lernen Developer, Designer und Team-Leads, wie Figma und der Dev Mode optimal genutzt werden, und wie beide Seiten dazu beitragen, dass der Workflow reibungslos funktioniert.

Von Design zu Dev und KI. Ein umfassender Einblick in Figmas Dev Mode und den Hand-Off-Prozess.

Figma ist das zentrale Design-Tool für digitale Produkte wie Websites, Web-Anwendungen, Apps und Shops jeglicher Größenordnung. Das Tool richtet sich zwar in erster Linie an Design-Teams, doch mit mächtigen Funktionen für Kollaboration, dem Dev Mode, der MCP-Schnittstelle für KI-Tools und Features wie Branches schlägt es die Brücke zwischen Design, Development und Projektmanagement. Figma hat die Entwickler-Zielgruppe klar erkannt und baut den Dev Mode daher immer weiter aus.

Schade nur, dass viele Teams die Entwickler-Funktionen von Figma nur sehr oberflächlich kennen. Und das obwohl sie selbst oder ihre Unternehmen für die Lizenzen viel Geld bezahlen. Das möchte ich mit diesem Training ändern. Ich zeige Stück für Stück wie Figma beim HandOff im Dev Mode genutzt werden sollte, welche Features es gibt und wie die Code-Qualität positiv beeinflusst werden kann. Dabei behandle ich auch fortgeschrittene Themen wie die Einrichtung von MCP, die Verknüpfung von Figma-Komponenten mit echtem Code und Branches als Versionierungskonzept für Design-Dateien.

Auch für Designer ist das Training relevant, denn auch sie sollten wissen, welche Informationen im Dev Mode angezeigt werden. Neben einer systematisch aufgebauten Design-Datei spielt das Wissen über die Funktionsweise von digitalen Produkten eine große Rolle. Neben den reinen Figma-Features erkläre ich daher auch einige grundsätzliche Dinge, die hilfreich sind um Webprojekte so zu gestalten, dass sie auch gut technisch umgesetzt werden können. Gerade die Dokumentation von Komponenten, Variablen und Flows gewinnt durch KI-gestützte Workflows enorm an Bedeutung.  Je besser der Kontext in der Design-Datei, desto besser die automatisch generierten Ergebnisse.

Auch für POs- und Team-Leads ist das Training relevant: Themen wie Ready for Dev, Versionierung, Issue-Tracker-Anbindung und KI-gestützte Code-Generierung betreffen die gesamte Teamorganisation und helfen, informiert über Workflow-Änderungen zu entscheiden.

Inhalte (4 Std. 17 Min. Gesamtdauer)

Einleitung und Überblick

• Intro (2:04)
• Lizenzen, Zugriff und erste Orientierung (9:03)

Dev Mode Features

• Den Figma Dev Mode verstehen: Aufbau, Navigation und Werkzeuge (11:58)
• Farbe-Systematik im Figma Dev Mode: Variablen, Collections und Workflows (10:59)
• Typografie im Dev Mode: Stile, Variablen & Co. (9:52)
• Layout-Informationen auslesen: Von Auto Layout zu Flexbox und Grid (12:59)
• Grafiken und SVG aus Figma exportieren (8:12)
• Figma-Komponenten analysieren: Instanzen, Originale und der Component Playground (9:49)
• Kommunikation in Figma: Kommentare, Benachrichtigungen und Audio-Chat (7:23)
• Anmerkungen und Abmessungen in Figma: Nicht-visuelle Informationen dokumentieren (6:29)
• Variablen im Dev Mode: Analyse, Struktur und Export-Workflows (19:38)
• Prototypen, Flows und Animationen-Einstellungen im Dev Mode auslesen (13:16)

Workflow

• Figma-Bibliotheken: Struktur, Updates und Dev-Mode-Besonderheiten (9:50)
• Dokumentation in Figma: Variablen, Komponenten und Flows beschreiben (7:48)
• Versionierung in Figma (5:20)
• Ready for Dev & Focus View (14:08)
• Branches und Merging in Figma – Versionierung ähnlich wie im Development (14:02)

Plugins und Integrationen

• Überblick über Plugin und Exporte mittels Erweiterung optimieren (8:53)
• Figma und Projektmanagement: Jira, GitHub Issues und nahtlose Integration (9:25)
• Code-Generierungs-Plugins (10:28)
• Figma Dev Mode in VS Code (6:31)
• HTML to Design: Wenn der Code zur Single Source of Truth wird (7:17)

Figma Dev Mode und AI

• MCP und Figma: Design-Dateien per KI in Code überführen (25:38)
• Code Connect UI (9:01)
• Code Connect CLI (7:12)