Figma – Design / Development-Workflow

In diesem Video zeigen wir euch den grundlegenden Aufbau des Figma Dev Mode anhand des „Simple Design System“, einer von Figma bereitgestellten Demo-Bibliothek. Wir erklären, wie ihr Sprache und Einheiten (CSS, rem/px) einstellt, Abstände zwischen Elementen messt, die Ebenenpalette mit ihrer Farbkodierung (violett = Design-Systematik, blau = Einzelobjekt) nutzt, und Code Snippets sowie Listenansichten für Styling-Werte auslest.

• Minute 0–1: Demo-Datei und Community

• Minute 1–3: Grundstruktur der Oberfläche

• Minute 2–4: Sprache, Einheiten und Abstände messen

• Minute 4–7: Seitenliste und Ebenenpalette

• Minute 7–12: Variablen, Code Snippets und Listenansicht

In diesem Video zeigen wir euch, wie Farben im Figma Dev Mode ausgelesen und organisiert werden. Wir erklären den Unterschied zwischen hart gecodeten Farbwerten und Farben, die über Variablen gesteuert werden. Anhand der Simple-Design-System-Bibliothek demonstrieren wir, wie Farbvariablen in Collections organisiert sind – von primitiven Basisfarben über semantische Mappings bis hin zu Light/Dark-Mode-Varianten. Wir zeigen außerdem, wie ihr Farbwerte in verschiedenen Notationen (Hex, HSL, RGB) anzeigen und den Ursprung einer Farbe bis zur Variablendefinition zurückverfolgen könnt.

• Minute 0–1: Hart gecodete Farben

• Minute 1–4: Variablen und Collections anlegen

• Minute 4–7: Farben in der Design-System-Datei analysieren

• Minute 7–11: Primitive vs. semantische Farbpalette und Praxisworkflow

In diesem Video zeigen wir euch, wie Typografie-Informationen im Figma Dev Mode ausgelesen werden. Wir erklären das Zusammenspiel von Stilen (Pakete aus mehreren Eigenschaften wie Schriftart, -größe, -stärke) und Variablen (einzelne Werte wie die Schriftfamilie). Anhand konkreter Beispiele demonstrieren wir, wie beide Konzepte kombiniert werden, um Typografie global steuerbar zu machen, und welche Detail-Einstellungen wie Trunkation im Dev Mode sichtbar sind.

• Minute 0–2: Grundlegende Schriftinformationen im Dev Mode

• Minute 2–4: Stile vs. Variablen bei Typografie

• Minute 4–7: Kombination von Stilen und Variablen

• Minute 7–9: Design-System-Datei und Detail-Einstellungen

In diesem Video zeigen wir euch, wie Layout-Informationen – Padding, Gap, Flexbox, Grid, Min/Max-Breiten – im Figma Dev Mode ausgelesen werden. Wir erklären, wie das Auto-Layout-Feature in Figma mit Flexbox und Grid im CSS korrespondiert, warum die Qualität der Layout-Informationen direkt von der Vorbereitung im Design Mode abhängt, und wie Variablen für Abstände und Größen auch hier zum Einsatz kommen.

• Minute 0–2: Padding, Gap und Flexbox analysieren

• Minute 2–6: Auto Layout in Figma – Flexbox-Grundlagen

• Minute 6–8: Variablen für Layout-Werte

• Minute 8–11: Flex-Wrap und CSS Grid

• Minute 11–13: Min/Max-Breiten und responsive Konfiguration

In diesem Video zeigen wir euch, wie ihr Komponenten im Figma Dev Mode analysiert. Wir erklären den Unterschied zwischen Instanzen und Originalen (Main Components), wie ihr zum Original navigiert – auch dateiübergreifend –, welche Properties eine Komponente besitzt und wie ihr den Component Playground nutzt, um alle Varianten und Einstellungsmöglichkeiten interaktiv zu erkunden. Außerdem zeigen wir den Outline Mode für eine schnelle visuelle Übersicht der Komponentenstruktur.

• Minute 0–2: Komponenten und Design-Systematik

• Minute 2–4: Instanzen und Navigation zum Original

• Minute 4–7: Original vs. Instanz – Component Information

• Minute 7–9: Component Playground

In diesem Video zeigen wir euch, wie ihr Grafiken – Pixelbilder und vor allem SVGs – aus dem Figma Dev Mode exportiert. Wir erklären den klassischen Export über die Export-Funktion (PNG, JPG, SVG mit Qualitäts- und Farbprofil-Einstellungen), zeigen, wie enthaltene Assets wie Icons automatisch erkannt und einzeln heruntergeladen werden können, und demonstrieren den in der Praxis häufigsten Weg: SVG-Code direkt per Rechtsklick in die Zwischenablage kopieren und in externen Tools wie SVG Viewer weiter optimieren.

• Minute 0–1: Frames als Export-Kontext

• Minute 1–3: Export-Einstellungen und enthaltene Assets

• Minute 3–5: SVG-Export über Ebenenpalette und Code-Bereich

• Minute 5–8: SVG-Code kopieren und optimieren

In diesem Video zeigen wir euch die Kommunikationswerkzeuge im Figma Dev Mode: die Kommentarfunktion und den Audio-Chat. Wir erklären, warum Kommentare immer an Frames angedockt werden sollten, wie Bereichskommentare funktionieren, wie andere Personen per @-Mention benachrichtigt werden und welche Notification-Einstellungen verfügbar sind. Außerdem zeigen wir den integrierten Audio-Chat für direkte Gespräche innerhalb des Dokuments.

• Minute 0–1: Warum Kommunikation im Dev Mode wichtig ist

• Minute 1–3: Kommentare richtig andocken

• Minute 3–5: Screenshots, Threads und Benachrichtigungen

• Minute 5–6: Bereichskommentare und Abgrenzung zu Anmerkungen

• Minute 6–7: Audio-Chat

In diesem Video zeigen wir euch die Anmerkungs- und Abmessungswerkzeuge im Figma Dev Mode. Anmerkungen (Annotations) ermöglichen es, nicht-visuelle Informationen wie Barrierefreiheitsanforderungen, Content-Vorgaben oder Entwicklungshinweise direkt an Elementen zu dokumentieren. Das Measurement-Werkzeug dient dazu, dauerhafte Abmessungslinien im Design zu platzieren – etwa für bewusste Abweichungen oder spezielle Maßangaben, die nicht aus den Code Snippets hervorgehen.

• Minute 0–1: Nicht-visuelle Informationen mitteilen

• Minute 1–3: Anmerkungskategorien und Praxisbeispiel

• Minute 3–4: Measurement-Werkzeug

• Minute 4–6: Anmerkungen mit Properties und bewusste Abweichungen

In diesem Video zeigen wir euch, wie ihr Variablen im Figma Dev Mode analysiert und exportiert. Wir erklären die Variablenübersicht mit ihren Collections (Farben, Typografie, Spacing), den Unterschied zwischen primitiven und semantischen Variablen, die Ordnerstruktur und Namenskonventionen, die Möglichkeit zur manuellen Code-Syntax-Überschreibung und wie ihr Farbnotationen (RGB, HSL) anpasst. Außerdem zeigen wir den nativen Export als JSON sowie Plugin-basierte Exportmöglichkeiten.

• Minute 0–1: Bedeutung von Variablen und Foundations-Seite

• Minute 1–3: Variablenübersicht und Collections

• Minute 3–6: Detailinformationen und Farbnotation

• Minute 6–9: Ordnerstruktur, Gruppen und Code-Syntax

In diesem Video zeigen wir euch, wie ihr Interaktionen, Animationen und Klickstrecken (Flows) im Figma Dev Mode identifiziert und auslest. Wir erklären den Unterschied zwischen Mikroanimationen (z. B. Hover-Effekte in Komponenten) und Nutzerflows (Seitennavigation), warum Interaktionsinformationen nur beim Original (Main Component) sichtbar sind und nicht bei Instanzen, und wie ihr die Schnellvorschau und den Präsentationsmodus nutzt, um Prototypen interaktiv zu testen.

• Minute 0–2: Arten von Interaktionen

• Minute 2–5: Interaktionsinformationen beim Original finden

• Minute 5–7: Vorschau und Präsentation

• Minute 7–10: Flows für Seitennavigation

In diesem Video zeigen wir euch, wie Designsysteme in Figma mithilfe von Bibliotheken strukturiert werden und wie Bibliotheks- und Projektdateien miteinander verknüpft sind. Ihr lernt, wann es sinnvoll ist, eine Bibliothek zu veröffentlichen, wie ihr im Dev Mode auf Komponenten aus externen Quellen zugreift und zur Originalkomponente navigiert. Außerdem zeigen wir euch, wie Bibliotheks-Updates in Projektdateien eingespielt werden – und wo dabei eine wichtige Einschränkung im Dev-Mode-Workflow liegt.

• Minute 0–2 – Einführung: Bibliothek und Projektdatei im Überblick

• Minute 2–4 – Bibliothek veröffentlichen und verknüpfen

• Minute 4–5 – Dev Mode: Externe Komponenten erkennen und navigieren

• Minute 5–6 – Instanz-Änderungen im Dev Mode erkennen

• Minute 6–8 – Bibliotheks-Updates pushen und einspielen

• Minute 8–10 – Einschränkung: Veraltete Stände im Dev Mode nicht erkennbar

In diesem Video zeigen wir euch, wie Variablen, Komponenten, Varianten und Flows in Figma dokumentiert werden können. Wir erklären, wo Beschreibungen hinterlegt werden (Variablen-Details, Component Settings, Flow-Eigenschaften), wie diese im Dev Mode und im Präsentationsmodus sichtbar werden, und warum Dokumentation auch für KI-gestütztes Coding wertvollen Kontext liefert.

• Minute 0–2: Variablen dokumentieren

• Minute 2–5: Komponenten und Varianten dokumentieren

• Minute 5–7: Flows dokumentieren

In diesem Video zeigen wir euch die Versionshistorie in Figma. Wir erklären, wie automatische Speicherpunkte und manuelle Versionen funktionieren, wie ältere Stände angezeigt und verglichen werden können, wie Links zu spezifischen Versionen geteilt werden und wie Kopien früherer Versionen erstellt werden. Alle diese Funktionen stehen sowohl im Design als auch im Dev Mode zur Verfügung.

• Minute 0–2: Versionshistorie öffnen und verstehen

• Minute 2–4: Manuelle Versionen und Navigation

• Minute 4–5: Links, Kopien und Dev-Mode-Verfügbarkeit

In diesem Video zeigen wir euch das Ready-for-Dev-Feature in Figma, das eine komponentenbasierte Versionierung ermöglicht. Wir erklären, wie Objekte im Design als fertiggestellt markiert werden, wie nachträgliche Änderungen im Dev Mode erkannt und verglichen werden können, und welche Unterschiede es zwischen dem Professional-Plan (Ready for Dev auf der Arbeitsfläche) und dem Organisation/Enterprise-Plan (zusätzlicher Focus View mit erweiterter Übersicht) gibt.

• Minute 0–2: Grundprinzip von Ready for Dev

• Minute 2–5: Markierung setzen und Änderungen erkennen

• Minute 5–7: Vorteile gegenüber Dokumentversionierung

• Minute 7–10: Focus View (Organisation/Enterprise)

In diesem Video zeigen wir euch, wie Branches und Merging in Figma funktionieren – ein Konzept, das Entwickler:innen aus der Code-Versionierung bestens kennen. Wir erklären, wie ihr von einer Hauptdatei ausgehend Branches erstellt, um isoliert an Änderungen zu arbeiten, ohne das gesamte Team sofort zu beeinflussen. Dabei gehen wir auf den Review- und Merge-Prozess ein, zeigen, wie ihr Änderungen aus der Hauptdatei in euren Branch übernehmt, und demonstrieren, was passiert, wenn Konflikte entstehen – und wie ihr diese löst. Branches stehen ab dem Organization- bzw. Enterprise-Plan zur Verfügung und sind ein reines Design-Feature, das aber den Design-Development-Workflow direkt betrifft.

• Minute 0–1: Warum Branches?

• Minute 1–3: Grundprinzip von Branches

• Minute 3–5: Branch erstellen

• Minute 5–7: Review- und Merge-Prozess

• Minute 7–10: Updates aus der Hauptdatei übernehmen

• Minute 10–14: Konflikte erkennen und lösen

In diesem Video zeigen wir euch, wie ihr mit Plugins im Figma Dev Mode Exporte optimiert. Wir stellen drei Plugin-Kategorien vor: Export-Plugins (z. B. WebP-Export, SVG-Optimierung), Integrations-Plugins (Verbindung zu externen Tools) und Code-Generierungs-Plugins. Konkret demonstrieren wir den WebP-Exporter für moderne Bildformate, SVG Export für optimierte Vektorgrafiken und ein CSS-Variablen-Export-Plugin für den Export von Design Tokens in CSS, SCSS oder Tailwind.

• Minute 0–1: Plugin-Kategorien und Community

• Minute 1–3: Plugin-Oberfläche und WebP-Export

• Minute 3–5: SVG-Optimierung

• Minute 5–9: CSS-Variablen-Export

In diesem Video zeigen wir euch, wie ihr Projektmanagement-Tools wie Jira oder GitHub Issues direkt mit dem Figma Dev Mode verbindet. Wir demonstrieren am Beispiel von Jira, wie die Verbindung hergestellt wird, wie Issues aus dem Dev Mode heraus erstellt und mit konkreten Frames im Design verknüpft werden, wie die Echtzeit-Synchronisation funktioniert und wie die Figma-Integration auch in Jira selbst sichtbar wird.

• Minute 0–2: Warum Integration wichtig ist

• Minute 2–5: Issues erstellen und verknüpfen

• Minute 5–7: Navigation und Echtzeit-Synchronisation

• Minute 7–9: Figma-Integration in Jira

In diesem Video zeigen wir euch die Code-Generierungs-Plugins (Code Gen) im Figma Dev Mode. Wir ordnen sie zwischen den nativen Figma-Code-Snippets und KI-basiertem Coding ein, zeigen, wie Plugins wie »Figma to Code« HTML- oder Tailwind-Code erzeugen, und demonstrieren den Code Snippet Editor, mit dem manuell Production-Ready-Code für Komponenten hinterlegt werden kann – als Vorläufer des nativen Code-Connect-Features.

• Minute 0–2: Drei Wege zur Code-Generierung

• Minute 2–5: Code-Gen-Plugins nutzen

• Minute 5–10: Code Snippet Editor

In diesem Video zeigen wir euch, wie ihr den Figma Dev Mode direkt in VS Code integriert, um den ständigen Context Switch zwischen Code-Editor und Browser zu vermeiden. Wir demonstrieren die Installation der offiziellen Figma-Extension, die Navigation durch Design-Dateien innerhalb von VS Code, das Auslesen von Styling-Informationen direkt neben dem Code und das Auto-Complete-Feature, das komplette CSS-Codeblöcke aus Figma-Elementen vorschlägt und per Tab übernommen werden können.

• Minute 0–1: Warum VS-Code-Integration

• Minute 1–2: Installation und Einrichtung

• Minute 2–4: Navigation und Dateiansicht

• Minute 4–6: Auto-Complete und Einstellungen

In diesem Video zeigen wir euch, wie der Workflow zwischen Design und Development umgedreht werden kann – indem nicht mehr das Design, sondern der Code als »Single Source of Truth« dient. Wir erklären, warum das klassische Vorgehen (erst Design, dann Code) bei mehreren Zieltechnologien und Rendering-Umgebungen zu Inkonsistenzen führen kann. Anschließend demonstrieren wir mit dem Figma-Plugin »HTML to Design«, wie bestehende Code-Komponenten und Website-Elemente direkt in Figma importiert werden können – inklusive der Nutzung der zugehörigen Chrome-Extension, um gezielt Bereiche einer Live-Website auszuwählen und als Figma-Frames zu übernehmen.

• Minute 0–3: Überblick: Single Source of Truth – Design oder Code?

• Minute 3–5: Plugin-Demo

• Minute 5–7: Import-Prozess und Ergebnis

In diesem Video zeigen wir euch, wie ihr über die MCP-Schnittstelle (Model Context Protocol) Figma-Designs per KI automatisiert in Code überführt. Wir erklären das Grundprinzip von MCP als standardisiertes Protokoll zwischen KI-Tools und Applikationen, demonstrieren die Einrichtung in drei verschiedenen Tools – Cursor, Claude Code und Claude Desktop – und zeigen einen vollständigen agentischen Beispiel-Workflow.

• Minute 0–2: Was ist MCP?

• Minute 2–4: MCP in Figma aktivieren

• Minute 4–7: Einrichtung in Cursor

• Minute 7–10: Claude Code und Claude Desktop

• Minute 6–15: Agentischer Workflow in der Praxis

In diesem Video zeigen wir euch, wie ihr Figma Skills für KI-Agenten nutzen könnt. Wir erklären, was Skills sind, wo ihr sie herunterladen könnt und wie ihr sie in euren KI-Agenten – am Beispiel von Claude Code – einbindet. Zusätzlich zeigen wir euch, wie ein Skill intern aufgebaut ist und wie der Agent ihn erkennt und einsetzt.

• Minute 0 - 2: Was sind Figma Skills?

• Minute 2 - 4: Download und Installation

• Minute 4 - 6: Aufbau eines Skills

• Minute 6 - 8: Skills in Claude Code verwenden

In diesem Video zeigen wir euch das Figma-Feature »Code Connect« in der UI-Variante. Damit lässt sich eine direkte Verbindung zwischen Figma-UI-Komponenten und dem tatsächlichen Production-Ready-Code in einem Repository herstellen. Statt der standardmäßigen Code-Interpretation von Figma sehen Entwickler dann im Dev Mode den echten, getesteten Code ihrer Bibliothek. Wir demonstrieren, wie die Verbindung über die Figma-Oberfläche eingerichtet wird, wie zusätzliche KI-Instruktionen hinterlegt werden können und wie ein KI-Coding-Tool (Claude Code) auf diesen Kontext zugreift.

• Minute 0–1: Problemstellung

• Minute 1–2: Einführung Code Connect

• Minute 2–4: Einrichtung über die Benutzeroberfläche

• Minute 4–6: Zusätzlicher Kontext und Instruktionen

In diesem Video zeigen wir euch die CLI-Variante von Code Connect – die tiefere, kommandozeilenbasierte Integration zwischen Figma-Komponenten und einem Code-Repository. Im Gegensatz zur UI-Variante läuft Code Connect CLI lokal und ermöglicht eine deutlich stärkere Integration in die Repository-Struktur. Wir erklären die Unterschiede zur UI-Variante, zeigen die notwendigen Einrichtungsschritte (Konfigurationsdatei, Access Token, CLI-Tool-Installation) und demonstrieren, wie das Ergebnis im Figma Dev Mode aussieht – mit echtem Code und Dateipfaden direkt in der Seitenleiste.

• Minute 0–1: Überblick: Code Connect

• Minute 1–2: Unterschiede UI vs. CLI

• Minute 2–4: Vorbereitung

• Minute 4–6: Installation und Verbindung

• Minute 6–7: Ergebnis

In diesem Video zeigen wir euch Figmas »Code to Canvas«-Feature, das im Kontext von MCP veröffentlicht wurde. Während der klassische Weg von Design zu Code führt, dreht dieses Feature den Prozess um: Eine fertig gecodete Benutzeroberfläche im Browser wird automatisch in die Figma-Arbeitsoberfläche übertragen. Wir zeigen euch, wie ihr das offizielle Figma-Plugin für Claude Code installiert, eine einfache HTML/CSS-Demo per Prompt in Figma rendern lasst und anschließend sogar Änderungen aus Figma zurück in den Code übertragen könnt – den sogenannten bidirektionalen Workflow.

• Minute 0 - 2: Einführung – Was ist Code to Canvas?

• Minute 2 - 5: Einrichtung des Figma-Plugins für Claude Code

• Minute 5 - 8: Demo-Datei aufbauen – HTML/CSS im Code Editor

• Minute 8 - 11: Code to Canvas in Aktion

• Minute 12 - 15: Bidirektionaler Workflow – Änderungen von Figma zurück in den Code