cursor-talk-to-figma-mcp MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Read current selection, node trees, and document metadata
Bulk text updates (scan_text_nodes + set_multiple_text_contents) for localization
Auto-layout and spacing tools (set_layout_mode, set_padding, set_axis_align)
Create frames, rectangles, and text; instantiate components; set overrides
Export any node as PNG/SVG for use elsewhere

Live-Demo

In der Praxis

cursor-talk-to-figma.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "cursor-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "cursor-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "cursor-talk-to-figma-mcp"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: cursor-talk-to-figma-mcp

How to update every text layer in a Figma doc from one prompt

👤 Designers + PMs running copy reviews or localization ⏱ ~20 min intermediate

Wann einsetzen: You have a spec that renames 50 strings and you do not want to click 50 times.

Voraussetzungen

Bun installed — curl -fsSL https://bun.sh/install | bash
Figma desktop open with the plugin linked — Plugins > Development > Link existing plugin > point to src/cursor_mcp_plugin/manifest.json
WebSocket bridge running — bun run start in the cloned repo

Ablauf

Join the channel from the plugin panel

Join Figma channel X7F2 and list all text nodes on the current page.✓ Kopiert

→ List of node ids with current text
Map old copy to new copy

Here is a CSV of old_string,new_string. For every text node whose content matches an old_string, replace with the new_string using set_multiple_text_contents.✓ Kopiert

→ Count of updates applied, diff preview
Spot-check visually

Export the three frames that had the most edits as PNGs so I can review.✓ Kopiert

→ PNG URLs / file paths

Ergebnis: A copy-reviewed file with every string updated and a before/after export to prove it.

Fallstricke

Plugin disconnects mid-operation — set_multiple_text_contents is idempotent — re-run with the same mapping; already-correct nodes are skipped
Text in components vs instances confuses updates — Use get_instance_overrides first to see which instances override the base text

Kombinieren mit: filesystem

How to annotate a Figma spec from a PRD in one shot

👤 Design-engineers pairing docs with mocks ⏱ ~25 min intermediate

Wann einsetzen: Your PRD has 'the CTA should say X, include Y tooltip copy' and you want those as Figma annotations.

Ablauf

Share the PRD

Here is the PRD [paste]. Extract every UI annotation requirement.✓ Kopiert

→ Structured list of {node_hint, annotation_text}
Map hints to actual nodes

Use get_selection and scan_nodes_by_types to match each annotation to a concrete node id in the current page.✓ Kopiert

→ Pairs of node_id + annotation ready
Apply annotations

Apply them with set_multiple_annotations.✓ Kopiert

→ Annotations visible in the plugin overlay

Ergebnis: A self-documenting Figma file engineers can read without switching tabs.

Fallstricke

Claude matches the wrong node when several share a name — Include parent frame names as disambiguation hints

Kombinieren mit: notion · github

How to generate component variants (dark mode, sizes) programmatically

👤 Design systems teams ⏱ ~20 min advanced

Wann einsetzen: You need to clone a base button into 12 variants and tweak fills/strokes.

Ablauf

Clone the base node

Clone the Button/Primary frame 4 times and arrange horizontally with 16px gap.✓ Kopiert

→ 4 new nodes in the doc
Retint fills/strokes

For each clone, set_fill_color to the 500, 600, 700, 800 shades of #3B82F6.✓ Kopiert

→ Visible color progression
Convert to variants

Group them as a component set named 'Button / Intensity'.✓ Kopiert

→ New component set appears in assets

Ergebnis: A ready-to-use variant set in your design system.

Fallstricke

Color tokens differ from raw hex — If your system uses variables, use set_fill_color with the variable id not the raw hex

How to export every marked frame as PNG for dev handoff

👤 Design-engineers preparing a handoff doc ⏱ ~10 min beginner

Wann einsetzen: Before a sprint kickoff or a client review.

Ablauf

Find frames with a handoff tag

Scan nodes of type FRAME on the current page whose name starts with '[HANDOFF]'.✓ Kopiert

→ List of target frames
Export at 2x

Export each as PNG at 2x and save to /handoff/2026-04/.✓ Kopiert

→ File paths returned

Ergebnis: A timestamped handoff folder ready to drop into Notion or Linear.

Kombinieren mit: filesystem · notion

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

cursor-talk-to-figma + notion

Sync design annotations into a Notion spec page for engineers

Extract every annotation on the current Figma page and mirror them into the Notion doc 'Checkout Spec v3' as a checklist.✓ Kopiert

cursor-talk-to-figma + filesystem

Export frames into a local handoff folder versioned by date

Export every [HANDOFF] frame to /design-handoff/2026-04/ as PNG 2x.✓ Kopiert

cursor-talk-to-figma + github

Pair a design change with a code PR reference

Add an annotation on the CTA button linking to PR #4421 in frontend repo.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
get_document_info		Orient yourself in a new file	free
get_selection		Operate on what the user just clicked	free
scan_text_nodes	root_id?: str	Before bulk copy changes	free
set_multiple_text_contents	updates: {id, text}[]	Batch text replacement	free
set_fill_color	id: str, color: {r,g,b,a}	Restyle a node	free
set_layout_mode	id, mode: 'HORIZONTAL'\|'VERTICAL'\|'NONE'	Toggle auto-layout	free
create_component_instance	component_key: str, parent_id: str, position?: {x,y}	Drop a library component onto the canvas	free
set_multiple_annotations	annotations: {id, text}[]	Batch spec annotations	free
export_node_as_image	id: str, format: 'PNG'\|'SVG'\|'JPG', scale?: number	Handoff, reviews, inline previews	free
join_channel	channel: str	First call after launching the plugin	free

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Figma has no published rate limit for plugin actions; practical cap is WebSocket throughput
Tokens pro Aufruf: Node info: 100-1500 tokens depending on children
Kosten in €: Free (Figma account required; free plan works)
Tipp: Always scope scans to a specific root node id; page-wide scans on big files blow up the context.

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: Figma plugin running in desktop/web app; no API token needed

Credential-Speicherung: None — plugin runs in-process in Figma; MCP talks over localhost WebSocket

Datenabfluss: Figma document nodes flow from the plugin to your local MCP and then to your chosen LLM. Sensitive designs leave your machine only through the LLM call.

Niemals gewähren: Do not expose the WebSocket port beyond localhost

Bulk edits are not transactional — partial failure leaves mixed state. Commit Figma versions before big runs.

Fehlerbehebung

Häufige Fehler und Lösungen

Plugin cannot connect to WebSocket

Ensure bun run start is active and the plugin channel id matches what the agent joined.

Prüfen: bun --version && lsof -i :3055

set_multiple_text_contents only updates some nodes

Nodes inside locked layers or components are skipped. Unlock or target the instance override.

Figma plugin shows 'manifest not found'

Re-link via Plugins > Development > Link existing plugin > pick manifest.json from src/cursor_mcp_plugin/.

Exports return empty URLs

Some nodes (mask groups, certain effects) cannot render server-side. Flatten first or export as SVG.

Alternativen

cursor-talk-to-figma-mcp vs. andere

Alternative	Wann stattdessen	Kompromiss
Official Figma Dev Mode MCP	You have Figma paid Dev Mode seats and want official support	Read-only; no bulk editing
Framelink Figma MCP	You prefer a read-only REST-API-based server	No mutation, no WebSocket plugin needed but cannot edit

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen