Vision / Spec

Custom Figma-Plugin

Nächste Stufe nach dem Figma MCP — ein eigenes Plugin, das CP Registry nativ in Figma verfügbar macht. Was es können soll, wieviel Aufwand es ist, ob's sich lohnt.

Was das Plugin können soll

Werkstatt-Konfig importieren

Plugin-Sidebar in Figma: Liste aller gespeicherten Werkstatt-Konfigs. Klick → Plugin generiert ein Frame in Figma mit allen Blöcken und echten Texten. Editor-Mockups in 5 Sekunden statt 30 Minuten.

Frame als Werkstatt-Konfig exportieren

Designer baut in Figma. Plugin-Button: "Als Werkstatt-Konfig exportieren". Plugin walked die Frame-Hierarchie, erkennt Components, schreibt JSON, speichert via API. Werkstatt-URL wird zurueckgegeben.

Code-Connect Live-View

Wenn Designer einen Component anklickt, zeigt das Plugin den Astro-Code rechts. Mit "Kopieren"-Button. So kann Frontend per Eyedropper den Code aus Figma übernehmen.

Token-Anwender

Selektiere Elemente, klicke auf einen Token-Wert ("Brand Primary 500"), und alle ausgewaehlten Elemente bekommen die Variable zugewiesen — niemals hartcodierte Hex-Werte.

Sanity-Checks

Plugin scant das aktuelle Frame: harte Hex-Werte, Schriftgrößen außerhalb der Skala, Spacing nicht aus den Tokens. Listet Probleme auf.

Briefing-Modus

Plugin generiert aus einem Figma-Frame ein Brief-Dokument für Frontend: alle benoetigten Components, alle Tokens, alle Texte. Als Markdown, in Slack-postable.

Architektur

Figma-Plugins sind im Wesentlichen sandboxed JavaScript mit Zugriff auf die Figma-API. Ein modernes Plugin-Setup:

Build-Toolchain: Vite + TypeScript. UI als kleine React-/Preact-App, Plugin-Worker als reines TS.
UI-Layer: Plugin-Sidebar mit Werkstatt-Konfig-Liste, Token-Picker, Sanity-Check-Output.
Worker-Layer: Liest und schreibt Figma-Nodes (Frames, Text, Variables) über die offizielle Figma Plugin API.
API-Layer: spricht mit der CP-Registry-API (gleicher Endpunkt wie Werkstatt — /api/werkstatt/configs).

Was es nicht ersetzt

Figma-MCP-Server: Das Plugin lebt im Figma-Browser-Kontext. Der MCP-Server lebt in Claude Code. Beide ergänzen sich — Plugin für Designer, MCP für Frontend.
Code-Connect: Code-Connect ist Figma-Standard für Code-Snippet-Mapping. Unser Plugin nutzt Code-Connect-Daten, ersetzt sie aber nicht.

Aufwand-Schätzung

Schritt	Aufwand	Wer
1. Plugin-Skeleton + Build-Pipeline	~2 Tage	Frontend
2. Werkstatt-Konfig-Import (Lese-Richtung)	~3 Tage	Frontend
3. Konfig-Export (Schreib-Richtung)	~5 Tage	Frontend
4. Token-Anwender (Variables-API)	~2 Tage	Frontend
5. Code-Connect-Integration	~3 Tage	Frontend (mit Code-Connect-Skill)
6. Sanity-Checks	~2 Tage	Frontend
7. Plugin-Submission im Figma-Marketplace	~1 Tag	Frontend / Design
Summe	~3 Wochen (Vollzeit)	—

Status

Aktuell nicht implementiert. Diese Seite dokumentiert die Vision, damit beim späteren Bauen klar ist, was rein muss. Empfehlung: Erst die Figma-MCP-Pipeline (siehe Figma-Workflow) ausreizen — wenn das stabil läuft und genutzt wird, lohnt sich das Plugin.