cursor-talk-to-figma-mcp: AI エージェントがプログラム的に Figma デザインを読み取り・変更できる MCP 統合

解決する課題

このプロジェクトは、AI エージェント（Cursor や Claude Code など）と Figma の間にブリッジを提供し、エージェントがプログラム的にデザインファイルを読み取り、変更し、自動化できるようにします。デザイン要件を手作業で Figma の変更に変換する手間を省き、AI が直接デザインキャンバスとやり取りできるようにします。

仕組み

システムは Model Context Protocol（MCP）を使用して AI エージェントを Figma プラグインに接続します。通信は WebSocket サーバーを介して行われ、MCP サーバー（エージェントが使用）と Figma プラグイン（デザインツール内に存在）間のリレーとして機能します。

対象ユーザー

Cursor のような AI 搭載 IDE を使用し、繰り返しのデザイン作業を自動化したり、コンテンツの一括更新を管理したり、プロトタイプフローをビジュアルダイアグラムに変換したりしたいデザイナーや開発者向けです。

ハイライト

• 包括的なデザインツールセット: ドキュメント情報の取得、選択管理、フレーム・矩形・テキストの作成、Auto Layout や間隔といったレイアウトプロパティの変更ツールを提供。
• デザイン自動化: テキストの一括置換や、複数ターゲットにわたるコンポーネントインスタンスのオーバーライド伝搬をサポート。
• プロトタイピング可視化: Figma のプロトタイプリアクションを FigJam のコネクタラインに変換し、視覚的なフロー図を作成可能。
• アノテーション管理: ノードをスキャンし、Markdown 対応のネイティブ Figma アノテーションを作成・更新するツールを含む。
• エクスポート機能: ノードを画像（PNG、JPG、SVG、または PDF）としてエクスポート可能。