Skip to main content
Glama
TrungLee003

Figma Agent MCP

by TrungLee003

⚡ Figma Agent MCP

Lokaler, KI-gestützter Design-Agent für Figma via Model Context Protocol (MCP) → WebSocket Bridge → Natives Figma-Plugin.

Untersuche, erstelle, verändere, gestalte, validiere und optimiere Figma-Designs nativ mit deterministischen, typisierten Tools, Design-System-Bewusstsein, Token-Kompression und einsatzbereiten zusammengesetzten Workflows.

CI Status TypeScript Strict Tests MCP Tools License: MIT


🏛️ Systemarchitektur

┌─────────────────────────────────────────────────────────────┐
│             AI Client (Claude / Cursor / Antigravity / LLM) │
└──────────────────────────────┬──────────────────────────────┘
                               │ MCP Protocol (stdio / SSE)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        MCP Server (@figma-agent/mcp-server — 49 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (Compact)  - Composite Skills Runtime   │
│  - Design System Resolver      - Semantic Token Matching    │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Command Engine (@figma-agent/command-engine)          │
│  - Batch Transaction Pipeline  - Idempotency & Rollback     │
└──────────────────────────────┬──────────────────────────────┘
                               │ Local WebSocket (ws://127.0.0.1:3055)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Bridge Server (@figma-agent/bridge-server)            │
│  - Channel Pairing (128-bit)   - Request/Response Matcher   │
│  - Heartbeat & Auto-reconnect  - 50+ Concurrent Sockets     │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        Figma Plugin (@figma-agent/figma-plugin)             │
│  - Typed Command Dispatcher    - Pure Font Engine           │
│  - Native Node Mutation        - Zero External Dependencies │
└──────────────────────────────┬──────────────────────────────┘
                               │ Figma Plugin API
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                         Figma Canvas                        │
└─────────────────────────────────────────────────────────────┘

Related MCP server: figmind

🌟 Hauptmerkmale

  • 🔒 Lokal & Sicher: Bindet standardmäßig an 127.0.0.1. 128-Bit geheimer Kanal-Pairing. Keine willkürliche JavaScript-Ausführung in Figma.

  • 🧩 49 deterministische MCP-Tools: Umfassende Abdeckung über Lesen, Erstellen, Verändern, Auto-Layout, visuelle Stile, Komponenten, Variablen/Tokens, Typografie, Export und Design-System-Auflösung.

  • 🎯 Semantischer Design-System-Resolver: Verbindet menschliche Absicht ("primary button", "#6366F1") mit passenden Komponenten und Tokens mittels wahrnehmbarem Farbabstand ($\Delta E$) und automatisierter Knotenprüfung.

  • ⚡ Kontext-Compiler & Kürzung: Komprimiert riesige Knotenbäume in semantisches Markdown oder kompaktes DSL mit adaptiver Tiefenkürzung und Token-Budget-Durchsetzung unter 100ms. Erreicht typischerweise eine erhebliche Kontextreduktion; Benchmark-Tests zeigen in getesteten Szenarien >70% Reduktion.

  • 🛡️ Integrierte Validierung & WCAG 2.1-Engine: Relative Leuchtdichte und Kontrastverhältnis-Berechnung (AA/AAA) für normalen Text, großen Text und UI-Komponenten; Auto-Layout-Linter; 4px/8px Token-Raster-Prüfer.

  • 🔄 Atomare Batch-Ausführung: Sequenzielle Ausführung von Befehlspipelines mit stopOnFirstError oder continueOnError Fehlerbehandlung.

  • 🚀 Sofort einsatzbereite Agent-Fähigkeiten: Vorgefertigte zusammengesetzte Workflows zur sofortigen Design-System-Generierung, WCAG-Zugänglichkeits-Reparatur und Konvertierung von Wireframe zu Hi-Fi-Karte.


📦 Monorepo-Struktur

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 49 MCP Tools + Bridge Client + Session Service
│   ├── bridge-server/     # High-throughput WebSocket router (ws)
│   └── figma-plugin/      # Pure TypeScript native Figma Plugin
├── packages/
│   ├── protocol/          # CommandEnvelope, CommandResult, Error codes, Zod schemas
│   ├── figma-schema/      # SimplifiedNode, Layout, Style, Text, Validation schemas
│   ├── command-engine/    # Batch execution pipeline, transactions, ref resolution
│   ├── context-compiler/  # Token optimizer, tree pruner, Markdown & DSL serializers
│   ├── design-system/     # 4px/8px Spacing, Typography & Corner Radius scale matchers
│   ├── validator/         # WCAG 2.1 contrast engine, Auto Layout & design token rules
│   ├── skill-runtime/     # Composite skills registry & execution engine
│   ├── telemetry/         # Percentile metrics collector (p50, p95, p99)
│   └── shared/            # Hex/RGBA converters, Pino logger, environment config
└── tests/
    └── integration/       # 27 Vitest suites covering all phases & stress benchmarks

🚀 Schnellstart & Einrichtung

1. Monorepo bauen

git clone https://github.com/your-org/figma-agent-mcp.git
cd figma-agent-mcp
pnpm install
pnpm build

2. Bridge-Server starten

pnpm --filter @figma-agent/bridge-server start
# Bridge server listening at ws://127.0.0.1:3055

3. Das Figma-Plugin in Figma Desktop laden

  1. Öffne Figma Desktop.

  2. Gehe zu Plugins → Entwicklung → Plugin aus Manifest importieren...

  3. Wähle apps/figma-plugin/manifest.json.

  4. Führe das Figma Agent Bridge-Plugin aus. Notiere deine Kanal-ID (standardmäßig default-channel).


⚙️ KI-Client-Konfiguration

🤖 1. Claude Desktop

Füge zu deiner claude_desktop_config.json hinzu (%APPDATA%\Claude\claude_desktop_config.json unter Windows oder ~/Library/Application Support/Claude/claude_desktop_config.json unter macOS):

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

💻 2. Cursor IDE

Füge zu deiner Cursor-MCP-Konfiguration hinzu (Einstellungen → Funktionen → MCP oder .cursor/mcp.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

🧠 3. Google Antigravity / Gemini CLI

Füge zu deinen Antigravity-MCP-Einstellungen hinzu (~/.gemini/antigravity/mcp_config.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055"
      }
    }
  }
}

⚡ 4. OpenAI Codex / Codex CLI / OpenAI Operator

Füge zu deiner Codex-MCP-Konfiguration hinzu (~/.codex/config.json oder codex-settings.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

Oder registriere via Codex CLI:

# Add Figma Agent MCP to Codex CLI
codex mcp add figma-agent -- node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

# Inspect available tools via MCP Inspector
npx @modelcontextprotocol/inspector node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

🌊 5. Windsurf / Codeium IDE

Füge zu ~/.codeium/windsurf/mcp_config.json hinzu:

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

📚 Vollständige MCP-Tools-Referenz (50 Tools)

Alle 50 MCP-Tools sind streng typisiert über Zod-Schemas, führen deterministisch aus und liefern robuste Fehlermetadaten.

1. Verbindungs- & Sitzungsverwaltung (4 Tools)

Tool-Name

Parameter

Beschreibung

figma.get_connection

keine

Aktuellen WebSocket-Bridge-Verbindungsstatus, Latenz und Sitzungsfähigkeiten abrufen.

figma.join_channel

channelId*, secret

Wechseln oder Beitreten zu einer bestimmten Figma-Dokumentenkanal-Sitzung.

2. Inspektion & Lesen (6 Tools)

Tool-Name

Parameter

Beschreibung

figma.get_document

depth (0–10)

Dokumentwurzelhierarchie mit begrenzter Tiefe abrufen.

figma.get_selection

depth (0–10)

Aktuell ausgewählte Knoten in der aktiven Figma-Leinwand abrufen.

figma.get_node

nodeId*, depth

Detaillierte Eigenschaften und Unterbaum eines bestimmten Knotens lesen.

figma.get_nodes

nodeIds*, depth

Mehrere Knoten per ID stapelweise abrufen.

figma.get_local_components

keine

Alle wiederverwendbaren Komponenten und Varianten in der Datei auflisten.

figma.get_local_styles

type (PAINT/TEXT/EFFECT/GRID)

Lokale Füll-, Text- und Effektstile auflisten.

3. Knotenerstellung (4 Tools)

Tool-Name

Parameter

Beschreibung

figma.create_frame

width, height, x, y, name, parentId, layoutMode

Einen Container-Frame mit optionalem Auto-Layout erstellen.

figma.create_text

text*, x, y, width, font ({family, style, size}), name, parentId

Einen Textknoten mit zuverlässigem Schriftladen erstellen.

figma.create_rectangle

width, height, x, y, cornerRadius, name, parentId

Einen Rechteck-Vektorknoten erstellen.

figma.create_section

width, height, x, y, name, parentId

Einen Abschnitts-Organisationscontainer erstellen.

4. Knotenveränderung & Geometrie (6 Tools)

Tool-Name

Parameter

Beschreibung

figma.move_node

nodeId, x, y*

Einen Knoten zu absoluten Koordinatenpositionen verschieben.

figma.resize_node

nodeId, width, height*

Knotendimensionen ändern.

figma.rename_node

nodeId, name

Knoten-Ebenentitel umbenennen.

figma.delete_node

nodeId*

Einen Knoten von der Leinwand löschen.

figma.clone_node

nodeId*, parentId, x, y, name

Vorhandene Knotenhierarchie duplizieren.

figma.set_parent

nodeId, targetParentId, index

Einen Knoten in der Ebenenstruktur neu zuordnen und umordnen.

5. Auto-Layout & Responsive Größenanpassung (2 Tools)

Tool-Name

Parameter

Beschreibung

figma.set_auto_layout

nodeId, mode, itemSpacing, padding ({top, right, bottom, left}), primaryAxisAlignItems, counterAxisAlignItems

Responsives Flexbox-ähnliches Auto-Layout konfigurieren.

figma.set_layout_sizing

nodeId*, horizontal (FIXED/HUG/FILL), vertical (FIXED/HUG/FILL)

Größenverhalten von Container und Kind-Achsen festlegen.

6. Visuelle Stile & Effekte (5 Tools)

Tool-Name

Parameter

Beschreibung

figma.set_fills

nodeId, fills (Array von Solid/Gradient/Image-Füllungen)

Hintergrundfarben, Farbverläufe und Bilder anwenden.

figma.set_strokes

nodeId, strokes, strokeWeight, strokeAlign

Rahmenstriche, -stärken und -ausrichtungen anwenden.

figma.set_corner_radius

nodeId, radius (Zahl oder pro-Ecke-Objekt), cornerSmoothing

Eckenradius mit iOS-kontinuierlicher Glättung festlegen.

figma.set_opacity

nodeId, opacity (0.0 – 1.0)

Ebenendeckkraft anpassen.

figma.set_effects

nodeId, effects (DROP_SHADOW, INNER_SHADOW, LAYER_BLUR)

Schlagschatten, innere Schatten und Weichzeichner anwenden.

7. Komponenten & Instanzen (5 Tools)

Tool-Name

Parameter

Beschreibung

figma.create_component

name*, width, height, parentId, componentPropertyDefinitions

Einen Knoten in eine wiederverwendbare Master-Komponente umwandeln.

figma.create_instance

componentId*, x, y, properties, parentId

Eine Komponentenvariante instanziieren.

figma.set_component_properties

nodeId, properties

Komponentenvarianteneigenschaften überschreiben.

figma.detach_instance

nodeId, destructive

Komponenteninstanz in bearbeitbare Frames trennen (sicherheitsgeschützt).

figma.get_local_components

query, pageOnly

Lokale Master-Komponenten und Komponentensets mit Varianteneigenschaften abrufen.

8. Variablen & Design-Tokens (6 Tools)

Tool Name

Parameters

Beschreibung

figma.get_local_variables

collectionId

Lokale Variablen und Token-Sammlungen auflisten.

figma.create_variable

name, resolvedType (COLOR/FLOAT/STRING/BOOLEAN), collectionId, collectionName, initialValue

Eine semantische Design-Token-Variable erstellen.

figma.set_variable_value

variableId, modeId, value*

Variablenwert für einen bestimmten Modus aktualisieren.

figma.bind_variable

nodeId, property (fills/strokes/opacity/itemSpacing/cornerRadius), variableId*

Eine Knoteneigenschaft an eine Design-Token-Variable binden.

figma.create_paint_style

name, paints, description

Einen gemeinsamen Paint-Stil in der Datei erstellen.

(Wiederverwendet Inspect)

get_local_styles

Gemeinsame Stile abfragen.

9. Assets, Bilder & Export (3 Werkzeuge)

Tool Name

Parameters

Beschreibung

figma.export_node

nodeId*, format (PNG/JPG/SVG/PDF), scale

Knoten als Base64-Bilddaten oder UTF-8-SVG-String exportieren.

figma.set_export_settings

nodeId, exportSettings

Exportvoreinstellungen auf einem Knoten konfigurieren.

figma.set_image_fill

nodeId, imageBase64, scaleMode, opacity

Eine Bildfüllung aus Base64 hochladen und anwenden.

10. Text & Typografie (6 Werkzeuge)

Tool Name

Parameters

Beschreibung

figma.set_text_content

nodeId, text

Textzeichenfolgeninhalt aktualisieren.

figma.set_font_size

nodeId, fontSize, start, end

Schriftgröße aktualisieren (gesamter Text oder Bereich).

figma.set_font_family

nodeId, family, style, start, end

Schriftfamilie und -stärke mit automatischem Schriftarten-Laden ändern.

figma.set_text_alignment

nodeId*, horizontal (LINKS/ZENTRIERT/RECHTS/BLOCKSATZ), vertical

Textausrichtung festlegen.

figma.set_line_height

nodeId*, unit (PIXEL/PROZENT/AUTO), value

Zeilenabstand festlegen.

figma.set_letter_spacing

nodeId, unit (PIXEL/PROZENT), value

Zeichenabstand (Laufweite) festlegen.

11. Kontextoptimierung & -kürzung (1 Werkzeug)

Tool Name

Parameters

Beschreibung

figma.compile_context

nodeId, format (markdown/dsl/compact/json), maxTokens, maxDepth

Figma-Bäume mit Token-Budget-Durchsetzung und kompakter DSL-Darstellung kompilieren und komprimieren.

12. Validierung & Barrierefreiheit (2 Werkzeuge)

Tool Name

Parameters

Beschreibung

figma.validate_node

nodeId, rules, includeChildren

Knotenbaum auf WCAG 2.1-Kontrast, Auto-Layout-Regeln, Token-Skalierungen und Layer-Benennungsqualität prüfen.

figma.check_contrast

foreground, background, fontSize, isBold

WCAG 2.1 relative Leuchtdichte und Kontrastverhältnis (AA/AAA) berechnen.

13. Zusammengesetzte Fähigkeiten & Batch-Ausführung (3 Werkzeuge)

Tool Name

Parameters

Beschreibung

figma.list_skills

keine

Verfügbare übergeordnete Agent-Fähigkeiten entdecken.

figma.run_skill

skillName*, payload

Einen mehrschrittigen zusammengesetzten Workflow ausführen.

figma.batch_execute

commands*, rollbackOnFailure (Standard: true), stopOnFirstError, transactionId, idempotencyKey

Mehrere Figma-Befehle in einer atomaren Transaktion mit symbolischer Referenzauflösung (ref, parentRef, nodeRef, $ref:name) und automatischem Rollback bei Fehlern ausführen.

14. Semantische Auflösung des Designsystems (1 Werkzeug)

Tool Name

Parameters

Beschreibung

figma.resolve_design_system

type* (component/color/spacing/radius/audit_node), query, intentHint, nodeId

Menschliche Absicht semantisch auflösen (z. B. "primärer Button", "#6366F1", 16px) zu passenden Komponenten/Tokens mit wahrnehmbarem $\Delta E$-Abstand und Knoten-Token-Audit.

💡 Beispiel: Erstellen einer hierarchischen UI-Karte in einem Batch-Aufruf

{
  "transactionId": "tx-pricing-01",
  "rollbackOnFailure": true,
  "commands": [
    {
      "command": "figma.create_frame",
      "ref": "card",
      "payload": { "width": 360, "height": 480, "name": "Pricing Card" }
    },
    {
      "command": "figma.create_text",
      "ref": "title",
      "parentRef": "card",
      "payload": { "text": "Pro Plan", "font": { "family": "Inter", "style": "Bold", "size": 24 } }
    },
    {
      "command": "figma.create_rectangle",
      "ref": "btn",
      "parentRef": "card",
      "payload": { "width": 312, "height": 44, "cornerRadius": 8, "name": "CTA Button" }
    },
    {
      "command": "figma.set_fills",
      "nodeRef": "btn",
      "payload": { "fills": [{ "type": "SOLID", "color": "#3B82F6" }] }
    }
  ]
}

Gibt refMap: { "card": "123:456", "title": "123:457", "btn": "123:458" } zurück.


🤖 Zusammengesetzte Agent-Fähigkeiten

1. skill.create_design_system

Erstellt in Sekunden ein schlüsselfertiges Designsystem:

  • Erstellt eine Variablensammlung: Farbpalette & Tokens.

  • Erstellt Variablen: color/primary, color/background, color/surface, color/text-primary.

  • Erstellt entsprechende Paint-Stile.

  • Erzeugt eine responsive Master-Komponente Button/Primary mit Auto-Layout, Eckenradius und Token-Bindungen.

2. skill.auto_fix_accessibility

Prüft die Ziel-Layout-Hierarchie auf WCAG 2.1-Kontrastverstöße und repariert automatisch kontrastarme Textfarben gegenüber ihren Hintergrundflächen, um AA-Konformität zu erreichen.

3. skill.convert_wireframe_to_hifi

Wandelt einen Low-Fidelity-Wireframe-Container in eine polierte, responsive High-Fidelity-UI-Karte mit Auto-Layout, modernen Flächenfüllungen, weichen Schlagschatten und kontinuierlicher Eckenglättung um.


🧪 Tests & Verifikation

Führen Sie die umfassende Testsuite aus (115 bestandene Tests in 27 Testdateien):

# Run format checking
pnpm format:check

# Run full build
pnpm build

# Run unit and integration tests
pnpm test

# Strict TypeScript typechecking
pnpm typecheck

# ESLint audit
pnpm lint

Benchmark-Ergebnisse:

  • ⚡ WebSocket-Gleichzeitigkeit: 50 gleichzeitige Client-Verbindungen mit Burst-Heartbeats: p95 < 100ms, 0 Abbrüche.

  • 🌳 Massive Baumskalierung: Kontextkompilierung von 6.111 Knoten mit einem Token-Budget von 1.000: < 100ms Ausführungszeit, >70% Kontextreduktion in Benchmark-Szenarien.

  • 🛡️ Fehlertoleranz: Automatische Wiederverbindung und Fehlerbehandlung mit retryable-Flags bei Socket-Ausfällen.


📄 Lizenz

MIT © 2026 Figma Agent MCP Contributors

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    An MCP server that enables AI assistants to interact with Figma designs for tasks like reading document info, creating elements, and managing auto layouts. It facilitates real-time design automation via a custom Figma plugin and WebSocket server integration.
    1,129 npm
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    MCP server that connects AI clients to Figma, enabling real-time reading, creation, and modification of designs using natural language.
    MIT