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

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

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

Works with free Figma accounts (no Dev Mode license)
Read: document info, selection, style audits, component scans
Write: create/modify shapes, text, frames, colors, auto-layout
Channel-ID pairing connects each Claude session to one Figma file

Живое демо

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

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

0/0

Установка

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

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

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

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

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

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

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

VS Code → Cline → MCP Servers → Edit

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

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

~/.codeium/windsurf/mcp_config.json

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

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

~/.continue/config.json

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

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

~/.config/zed/settings.json

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

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

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

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

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

Реальные сценарии: claude-talk-to-figma-mcp

Audit a Figma file for off-system colors and styles

👤 Design system maintainers ⏱ ~20 min intermediate

Когда использовать: The team's file has drifted from the design tokens and you want to find the strays.

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

Figma plugin imported via manifest — Figma → Plugins → Development → Import from manifest
Running bun run socket — From the repo; opens the WebSocket

Поток

Connect

Connect to Figma, channel abc123 (copy from the plugin UI).✓ Скопировано

→ Connected; document name shown
Scan for off-system fills

Scan all nodes for fill colors that aren't in our 12 brand tokens. List node paths.✓ Скопировано

→ List of drift instances
Report

Group by nearest frame and summarize. Suggest which token each stray should be.✓ Скопировано

→ Actionable cleanup list

Итог: A file you can hand to a designer with concrete fixes.

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

Channel ID rotates if you restart the plugin — Always copy fresh from the plugin panel; stale IDs silently time out

Turn a written spec into a rough Figma frame

👤 PMs, non-designers ⏱ ~15 min beginner

Когда использовать: You want a quick wireframe without opening Figma yourself.

Поток

Describe the layout

Create a new frame 1440x900 in the current file. Add a header, a 3-column feature grid, and a footer. Use our brand colors.✓ Скопировано

→ Frame appears in Figma with the structure
Iterate

Make the feature cards use our 'Card' component. Swap the header to variant 'primary'.✓ Скопировано

→ Frame updated in real time

Итог: A rough wireframe without touching the Figma UI.

Run an accessibility color-contrast check on a Figma file

👤 Designers, accessibility advocates ⏱ ~25 min intermediate

Когда использовать: Before handoff, you want to flag contrast failures.

Поток

Walk text nodes with their backgrounds

For every text node, compute WCAG contrast against the nearest background fill. Flag anything below 4.5:1 for body or 3:1 for large.✓ Скопировано

→ List of failing pairs with ratios
Suggest adjustments

For each failure, suggest the minimum token swap to pass.✓ Скопировано

→ Fix suggestions

Итог: An accessibility report before QA catches it later.

Комбинации

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

claude-talk-to-figma + meigen-ai-design

Generate an image, drop it into a Figma frame as a placeholder

Generate a hero image with MeiGen, then place it as a fill in the selected Figma frame.✓ Скопировано

claude-talk-to-figma + unreal

Figma HUD → Unreal UMG widget scaffold

Export the selected Figma HUD frame structure, then create a matching UMG Widget Blueprint in Unreal.✓ Скопировано

Инструменты

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

Инструмент	Входные данные	Когда вызывать
get_document_info		First step; confirm the right file
get_selection		Operate on what the user selected
scan_styles		Drift detection
create_shape	type, x, y, w, h, fill?	Build layouts
create_text	content, x, y, style?	Add labels/headings
set_fill	node_id, color	Fix strays
set_auto_layout	node_id, direction, padding, gap	Convert to responsive

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

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

Квота API: None — everything is local WebSocket
Токенов на вызов: Document scans can be 5-30k tokens on big files
Деньги: Free
Совет: Operate on get_selection whenever possible; full-doc scans burn tokens

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

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

Хранение учётных данных: No API keys; the plugin uses your current Figma session

Исходящий трафик: Local WebSocket only; Figma data only leaves if you share results

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

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

Connection timeout / channel not found

Channel IDs rotate — copy fresh from the plugin panel and reconnect

Plugin missing from Figma menu

Re-import via Plugins → Development → Import from manifest; dev plugins don't persist across Figma restarts on some setups

Writes fail silently

Figma restricts plugin writes on some file types (libraries, community duplicates). Check for the lock icon

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

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

Альтернатива	Когда использовать	Компромисс
Framelink / Figma-Context MCP	You want read-only via Figma's API with a personal token	No write; needs API access
Figma Dev Mode MCP (official)	Your org pays for Dev Mode	Paid seats required

Ещё

Ресурсы

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

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

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