figma-mcp

Hochleistungsfähiger, bidirektionaler Model Context Protocol (MCP)-Server in Rust, der KI-Programmierassistenten direkt mit Figma Desktop verbindet.

Er ermöglicht KI-Agenten (Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed), UI direkt auf der Figma-Leinwand zu zeichnen und vorhandene Designs als strukturierte JSON-Bäume, Design-Tokens, CSS und Screenshots zurückzulesen – ganz ohne externe API-Schlüssel.

⚡ Highlights

• Reine Rust-Native-Performance: Startet in < 1ms, verbraucht ~3MB RAM, keine GC-Pausen.

• Bidirektionale Brücke: KI kann sowohl UI schreiben (Vektoren, Komponenten, Frames, Autolayout zeichnen) als auch Designs lesen (Hierarchie extrahieren, Stile berechnen, Leinwand erfassen).

• Sandbox-JS-Laufzeitumgebung: Angetrieben von Boa (pure Rust ECMAScript-Engine) für die sichere Ausführung von Design-Skripten.

• Integriertes Asset-CDN: Holt SVG-Icons automatisch von 7 Icon-Bibliotheken (Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor) und normalisiert sie.

• Multi-Tab- / Multi-Session-Unterstützung: Stellt nahtlos Verbindungen zu mehreren geöffneten Figma-Dateien gleichzeitig her.

• 100 % Localhost-Datenschutz: Die gesamte Kommunikation bleibt strikt über HTTP-Long-Polling auf 127.0.0.1:38451.

Related MCP server: Figma Dash MCP Server

🏛️ Architecture

┌─────────────────────────────────────────────────────────┐
│               Terminal (Standalone Server)              │
│                       figma-mcp                         │
│  • MCP SSE Transport (/sse, /message)                   │
│  • Sandboxed JS Runtime (Boa)                           │
│  • Built-in Asset & Icon Resolver                       │
│  • Async WebSocket & HTTP Long-Polling Bridge (Axum)    │
└───────────────▲─────────────────────────▲───────────────┘
                │ (ws://127.0.0.1:38451)  │ (http://127.0.0.1:38451/sse)
                │                         │
      ┌─────────┴─────────┐     ┌─────────┴─────────┐
      │   Figma Desktop   │     │ AI Assistant(s)   │
      │ (Plugin Bridge)   │     │ Antigravity/Cursor│
      └───────────────────┘     │ Claude Code / Zed │
                                └───────────────────┘

🚀 Quick Start

1. Einzeiliger Start mit NPX (keine Rust-Toolchain erforderlich)

Sie können figma-mcp auf jedem Mac-, Linux- oder Windows-Rechner ohne Einrichtung starten:

npx figma-mcp

Oder wenn Sie Cursor / Claude Desktop / Windsurf / Antigravity-MCP-Einstellungen konfigurieren:

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["-y", "figma-mcp", "--stdio"]
    }
  }
}

2. Oder aus dem Quellcode bauen (Rust)

Voraussetzungen: Rust-Toolchain (cargo >= 1.80).

git clone https://github.com/BuiHung1612/figma-mcp.git
cd figma-mcp
cargo build --release
./target/release/figma-mcp

3. Das Figma-Plugin installieren

1. Öffnen Sie Figma Desktop.

2. Gehen Sie zu Plugins → Entwicklung → Plugin aus Manifest importieren…

3. Wählen Sie die Datei plugin/manifest.json aus diesem Repository aus.

4. Führen Sie das Plugin aus (Plugins → Entwicklung → Figma MCP Bridge).

5. Die Plugin-Oberfläche zeigt einen grünen Punkt (Verbunden).

4. Konfigurieren Sie Ihren MCP-Client

Google Antigravity (SSE-Transport – empfohlen)

Fügen Sie Folgendes zu Ihrer ~/.gemini/config/mcp_config.json oder zur Projektdatei .agents/mcp_config.json hinzu:

{
  "mcpServers": {
    "figma-mcp": {
      "serverUrl": "http://127.0.0.1:38451/sse"
    }
  }
}

Claude Code / Cursor / Windsurf / VS Code

Sie können über SSE oder stdio verbinden:

Option A: SSE-Transport (empfohlen)

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://127.0.0.1:38451/sse"
    }
  }
}

Option B: Stdio-Subprozess (über NPX)

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["-y", "figma-mcp", "--stdio"]
    }
  }
}

🛠️ MCP-Tools-Referenz

figma-mcp stellt 7 erstklassige MCP-Tools bereit:

figma_get_selection

Schnelle, tokenkomprimierte Inspektion der aktuell ausgewählten Ebenen/Frames auf der Figma-Leinwand. Gibt eine kompakte Layout- und Typografiehierarchie mit 60–80 % weniger Tokens zurück.

figma_inspect_node

Untersucht einen bestimmten Knoten nach ID oder Name und gibt vollständigen Design-Kontext, CSS, Auto-Layout-Regeln und Typografie zurück.

figma_export_asset

Exportiert jeden Figma-Knoten/jede Ebene direkt in PNG, JPG oder SVG.

• outputPath: Wenn angegeben (z. B. src/assets/logo.png), wird direkt auf die Festplatte gespeichert und minimale JSON-Metadaten werden zurückgegeben, anstatt den Kontext mit großen Base64-Zeichenfolgen zu füllen!

figma_status

Prüft den Live-Brückenverbindungsstatus, verbundene Figma-Tabs, den aktiven Dateinamen und Latenzstatistiken.

figma_write

Führt JavaScript-Zeichenbefehle in der Sandbox-VM aus, um Designs auf der Figma-Leinwand zu erstellen oder zu modifizieren.

• Unterstützt Auto-Layout (layoutMode, itemSpacing, padding), Typografie, Füllungen, Konturen, Eckradius, Schlagschatten und Komponentenerstellung.

• Unterstützt Icon-Laden: figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" }).

• Unterstützt Bildeinfügung: figma.loadImage(url, { width: 300, height: 200 }).

figma_read

Universeller Reader für erweiterte Abfragen: get_design, scan_design, screenshot, export_svg, get_variables, get_styles, search_nodes. Unterstützt outputPath für Dateiexporte.

figma_docs

Ruft eingebaute Dokumentation, Designregeln, Layoutrichtlinien und Codebeispiele für figma_write ab.

• section: "all" | "rules" | "layout" | "api" | "tokens" | "icons"

figma_rules

Prüft das aktuelle Figma-Dokument und generiert Konsistenzregeln und Token-Definitionen, um die KI-Generierung zu leiten.

💻 Entwicklung & Testen

# Run server directly in debug mode
cargo run

# Build release binary
cargo build --release

# Run automated MCP test suite
./scripts/test-rust-mcp.sh

# Rebuild Figma plugin bundle (if plugin-src/ is modified)
node scripts/build-plugin.js

📄 Lizenz

MIT © BuiHung1612 – Frei verwendbar, modifizierbar und verteilbar. Einzelheiten finden Sie in LICENSE.