Claude KI-Agenten sprechen mit Figma MCP

Ermögliche deinen KI-Agenten, Figma-Designs zu lesen, zu analysieren und zu bearbeiten.

Aus diesem Git-Repository installieren

Dieser Fork ist für Codex, Claude Desktop, Claude Code, Cursor, Windsurf, Cline, Roo Code und jeden Client gepackt, der lokale stdio-MCP-Server unterstützt.

Codex:

codex plugin marketplace add Desrid/desrid-html-to-figma --ref main
codex plugin add desrid-html-to-figma@desrid-html-to-figma

Allgemeiner MCP-Client: Verwende die .mcp.json im Stammverzeichnis oder konfiguriere den Befehl von GitHub aus:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": [
        "--yes",
        "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz",
        "desrid-html-to-figma-server"
      ]
    }
  }
}

Claude Desktop: Öffne desrid-html-to-figma.dxt aus den GitHub Releases.

Alle Clients benötigen außerdem das lokale Figma-Entwicklungsplugin und die WebSocket-Brücke. Siehe den Installationsleitfaden für mehrere Agents oder den Codex-Leitfaden.

Funktioniert mit deinen bevorzugten Agentic-Tools:

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 Für wen es gedacht ist

UX/UI Teams

Automatisiere wiederkehrende Designaufgaben und bewahre Markenkonsistenz ohne manuellen Aufwand:

• Automatisierte Barrierefreiheits-Audits - Erkenne und behebe Kontrastprobleme in Sekunden

• Massen-Stilaktualisierungen - Ändere Farben, Typografie oder Abstände im gesamten Dokument mit einem einzigen Befehl

• Analyse der visuellen Hierarchie - Erhalte sofortiges Feedback zu deiner Designstruktur

Entwickler

Generiere produktionsreifen Code direkt aus Designs:

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

• Code mit Design-Tokens - Design und Entwicklung bleiben synchron

• Reduzierte Handoff-Reibung - Weniger Hin- und Rückiterationen mit dem Designteam

Wichtigster Vorteil: Im Gegensatz zum offiziellen Figma MCP, das eine Dev-Mode-Lizenz erfordert, funktioniert dieses MCP mit jedem Figma-Konto (auch mit einem kostenlosen).

💡 Reale Anwendungsfälle

Barrierefreiheit:

„Finde allen Text mit einem Kontrastverhältnis unter 4.5:1 und schlage Farben vor die die WCAG-AA-Kriterien erfüllen."

Rebranding:

„Ändere #FF6B6B in #E63946 in allen primären Schaltflächen im gesamten Dokument."

Design-Analyse:

„Analysiere die visuelle Hierarchie dieses Bildschirms und schlage auf der Grundlage von Designprinzipien Verbesserungen vor."

Entwicklerübergabe:

„Generiere die React-Komponente für ‚CardProduct' einschließlich PropTypes und Styles in CSS-Modulen."

⚡️ Schnellinstallation

Einrichtung: 5 Minuten | Erste Automatisierung: 2 Minuten

Voraussetzungen

• Node.js installiert

• Figma Desktop installiert

• 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.

Öffne dein Terminal, navigiere zu dem Ordner, in dem du das Tool installieren möchtest, und führe Folgendes aus:

npx --yes --package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz desrid-html-to-figma

Tipp: Dieser Befehl lädt das versionierte GitHub-Release-Paket herunter und startet die lokale Brücke. Bei einem geklonten Checkout führe in späteren Sitzungen npm run socket aus.

Schritt 2: Das Plugin in Figma installieren

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

In Figma Desktop gehe zu Menü → Plugins → Entwicklung → Plugin aus Manifest importieren → wähle in dem Ordner, in dem du die MCP installiert hast, src/claude_mcp_plugin/manifest.json aus.

Schritt 3: Konfiguriere dein Agent-Tool

Ermöglicht es dem Agenten, die Lese- und Änderungswerkzeuge des MCP zu nutzen.

Claude Desktop

Lade desrid-html-to-figma.dxt aus der neuesten Version in den GitHub Releases herunter und doppelklicke darauf. Claude konfiguriert sich automatisch selbst.

Cursor

1. Öffne Cursor Settings → Tools & Integrations

2. Klicke auf „New MCP Server“, um die Datei mcp.json zu öffnen

3. Füge diese Konfiguration hinzu:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": ["--yes", "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz", "desrid-html-to-figma-server"]
    }
  }
}

4. Speichere die Datei und starte Cursor neu.

Andere Agent-Tools

Für andere Tools (Claude Code, Windsurf, VS Code + Copilot, Cline, Roo Code) kannst du den Anweisungen im Abschnitt „Konfiguriere dein Agent-Tool“ der ausführlichen Installationsanleitung folgen.

Schritt 4: Loslegen

1. Öffne das Plugin in Figma.

2. Kopiere die Kanal-ID (den fetten Code in der grünen Box).

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

✅ Bereit für KI gestütztes Design!

Für spätere Arbeitssitzungen

Um die MCP im Tagesgeschäft weiter zu verwenden, musst du den gesamten Prozess nicht jedes Mal wiederholen:

1. Socket starten: Wechsle im Terminal in den Ordner your-project/desrid-html-to-figma und führe npm run socket aus.

2. Plugin in Figma öffnen: Du findest es in der Liste deiner zuletzt verwendeten Plugins.

3. KI verbinden: Kopie die Kanal-ID und teile deinem Agenten mit: Connect to Figma, channel {your-ID}.

Multi-Agent & parallele Ausführung

Dieser MCP-Server unterstützt von Haus aus sichere Parallelausführung, sodass mehrere KI-Agenten (z. B. Claude-Code-Sub-Agenten oder Team-Swarms) gleichzeitig an deiner Figma-Datei arbeiten können, ohne das Plugin zu blockieren. Eine integrierte Befehls-Warteschlange verarbeitet die Anfragen serverseiten nacheinander und verhindert, dass die Figma-API-Times out.

Hinweis: Da mehrere Agents das Dokument gleichzeitig ändern können, ist ein impliziter Seitenkontext unsicher. Deshalb sind zustandsbehaftete Befehle wie set_current_page blockiert. Alle Agents müssen bei der Ausführung eines Befehls zur Erstellung oder Strukturänderung (z. B. create_frame, create_text) explizit den vorgesehenen Parameter parentId angeben.

(Besonderer Dank geht an mmabas77 für die Architektur und Umsetzung dieses Features!)

🐳 Alternative: Docker nutzen

Wenn du Docker bevorzugst oder den WebSocket-Server in einer Teamumgebung betreiben möchtest, findest du die Beschreibung im Docker-Installationsverzeichnis der ausführlichen Installation.*

🛠️ Möglichkeiten

Design-Analyse

• Dokumentinformationen, aktuelle Auswahl, Stile abrufen

• Text scannen, Komponenten prüfen, Assets exportieren

Elementerstellung

• Formen, Text, Frames mit voller Stilkontrolle

• Klonen, Gruppieren, Organisieren

Änderungen

• Farben, Rahmen, Ecken, Schatten

• Auto-Layout, erweiterte Typografie

• Lokale Komponenten und Team-Library-Komponenten

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 Lösungen

• Mitwirken — Architektur, Tests, Mitwirkungsanleitung

• Changelog — Versionsverlauf

🙏 Danksagung

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

Wem du alle Beiträge zum Projekt kennenlernen möchtest, kannst du das „Contributors“-Kapitel im Contributing-Leitfaden besuchen.

MIT-Lizenz

📊 Projektstatus

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

🚀 Aktive Entwicklung:

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

• Verbesserter Export zu Tailwind CSS/SwiftUI

Benötigst du etwas Bestimmtes?

Neue Funktionsideen auf GitHub Issues vorschlagen

Dein Feedback und deine Beiträge halten das Projekt am Leben. ❤️