Am 23. September hat Figma offiziell seinen Remote-MCP-Server (Model Context Protocol) vorgestellt. Dieses innovative Werkzeug entkoppelt sich vollständig von der Figma-Client-Anwendung und ermöglicht es KI-Codierungs-Agenten, nahtlos in den Design-Kontext einzusteigen. Unabhängig davon, ob im IDE, Browser oder mobilen Gerät, benötigt der Benutzer nur eine einfache Berechtigung, um die hohe Fidelität des Entwurfs in Produktionscode zu übertragen. Dieses Update beschleunigt nicht nur den Prozess von Prototypen zu Produkten, sondern markiert auch die tiefgreifende Integration von Design-Systemen und Frontend-Entwicklung und führt die Branche in eine neue Ära der „reibungslosen“ Zusammenarbeit.
Details der Kernverbesserungen: Fernzugriff, designbezogene Kontexte jederzeit zugänglich
Der Kern von Figma MCP Server besteht darin, dass er ein standardisiertes Protokoll unterstützt, wodurch KI-Modelle direkt die semantischen Informationen der Designdateien „lesen“ können, anstatt auf Screenshots oder manuelle Beschreibungen angewiesen zu sein. Die neueste Version bringt mehrere wichtige Funktionen mit:
Fernzugriff ohne Client: Früher musste man die Figma Desktop-Anwendung installieren, um einen lokalen Server auszuführen. Jetzt reicht es aus, die Server-URL (https://127.0.1:3845/sse) in unterstützten KI-Tools (wie Cursor, Claude Code, VS Code oder Windsurf) hinzuzufügen. Mit einem Klick auf der Webseite kann die OAuth-Berechtigung erfolgen und so jederzeit auf die Designdaten zugegriffen werden. Diese Verbesserung ist besonders für verteilte Teams geeignet, da sie das lästige Installieren über Geräte hinweg vermeidet.
Nahtlose Integration mit Figma Make: Der Server unterstützt das direkte Extrahieren von Ressourcen aus Make-Dateien und wandelt interaktive Prototypen in Code-Level-Assets um. Die KI kann automatisch reagierende Layouts, Design-Tokens und Interaktionsdetails analysieren, um sicherzustellen, dass der generierte Code den Produktvorgaben entspricht.
Optimierung der UI-Komponentenzuordnung von Code Connect: Ein neues natives Zuordnungsinterface wurde eingeführt, mit dem Benutzer im Figma direkt Designkomponenten mit dem Frontend-Code-Repository verknüpfen können. Je höher die Komponentennutzung bei einem Team mit etabliertem Designsystem, desto näher liegt die Wiederherstellung des Frontend-Codes bei 100%. Zum Beispiel kann die Eingabe „Wandle diesen Entwurf in ein React-Komponente um“ dazu führen, dass die KI den vollständigen Code mit Variablen, Stilen und Layouts liefert.
Diese Funktionen werden durch das MCP-Protokoll standardisiert, sodass KI-Agenten wie GPT5Codex oder Claude „verstehen“ können, was der Entwurf bedeutet, und nicht einfach nur Pixel kopieren. Frühe Tests zeigen, dass die Entwicklungszyklen um 60 % bis 80 % verkürzt werden können.
Handbuch zur Nutzung: Drei Schritte, um KI sofort „deinen Entwurf verstehen“ zu lassen
Die Einrichtung ist effizient und einfach und gilt für Nutzer ab Professional-Plan:
1. Aktivieren Sie den Server: Aktivieren Sie im Figma-Web-Interface den Dev Mode MCP-Server oder verwenden Sie direkt den Remote-Modus.
2. Fügen Sie ihn in Ihr KI-Tool hinzu: Geben Sie in den MCP-Einstellungen von Cursor oder Claude Code die Figma-Server-Konfiguration ein und autorisieren Sie Ihr Konto. Alle Tools, die das SSE-Protokoll (Server-Sent Events) unterstützen, sind kompatibel.
3. Code generieren: Fügen Sie den Figma-Link ein, und die KI extrahiert automatisch die Komponentenhierarchie, die automatischen Layoutregeln und die Design-Tokens und gibt den Code für Frameworks wie Tailwind oder React mit einem Klick aus. Hinweise wie „Optimiere dieses Layout für Mobilgeräte“ können die Ausgabe weiter verfeinern.
Hinweis: Kostenlose Nutzer haben vorerst keinen Zugang und müssen auf Professional- oder Enterprise-Plan upgraden. Figma betont, dass der Server den SOC2-Sicherheitsstandards entspricht und dass die Benutzerdaten ausschließlich für den Kontextdienst genutzt werden und nicht am Modelltraining teilnehmen.
Markteinfluss: AI-Agenten-Ökosystem wird beschleunigt, Zusammenarbeit wird verdoppelt
Diese Updates greifen direkt auf das Problem der Trennung zwischen Design und Entwicklung. In der Vergangenheit dauerte das manuelle „Übersetzen“ von Entwürfen oft mehrere Stunden; heute macht der MCP-Server die KI zum Brücke, insbesondere in Projekten mit vielen Komponenten, sodass Frontend-Entwickler hochfidelisierten Code in einem Schritt generieren können. Branchenfeedback zeigt, dass Unternehmen wie Affirm bereits damit ihre Produktprozesse neu gestaltet haben und die Entwicklungszeiten um „Größenordnungen“ erhöht wurden.
Figmas Schritt stärkt auch die Rolle von MCP in der KI-Toolkette. Die Integration mit Chrome DevTools MCP und Windsurf baut weiterhin ein Ökosystem auf, in dem „Design-Kontext überall verfügbar“ ist. In Zukunft plant Figma, die Unterstützung auf mehr Code-Repositories und Browser-Integrierung auszuweiten und somit „vibe coding“ (intuitives Codieren) zur Norm zu machen.
Weitere Informationen: https://www.figma.com/blog/design-context-everywhere-you-build/
