Figma Dev Mode ist das Offensichtlichste, wonach man greift, wenn ein Designer Arbeit übergibt. Es ist eingebaut, es ist offiziell, es spricht Figmas eigene Sprache. Warum also nach etwas anderem greifen?

Die Antwort ist nicht, dass Dev Mode schlecht ist. Es ist, dass es ein anderes Problem löst. Zu verstehen, was dieses Problem ist — und was nicht — ist der ganze Artikel. Wenn Sie direkt zur Antwort springen möchten, probieren Sie figmascope hier aus.

Was Figma Dev Mode ist

Dev Mode ist Figmas kostenpflichtiger Handoff-Layer, verfügbar in Professional- und Organization-Plänen. Wenn man in ihn wechselt (die </>-Schaltfläche in der oberen Toolbar), erhält man ein Panel, das CSS- oder iOS/Android-Snippets für ausgewählte Layer, Komponenten-Annotationen, Variablenwerte und einen "Ready for Dev"-Statusmarker zeigt, den Designer setzen können.

Es ist für den Moment designed, wenn ein Designer sagt "das ist fertig, bau es." Der Entwickler öffnet Figma, klickt herum, kopiert Snippets, schaut sich Abstände an. Es gibt keinen Export-Schritt. Keine Datei. Man liest das Design einfach direkt.

Figma liefert auch einen offiziellen MCP-Server für Dev Mode (separat — behandelt im MCP-Vergleich), aber Dev Mode als UI ist primär eine menschliche Lese-Erfahrung. Man zeigt, klickt, inspiziert, kopiert.

Die Code-Snippets, die Dev Mode generiert, sind als schnelle Referenzen genuinen Nutzens. Man sieht den Font-Stack, exakte Spacing-Tokens wenn Variablen eingerichtet sind, Border-Radii. Für einen Senior-Entwickler, der nur einen bestimmten Wert überprüfen möchte, ist das schnell.

Was figmascope ist

figmascope ist ein Browser-seitiges Tool — kein Backend, keine Installation, läuft in einem Tab — das ein strukturiertes Kontext-Bundle aus jeder Figma-Datei exportiert. Man fügt eine Figma-URL und ein Personal Access Token ein (im Speicher gehalten, nie an einen Server gesendet), und es produziert ein .zip mit:

Das Bundle sind einfache Dateien. Keine Laufzeit. Kein SDK. Im Repo ablegen, committen, differn, an jeden KI-Agenten übergeben, der Dateien liest.

Der Hauptunterschied zu Dev Mode: Das ist keine Lese-Erfahrung innerhalb von Figma. Es ist ein Export, der Figma komplett verlässt.

Wo Dev Mode gewinnt

Live-Inspektion. Wenn man einen bestimmten Layer anklicken und sofort seinen exakten berechneten Wert bekommen möchte, ist Dev Mode instant. Kein Export-Schritt, kein Zip, kein Kontextwechsel. Die Antwort ist im Panel.

Offizielle Integration. Figma baut es, pflegt es und liefert Verbesserungen zusammen mit dem Rest des Produkts. Variablen-Unterstützung, Annotations-Workflows, Ready-for-Dev-Status — das sind native Features mit erstklassiger Unterstützung. Wenn Figma eine neue Design-System-Fähigkeit hinzufügt, bekommt Dev Mode sie.

Team-Distribution. Jeder Designer und Entwickler mit einem Figma-Org-Plan hat es bereits. Kein zusätzliches Tooling zu installieren, zu erklären oder zu pflegen.

Design-Time-Tooling. Designer können Frames als fertig markieren, Code-Level-Annotationen hinterlassen und mit Entwicklern auf demselben Canvas zusammenarbeiten. Dieser Hin-und-Her ist genuiner Nutzen für QA-Zyklen, bei denen man Kommentare und Statusupdates braucht.

Wo figmascope gewinnt

Agenten-agnostischer, dateibasierter Output. Dev Modes Output lebt innerhalb von Figma. figmascopes Output lebt in einem Zip, das man kontrolliert. Neben den Code legen, Claude Code oder Cursor darauf richten, und der Agent hat die vollständige Spezifikation — alle Screens, alle Tokens, alle Strings — ohne Figma überhaupt zu verbinden.

Versionskontrolle. Ein figmascope-Bundle ist diffbar. Committen. In einen PR packen. Genau sehen, welche Tokens sich zwischen dem Design der letzten Woche und dem heutigen geändert haben. Dev Mode hat kein Konzept von Versionshistorie für die Spezifikation selbst — Figma hat Datei-Versionshistorie, aber das ist für die Quelle, nicht für einen exportierbaren Snapshot der Design-Intention.

Kein kostenpflichtiger Tier erforderlich. figmascope ist MIT-lizenziert und kostenlos. Es verwendet die öffentliche Figma REST API, die nur ein PAT erfordert (kostenlos auf jedem Figma-Konto). Dev Mode erfordert einen Professional- oder Organization-Plan. Für Solo-Entwickler oder kleine Teams, die mit einem Designer auf einem kostenlosen Plan arbeiten, ist figmascope die einzige Option.

Deterministischer Output. Jeder Export derselben Figma-Datei in derselben Version produziert dasselbe Bundle. Dasselbe JSON, dieselben Tokens, dieselben Strings. Das ist wichtig für Reproduzierbarkeit — man kann es in CI laufen lassen, ein Bundle an ein Release pinnen, Regressionstests dagegen durchführen.

Portabel und offline. Sobald man das Bundle hat, funktioniert es ohne Verbindung zu Figma oder irgendeinem Server. Der Agenten-Kontext ist in sich geschlossen. Nützlich wenn man im Flugzeug sitzt, hinter einer Firewall ist oder einfach nicht von Figmas Uptime während eines Build-Sprints abhängen möchte.

IR bewahrt räumliche Semantik. Die screens/*.json-Intermediate Representation erfasst Layout-Art (stack, overlay, absolute), Komponentenidentität (componentId auf INSTANCE-Knoten) und Text-String-Referenzen — nicht nur berechnetes CSS. Ein Agent kann über Layout-Struktur nachdenken, nicht nur Snippets kopieren.

Seite an Seite: dieselbe Figma-Datei

Nehmen wir einen Login-Screen mit einem Formular, einem primären Button und einigen Text-Tokens. Das gibt jedes Tool:

Dev Mode Output: CSS-Eigenschaften für den angeklickten Layer (font-size: 16px; color: #1f1d1a; border-radius: 8px). Ein Layer auf einmal. Man kopiert, was man braucht. Wenn man alle Button-Zustände haben möchte, klickt man jeden einzeln an. Wenn man den Token-Namen möchte, ist er da, wenn der Designer Variablen verdrahtet hat — andernfalls fehlt er.

figmascope Bundle Output: CONTEXT.md mit der vollständigen Login-Screen-Spezifikation. tokens.json mit color.text.primary, spacing.4, radius.md — gekey-t, typisiert, aus Variablen oder abgeleitet. screens/login.json mit dem IR-Baum: ein Stack-Container der eine Formular-INSTANCE hält und componentId: "abc123" referenziert, Kind-Leaf-Knoten mit stringRef.key: "auth.login.cta". strings.json mappt diesen Key auf "Anmelden". screens/login.png in 2×.

Das Bundle an Cursor übergeben. Es liest CONTEXT.md, zieht Token-Namen aus tokens.json, baut die Komponente aus dem IR. Es muss Figma überhaupt nicht öffnen.

Vergleich

Dimension Figma Dev Mode figmascope
Preis Kostenpflichtig (Professional / Org Plan) Kostenlos, MIT Open Source
Output-Format In-Figma-Panel, CSS/iOS/Android-Snippets .zip: CONTEXT.md, tokens.json, screens/*.json, *.png
Integrationsmodell Innerhalb der Figma-UI, per-Layer-Inspektion Browser-Export, dann einfache Dateien überall
Agenten-kompatibel Via MCP-Server (separates Feature) Jeder Agent, der Dateien liest (Claude Code, Cursor, Aider, Copilot…)
Versionskontroll-freundlich Nein (Output lebt in Figma) Ja — Bundle ist diffbar, committable
Deterministischer Output Nein (per-Klick, session-gebunden) Ja — gleiche Dateiversion → gleiches Bundle
Offline / portabel Nein — erfordert Figma-Verbindung Ja — Bundle funktioniert ohne Verbindung
Design-Time-Annotation Ja — ready-for-dev, Kommentare Nein
Räumliches / Layout-IR Nein — flaches CSS für ausgewählten Layer Ja — stack/overlay/absolute/leaf mit Komponentenidentität
Token-Quellen Aus Figma-Variablen wenn gesetzt Figma-Variablen → aus Häufigkeit abgeleitet → keines
i18n-String-Keys Nein Ja — stringRef.key in IR + strings.json
Plugin-Installation erforderlich Nein (in Figma eingebaut) Nein (Browser-Tab, REST API)

Wann jedes verwenden

Dev Mode verwenden wenn: man einen bestimmten Wert spot-checken möchte, man mitten in einem Design-Review ist und einen Token nachschlagen möchte, das Team bereits auf einem kostenpflichtigen Figma-Plan ist und in Figma lebt, oder man den Annotations-Workflow des Designers und Ready-for-Dev-Statusmarker möchte.

figmascope verwenden wenn: man Kontext an einen KI-Agenten für einen Build-Sprint übergibt, man die Design-Spezifikation neben Code versionieren möchte, man auf einem kostenlosen Figma-Plan ist, man das vollständige Layout-IR braucht (nicht nur per-Layer-CSS), oder man deterministischen, reproduzierbaren Output möchte, den man an ein Release pinnen oder in einem PR differn kann.

Sie schließen sich nicht gegenseitig aus. Dev Mode für die Inspektion während des Bauens verwenden, figmascope-Bundles exportieren, um die Design-Spezifikation im Repo zu verankern. Die beiden konkurrieren nicht — sie decken verschiedene Teile des Workflows ab.