Geben Sie Cursor und anderen KI-gestützten Codierungstools mit diesem Model Context Protocol- Server Zugriff auf Ihre Figma-Dateien.
Wenn Cursor Zugriff auf die Figma-Designdaten hat, ist er bei der präzisen Erstellung von One-Shot-Designs weitaus besser als bei alternativen Ansätzen wie dem Einfügen von Screenshots.
Demo
Sehen Sie sich eine Demo zum Erstellen einer Benutzeroberfläche in Cursor mit Figma-Designdaten an
Related MCP server: Talk to Figma MCP
So funktioniert es
Öffnen Sie den Chat Ihrer IDE (z. B. Agentenmodus im Cursor).
Fügen Sie einen Link zu einer Figma-Datei, einem Figma-Frame oder einer Figma-Gruppe ein.
Bitten Sie Cursor, etwas mit der Figma-Datei zu tun, z. B. das Design zu implementieren.
Cursor ruft die relevanten Metadaten von Figma ab und verwendet sie zum Schreiben Ihres Codes.
Dieser MCP-Server ist speziell für die Verwendung mit Cursor konzipiert. Bevor er mit Kontext aus der Figma-API antwortet, vereinfacht und übersetzt er die Antwort, sodass dem Modell nur die relevantesten Layout- und Stilinformationen bereitgestellt werden.
Durch die Reduzierung der dem Modell bereitgestellten Kontextmenge wird die KI präziser und die Antworten relevanter.
Erste Schritte
Viele Code-Editoren und andere KI-Clients verwenden eine Konfigurationsdatei zur Verwaltung von MCP-Servern.
Der figma-developer-mcp Server kann konfiguriert werden, indem Sie Ihrer Konfigurationsdatei Folgendes hinzufügen.
HINWEIS: Sie müssen ein Figma-Zugriffstoken erstellen, um diesen Server nutzen zu können. Anweisungen zum Erstellen eines Figma-API-Zugriffstokens finden Sie hier .
MacOS / Linux
Windows
Oder Sie können FIGMA_API_KEY und PORT im env festlegen.
Wenn Sie weitere Informationen zum Konfigurieren des Framelink Figma MCP-Servers benötigen, lesen Sie die Framelink-Dokumente .
Sternengeschichte
Mehr erfahren
Der Framelink Figma MCP-Server ist einfach, aber leistungsstark. Holen Sie das Beste aus ihm heraus und erfahren Sie mehr auf der Framelink- Website.