Figma Code Connect UI: Komponenten mit »Production Ready« Code verknüpfen
Von: Jonas Mit dem Figma-Feature »Code Connect UI« 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 seht ihr dann im Dev Mode den echten, getesteten Code ihrer Bibliothek.
Video
Das Problem: Interpretation statt Production Code
Wenn Entwickler im Figma Dev Mode eine Komponente inspizieren, zeigt Figma eine Code-Interpretation an – einen automatisch generierten Vorschlag, wie die Komponente umgesetzt werden könnte. Dasselbe passiert beim agentischen Coden: Die KI erfindet den Code jedes Mal neu, basierend auf der visuellen Darstellung.
In vielen Organisationen existiert jedoch bereits eine getestete, produktionsreife Code-Bibliothek mit fertigen Komponenten. Der automatisch generierte Code von Figma ist in solchen Fällen bestenfalls ein Näherungswert – im schlimmsten Fall führt er zu Inkonsistenzen und Mehraufwand.
Code Connect: Die Brücke zwischen Design und Code
Figma bietet mit »Code Connect« ein Feature, das genau dieses Problem löst. Es stellt eine direkte Verbindung zwischen UI-Komponenten in der Figma-Library und den dazugehörigen Code-Dateien in einem Repository her. Sobald diese Verbindung besteht, sehen Entwickler im Dev Mode nicht mehr Figmas Interpretation, sondern den tatsächlichen Code ihrer Organisation.
Voraussetzung ist eine Organisation- oder Enterprise-Lizenz von Figma. Das Feature ist in den unteren Lizenzmodellen nicht verfügbar.
Einrichtung über die Benutzeroberfläche
Die Verknüpfung erfolgt im Dev Mode über den Menüpunkt »Library → Connect Components to Code«. Figma zeigt eine Liste aller Komponenten der aktuellen Bibliothek an. Für jede Komponente kann eine URL zur entsprechenden Code-Datei in einem Repository hinterlegt werden.
Besonders komfortabel wird es mit einer GitHub-Verbindung: Figma erkennt dann die Repository-Struktur und ermöglicht eine direktere Auswahl der passenden Dateien. Grundsätzlich funktioniert das Feature aber auch mit beliebigen URLs, die nicht auf GitHub liegen.
Sobald die Verbindung hergestellt ist, wird die Komponente in der Übersicht als „connected“ markiert und im Dev Mode erscheint der Verweis auf die verknüpfte Code-Datei.
KI-Instruktionen für gezielte Steuerung
Ein besonders nützliches Feature ist die Möglichkeit, pro Verbindung zusätzliche Anweisungen für KI-Tools zu hinterlegen. Diese »Instructions« werden gelesen, wenn eine KI die Komponente umsetzen soll. So lässt sich sicherstellen, dass KI-gestützte Workflows nicht blind arbeiten, sondern kontextbewusst agieren.
Integration mit KI-Coding-Tools
Über das Model Context Protocol (MCP) können KI-Tools wie Claude Code auf den Figma-Kontext zugreifen. In der Praxis bedeutet das: Man kopiert den Link zu einer Figma-Komponente, gibt Claude Code & Co. den Auftrag, diese Komponente zu bauen, und das Tool liest automatisch den hinterlegten Code sowie die Instructions aus.
Die KI greift dann nicht auf eine neue Interpretation zurück, sondern nutzt den tatsächlichen Production-Ready-Code als Basis – ergänzt um die spezifischen Anweisungen, die für diese Komponente hinterlegt wurden.
