de en es ja ko ru zh

Figma Agent MCP

Name: Figma Agent MCP
Author: TrungLee003

by TrungLee003

Overview Schema Related Servers Score Discussions

TypeScript

Local

⚡ Figma Agent MCP

Lokaler KI-Design-Agent für Figma über Model Context Protocol (MCP) → WebSocket-Bridge → Natives Figma-Plugin.
Figma-Designs nativ inspizieren, erstellen, ändern, stylen, validieren und optimieren – mit deterministischen, typisierten Werkzeugen, Design-System-Bewusstsein, Token-Kompression und einsatzbereiten zusammengesetzten Arbeitsabläufen.

CI-Status TypeScript Streng Tests MCP-Werkzeuge Lizenz: MIT

🏛️ Systemarchitektur

┌─────────────────────────────────────────────────────────────┐
│             AI Client (Claude / Cursor / Antigravity / LLM) │
└──────────────────────────────┬──────────────────────────────┘
                               │ MCP Protocol (stdio / SSE)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        MCP Server (@figma-agent/mcp-server — 48 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (>70% cut) - Composite Skills Runtime   │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       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                        │
└─────────────────────────────────────────────────────────────┘

🌟 Hauptmerkmale

🔒 Lokal & Sicher: Standardmäßig an 127.0.0.1 gebunden. 128-Bit-Geheimkanal-Paarung. Keine beliebige JavaScript-Ausführung innerhalb von Figma.
🧩 48 deterministische MCP-Werkzeuge: Umfassende Abdeckung in den Bereichen Lesen, Erstellen, Ändern, Auto Layout, visuelle Stile, Komponenten, Variablen/Tokens, Typografie und Export.
⚡ Kontext-Compiler (>70 % Token-Reduktion): Komprimiert riesige Knotenbäume in semantisches Markdown oder kompaktes DSL mit adaptiver Tiefenbegrenzung und Token-Budget-Einhaltung unter 100 ms.
🛡️ Integrierte Validierung & WCAG-2.1-Engine: Berechnung relativer Leuchtdichte und Kontrastverhältnisse (AA/AAA) für normalen Text, großen Text und UI-Komponenten; Auto-Layout-Linter; 4px/8px-Token-Raster-Prüfer.
🔄 Atomare Stapelausführung: Sequenzielle Ausführung von Befehlspipelines mit Fehlerbehandlung mittels stopOnFirstError oder continueOnError.
🚀 Einsatzbereite Agentenfähigkeiten: Vorgepackte zusammengesetzte Arbeitsabläufe für sofortige Design-System-Erstellung, WCAG-Barrierefreiheits-Autoreparatur und Drahtmodell-zu-HiFi-Kartenkonvertierung.

📦 Monorepo-Aufbau

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 48 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. Das Monorepo erstellen

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

2. Den 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

Öffnen Sie Figma Desktop.
Gehen Sie zu Plugins → Entwicklung → Plugin aus Manifest importieren...
Wählen Sie apps/figma-plugin/manifest.json aus.
Führen Sie das Plugin Figma Agent Bridge aus. Notieren Sie Ihre Kanal-ID (Standard: default-channel).

⚙️ KI-Client-Konfiguration

🤖 1. Claude Desktop

Fügen Sie Ihrer claude_desktop_config.json (%APPDATA%\Claude\claude_desktop_config.json unter Windows oder ~/Library/Application Support/Claude/claude_desktop_config.json unter macOS) Folgendes hinzu:

{
  "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ügen Sie Ihrer Cursor-MCP-Konfiguration (Einstellungen → Funktionen → MCP oder .cursor/mcp.json) Folgendes 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"
      }
    }
  }
}

🧠 3. Google Antigravity / Gemini CLI

Fügen Sie Ihren Antigravity-MCP-Einstellungen (~/.gemini/antigravity/mcp_config.json) Folgendes 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"
      }
    }
  }
}

⚡ 4. OpenAI Codex / Codex CLI / OpenAI Operator

Fügen Sie Ihrer Codex-MCP-Konfiguration (~/.codex/config.json oder codex-settings.json) Folgendes 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"
      }
    }
  }
}

Oder registrieren Sie es über die 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ügen Sie ~/.codeium/windsurf/mcp_config.json Folgendes 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-Werkzeugreferenz (48 Werkzeuge)

1. Verbindung & Sitzung (2 Werkzeuge)

Werkzeugname	Parameter	Beschreibung
`figma.get_connection`	keine	Aktuellen WebSocket-Bridge-Verbindungsstatus, Latenz und Sitzungsfähigkeiten abrufen.
`figma.join_channel`	`channelId` extsuperscript{*}, `secret`	Zu einer bestimmten Figma-Dokumentkanal-Sitzung wechseln oder dieser beitreten.

2. Inspektion & Lesen (6 Werkzeuge)

Werkzeugname	Parameter	Beschreibung
`figma.get_document`	`depth` (0–10)	Dokument-Wurzelhierarchie mit begrenzter Tiefe abrufen.
`figma.get_selection`	`depth` (0–10)	Derzeit ausgewählte Knoten in der aktiven Figma-Zeichenfläche abrufen.
`figma.get_node`	`nodeId` extsuperscript{*}, `depth`	Detaillierte Eigenschaften und Unterbaum eines bestimmten Knotens lesen.
`figma.get_nodes`	`nodeIds` extsuperscript{*}, `depth`	Mehrere Knoten stapelweise anhand ihrer ID 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 Werkzeuge)

Werkzeugname	Parameter	Beschreibung
`figma.create_frame`	`width` extsuperscript{}, `height` extsuperscript{}, `x`, `y`, `name`, `parentId`, `layoutMode`	Einen Container-Frame mit optionalem Auto Layout erstellen.
`figma.create_text`	`text` extsuperscript{*}, `x`, `y`, `width`, `font` ({family, style, size}), `name`, `parentId`	Einen Textknoten mit zuverlässigem Schriftarten-Laden erstellen.
`figma.create_rectangle`	`width` extsuperscript{}, `height` extsuperscript{}, `x`, `y`, `cornerRadius`, `name`, `parentId`	Einen Rechteck-Vektorknoten erstellen.
`figma.create_section`	`width` extsuperscript{}, `height` extsuperscript{}, `x`, `y`, `name`, `parentId`	Einen Abschnitts-Organisationscontainer erstellen.

4. Knotenänderung & Geometrie (6 Werkzeuge)

Werkzeugname	Parameter	Beschreibung
`figma.move_node`	`nodeId` extsuperscript{}, `x` extsuperscript{}, `y` extsuperscript{*}	Einen Knoten an absolute Koordinatenpositionen verschieben.
`figma.resize_node`	`nodeId` extsuperscript{}, `width` extsuperscript{}, `height` extsuperscript{*}	Knotenabmessungen ändern.
`figma.rename_node`	`nodeId` extsuperscript{}, `name` extsuperscript{}	Knotenebenenbezeichnung umbenennen.
`figma.delete_node`	`nodeId` extsuperscript{*}	Einen Knoten von der Zeichenfläche löschen.
`figma.clone_node`	`nodeId` extsuperscript{*}, `parentId`, `x`, `y`, `name`	Eine vorhandene Knotenhierarchie duplizieren.
`figma.set_parent`	`nodeId` extsuperscript{}, `targetParentId` extsuperscript{}, `index`	Einen Knoten im Ebenenbaum neu zuordnen und neu anordnen.

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

Werkzeugname	Parameter	Beschreibung
`figma.set_auto_layout`	`nodeId` extsuperscript{}, `mode` extsuperscript{}, `itemSpacing`, `padding` ({top, right, bottom, left}), `primaryAxisAlignItems`, `counterAxisAlignItems`	Responsives, Flexbox-ähnliches Auto Layout konfigurieren.
`figma.set_layout_sizing`	`nodeId` extsuperscript{*}, `horizontal` (FIXED/HUG/FILL), `vertical` (FIXED/HUG/FILL)	Größenverhalten von Container und Kind-Achse festlegen.

6. Visuelle Stile & Effekte (5 Werkzeuge)

Werkzeugname	Parameter	Beschreibung
`figma.set_fills`	`nodeId` extsuperscript{}, `fills` extsuperscript{} (Array von Solid-/Gradient-/Image-Füllungen)	Hintergrundfarben, Farbverläufe und Bilder anwenden.
`figma.set_strokes`	`nodeId` extsuperscript{}, `strokes` extsuperscript{}, `strokeWeight`, `strokeAlign`	Randstriche, -stärken und -ausrichtungen anwenden.
`figma.set_corner_radius`	`nodeId` extsuperscript{}, `radius` extsuperscript{} (Zahl oder Pro-Ecke-Objekt), `cornerSmoothing`	Eckenradius mit kontinuierlicher iOS-Glättung festlegen.
`figma.set_opacity`	`nodeId` extsuperscript{}, `opacity` extsuperscript{} (0.0 – 1.0)	Ebenendeckkraft anpassen.
`figma.set_effects`	`nodeId` extsuperscript{}, `effects` extsuperscript{} (DROP_SHADOW, INNER_SHADOW, LAYER_BLUR)	Schlagschatten, innere Schatten und Weichzeichner anwenden.

7. Komponenten & Instanzen (4 Werkzeuge)

Werkzeugname	Parameter	Beschreibung
`figma.create_component`	`name` extsuperscript{*}, `width`, `height`, `parentId`, `componentPropertyDefinitions`	Einen Knoten in eine wiederverwendbare Master-Komponente umwandeln.
`figma.create_instance`	`componentId` extsuperscript{*}, `x`, `y`, `properties`, `parentId`	Eine Komponentenvariante instanziieren.
`figma.set_component_properties`	`nodeId` extsuperscript{}, `properties` extsuperscript{}	Komponentenvarianteneigenschaften überschreiben.
`figma.detach_instance`	`nodeId` extsuperscript{*}	Komponenteninstanz in reguläre, bearbeitbare Rahmen trennen.

8. Variablen & Design-Tokens (6 Werkzeuge)

Werkzeugname	Parameter	Beschreibung
`figma.get_local_variables`	`collectionId`	Lokale Variablen und Token-Sammlungen auflisten.
`figma.create_variable`	`name` extsuperscript{}, `resolvedType` extsuperscript{} (COLOR/FLOAT/STRING/BOOLEAN), `collectionId`, `collectionName`, `initialValue`	Eine semantische Design-Token-Variable erstellen.
`figma.set_variable_value`	`variableId` extsuperscript{}, `modeId` extsuperscript{}, `value` extsuperscript{*}	Variablenwert für einen bestimmten Modus aktualisieren.
`figma.bind_variable`	`nodeId` extsuperscript{}, `property` extsuperscript{} (fills/strokes/opacity/itemSpacing/cornerRadius), `variableId` extsuperscript{*}	Eine Knoteneigenschaft an eine Design-Token-Variable binden.
`figma.create_paint_style`	`name` extsuperscript{}, `paints` extsuperscript{}, `description`	Einen gemeinsamen Füllstil in der Datei erstellen.
(Wiederverwendete Inspektion)	`get_local_styles`	Gemeinsame Stile abfragen.

9. Assets, Bilder & Export (3 Werkzeuge)

Tool Name	Parameters	Description
`figma.export_node`	`nodeId`·, `format` (PNG/JPG/SVG/PDF), `scale`	Export node as Base64 image data or UTF-8 SVG string.
`figma.set_export_settings`	`nodeId`, `exportSettings`	Configure export presets on a node.
`figma.set_image_fill`	`nodeId`, `imageBase64`, `scaleMode`, `opacity`	Upload and apply an image fill from Base64.

10. Text & Typography (6 tools)

Tool Name	Parameters	Description
`figma.set_text_content`	`nodeId`, `text`	Update text string content.
`figma.set_font_size`	`nodeId`, `fontSize`, `start`, `end`	Update font size (whole text or range).
`figma.set_font_family`	`nodeId`, `family`, `style`, `start`, `end`	Change font family and weight with auto font-loading.
`figma.set_text_alignment`	`nodeId`*, `horizontal` (LEFT/CENTER/RIGHT/JUSTIFIED), `vertical`	Set text alignment.
`figma.set_line_height`	`nodeId`*, `unit` (PIXELS/PERCENT/AUTO), `value`	Set line height spacing.
`figma.set_letter_spacing`	`nodeId`, `unit` (PIXELS/PERCENT), `value`	Set letter spacing (tracking).

11. Context Optimization & Pruning (1 tool)

Tool Name	Parameters	Description
`figma.compile_context`	`nodeId`, `format` (markdown/dsl/compact/json), `maxTokens`, `maxDepth`	Compile and compress Figma trees with token budget enforcement (>70% compression).

12. Validation & Accessibility (2 tools)

Tool Name	Parameters	Description
`figma.validate_node`	`nodeId`, `rules`, `includeChildren`	Audit node tree for WCAG 2.1 contrast, Auto Layout rules, token scales, and layer naming health.
`figma.check_contrast`	`foreground`, `background`, `fontSize`, `isBold`	Calculate WCAG 2.1 relative luminance and contrast ratio (AA/AAA).

13. Composite Skills & Batch Execution (2 tools)

Tool Name	Parameters	Description
`figma.list_skills`	none	Discover available high-level Agent Skills.
`figma.run_skill`	`skillName`*, `payload`	Execute a multi-step composite workflow.
`figma.batch_execute`	`commands`*, `stopOnFirstError`	Execute multiple Figma commands in a single atomic batch transaction.

🤖 Composite Agent Skills

1. `skill.create_design_system`

Creates a turnkey design system in seconds:

Creates Variable Collection: Color Palette & Tokens.
Creates variables: color/primary, color/background, color/surface, color/text-primary.
Creates corresponding Paint Styles.
Generates a responsive Button/Primary Master Component with Auto Layout, corner radius, and token bindings.

2. `skill.auto_fix_accessibility`

Audits the target layout hierarchy for WCAG 2.1 contrast violations and automatically repairs low-contrast text colors against their background surfaces to achieve AA compliance.

3. `skill.convert_wireframe_to_hifi`

Transforms a low-fidelity wireframe container into a polished, responsive High-Fidelity UI Card with Auto Layout, modern surface fills, soft drop shadows, and continuous corner smoothing.

🧪 Testing & Verification

Run the comprehensive test suite (115 passing tests across 27 test files):

# 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 Results:

⚡ WebSocket Concurrency: 50 concurrent client connections with burst heartbeats: p95 < 100ms, 0 dropouts.
🌳 Massive Tree Scaling: Context compilation of 6,111 nodes with 1,000 token budget: < 100ms execution time, >70% compression ratio.
🛡️ Fault Tolerance: Automatic reconnection and error handling with retryable flags on socket dropouts.

📄 License

This server cannot be installed

license - not tested

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Figma MCP Server
The Figma MCP server brings Figma design context directly into your AI workflow.
microservices.sh
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
mcp
MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/TrungLee003/figma-agent-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server