cursor-talk-to-figma-mcp MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

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

Живое демо

Как выглядит на практике

cursor-talk-to-figma.replay ▶ готово

0/0

Установка

Выберите клиент

~/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
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

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

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

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

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

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

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

Добавьте в context_servers. Zed перезагружается автоматически.

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

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: 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

Когда использовать: You have a spec that renames 50 strings and you do not want to click 50 times.

Предварительные требования

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

Поток

Join the channel from the plugin panel

Join Figma channel X7F2 and list all text nodes on the current page.✓ Скопировано

→ 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.✓ Скопировано

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

Export the three frames that had the most edits as PNGs so I can review.✓ Скопировано

→ PNG URLs / file paths

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

Подводные камни

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

Сочетать с: filesystem

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

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

Когда использовать: Your PRD has 'the CTA should say X, include Y tooltip copy' and you want those as Figma annotations.

Поток

Share the PRD

Here is the PRD [paste]. Extract every UI annotation requirement.✓ Скопировано

→ 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.✓ Скопировано

→ Pairs of node_id + annotation ready
Apply annotations

Apply them with set_multiple_annotations.✓ Скопировано

→ Annotations visible in the plugin overlay

Итог: A self-documenting Figma file engineers can read without switching tabs.

Подводные камни

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

Сочетать с: notion · github

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

👤 Design systems teams ⏱ ~20 min advanced

Когда использовать: You need to clone a base button into 12 variants and tweak fills/strokes.

Поток

Clone the base node

Clone the Button/Primary frame 4 times and arrange horizontally with 16px gap.✓ Скопировано

→ 4 new nodes in the doc
Retint fills/strokes

For each clone, set_fill_color to the 500, 600, 700, 800 shades of #3B82F6.✓ Скопировано

→ Visible color progression
Convert to variants

Group them as a component set named 'Button / Intensity'.✓ Скопировано

→ New component set appears in assets

Итог: A ready-to-use variant set in your design system.

Подводные камни

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

Когда использовать: Before a sprint kickoff or a client review.

Поток

Find frames with a handoff tag

Scan nodes of type FRAME on the current page whose name starts with '[HANDOFF]'.✓ Скопировано

→ List of target frames
Export at 2x

Export each as PNG at 2x and save to /handoff/2026-04/.✓ Скопировано

→ File paths returned

Итог: A timestamped handoff folder ready to drop into Notion or Linear.

Сочетать с: filesystem · notion

Комбинации

Сочетайте с другими MCP — эффект x10

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.✓ Скопировано

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.✓ Скопировано

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.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
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

Стоимость и лимиты

Во что обходится

Квота API: Figma has no published rate limit for plugin actions; practical cap is WebSocket throughput
Токенов на вызов: Node info: 100-1500 tokens depending on children
Деньги: Free (Figma account required; free plan works)
Совет: Always scope scans to a specific root node id; page-wide scans on big files blow up the context.

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: Figma plugin running in desktop/web app; no API token needed

Хранение учётных данных: None — plugin runs in-process in Figma; MCP talks over localhost WebSocket

Исходящий трафик: 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.

Никогда не давайте: Do not expose the WebSocket port beyond localhost

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

Устранение неполадок

Частые ошибки и исправления

Plugin cannot connect to WebSocket

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

Проверить: 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.

Альтернативы

cursor-talk-to-figma-mcp в сравнении

Альтернатива	Когда использовать	Компромисс
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

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills