MCP-Dienst zum Lesen und Ändern von Figma-Entwürfen mit Cursor

🚀 Einladung zum Erleben: Chinas erste KI-IDE Intelligente Programmiersoftware Trae Chinesische Version downloadDer DeepSeek-R1 und Doubao-pro sind unbegrenzt verfügbar!

Allgemeine Einführung

Cursor Mit Figma sprechen MCP ist ein Open-Source-Projekt, das von der Modell-Kontext-Protokoll (MCP)-Protokoll verbindet das KI-Programmierwerkzeug Cursor mit der Design-Software Figma. Es wurde vom Entwickler Sonny Lazuardi erstellt, wird auf GitHub gehostet und soll am 17. März 2025 veröffentlicht werden. Die Kernfunktion des Tools besteht darin, dass Cursor die Figma-Designdateien lesen und Code generieren oder den Designinhalt direkt verändern kann. Es ist in TypeScript geschrieben und beinhaltet die WebSocket-Technologie für die Echtzeitkommunikation. Ob es darum geht, einen Entwurf schnell in Code umzuwandeln oder eine Entwurfsdatei mit KI zu manipulieren, dieses kostenlose Tool hilft Entwicklern, effizienter zu arbeiten. Jeder kann den Code herunterladen und sich an der Entwicklung beteiligen.

Bolzen.neu Neue Funktion, die vor ein paar Tagen in Betrieb genommen wurde:Konvertieren von Figma-Entwürfen in Full-Stack-Anwendungen mit einem Klick

MCP-Dienst zur Verknüpfung von Cursor- und Figma-Entwürfen-1

Funktionsliste

Verbindung zwischen Cursor und FigmaBi-direktionale Kommunikation wird durch das MCP-Protokoll und WebSocket erreicht.
Entwurfsinformationen lesenDokumentübersicht: Hier erhalten Sie einen Überblick über die Figma-Datei, ausgewählte Inhalte oder knotenspezifische Details.
Erstellen von DesignelementenHinzufügen von Rechtecken, Rahmen oder Textknoten zu Figma.
Ändern von Stilen und LayoutsFarben, Ränder und abgerundete Ecken anpassen oder Knoten verschieben, in der Größe verändern oder löschen.
Code generierenReduzierung der manuellen Schreibzeit durch Umwandlung von Figma-Entwürfen in brauchbaren Code.
Unterstützung für die KomponentenverwaltungKomponenten: Lesen Sie lokale oder Team-Komponenten, um Komponenteninstanzen zu erstellen.
ExportfunktionExportieren Sie Entwurfsknoten in die Formate PNG, JPG, SVG oder PDF.
Quelloffen und kostenlosDer Code ist öffentlich zugänglich, und es steht den Entwicklern frei, ihn zu ändern oder zu optimieren.

Hilfe verwenden

Ablauf der Installation

Um die Cursor Talk to Figma MCP zu verwenden, müssen mehrere Teile installiert und konfiguriert werden. Nachfolgend finden Sie die detaillierten Schritte:

1. die Umwelt vorbereiten

Einbau BrötchenBun ist ein Werkzeug zur schnellen Ausführung von JavaScript. Wenn Sie es nicht installiert haben, öffnen Sie ein Terminal und geben Sie es ein:

curl -fsSL https://bun.sh/install | bash

Installation des CursorsDownloaden und installieren Sie das Programm Cursor AI von der offiziellen Website (cursor.ai).
Figma-Token erhaltenMelden Sie sich bei Figma an, erstellen Sie in Ihren Kontoeinstellungen ein persönliches Zugangstoken und speichern Sie es.

2. das Projekt herunterladen

Führen Sie den folgenden Befehl im Terminal aus, um den Projektcode herunterzuladen:

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

Rufen Sie den Projektkatalog auf:

cd cursor-talk-to-figma-mcp

3. abhängigkeiten installieren und einrichten

Im Projektverzeichnis ausführen:

Brötchen backen

Dadurch werden alle Abhängigkeiten (einschließlich TypeScript- und WebSocket-Bibliotheken) installiert und der MCP-Server in Cursor automatisch konfiguriert.

4. starten Sie den WebSocket-Server

Geben Sie ihn in das Terminal ein:

Brötchenstart

Oder führen Sie es manuell aus:

src/socket.ts ausführen

Damit wird der WebSocket-Server für die Verbindung des Figma-Plugins mit dem MCP gestartet.

5. installieren Sie das Figma-Plugin

Öffnen Sie die Figma-Desktop-Anwendung.
Klicken Sie im oberen Menü auf "Plugins" > "Entwicklung" > "Neues Plugin".
Wählen Sie "Vorhandene Plugins verknüpfen" und suchen Sie die src/cursor_mcp_plugin/manifest.json Dokumentation.
Nach der Bestätigung erscheint das Plugin in der Liste der Entwicklungsplugins von Figma.

6. die Konfiguration des Cursor-MCP-Servers (manueller Modus)

für den Fall, dass Brötchen backen Nicht automatisch, kann manuell konfiguriert werden.
zeigen (eine Eintrittskarte) ~/.cursor/mcp.json fügen Sie Folgendes hinzu:

{
"mcpServer": {
"TalkToFigma": {
"Befehl": "bun".
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]
}
}
}

Austauschbarkeit /pfad/nach/ Der tatsächliche Pfad für Ihr Projekt.

Verwendung der wichtigsten Funktionen

Führen Sie nach Abschluss der Installation die nachstehenden Schritte aus:

Einsteigerpaket

Ausführen eines WebSocket-Servers::
- Geben Sie in das Terminal Brötchenstartstellen Sie sicher, dass der Server läuft.
Starten des Figma-Plug-ins::
- Klicken Sie in Figma mit der rechten Maustaste auf die Leinwand und wählen Sie "Plugins" > "Entwickeln" > Führen Sie das gerade installierte Plugin aus.
- Nachdem das Plugin gestartet ist, geben Sie join_channel Treten Sie dem Kommunikationskanal bei.
Cursor verbinden::
- Öffnen Sie Cursor und stellen Sie sicher, dass der MCP-Server konfiguriert ist und läuft.

Entwurfsinformationen lesen

Öffnen Sie eine Entwurfsdatei in Figma und wählen Sie den zu bearbeitenden Abschnitt aus.
Geben Sie die Befehle z. B. im "Composer"-Modus des Cursors ein:
- "Aktuelle Dokumentinformationen abrufen": Aufruf der get_document_info.
- "Ausgewählten Inhalt anzeigen": Aufruf get_selection.
Cursor gibt über MCP Entwurfsdaten wie Layout, Stil usw. zurück.

Erstellen und Ändern von Entwürfen

Geben Sie spezifische Anweisungen in den Cursor ein:
- Erzeugt ein Rechteck:rechtwinklig_erstellengeben Sie den Ort und die Größe an.
- Text hinzufügen:erstellen_textlegen Sie den Inhalt und die Schriftart fest.
- Ändern Sie die Farbe:set_fill_colorDer RGBA-Wert wird eingegeben.
Änderungen werden in den Figma-Dateien in Echtzeit wiedergegeben.

Code generieren

Fügen Sie einen Link zu der Figma-Datei in den Cursor ein (z. B. https://www.figma.com/file/xxx/yyy).
Geben Sie den Befehl "Erzeugen Sie diesen Entwurf der Reagieren Sie Kodex".
Cursor liest den Entwurf und gibt den entsprechenden Code aus.

Exportieren des Entwurfs

Geben Sie den Cursor ein:export_node_as_imageIn der folgenden Tabelle wird beschrieben, wie Sie das Format (PNG, JPG usw.) auswählen.
Die exportierte Datei wird lokal gespeichert.

Vorsichtsmaßnahmen bei der Handhabung

AnschlussreihenfolgeStarten Sie zuerst WebSocket, führen Sie dann das Plugin aus, und verwenden Sie schließlich Cursor, um Befehle zu senden.
FehlerbehandlungWenn der Befehl fehlschlägt, überprüfen Sie die Terminalprotokolle, um sicherzustellen, dass das Netzwerk und die Berechtigungen in Ordnung sind.
Tipps zur LeistungWenn Sie mit großen Dateien zu tun haben, verwenden Sie zunächst die get_document_info Zeigen Sie die Übersicht an und bearbeiten Sie dann bestimmte Knoten.

Das Besondere an diesem Tool ist, dass es Design und Programmierung nahtlos miteinander verbindet. Sie können Figma direkt mit KI manipulieren oder schnell Code generieren, wodurch eine Menge sich wiederholender Arbeit entfällt.

Anwendungsszenario

Schnelles Prototyping
Beschreibung des Szenarios: Produktmanager müssen eine Designidee validieren. Sie können Cursor verwenden, um Elemente in Figma zu erstellen und dann den Code zu exportieren, um schnell einen interaktiven Prototyp zu erstellen.
Synchronisierung von Design und Entwicklung
Szenariobeschreibung: Nachdem der Designer die Figma-Datei angepasst hat, liest der Entwickler den neuesten Entwurf über Cursor und aktualisiert den Code in Echtzeit, um die Kommunikationskosten zu senken.
Automatisierte Stilanpassung
Beschreibung des Szenarios: Teams müssen Designfarben oder Layouts in großen Mengen ändern. Die Entwickler können Cursor verwenden, um Befehle zur Automatisierung der Anpassungen einzugeben.

QA

Muss ich für dieses Tool bezahlen?
Antwort: Nicht nötig. Es ist ein Open-Source-Projekt, kostenlos zu verwenden, und der Code ist öffentlich auf GitHub verfügbar.
Welche Programmiersprachen werden für die Ausgabe unterstützt?
Antwort: Abhängig von der Fähigkeit von Cursor, unterstützen derzeit React, HTML, CSS und andere gemeinsame Front-End-Code, die von der Cursor-Generierung Logik.
Kann ich mit mehr als einer Figma-Datei gleichzeitig arbeiten?
Antwort: Ja, aber Sie müssen für jede Datei einen anderen Kanal hinzufügen (unter Verwendung der join_channel), stellen Sie sicher, dass der Befehl auf die richtige Datei verweist.