claude-talk-to-figma-mcp セットアップ

Claude Code (CLI) に claude-talk-to-figma-mcp を導入する手順。

前提条件

Claude Code (CLI) がインストール済み
Figma Desktop がインストール済み
bun がインストール済み

1. Figma プラグインのセットアップ

リポジトリをクローン:

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git ~/.claude/claude-talk-to-figma-mcp

2. MCP サーバーを Claude Code に登録

これだと、bunx での実行環境と、cloneした環境が異なってしまい、MCPが接続失敗していた。

claude mcp add -s user --transport stdio ClaudeTalkToFigma -- bunx claude-talk-to-figma-mcp@latest

ついでにこれも claude mcp add -s user —transport http figma-desktop http://127.0.0.1:3845/mcp

色々試した結果、ローカルにクローンした~/.claude/claude-talk-to-figma-mcpの環境と一致させる必要があるので、

"ClaudeTalkToFigma": {
      "type": "stdio",
      "command": "bun",
      "args": [
        "/Users/sakurai.yuki/.claude/claude-talk-to-figma-mcp/dist/talk_to_figma_mcp/server.js"
      ],
      "env": {}
    }

これを~/.claude.jsonに直接追加した。

3. Figma Desktop でプラグインをインポート

Menu -> Plugins -> Development を開く
Import plugin from manifest を選択
~/.claude/claude-talk-to-figma-mcp/src/claude_mcp_plugin/manifest.json を指定

4. WebSocket サーバーの起動

Figma との通信に WebSocket サーバーが必要。使用時に毎回起動する:

cd ~/claude-talk-to-figma-mcp && bun install && bun socket

起動確認: http://localhost:3055/status

5. 接続テスト

Figma で Claude MCP Plugin を開く
表示される channel ID をコピー
Claude Code で Talk to Figma, channel {コピーした ID} と入力
接続確認メッセージが表示されれば成功