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. 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.