Claude Talk To Figma MCP

🚀 Claude Talk to Figma MCP

Model Context Protocol (MCP) プラグインです。Claude Desktop やその他の AI ツール（GitHub Copilot、Cursor など）が直接 Figma とやり取りできるようになり、強力な AI 支援デザイン機能を実現します。

重要: このプロジェクトは、Sonny Lazuardi による cursor-talk-to-figma-mcp をベースにしています。Claude Desktop と互換性を持たせるために適応され、追加のツールが拡張されています。元の著作権は Sonny Lazuardi にあります ❤️

🚀 クイックスタート

このセクションでは、Claude Talk to Figma MCP を使用するための基本的な手順を説明します。

✨ 主な機能

• Claude Desktop やその他の AI ツールと Figma の直接的な連携を可能にします。
• 双方向通信により、Figma から情報を取得し、要素の作成や変更、コンポーネントの管理ができます。
• 豊富なコマンドを提供し、文書分析、要素作成、変更、テキスト操作、コンポーネント統合などの機能をサポートします。

📦 インストール

前提条件

• Claude Desktop または Cursor + Figma Desktop + Bun がインストールされている必要があります。

セットアップ

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install

• macOS/Linux: bun run build
• Windows: bun run build:win

AI クライアントの設定

オプション 1: DXT パッケージ（Claude Desktop のみ）

1. ダウンロード: リリース から最新の claude-talk-to-figma-mcp.dxt を取得します。
2. インストール: .dxt ファイルをダブルクリックすると、Claude Desktop が自動的にインストールされます。

オプション 2: JSON（Claude Desktop + Cursor）

• Claude Desktop: bun run configure-claude を実行し（Claude Desktop を再起動）
• Cursor:
  1. Cursor の設定 → ツールと統合 に移動します。
  2. "New MCP Server" をクリックして mcp.json 設定を開きます（スクリーンショット）
  3. 以下の設定を追加します。

  {
    "mcpServers": {
      "ClaudeTalkToFigma": {
        "command": "bunx",
        "args": ["claude-talk-to-figma-mcp@latest"]
      }
    }
  }
  

  4. ファイルを保存します（スクリーンショット）

Figma プラグインのセットアップ（すべての方法で必要）

Figma で src/claude_mcp_plugin/manifest.json をインポートします → メニュー → プラグイン → 開発

最初の接続

1. サーバーを起動: bun socket（http://localhost:3055/status で確認）
2. プラグインを接続: Figma で Claude MCP プラグインを開き、チャネル ID をコピーします。
3. テスト: AI クライアントに "Talk to Figma, channel {channel-ID}" と尋ねます。

✅ 成功: AI が接続を確認し、デザインを開始できます！

💻 使用例

基本的な使用法

# AI デザインの始め方
1. **Claude を UX エキスパートにする**: [このプロンプトを使用](prompts/prompt-ux-ui-specialist.md) 🎨
2. **プロジェクトに接続する**: "Talk to Figma, channel {channel-ID}"
3. **デザインを開始する**: "Create a mobile app login screen with modern styling"

### 高度な使用法
```python
# 有効なプロンプトの例

✅ Good: "Create a dashboard with a sidebar navigation, header with user profile, and main content area with card-based metrics"

✅ Good: "Redesign this button component with hover states and better contrast ratios"

❌ Avoid: "Make it look nice" (too vague)

## 📚 ドキュメント
### 📄 文書ツール
| 属性 | 详情 |
|------|------|
| `get_document_info` | 文書分析 | プロジェクトの概要を取得 |
| `get_selection` | 現在の選択 | 現在選択されているものを取得 |
| `get_node_info` | 要素の詳細 | 特定のコンポーネントを調査 |
| `get_nodes_info` | 複数の要素情報 | 要素のバッチ調査 |
| `scan_text_nodes` | すべてのテキストを検索 | テキストの監査と更新 |
| `get_styles` | 文書のスタイル | 色/テキストスタイルの監査 |
| `join_channel` | Figma に接続 | 通信を確立 |
| `export_node_as_image` | アセットのエクスポート | デザインアセットを生成 |

### 🔧 作成ツール
| 属性 | 详情 |
|------|------|
| `create_rectangle` | 基本的な形状 | ボタン、背景 |
| `create_frame` | レイアウトコンテナ | ページセクション、カード |
| `create_text` | テキスト要素 | 見出し、ラベル |
| `create_ellipse` | 円/楕円 | プロフィール画像、アイコン |
| `create_polygon` | 多角形 | カスタム幾何学要素 |
| `create_star` | 星型 | 装飾要素 |
| `clone_node` | 要素の複製 | 既存のデザインをコピー |
| `group_nodes` | 要素の整理 | コンポーネントのグループ化 |
| `ungroup_nodes` | グループの分離 | コンポーネントを分割 |
| `insert_child` | 要素のネスト | 階層構造 |
| `flatten_node` | ベクトル操作 | ブール演算 |

### ✏️ 変更ツール
| 属性 | 详情 |
|------|------|
| `set_fill_color` | 要素の色 | ブランドカラーの適用 |
| `set_stroke_color` | ボーダーの色 | アウトラインのスタイリング |
| `move_node` | 位置決め | レイアウトの調整 |
| `resize_node` | サイズの変更 | レスポンシブなスケーリング |
| `delete_node` | 要素の削除 | デザインのクリーンアップ |
| `set_corner_radius` | 丸い角 | モダンな UI スタイリング |
| `set_auto_layout` | Flexbox のようなレイアウト | コンポーネントの間隔 |
| `set_effects` | 影/ぼかし | 視覚的な仕上げ |
| `set_effect_style_id` | エフェクトスタイルの適用 | 一貫した影のスタイル |

### 📝 テキストツール
| 属性 | 详情 |
|------|------|
| `set_text_content` | テキストの更新 | コピーの変更 |
| `set_multiple_text_contents` | バッチテキストの更新 | 複数要素の編集 |
| `set_font_name` | タイポグラフィ | ブランドフォントの適用 |
| `set_font_size` | テキストのサイズ | 階層の作成 |
| `set_font_weight` | テキストの太さ | 太字/細字のバリエーション |
| `set_letter_spacing` | 文字間隔 | タイポグラフィの微調整 |
| `set_line_height` | 垂直間隔 | テキストの読みやすさ |
| `set_paragraph_spacing` | 段落間隔 | コンテンツの構造 |
| `set_text_case` | ケース変換 | 大文字/小文字/タイトルケース |
| `set_text_decoration` | テキストのスタイリング | 下線/取り消し線 |
| `get_styled_text_segments` | テキスト分析 | リッチテキストの調査 |
| `load_font_async` | フォントの読み込み | カスタムフォントのアクセス |

### 🎨 コンポーネントツール
| 属性 | 详情 |
|------|------|
| `get_local_components` | プロジェクトのコンポーネント | デザインシステムの監査 |
| `get_remote_components` | チームライブラリ | 共有コンポーネントのアクセス |
| `create_component_instance` | コンポーネントの使用 | 一貫した UI 要素 |

### DXT パッケージのビルド（開発者向け）
独自の DXT パッケージを作成するには、次のコマンドを実行します。
```bash
npm run build:dxt    # TypeScript をビルドし、DXT パッケージを作成

これにより、配布用の claude-talk-to-figma-mcp.dxt が作成されます。

🔧 技術詳細

アーキテクチャの詳細

+----------------+     +-------+     +---------------+     +---------------+
|                |     |       |     |               |     |               |
| Claude Desktop |<--->|  MCP  |<--->| WebSocket Srv |<--->| Figma Plugin  |
|   (AI Agent)   |     |       |     |  (Port 3055)  |     |  (UI Plugin)  |
|                |     |       |     |               |     |               |
+----------------+     +-------+     +---------------+     +---------------+

設計原則:

• MCP Server: ビジネスロジック、検証、デフォルト値
• WebSocket Server: メッセージルーティングとプロトコル変換
• Figma Plugin: Figma コンテキストでの純粋なコマンド実行者

利点:

• 関心事の明確な分離
• 簡単なテストとメンテナンス
• 追加ツールのための拡張可能なアーキテクチャ

プロジェクト構造

src/
  talk_to_figma_mcp/     # MCP Server の実装
    server.ts            # メインエントリポイント
    tools/               # 機能別のツールカテゴリ
      document-tools.ts  # 文書のやり取り
      creation-tools.ts  # 形状と要素の作成
      modification-tools.ts # プロパティの変更
      text-tools.ts      # テキストの操作
    utils/               # 共有ユーティリティ
    types/               # TypeScript の定義
  claude_mcp_plugin/     # Figma プラグイン
    code.js              # プラグインの実装
    manifest.json        # プラグインの設定

貢献ガイドライン

1. フォークとブランチ: git checkout -b feature/amazing-feature
2. コード標準: 既存の TypeScript パターンに従います。
3. テスト: 新機能に対してテストを追加します。
4. ドキュメント: 関連するセクションを更新します。
5. プルリクエスト: 変更点を明確に説明します。

最近の貢献者

• Taylor Smits - DXT パッケージサポートの実装、自動化された CI/CD ワークフロー、およびテストの改善 (PR #17, PR #13, PR #14)
• easyhak - Windows OS でビルドスクリプトが機能しない問題を修正 (PR #10)

🧪 テストと品質保証

自動テスト

bun run test            # すべてのテストを実行
bun run test:watch      # ウォッチモード
bun run test:coverage   # カバレッジレポート

統合テスト

bun run test:integration  # ガイド付きのエンドツーエンドテスト

手動検証チェックリスト

• [ ] WebSocket サーバーがポート 3055 で起動する
• [ ] Figma プラグインが接続され、チャネル ID が生成される
• [ ] AI ツールが "ClaudeTalkToFigma" MCP を認識する（Claude Desktop、Cursor など）
• [ ] 基本的なコマンドが実行される（矩形の作成、色の変更）
• [ ] エラーハンドリングが機能する（無効なコマンド、タイムアウト）
• [ ] AI ツールと Figma の間でチャネル通信が機能する

🐛 トラブルシューティングとサポート

接続問題

• "Can't connect to WebSocket": bun socket が実行されていることを確認します。
• "Plugin not found": Figma の開発設定でプラグインのインポートを確認します。
• "MCP not available":
  • Claude Desktop: bun run configure-claude を実行し、Claude を再起動します。
  • Cursor IDE: mcp.json ファイルの MCP 設定を確認します。
  • その他の AI ツール: MCP 統合設定を確認します。

実行問題

• "Command failed": Figma の開発コンソールでエラーを確認します。
• "Font not found": load_font_async を使用してフォントの可用性を確認します。
• "Permission denied": Figma ドキュメントに編集アクセス権があることを確認します。
• "Timeout errors": 複雑な操作では再試行が必要な場合があります。

パフォーマンス問題

• Slow responses: 大きなドキュメントでは処理時間が長くなる場合があります。
• Memory usage: 使用していない Figma タブを閉じ、必要に応じて再起動します。
• WebSocket disconnects: サーバーは自動的に再接続しますが、持続的な場合は再起動します。

一般的な解決策

1. 再起動シーケンス: サーバーを停止 → AI ツールを閉じる → 両方を再起動
2. クリーン再インストール: node_modules を削除 → bun install → bun run build
3. ログの確認: サーバーのターミナルに詳細なエラーメッセージが表示されます。
4. フォントの更新: 一部のチームフォントは Figma で手動で読み込む必要があります。
5. 設定の確認: AI ツールの設定で MCP の設定を確認します。
6. ポートの競合: ポート 3055 が他のアプリケーションに使用されていないことを確認します。

📋 バージョン履歴

現在: 0.6.0

• 🚀 DXT パッケージサポート: Claude Desktop の拡張マネージャーを通じたワンクリックインストール（Taylor Smits のおかげで - PR #17）
• 📦 自動配布: GitHub Actions ワークフローによる自動 DXT パッケージ生成とリリースアップロード
• ⚡ 強化された UX: エンドユーザーのインストール時間が 15 - 30 分から 2 - 5 分に短縮されました。
• 🔧 開発者ツール: DXT パッケージング用の新しいビルドスクリプト（npm run build:dxt, npm run pack）

完全なバージョン履歴については、CHANGELOG.md を参照してください。

📄 ライセンス

ライセンス: MIT ライセンス - LICENSE ファイルを参照してください。

作者:

• Xúlio Zé - Claude 適応 - GitHub
• Sonny Lazuardi - 元の実装 - GitHub

謝辞:

• Claude と Model Context Protocol を開発した Anthropic チーム
• 優れたプラグイン API を提供する Figma コミュニティ
• 高速な JavaScript ランタイムを提供する Bun チーム