Die Designerin Christine Vallaure hat am 26. Oktober im UX Collective beschrieben, wie sie ihre Figma-Bibliothek aus dem Code eines Design-Systems erzeugt, statt wie üblich vom Entwurf zum Code zu gehen.[1]
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenInhalt 5 Abschnitte
Als Brücke dient der MCP-Server Figma Console MCP von Southleft, den ein KI-Assistent wie Claude Code bedient.[1]
Das Wichtigste in Kürze
- Der Code gilt als einzige Wahrheit, Figma ist die Kopie und bei Abweichungen im Unrecht.[1]
- Erst entstehen Tokens und Textstile, dann zwei Testkomponenten, dann die ganze Bibliothek.[1]
- Eine Datei GAPS.md hält fest, was Figma nicht ausdrücken kann.[1]
- Figma Console MCP ist kostenlos und steht unter MIT-Lizenz.[2]
Warum scheitert der Weg von Figma zu Code mit KI?
Eine KI nimmt die Figma-Datei als vollständige Anweisung und füllt jede Lücke mit dem, was ihr plausibel erscheint.
Vallaure hat verglichen, was eine React-Komponente und was eine Figma-Komponente ausdrücken kann. Ihr Ergebnis: rund 17 Prozent bei der Komponenten-Logik und rund 45 Prozent bei CSS. Vallaure betont, dass es ihre eigene Auszählung ist.[1]
Fokusreihenfolge, Fehlerzustände, Ansagen für Screenreader und leere Listen stehen in keiner Figma-Datei. Ein Entwickler fragt nach, die KI erfindet.[1] Weil ein Screenshot davon nichts zeigt, fällt es im Review kaum auf.
Wie entsteht die Figma-Bibliothek aus dem Code?
Vallaure braucht dafür ein Design-System im Code mit Storybook, eine leere Figma-Datei und eine MCP-Anbindung.
Zuerst überträgt die KI Tokens und Textstile mit denselben Namen wie im Code, dann baut sie zwei Testkomponenten, bei Vallaure Button und Alert. Erst danach läuft die gesamte Bibliothek.[1] Alles, was Figma nicht ausdrücken kann, schreibt die KI in die Datei GAPS.md, die Vallaure als nützlichsten Teil bezeichnet.[1]
Den Abgleich übernimmt kein Sprachmodell: Storybook liefert eine Liste aller Komponenten samt Eigenschaften, ein zweiter Auszug kommt aus Figma. Ein Skript vergleicht beide Listen Name für Name und Wert für Wert und markiert Abweichungen rot.[1] Die KI stößt den Lauf nur an. Geprüft werden bislang Struktur, Namen und Standardwerte, nicht das CSS.[1]
Eckdaten
Was Figma gegenüber Code ausdrücken kann (Vallaures eigene Auszählung)
Ein Design-System mit zwei Wahrheiten hat am Ende keine.
Markus Seyfferth, Chefredakteur Dr. Web
Was kostet der Weg, und wo hakt er?
Figma Console MCP kostet nichts: Das Projekt steht unter MIT-Lizenz, die aktuelle Version 1.46.0 erschien am 29. Oktober, auf GitHub zählt es 3.199 Sterne.[2] Es läuft lokal per npx und schreibt Variablen über das Plugin-Interface von Figma. Laut Dokumentation klappt das auf jedem Figma-Tarif, während die offizielle Variablen-Schnittstelle einen Enterprise-Tarif voraussetzt.[3]
Der offizielle Figma-MCP-Server hat laut derselben Dokumentation ein eigenes Werkzeug zum Lesen von Variablen, geschrieben wird über frei ausführbaren Plugin-Code.[3] Vallaure warnt vor drei Fallen: nie in der Live-Bibliothek arbeiten, gelöschte Varianten nie neu anlegen, weil Instanzen sich nicht wieder verbinden, und jede Komponente einzeln prüfen.[1] Den Abgleich startet Vallaure bisher von Hand.[1]
Was bedeutet das für Agenturen und Inhouse-Teams in der DACH-Region?
Der Ansatz lässt sich ohne Risiko an einer Kopie testen, bevor ein Team ihn für die Live-Bibliothek erwägt.
Fragen Sie Ihre Entwickler zuerst nach einer Sandbox und nach Storybook, denn ohne beides fehlt die Komponentenliste für den Abgleich. Übertragen Sie dann zwei Komponenten und lesen Sie die GAPS.md gemeinsam durch. Wie KI-tauglich Bibliotheken schon heute sind, prüft der Open Design System Bench, wie schnell sie laden, zeigt Den Odells Messung. Ein Skill kann außerdem Code auf Ihrem Rechner ausführen, deshalb installieren Sie nur Skills von Quellen, denen Sie vertrauen.[1]
Quellen
3 Quellen anzeigenQuellen ausblenden
- Christine VallaureBuilding an AI-ready design system library: Code → Figma with MCP. (UX Collective)
- Southleftfigma-console-mcp (GitHub, Stand 8. November 2026, Version 1.46.0, MIT-Lizenz)
- SouthleftFigma MCP vs. Figma Console MCP (Dokumentation)
Mehr Newshunger?
- Open Design System Bench: Wie KI-tauglich ist Ihr Design-System?
- Designsysteme sollten von Haus aus schnell sein: Den Odell misst zehn Bibliotheken
- Desigma: Kostenlose Figma-Alternative in Rust läuft offline und ohne Konto
- Pure UI im Zeitalter der KI-Agenten: Warum der Agent nur einen von 16 Zuständen sah
- Craftwork: UI-Kits, Vorlagen und Schriften von Designern direkt im KI-Agenten
- Die Softwarefabrik hat das Design vergessen: Atif Azam lässt KI-Agenten erst in Paper entwerfen
