Claude KI-Agenten Talk to Figma MCP

Ermöglichen Sie Ihren KI-Agenten das Lesen, Analysieren und Ändern von Figma-Designs.

Funktioniert mit Ihren bevorzugten Agenten-Tools:

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 Für wen ist es gedacht?

UX/UI-Teams

Automatisieren Sie wiederkehrende Designaufgaben und wahren Sie die Markenkonsistenz ohne manuellen Aufwand:

• Automatisierte Barrierefreiheits-Audits – Kontrastprobleme in Sekunden erkennen und beheben

• Massen-Stil-Updates – Farben, Typografie oder Abstände im gesamten Dokument mit einem einzigen Befehl ändern

• Analyse der visuellen Hierarchie – Sofortiges Feedback zur Struktur Ihres Designs erhalten

Entwickler

Generieren Sie produktionsreifen Code direkt aus Designs:

• React/Vue/SwiftUI-Komponenten – Vom Design zum Code in einem Schritt

• Code mit Design-Tokens – Design und Entwicklung synchron halten

• Handoff-Reibung reduzieren – Weniger Hin-und-Her-Iterationen mit dem Design-Team

Hauptvorteil: Im Gegensatz zu Figmas offiziellem MCP, das eine Dev-Mode-Lizenz erfordert, funktioniert dieses MCP mit jedem Figma-Konto (auch mit kostenlosen).

Related MCP server: Figma Console MCP Server

💡 Praxisbeispiele

Barrierefreiheit:

"Finde alle Texte mit einem Kontrastverhältnis <4.5:1 und schlage Farben vor, die WCAG AA entsprechen"

Rebranding:

"Ändere #FF6B6B zu #E63946 in allen primären Buttons im gesamten Dokument"

Design-Analyse:

"Analysiere die visuelle Hierarchie dieses Bildschirms und schlage Verbesserungen basierend auf Designprinzipien vor"

Entwickler-Handoff:

"Generiere die React-Komponente für 'CardProduct' inklusive PropTypes und Styles in CSS-Modulen"

⚡️ Schnelle Installation

Einrichtung: 5 Minuten | Erste Automatisierung: 2 Minuten

Voraussetzungen

• Node.js installiert

• Figma Desktop

• KI-Client:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

Schritt 1: WebSocket installieren und starten

Ermöglicht dem Agenten, Befehle an Figma zu senden.

Öffnen Sie Ihr Terminal, navigieren Sie zu dem Ordner, in dem Sie das Tool installieren möchten, und führen Sie aus:

npx claude-talk-to-figma-mcp

💡 Tipp: Dieser Befehl ist ein "Alles-in-einem"-Paket (klont, installiert und startet). In späteren Sitzungen, wenn Sie sich bereits im Projektordner your-project/claude-talk-to-figma-mcp befinden, können Sie einfach bun run socket ausführen.

Schritt 2: Plugin in Figma installieren

Ermöglicht Figma, Befehle vom Agenten zu empfangen und Antworten zurückzugeben.

Gehen Sie in Figma Desktop auf Menü → Plugins → Entwicklung → Plugin aus Manifest importieren → wählen Sie im Ordner, in dem Sie das MCP installiert haben, src/claude_mcp_plugin/manifest.json aus.

Schritt 3: Ihr Agenten-Tool konfigurieren

Ermöglicht dem Agenten die Nutzung der Lese- und Änderungs-Tools des MCP.

Claude Desktop

Laden Sie claude-talk-to-figma-mcp.dxt (aus dem Assets-Bereich des neuesten Releases) herunter und führen Sie einen Doppelklick aus. Claude konfiguriert sich automatisch.

Cursor

1. Öffnen Sie Cursor-Einstellungen → Tools & Integrationen

2. Klicken Sie auf "New MCP Server", um die Datei mcp.json zu öffnen

3. Fügen Sie diese Konfiguration hinzu:

{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
    }
  }
}

4. Speichern Sie die Datei und starten Sie Cursor neu

Andere Agenten-Tools

Für andere Tools (Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code) können Sie den Anweisungen im Kapitel "Configure your Agentic Tool" der detaillierten Installationsanleitung folgen.

Schritt 4: Mit der Arbeit beginnen

1. Öffnen Sie das Plugin in Figma

2. Kopieren Sie die Kanal-ID (fetter Code im grünen Feld)

3. Geben Sie im Chat ein: Connect to Figma, channel {your-ID}

✅ Bereit zum Designen mit KI!

Nachfolgende Arbeitssitzungen

Um das MCP im Arbeitsalltag erneut zu verwenden, müssen Sie nicht den gesamten Prozess wiederholen:

1. Socket starten: Geben Sie im Terminal den Projektordner your-project/claude-talk-to-figma-mcp ein und führen Sie bun run socket (oder npm run socket) aus.

2. Plugin in Figma öffnen: Sie finden es in Ihrer Liste der kürzlich verwendeten Plugins.

3. KI verbinden: Kopieren Sie die Kanal-ID und sagen Sie Ihrem Agenten: Connect to Figma, channel {your-ID}.

🤖 Multi-Agent & Parallele Ausführung

Dieser MCP-Server unterstützt sichere parallele Ausführung von Haus aus, sodass mehrere KI-Agenten (z. B. die Sub-Agenten von Claude Code oder Team-Swarms) gleichzeitig an Ihrer Figma-Datei arbeiten können, ohne das Plugin zu blockieren. Eine integrierte Befehlswarteschlange verarbeitet Anfragen sequenziell auf der Serverseite, wodurch verhindert wird, dass die Figma-API ein Timeout erreicht.

Hinweis: Da mehrere Agenten gleichzeitig das Dokument ändern können, ist es unsicher, sich auf den impliziten Seitenkontext zu verlassen. Daher sind zustandsbehaftete Befehle wie set_current_page blockiert. Alle Agenten müssen explizit den beabsichtigten parentId-Parameter angeben, wenn sie einen Erstellungs- oder strukturellen Änderungsbefehl ausführen (z. B. create_frame, create_text).

(Besonderer Dank geht an @mmabas77 für die Architektur und den Beitrag zu dieser Funktion!)

🐳 Alternative: Docker verwenden

Wenn Sie Docker bevorzugen oder den WebSocket-Server in einer Teamumgebung ausführen müssen, lesen Sie die Docker-Installationsanleitung in der detaillierten Installationsdokumentation.

🛠️ Funktionen

Design-Analyse

• Dokumentinformationen, aktuelle Auswahl, Stile abrufen

• Text scannen, Komponenten prüfen, Assets exportieren

Elementerstellung

• Formen, Text, Frames mit vollständiger Stilkontrolle

• Elemente klonen, gruppieren, organisieren

Änderung

• Farben, Rahmen, Ecken, Schatten

• Auto-Layout, fortgeschrittene Typografie

• Lokale Komponenten und Team-Bibliothekskomponenten

Siehe vollständige Befehlsliste.

📚 Dokumentation

• Detaillierte Installation — Manuelle Einrichtung, Cursor, Windsurf und andere IDEs

• Verfügbare Befehle — Vollständige Tool-Referenz

• Fehlerbehebung — Häufige Fehler und deren Behebung

• Mitwirken — Architektur, Tests, Leitfaden für Beiträge

• Changelog — Versionsverlauf

🙏 Credits

Basierend auf cursor-talk-to-figma-mcp von Sonny Lazuardi. Angepasst für Claude Desktop und erweitert um neue Tools von Xúlio Zé.

Wenn Sie mehr über alle Projektbeiträge erfahren möchten, können Sie das Kapitel "Contributors" des Leitfadens für Beiträge besuchen.

MIT-Lizenz

📊 Projektstatus

✅ Stabile Produktion – Tool bereit für den täglichen Einsatz in Design- und Entwicklungsteams

🚀 In aktiver Entwicklung:

• Vollständige Unterstützung für Figma-Variablen

• Verbesserter Export nach Tailwind CSS/SwiftUI

Benötigen Sie etwas Bestimmtes?

Schlagen Sie neue Funktionen in den GitHub Issues vor

Ihr Feedback und Ihre Beiträge halten das Projekt am Leben. ❤️