Figma Agent MCP
⚡ 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.
🏛️ 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
stopOnFirstErrorodercontinueOnErrorFehlerbehandlung.🚀 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 build2. Bridge-Server starten
pnpm --filter @figma-agent/bridge-server start
# Bridge server listening at ws://127.0.0.1:30553. Das Figma-Plugin in Figma Desktop laden
Öffne Figma Desktop.
Gehe zu Plugins → Entwicklung → Plugin aus Manifest importieren...
Wähle
apps/figma-plugin/manifest.json.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 |
| keine | Aktuellen WebSocket-Bridge-Verbindungsstatus, Latenz und Sitzungsfähigkeiten abrufen. |
|
| Wechseln oder Beitreten zu einer bestimmten Figma-Dokumentenkanal-Sitzung. |
2. Inspektion & Lesen (6 Tools)
Tool-Name | Parameter | Beschreibung |
|
| Dokumentwurzelhierarchie mit begrenzter Tiefe abrufen. |
|
| Aktuell ausgewählte Knoten in der aktiven Figma-Leinwand abrufen. |
|
| Detaillierte Eigenschaften und Unterbaum eines bestimmten Knotens lesen. |
|
| Mehrere Knoten per ID stapelweise abrufen. |
| keine | Alle wiederverwendbaren Komponenten und Varianten in der Datei auflisten. |
|
| Lokale Füll-, Text- und Effektstile auflisten. |
3. Knotenerstellung (4 Tools)
Tool-Name | Parameter | Beschreibung |
|
| Einen Container-Frame mit optionalem Auto-Layout erstellen. |
|
| Einen Textknoten mit zuverlässigem Schriftladen erstellen. |
|
| Einen Rechteck-Vektorknoten erstellen. |
|
| Einen Abschnitts-Organisationscontainer erstellen. |
4. Knotenveränderung & Geometrie (6 Tools)
Tool-Name | Parameter | Beschreibung |
|
| Einen Knoten zu absoluten Koordinatenpositionen verschieben. |
|
| Knotendimensionen ändern. |
|
| Knoten-Ebenentitel umbenennen. |
|
| Einen Knoten von der Leinwand löschen. |
|
| Vorhandene Knotenhierarchie duplizieren. |
|
| Einen Knoten in der Ebenenstruktur neu zuordnen und umordnen. |
5. Auto-Layout & Responsive Größenanpassung (2 Tools)
Tool-Name | Parameter | Beschreibung |
|
| Responsives Flexbox-ähnliches Auto-Layout konfigurieren. |
|
| Größenverhalten von Container und Kind-Achsen festlegen. |
6. Visuelle Stile & Effekte (5 Tools)
Tool-Name | Parameter | Beschreibung |
|
| Hintergrundfarben, Farbverläufe und Bilder anwenden. |
|
| Rahmenstriche, -stärken und -ausrichtungen anwenden. |
|
| Eckenradius mit iOS-kontinuierlicher Glättung festlegen. |
|
| Ebenendeckkraft anpassen. |
|
| Schlagschatten, innere Schatten und Weichzeichner anwenden. |
7. Komponenten & Instanzen (5 Tools)
Tool-Name | Parameter | Beschreibung |
|
| Einen Knoten in eine wiederverwendbare Master-Komponente umwandeln. |
|
| Eine Komponentenvariante instanziieren. |
|
| Komponentenvarianteneigenschaften überschreiben. |
|
| Komponenteninstanz in bearbeitbare Frames trennen (sicherheitsgeschützt). |
|
| Lokale Master-Komponenten und Komponentensets mit Varianteneigenschaften abrufen. |
8. Variablen & Design-Tokens (6 Tools)
Tool Name | Parameters | Beschreibung |
|
| Lokale Variablen und Token-Sammlungen auflisten. |
|
| Eine semantische Design-Token-Variable erstellen. |
|
| Variablenwert für einen bestimmten Modus aktualisieren. |
|
| Eine Knoteneigenschaft an eine Design-Token-Variable binden. |
|
| Einen gemeinsamen Paint-Stil in der Datei erstellen. |
(Wiederverwendet Inspect) |
| Gemeinsame Stile abfragen. |
9. Assets, Bilder & Export (3 Werkzeuge)
Tool Name | Parameters | Beschreibung |
|
| Knoten als Base64-Bilddaten oder UTF-8-SVG-String exportieren. |
|
| Exportvoreinstellungen auf einem Knoten konfigurieren. |
|
| Eine Bildfüllung aus Base64 hochladen und anwenden. |
10. Text & Typografie (6 Werkzeuge)
Tool Name | Parameters | Beschreibung |
|
| Textzeichenfolgeninhalt aktualisieren. |
|
| Schriftgröße aktualisieren (gesamter Text oder Bereich). |
|
| Schriftfamilie und -stärke mit automatischem Schriftarten-Laden ändern. |
|
| Textausrichtung festlegen. |
|
| Zeilenabstand festlegen. |
|
| Zeichenabstand (Laufweite) festlegen. |
11. Kontextoptimierung & -kürzung (1 Werkzeug)
Tool Name | Parameters | Beschreibung |
|
| Figma-Bäume mit Token-Budget-Durchsetzung und kompakter DSL-Darstellung kompilieren und komprimieren. |
12. Validierung & Barrierefreiheit (2 Werkzeuge)
Tool Name | Parameters | Beschreibung |
|
| Knotenbaum auf WCAG 2.1-Kontrast, Auto-Layout-Regeln, Token-Skalierungen und Layer-Benennungsqualität prüfen. |
|
| WCAG 2.1 relative Leuchtdichte und Kontrastverhältnis (AA/AAA) berechnen. |
13. Zusammengesetzte Fähigkeiten & Batch-Ausführung (3 Werkzeuge)
Tool Name | Parameters | Beschreibung |
| keine | Verfügbare übergeordnete Agent-Fähigkeiten entdecken. |
|
| Einen mehrschrittigen zusammengesetzten Workflow ausführen. |
|
| Mehrere Figma-Befehle in einer atomaren Transaktion mit symbolischer Referenzauflösung ( |
14. Semantische Auflösung des Designsystems (1 Werkzeug)
Tool Name | Parameters | Beschreibung |
|
| 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/Primarymit 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 lintBenchmark-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
This server cannot be deployed
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
Nifty's MCP server — exposes tasks, projects, messages, and files as tools for AI agents.
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceAn 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 npmMIT
- AlicenseNot gradedqualityDmaintenanceMCP server that connects AI clients to Figma, enabling real-time reading, creation, and modification of designs using natural language.MIT
- AlicenseAqualityDmaintenanceLocal-first MCP server that connects AI coding agents to the currently open Figma file through a local plugin bridge, requiring no Figma API token.8MIT
- AlicenseBqualityCmaintenanceLocal MCP server connecting AI clients to the Figma desktop app for inspecting and editing Figma documents via the Plugin API.1616 npm1MIT