cursor-talk-to-figma-mcp MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

現在の選択、ノードツリー、ドキュメントメタデータの読み取り
ローカライズ向けテキスト一括更新（scan_text_nodes + set_multiple_text_contents）
オートレイアウトとスペーシングのツール（set_layout_mode, set_padding, set_axis_align）
フレーム、矩形、テキストの作成、コンポーネントのインスタンス化、オーバーライドの設定
任意のノードをPNG/SVGとしてエクスポートし、他の用途に活用

ライブデモ

実際の動作

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 は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

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

Cline サイドバーの MCP Servers アイコンをクリックし、"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 はマップではなくサーバーオブジェクトの配列を使用。

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

1つのプロンプトでFigmaドキュメント内のすべてのテキストレイヤーを更新する方法

👤 コピーレビューやローカライズを行うデザイナー＋PM ⏱ ~20 min intermediate

使うタイミング： 50個の文字列を変更する仕様があり、50回クリックしたくないとき。

前提条件

Bunがインストール済みであること — curl -fsSL https://bun.sh/install | bash
Figmaデスクトップアプリでプラグインがリンク済みであること — Plugins > Development > Link existing plugin > src/cursor_mcp_plugin/manifest.json を指定
WebSocketブリッジが起動中であること — クローンしたリポジトリで bun run start を実行

フロー

プラグインパネルからチャンネルに参加する

FigmaチャンネルX7F2に参加して、現在のページのすべてのテキストノードを一覧表示して。✓ コピーしました

→ ノードIDと現在のテキストの一覧
旧コピーと新コピーのマッピングを行う

old_string,new_stringのCSVを渡します。テキストノードの内容がold_stringに一致するものすべてについて、set_multiple_text_contentsを使ってnew_stringに置換して。✓ コピーしました

→ 適用された更新件数、差分プレビュー
目視で確認する

編集が最も多かった3つのフレームをPNGとしてエクスポートして、レビューできるようにして。✓ コピーしました

→ PNGのURL/ファイルパス

結果： すべての文字列が更新されたコピーレビュー済みファイルと、変更前後のエクスポートによる証跡。

注意点

操作中にプラグインが切断される — set_multiple_text_contentsは冪等です。同じマッピングで再実行すれば、すでに正しいノードはスキップされます
コンポーネントとインスタンスのテキスト更新が混乱する — まずget_instance_overridesで、どのインスタンスがベーステキストをオーバーライドしているか確認してください

組み合わせ： filesystem

PRDからFigma仕様にアノテーションを一発で付与する方法

👤 ドキュメントとモックを連携させるデザインエンジニア ⏱ ~25 min intermediate

使うタイミング： PRDに「CTAはXと表示し、Yのツールチップコピーを含める」と書かれていて、それをFigmaアノテーションとして反映したいとき。

フロー

PRDを共有する

PRDはこちらです [貼り付け]。UIアノテーションの要件をすべて抽出して。✓ コピーしました

→ {node_hint, annotation_text}の構造化リスト
ヒントを実際のノードにマッピングする

get_selectionとscan_nodes_by_typesを使って、各アノテーションを現在のページの具体的なノードIDに対応付けて。✓ コピーしました

→ node_id + アノテーションのペアが準備完了
アノテーションを適用する

set_multiple_annotationsで適用して。✓ コピーしました

→ プラグインオーバーレイにアノテーションが表示される

結果： エンジニアがタブを切り替えずに読める、自己説明的なFigmaファイル。

注意点

同名のノードが複数ある場合、Claudeが間違ったノードにマッチする — 曖昧さ回避のヒントとして親フレーム名を含めてください

組み合わせ： notion · github

コンポーネントバリアント（ダークモード、サイズ違い）をプログラム的に生成する方法

👤 デザインシステムチーム ⏱ ~20 min advanced

使うタイミング： ベースボタンを12個のバリアントに複製し、塗りやストロークを調整する必要があるとき。

フロー

ベースノードを複製する

Button/Primaryフレームを4回複製し、16pxの間隔で水平に並べて。✓ コピーしました

→ ドキュメントに4つの新しいノードが追加される
塗り・ストロークの色を変更する

各クローンに対して、set_fill_colorで#3B82F6の500、600、700、800シェードを設定して。✓ コピーしました

→ 色のグラデーションが視覚的に確認できる
バリアントに変換する

'Button / Intensity'という名前のコンポーネントセットとしてグループ化して。✓ コピーしました

→ アセットに新しいコンポーネントセットが表示される

結果： デザインシステムですぐに使えるバリアントセット。

注意点

カラートークンが生のHEX値と異なる — システムでバリアブルを使用している場合は、生のHEXではなくバリアブルIDを指定してset_fill_colorを使用してください

マーク付きフレームをすべてPNGとしてエクスポートし開発ハンドオフする方法

👤 ハンドオフ資料を準備するデザインエンジニア ⏱ ~10 min beginner

使うタイミング： スプリントキックオフやクライアントレビューの前に。

フロー

ハンドオフタグ付きのフレームを検索する

現在のページでタイプがFRAMEかつ名前が'[HANDOFF]'で始まるノードをスキャンして。✓ コピーしました

→ 対象フレームの一覧
2倍でエクスポートする

それぞれを2xのPNGとしてエクスポートし、/handoff/2026-04/ に保存して。✓ コピーしました

→ ファイルパスが返される

結果： NotionやLinearにそのまま配置できる、タイムスタンプ付きのハンドオフフォルダ。

組み合わせ： filesystem · notion

組み合わせ

他のMCPと組み合わせて10倍の力を

cursor-talk-to-figma + notion

デザインアノテーションをNotionの仕様ページに同期し、エンジニアに共有する

現在のFigmaページのすべてのアノテーションを抽出し、Notionドキュメント'Checkout Spec v3'にチェックリストとしてミラーリングして。✓ コピーしました

cursor-talk-to-figma + filesystem

フレームを日付ごとにバージョン管理されたローカルハンドオフフォルダにエクスポートする

すべての[HANDOFF]フレームを /design-handoff/2026-04/ にPNG 2xとしてエクスポートして。✓ コピーしました

cursor-talk-to-figma + github

デザイン変更とコードPRの参照を紐付ける

CTAボタンにfrontendリポジトリのPR #4421へのリンクをアノテーションとして追加して。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
get_document_info		新しいファイルの全体像を把握する	free
get_selection		ユーザーがクリックした要素を操作する	free
scan_text_nodes	root_id?: str	テキスト一括変更の前に実行	free
set_multiple_text_contents	updates: {id, text}[]	テキストの一括置換	free
set_fill_color	id: str, color: {r,g,b,a}	ノードのスタイルを変更する	free
set_layout_mode	id, mode: 'HORIZONTAL'\|'VERTICAL'\|'NONE'	オートレイアウトの切り替え	free
create_component_instance	component_key: str, parent_id: str, position?: {x,y}	ライブラリコンポーネントをキャンバスに配置する	free
set_multiple_annotations	annotations: {id, text}[]	仕様アノテーションの一括付与	free
export_node_as_image	id: str, format: 'PNG'\|'SVG'\|'JPG', scale?: number	ハンドオフ、レビュー、インラインプレビュー	free
join_channel	channel: str	プラグイン起動後の最初の呼び出し	free

コストと制限

運用コスト

APIクォータ: Figmaにはプラグインアクションに対する公開レートリミットがありません。実質的な上限はWebSocketのスループットです
呼び出しあたりのトークン: ノード情報: 子要素の数に応じて100〜1500トークン
金額: 無料（Figmaアカウントが必要。無料プランで動作します）
ヒント: スキャンは常に特定のルートノードIDにスコープしてください。大きなファイルでページ全体をスキャンするとコンテキストが膨大になります。

セキュリティ

権限、シークレット、影響範囲

最小スコープ： Figma plugin running in desktop/web app; no API token needed

認証情報の保管： なし — プラグインはFigma内のインプロセスで動作し、MCPはlocalhostのWebSocket経由で通信します

データ送信先： FigmaドキュメントのノードはプラグインからローカルのMCPに送られ、その後選択したLLMに送信されます。機密性の高いデザインがマシン外に出るのはLLM呼び出し経由のみです。

絶対に付与しない： Do not expose the WebSocket port beyond localhost

一括編集はトランザクショナルではありません。部分的な失敗により中途半端な状態になる可能性があります。大規模な実行前にFigmaのバージョンをコミットしてください。

トラブルシューティング

よくあるエラーと対処法

Plugin cannot connect to WebSocket

bun run startが実行中であること、およびプラグインのチャンネルIDがエージェントの参加先と一致していることを確認してください。

確認： bun --version && lsof -i :3055

set_multiple_text_contents only updates some nodes

ロックされたレイヤーやコンポーネント内のノードはスキップされます。ロックを解除するか、インスタンスのオーバーライドを対象にしてください。

Figma plugin shows 'manifest not found'

Plugins > Development > Link existing plugin から src/cursor_mcp_plugin/ のmanifest.jsonを選択して再リンクしてください。

Exports return empty URLs

一部のノード（マスクグループ、特定のエフェクト）はサーバーサイドでレンダリングできません。先にフラット化するか、SVGとしてエクスポートしてください。

代替案

cursor-talk-to-figma-mcp 他との比較

代替案	代わりに使う場面	トレードオフ
Official Figma Dev Mode MCP	Figmaの有料Dev Modeシートがあり、公式サポートが必要な場合	読み取り専用。一括編集は不可
Framelink Figma MCP	読み取り専用のREST APIベースのサーバーを好む場合	変更不可。WebSocketプラグイン不要だが編集はできない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る