Claude AIエージェント がFigma MCPと会話

AIエージェントがFigmaデザインを読み取り、分析し、変更できるようにします。

このGitリポジトリからインストール

このフォークは、Codex、Claude Desktop、Claude Code、Cursor、Windsurf、Cline、Roo Code、およびローカル stdio MCPサーバーをサポートするすべてのクライアント向けにパッケージされています。

Codex:

codex plugin marketplace add Desrid/desrid-html-to-figma --ref main
codex plugin add desrid-html-to-figma@desrid-html-to-figma

汎用MCPクライアント: ルートの .mcp.json を使用するか、GitHubからコマンドを設定します:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": [
        "--yes",
        "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz",
        "desrid-html-to-figma-server"
      ]
    }
  }
}

Claude Desktop: GitHub Releasesから desrid-html-to-figma.dxt をダブルクリックします。

すべてのクライアントでは、ローカルのFigma開発プラグインとWebSocketブリッジも必要です。クロスエージェントインストールガイド または Codexガイド を参照してください。

お気に入りのエージェントツールで動作します:

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 対象ユーザー

UX/UIチーム

反復的なデザインタスクを自動化し、手作業なしでブランドの一貫性を維持します:

• 自動アクセシビリティ監査 - コントラストの問題を短時間で検出して修正

• 一括スタイル更新 - 一つのコマンドでドキュメント全体の色、書体、間隔を変更

• 視覚的な階層分析 - デザイン構造に関する即時フィードバックを得る

開発者

デザインから本番用コードを直接生成します:

• React/Vue/SwiftUIコンポーネント - デザインからコードへ、ワンステップで

• デザイントークンを活用したコード - デザインと開発の同期を維持

• ハンドオフの摩擦を削減 - デザインチームとのやり取りを減らす

主な利点: Dev Mode のライセンスを必要とするFigma公式MCPとは異なり、このMCPは 無料アカウントを含むあらゆるFigmaアカウントで動作します。

💡 実際のユースケース

アクセシビリティ:

「コントラスト比が4.5:1未満のテキストを全て検索し、WCAG AAに適合する色を提案してください」

リブランディング:

「ドキュメント内のすべてのプライマリボタンにおいて、#FF6B6B を #E63946 に変更してください」

デザイン分析:

「この画面の視覚的な階層を分析し、デザイン原則に基づく改善案を提示してください」

デベロッパーハンドオフ:

「'CardProduct' のReactコンポーネントを、PropTypesとCSS modulesでのスタイルを含めて生成してください」

⚡️ クイックインストール

セットアップ: 5分 | 最初の自動化: 2分

要件

• Node.js がインストールされていること

• Figma Desktop

• AIクライアント:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

ステップ1: WebSocketをインストールして起動する

エージェントがFigmaにコマンドを送信できるようにします。

ターミナルを開き、ツールをインストールするフォルダーに移動して、次のコマンドを実行します:

npx --yes --package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz desrid-html-to-figma

💡 ヒント: このコマンドは、バージョン管理されたGitHub Releaseパッケージをダウンロードし、ローカルブリッジを起動します。クローンしたリポジトリを使用している場合は、後続のセッションで npm run socket を実行してください。

ステップ2: Figmaにプラグインをインストールする

Figmaがエージェントからコマンドを受信し、応答を返せるようにします。

Figma Desktopで、メニュー → プラグイン → 開発 → マニフェストからプラグインをインポート に進み、MCPをインストールしたフォルダー内の src/claude_mcp_plugin/manifest.json を選択します。

ステップ3: エージェントツールを設定する

エージェントがMCPの読み取りツールと変更ツールを利用できるようにします。

Claude Desktop

desrid-html-to-figma.dxt を最新のリリースからダウンロードしてダブルクリックします。Claudeが自動的に設定されます。

Cursor

1. Cursor Settings → Tools & Integrations を開きます

2. **「New MCP Server」**をクリックして、mcp.json ファイルを開きます

3. 次の設定を追加します:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": ["--yes", "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz", "desrid-html-to-figma-server"]
    }
  }
}

4. ファイルを保存して、Cursorを再起動します

その他のエージェントツール

その他のツール（Claude Code、Windsurf、VS Code + GitHub Copilot、Cline、Roo Code）については、詳細インストールガイド の 「Configure your Agentic Tool」の章 にある手順に従ってください。

ステップ4: 作業を開始する

1. Figmaでプラグインを開きます

2. チャンネルID（緑色のボックス内の太字コード）をコピーします

3. チャットに Connect to Figma, channel {your-ID} と入力します

✅ AIでデザインする準備ができました！

以後の作業セッション

MCPを日常の作業で再度使うときは、プロセス全体をやり直す必要はありません:

1. ソケットを起動します: ターミナルで your-project/desrid-html-to-figma に入り、npm run observability を実行します。

2. Figmaでプラグインを開きます: 最近のプラグイン一覧に表示されます。

3. AIを接続します: チャンネルIDをコピーして、エージェントに Connect to Figma, channel {your-ID} と伝えてください。

🤖 マルチエージェント＆並列実行

このMCPサーバーは、標準で 安全な並列実行 をサポートしています。これにより、複数のAIエージェント（例: Claude Codeのサブエージェントやチームスウォーム）がプラグインをブロックすることなく、同じFigmaファイル上で同時に作業できます。内蔵のコマンドキューがサーバー側でリクエストを順次処理し、Figma APIがタイムアウトするのを防ぎます。

注記: 複数のエージェントが同時にドキュメントを変更できるため、暗黙的なページコンテキストに依存するのは安全ではありません。したがって、set_current_page のような状態を持つコマンドは ブロックされています。すべてのエージェントは、作成または構造変更コマンド（例: create_frame、create_text）を実行するときに、意図した parentId パラメーターを明示的に指定する必要があります。

(この機能の設計と実装に貢献してくれた @mmabas77 に特別な感谢を送ります!)

🐳 代替案: Dockerを使う

Dockerを好む場合や、チーム環境でWebSocketサーバーを実行する必要がある場合は、詳細インストールドキュメントの Dockerインストールガイド を参照してください。

🛠️ 機能

デザイン分析

• ドキュメント情報、現在の選択、スタイルを取得

• テキストのスキャン、コンポーネントの監査、アセットのエクスポート

要素の生成

• 図形、テキスト、フレームを、スタイルを完全に制御して作成

• 要素の複製、グループ化、整理

変更

• 色、ボーダー、角丸、シャドウ

• オートレイアウト、高度なタイポグラフィ

• ローカルコンポーネントとチームライブラリのコンポーネント

コマンドの完全なリスト を参照してください。

📚 ドキュメント

• 詳細インストール — 手動セットアップ、Cursor、Windsurf.その他のIDE

• 利用可能なコマンド — 完全なツールリファレンス

• トラブルシューティング — よくあるエラーとその修正方法

• コントリビューション — アーキテクチャ、テスト、コントリビューとガイド

• チェンジログ — バージョン履歴

🙏 クレジット

Sonny Lazuardiによる cursor-talk-to-figma-mcp に基づいています。Claude Desktop向けに改変し、新たなツールを拡張したのは Xúlio Zé です。

プロジェクトへのすべてのコントリビューションについて知りたい場合は、コントリビューションガイドの 「Contributors」の章 を参照してください。

MIT License

📊 プロジェクトステータス

✅ 安定した本番環境対応 — デザイン・開発チームでの日常利用に適したツール

🚀 現在活発に開発中です:

• Figma Variablesの完全サポート

• Tailwind CSS / SwiftUIへのエクスポートの強化

特定のニーズがありますか?

GitHubIssues: 新規提案はこちら

あなたのフィードバックとコントリビューションがこのプロジェクトを支えています。❤️