Figma MCPカタログとは — Claude Code/Codex/Cursor/Devinの設定手順

Figma MCPカタログ（https://www.figma.com/mcp-catalog/）とは、Figmaが公開する公式カタログページで、Figma MCPサーバーを主要AIコーディングツール（MCPクライアント）に接続するための入口だ。「デザインからコードへのコンテキストをあらゆる場所に追加」をコンセプトに掲げ、Claude Code、Claude、Cursor、VS Code、Codex（OpenAI）、Windsurf、Kiro（Amazon）、Replit、Warp、Firebender、Factory、Augment、Google Gemini CLI、Atlassian Studio、Android Studio、Amazon Q、OpenHands、Zed、ServiceNowビルドエージェントの19クライアントを掲載している。各クライアントのページでは、Figma Design・Figma Make・FigJamそれぞれへの対応状況と、リモート／ローカル（デスクトップ）サーバーへの対応が示される。

Figmaは2026年6月24日開催のカンファレンス「Config 2026」で、MCP関連の強化を発表した。内容にはデザインエージェントのMCP接続や、Motion（アニメーション）の書き出し機能などが含まれる。Figma MCPサーバーによるキャンバスへの書き込み機能自体は、2026年2月のClaude Codeとのパートナーシップに端を発するもので、当初はClaude Code限定の提供だったが、その後Cursor・Windsurfもベータ対応に加わった。背景にあるのは、デザインファイルとコード実装の間でコンテキストが分断されがちだという課題で、MCPを介してデザインの構造情報をAIコーディングツールに直接渡すことで、この分断を埋めようとする動きが広がっている。

Figma MCPサーバーには、HTTP＋OAuth認証で接続するリモートサーバー（https://mcp.figma.com/mcp）と、Figmaデスクトップアプリが提供するデスクトップ（ローカル）サーバー（http://127.0.0.1:3845/mcp）の2種類がある。主な機能は次のとおりだ。

- 選択フレームからのコード生成
- デザインコンテキスト抽出（変数・コンポーネント・レイアウトデータ）
- Figma Design／FigJamキャンバスへの書き込み（フレーム・コンポーネント・変数・オートレイアウトの作成／更新。リモート限定・ベータ機能で、現在は無料だが将来は利用量ベースの課金が予定されている）
- Code Connect統合による実コンポーネントの再利用
- FigJam／Makeファイルのリソース取得
- Skills（MCPツール呼び出しの推奨手順をパッケージ化したエージェント向けガイド）

推奨方法は公式プラグインのインストールだ。

手動で設定する場合は、以下のコマンドでリモートサーバーを追加する。

全プロジェクトで共通の設定にしたい場合は --scope user を付ける。Figmaデスクトップアプリのローカルサーバーに接続する場合は、以下のように別名で追加する。

設定後は /mcp コマンドを実行し、Authenticateを選択してOAuth認証を行い、接続を確認する。より詳細なMCP設定の考え方はClaude CodeのMCP連携ガイドでも解説している。

推奨方法は、CodexアプリのPluginsセクションでfigmaプラグインを追加し、OAuth認証を許可する方法だ。CLIから手動で追加する場合は以下のコマンドを使う。

推奨方法は、エージェントチャットで以下のコマンドを実行する方法だ。

手動で設定する場合は、Figmaカタログに掲載されているディープリンクからCursorのMCP設定画面を開いてインストールし、OAuth認証を行う。

DevinはFigmaの公式MCPカタログには掲載されていないが、Devin側のMCP MarketplaceにFigmaの公式リモートサーバーが用意されている。設定は「Settings > Connections > MCP servers」からマーケットプレイスでFigmaを選び「Enable」を実行し、ブラウザでOAuth認証を行う流れだ。利用時は、DevinにFigmaファイルのURLを必ず渡す必要がある（リンク共有が前提の設計になっている）。なお管理者権限があれば「Add a custom MCP」からSTDIO／SSE／HTTPの任意のMCPサーバーを追加することもできる。

受託開発や小規模なチームでは、デザインカンプから実装までの橋渡しに工数がかかりやすい。Figma MCPサーバーを使えば、デザインの変数・コンポーネント・レイアウト情報をAIコーディングツールに直接渡せるため、選択したフレームから実装コードを生成したり、既存のデザインシステムとの整合性を保ちながらコンポーネントを再利用したりする作業を効率化できる可能性がある。とくにCode Connect統合を使えば、Figma上のコンポーネントと実際のコードコンポーネントを紐づけられるため、デザインとコードの乖離を防ぎやすくなる。なお、FigmaはPayload CMSを傘下に収めるなど周辺エコシステムを拡大しており、この動きについてはPayload CMS（Figma傘下）の解説でも取り上げている。

Figma MCPカタログは、Figma MCPサーバーを19種類のAIコーディングツールに接続するための公式入口であり、各クライアントのセットアップ手順や対応範囲を一覧できる。リモートサーバーは全プラン・全シートで利用でき、Figma公式も推奨する選択肢だ。一方、デスクトップサーバーやキャンバスへの書き込みなど一部機能には、プランや対応クライアントの制約がある。Claude Code・Codex・Cursor・Devinのように、セットアップ方法やコマンド、認証の流れはクライアントごとに異なるため、利用するツールの公式ドキュメントで最新の手順を確認しておきたい。