Skip to main content
Glama
Sign In
deenesjakoruzh

Talk to Figma MCP

by sonnylazuardi
npmGitHub
JavaScript
MIT License
5,185
3,528
  • Apple
  • Linux
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Used as the runtime environment for the MCP server, enabling the execution of TypeScript code that powers the Figma integration.

  • Enables Cursor AI to interact with Figma for reading designs and modifying them programmatically, with tools for creating elements, styling, layout management, and component manipulation.

Cursor-Talk mit Figma MCP

Dieses Projekt implementiert eine Model Context Protocol (MCP)-Integration zwischen Cursor AI und Figma, wodurch Cursor mit Figma kommunizieren kann, um Designs zu lesen und sie programmgesteuert zu ändern.

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

Projektstruktur

  • src/talk_to_figma_mcp/ – TypeScript MCP-Server für die Figma-Integration
  • src/cursor_mcp_plugin/ – Figma-Plugin zur Kommunikation mit Cursor
  • src/socket.ts – WebSocket-Server, der die Kommunikation zwischen dem MCP-Server und dem Figma-Plugin erleichtert

Erste Schritte

  1. Installieren Sie Bun, falls Sie dies noch nicht getan haben:
curl -fsSL https://bun.sh/install | bash
  1. Führen Sie das Setup aus. Dadurch wird MCP auch im aktiven Projekt Ihres Cursors installiert.
bun setup
  1. Starten Sie den Websocket-Server
bun socket
  1. MCP-Server
bunx cursor-talk-to-figma-mcp
  1. NEU: Installieren Sie das Figma-Plugin von der Figma-Community-Seite oder installieren Sie es lokal

Kurzes Video-Tutorial

Videolink

Beispiel für Designautomatisierung

Massenersetzung von Textinhalten

Vielen Dank an @dusskapark für die Funktion zum Ersetzen von Massentext. Hier ist das Demo-Video .

Weiterleitung von Instanzüberschreibungen. Ein weiterer Beitrag von @dusskapark : Weiterleitung von Komponenteninstanzüberschreibungen von einer Quellinstanz auf mehrere Zielinstanzen mit einem einzigen Befehl. Diese Funktion reduziert den repetitiven Designaufwand bei Komponenteninstanzen, die ähnliche Anpassungen benötigen, erheblich. Sehen Sie sich unser Demovideo an.

Manuelle Einrichtung und Installation

MCP-Server: Integration mit Cursor

Fügen Sie den Server zu Ihrer Cursor-MCP-Konfiguration in ~/.cursor/mcp.json hinzu:

{ "mcpServers": { "TalkToFigma": { "command": "bunx", "args": ["cursor-talk-to-figma-mcp@latest"] } } }

WebSocket-Server

Starten Sie den WebSocket-Server:

bun socket

Figma-Plugin

  1. Gehen Sie in Figma zu Plugins > Entwicklung > Neues Plugin
  2. Wählen Sie „Vorhandenes Plugin verknüpfen“
  3. Wählen Sie die Datei src/cursor_mcp_plugin/manifest.json aus
  4. Das Plugin sollte jetzt in Ihren Figma-Entwicklungs-Plugins verfügbar sein

Windows + WSL-Handbuch

  1. Installieren Sie Bun über Powershell
powershell -c "irm bun.sh/install.ps1|iex"
  1. Entfernen Sie die Kommentarzeichen für den Hostnamen 0.0.0.0 in src/socket.ts
// uncomment this to allow connections in windows wsl hostname: "0.0.0.0",
  1. Starten Sie den WebSocket
bun socket

Verwendung

  1. Starten Sie den WebSocket-Server
  2. Installieren Sie den MCP-Server in Cursor
  3. Öffnen Sie Figma und führen Sie das Cursor MCP Plugin aus
  4. Verbinden Sie das Plugin mit dem WebSocket-Server, indem Sie mit join_channel einem Kanal beitreten.
  5. Verwenden Sie Cursor, um mithilfe der MCP-Tools mit Figma zu kommunizieren

MCP-Tools

Der MCP-Server bietet die folgenden Tools für die Interaktion mit Figma:

Dokument & Auswahl

  • get_document_info – Informationen zum aktuellen Figma-Dokument abrufen
  • get_selection - Informationen zur aktuellen Auswahl abrufen
  • read_my_design - Erhalten Sie detaillierte Knoteninformationen zur aktuellen Auswahl ohne Parameter
  • get_node_info - Erhalten Sie detaillierte Informationen zu einem bestimmten Knoten
  • get_nodes_info - Erhalten Sie detaillierte Informationen zu mehreren Knoten, indem Sie ein Array von Knoten-IDs bereitstellen

Anmerkungen

  • get_annotations - Alle Anmerkungen im aktuellen Dokument oder einem bestimmten Knoten abrufen
  • set_annotation - Erstellen oder aktualisieren Sie eine Anmerkung mit Markdown-Unterstützung
  • set_multiple_annotations - Effizientes Erstellen/Aktualisieren mehrerer Anmerkungen im Stapel
  • scan_nodes_by_types – Nach Knoten mit bestimmten Typen suchen (nützlich zum Auffinden von Annotationszielen)

Prototyping und Verbindungen

  • get_reactions - Alle Prototyp-Reaktionen von Knoten mit visueller Hervorhebungsanimation abrufen
  • set_default_connector – Legen Sie einen kopierten FigJam-Konnektor als Standardkonnektorstil zum Erstellen von Verbindungen fest (muss vor dem Erstellen von Verbindungen festgelegt werden).
  • create_connections – Erstellen Sie FigJam-Verbindungslinien zwischen Knoten, basierend auf Prototypflüssen oder benutzerdefinierter Zuordnung

Elemente erstellen

  • create_rectangle - Erstellt ein neues Rechteck mit Position, Größe und optionalem Namen
  • create_frame - Erstellt einen neuen Rahmen mit Position, Größe und optionalem Namen
  • create_text - Erstellen Sie einen neuen Textknoten mit anpassbaren Schrifteigenschaften

Textinhalte ändern

  • scan_text_nodes - Scannen Sie Textknoten mit intelligenter Aufteilung für große Designs
  • set_text_content - Setzt den Textinhalt eines einzelnen Textknotens
  • set_multiple_text_contents - Effiziente Stapelaktualisierung mehrerer Textknoten

Automatisches Layout und Abstand

  • set_layout_mode – Legt den Layoutmodus und das Umbruchverhalten eines Rahmens fest (NONE, HORIZONTAL, VERTICAL)
  • set_padding – Legen Sie die Füllwerte für einen Auto-Layout-Rahmen fest (oben, rechts, unten, links).
  • set_axis_align - Primäre und Gegenachsenausrichtung für Auto-Layout-Frames festlegen
  • set_layout_sizing – Horizontale und vertikale Größenmodi für Auto-Layout-Rahmen festlegen (FIXED, HUG, FILL)
  • set_item_spacing - Abstand zwischen untergeordneten Elementen in einem Auto-Layout-Rahmen festlegen

Styling

  • set_fill_color – Setzt die Füllfarbe eines Knotens (RGBA)
  • set_stroke_color - Legt die Strichfarbe und -stärke eines Knotens fest
  • set_corner_radius - Legen Sie den Eckradius eines Knotens mit optionaler Steuerung pro Ecke fest

Layout und Organisation

  • move_node - Verschiebt einen Knoten an eine neue Position
  • resize_node - Größe eines Knotens mit neuen Abmessungen ändern
  • delete_node - Einen Knoten löschen
  • delete_multiple_nodes - Mehrere Knoten gleichzeitig effizient löschen
  • clone_node - Erstellen Sie eine Kopie eines vorhandenen Knotens mit optionalem Positionsversatz

Komponenten und Stile

  • get_styles - Informationen zu lokalen Stilen abrufen
  • get_local_components - Informationen zu lokalen Komponenten abrufen
  • create_component_instance - Erstellen Sie eine Instanz einer Komponente
  • get_instance_overrides - Extrahieren von Override-Eigenschaften aus einer ausgewählten Komponenteninstanz
  • set_instance_overrides - Extrahierte Overrides auf Zielinstanzen anwenden

Export & Erweitert

  • export_node_as_image – Exportieren Sie einen Knoten als Bild (PNG, JPG, SVG oder PDF) – eingeschränkte Unterstützung für Bilder, die derzeit Base64 als Text zurückgeben

Verbindungsverwaltung

  • join_channel – Treten Sie einem bestimmten Kanal bei, um mit Figma zu kommunizieren

MCP-Eingabeaufforderungen

Der MCP-Server enthält mehrere Hilfseingabeaufforderungen, die Sie durch komplexe Entwurfsaufgaben führen:

  • design_strategy – Best Practices für die Arbeit mit Figma-Designs
  • read_design_strategy – Best Practices zum Lesen von Figma-Designs
  • text_replacement_strategy – Systematischer Ansatz zum Ersetzen von Text in Figma-Designs
  • annotation_conversion_strategy – Strategie zum Konvertieren manueller Anmerkungen in die nativen Anmerkungen von Figma
  • swap_overrides_instances – Strategie zum Übertragen von Overrides zwischen Komponenteninstanzen in Figma
  • reaction_to_connector_strategy – Strategie zum Konvertieren von Figma-Prototypreaktionen in Verbindungslinien unter Verwendung der Ausgabe von „get_reactions“ und zur Anleitung der Verwendung von „create_connections“ in der richtigen Reihenfolge

Entwicklung

Erstellen des Figma-Plugins

  1. Navigieren Sie zum Figma-Plugin-Verzeichnis:
    cd src/cursor_mcp_plugin
  2. Bearbeiten Sie code.js und ui.html

Bewährte Methoden

Beim Arbeiten mit dem Figma MCP:

  1. Treten Sie immer einem Kanal bei, bevor Sie Befehle senden
  2. Holen Sie sich zuerst eine Dokumentübersicht mit get_document_info
  3. Überprüfen Sie die aktuelle Auswahl mit get_selection vor Änderungen
  4. Verwenden Sie je nach Bedarf geeignete Erstellungstools:
    • create_frame für Container
    • create_rectangle für Grundformen
    • create_text für Textelemente
  5. Überprüfen der Änderungen mit get_node_info
  6. Verwenden Sie aus Konsistenzgründen nach Möglichkeit Komponenteninstanzen
  7. Behandeln Sie Fehler entsprechend, da alle Befehle Ausnahmen auslösen können
  8. Für große Designs:
    • Verwenden Sie Chunking-Parameter in scan_text_nodes
    • Überwachen Sie den Fortschritt durch WebSocket-Updates
    • Implementieren Sie eine geeignete Fehlerbehandlung
  9. Für Textoperationen:
    • Verwenden Sie nach Möglichkeit Batchvorgänge
    • Strukturelle Zusammenhänge berücksichtigen
    • Änderungen mit gezielten Exporten überprüfen
  10. Zum Konvertieren älterer Anmerkungen:
  • Scannen Sie Textknoten, um nummerierte Markierungen und Beschreibungen zu identifizieren
  • Verwenden Sie scan_nodes_by_types , um UI-Elemente zu finden, auf die sich Anmerkungen beziehen
  • Ordnen Sie Markierungen ihren Zielelementen über Pfad, Name oder Nähe zu
  • Kategorisieren Sie Anmerkungen entsprechend mit get_annotations
  • Erstellen Sie native Anmerkungen mit set_multiple_annotations in Stapeln
  • Überprüfen Sie, ob alle Anmerkungen korrekt mit ihren Zielen verknüpft sind.
  • Löschen Sie alte Annotationsknoten nach erfolgreicher Konvertierung
  1. Visualisieren Sie Prototyp-Nudeln als FigJam-Konnektoren:
  • Verwenden Sie get_reactions , um Prototyp-Flows zu extrahieren.
  • Legen Sie mit set_default_connector einen Standardkonnektor fest.
  • und generieren Sie Verbindungslinien mit create_connections für eine klare visuelle Flusszuordnung.

Lizenz

MIT

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

View all tools

Eine MCP-Serverintegration, die es Cursor AI ermöglicht, mit Figma zu kommunizieren, sodass Benutzer Designs lesen und sie programmgesteuert über natürliche Sprachbefehle ändern können.

  1. Projektstruktur
    1. Erste Schritte
      1. Kurzes Video-Tutorial
        1. Beispiel für Designautomatisierung
          1. Manuelle Einrichtung und Installation
            1. MCP-Server: Integration mit Cursor
            2. WebSocket-Server
            3. Figma-Plugin
          2. Windows + WSL-Handbuch
            1. Verwendung
              1. MCP-Tools
                1. Dokument & Auswahl
                2. Anmerkungen
                3. Prototyping und Verbindungen
                4. Elemente erstellen
                5. Textinhalte ändern
                6. Automatisches Layout und Abstand
                7. Styling
                8. Layout und Organisation
                9. Komponenten und Stile
                10. Export & Erweitert
                11. Verbindungsverwaltung
                12. MCP-Eingabeaufforderungen
              2. Entwicklung
                1. Erstellen des Figma-Plugins
              3. Bewährte Methoden
                1. Lizenz

                  Related Resources

                  Related MCP Servers

                  • Image-Gen-Server

                    fengin
                    -
                    security
                    A
                    license
                    -
                    quality
                    A MCP server that integrates with Cursor IDE to generate images based on text descriptions using JiMeng AI, allowing users to create and save custom images directly within their development environment.
                    Last updated -
                    82
                    Python
                    MIT License
                    • Apple
                    • Linux

                  • Cursor Talk To Figma MCP

                    toiletmadarchut
                    A
                    security
                    F
                    license
                    A
                    quality
                    Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
                    Last updated -
                    19
                    5,185
                    1
                    JavaScript

                  • Talk to Figma MCP

                    yhc984
                    -
                    security
                    F
                    license
                    -
                    quality
                    Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
                    Last updated -
                    TypeScript

                  • Figma MCP Server

                    rlagudals95
                    -
                    security
                    A
                    license
                    -
                    quality
                    Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
                    Last updated -
                    14,596
                    TypeScript
                    MIT License

                  View all related MCP servers

                  Appeared in Searches

                  New MCP Servers

                  ID: 640obyv4vw