Figma MCPサーバーとは？料金・使い方・対応クライアントを徹底解説

Figma MCPサーバーは、Figmaのデザイン情報をAIコーディングツールに直接渡し、デザインをそのままコードへ変換するための仕組みです。正式名称は「Dev Mode MCPサーバー」で、VS Code・Cursor・Claude Code といったエージェント型のエディタと組み合わせることで、スクリーンショットの貼り付けや手作業でのスタイル確認に頼らないdesign-to-codeのワークフローを実現します。本記事では、Figma MCPサーバーの仕組み、リモート版とデスクトップ版の違い、対応クライアント、料金体系、導入の流れ、そして出力精度を高めるコツまでをまとめて解説します。

まとめ

Figma MCPサーバー（Dev Mode MCP Server）は、Figmaのデザイン文脈をMCP経由でAIエージェントに渡し、design-to-code を高精度に実現する仕組みです。利用方法には全シートで使えるリモートサーバーと、Dev/Fullシートが必要なデスクトップサーバーの2種類があり、まずはリモートで試すのが手軽です。料金はベータ期間中は無料ですが将来は従量課金となる予定で、シート・プランによってツール呼び出し上限が変わります。出力品質はFigmaファイルの作り込み（Auto Layout・命名・デザインシステム）に大きく左右されるため、設計の前提を整えたうえで導入すると効果を最大化できます。クライアント別の具体的な接続手順は関連記事を参照してください。

Figma MCPサーバーとは？MCP（Model Context Protocol）から整理

MCP（Model Context Protocol）とは、AIモデルやAIエージェントが外部のツール・データソースとやり取りするための標準化されたインターフェースです。アプリケーションがLLMにコンテキストを供給する方法を共通化する規格で、Claude をはじめ多くのAIツールが対応しています。

Figma MCPサーバーは、このMCPという標準をFigmaに適用したものです。Figmaのデザインファイルから、レイアウト・スタイル・コンポーネント・バリアブル（variables）といったデザインコンテキストを抽出し、コードを生成するAIエージェントに渡します。これまでAIにデザインを伝える手段は、デザイン画像やAPIレスポンスをチャットに貼り付けることが中心でした。MCPサーバーを使うと、AIがFigmaのデザインデータを直接読み取れるため、デザインの意図がコードへ忠実に反映され、手戻りの削減と実装スピードの向上につながります。

リモートとデスクトップ──2種類のサーバーの違い

Figmaは、MCPサーバーを利用する方法を2種類用意しています。クラウド上でホストされるリモートサーバーと、Figmaデスクトップアプリ内でローカルに動作するデスクトップサーバーです。用途やプランに応じて使い分けます。

まずリモートサーバーで手軽に試し、選択ベースの精密なコンテキスト指定が必要になったらデスクトップサーバーへ広げる、という二段構えが現実的です。リモートはブラウザ版Figmaでも使え、有効化の手間もないため、最初の導入検証に向いています。

Figma MCPサーバーで何ができる？主な機能

Figma MCPサーバーは、デザインからコードへの移行を支える複数の機能を提供します。

• フレームからのコード生成：選択したFigmaのフレームをコードに変換。新しい画面フローの構築や機能の反復開発に向いています。
• デザインコンテキストの抽出：バリアブル・コンポーネント・レイアウト情報をIDEに取り込みます。デザインシステムやコンポーネントベースの開発で特に効果を発揮します。
• Code Connect 連携：実際のコンポーネントを再利用させることで、生成コードを既存コードベースと整合させ、出力品質を高めます。Code Connect の詳細は Figma Code Connect の解説記事 を参照してください。
• スクリーンショットの提供：メタデータだけでは伝わりにくい全体のフローやレスポンシブな文脈を、画像としてAIに補足できます。
• キャンバスへの書き込み（リモートのみ）：MCPクライアントからFigma上にネイティブのデザイン要素を生成・編集できます。

対応クライアント（VS Code・Cursor・Claude Code など）

Figma MCPサーバーを使うには、MCPサーバーに対応したコードエディタ・アプリケーションが必要です。公式が案内している主なクライアントは次のとおりです。

• VS Code（GitHub Copilot）
• Cursor
• Windsurf
• Claude Code（Web版Claude Codeの使い方はこちら）
• Codex

上記以外でも、リモートMCPサーバーに対応したクライアントであれば基本的に接続できます。対応クライアントの最新の一覧はFigma公式のMCPカタログで確認できます。

Figma MCPサーバーの使い方（基本ワークフローとプロンプト例）

セットアップが終わったあとの基本的な使い方は、次のような流れになります。AIエージェントに対象のデザインを指定し、自然言語で実装を依頼するだけです。

• 実装したいFigmaのフレームやコンポーネントを特定する（デスクトップ版は選択、リモート版はリンクで指定）。
• 対応エディタのAIエージェントに、デザインを参照させながら実装を依頼する。
• 生成されたコードを確認し、デザインシステムやコーディング規約に合わせて調整する。

依頼時のプロンプトは、対象と出力形式を具体的に伝えるほど精度が安定します。例えば次のような指示が考えられます。

選択中のFigmaフレームを、ReactとTailwind CSSで実装してください。
既存のデザインシステムのコンポーネントとバリアブルを優先して使ってください。

このログイン画面のリンク（FigmaのURL）を参照し、レスポンシブ対応のコンポーネントとして起こしてください。

1画面まるごとを一度に渡すよりも、ボタンやカードといった小さな単位に分けて依頼するほうが、出力のブレが少なくなります。Code Connect を設定しておくと、AIが既存コードベースの実コンポーネントへ正しくマッピングしてくれるため、生成コードの一貫性がさらに高まります。

Figma MCPサーバーの料金と利用条件

本記事執筆時点では、Figma MCPサーバーはベータ期間中で無料で利用できます。ただしFigmaは、将来的にこれを利用量に応じた従量課金の有料機能にする予定であると明言しています。料金そのものよりも、シートとプランによって利用できる回数（ツール呼び出し上限）が変わる点を押さえておくことが重要です。

上記の1日あたりの上限に加えて、Dev/Fullシートには1分あたりのレート制限（Professional 10回／分、Organization 15回／分、Enterprise 20回／分）も適用されます。これらの読み取り系ツールの制限に対し、Figmaへ書き込む系のツール（キャンバス生成など）はレート制限の対象外です。

整理すると、リモートサーバーは全シート・全プランで使えますが、Starter プランや View/Collab シートでは月6回までと実質的にお試しレベルに制限されます。本格的に使うなら、Pro 以上のプランで Dev または Full シートを用意するのが前提になります。なお制限の数値は変更される場合があるため、最新の条件はFigma公式ドキュメントで確認してください。

公式版とコミュニティ版（Figma-Context-MCP）の違い

Figma用のMCPサーバーには、Figma公式のDev Mode MCPサーバーのほかに、オープンソースのコミュニティ製サーバー（GLips/Figma-Context-MCP、旧称 Framelink）があります。両者は性格が異なります。

• 公式版（Dev Mode MCP Server）：Dev Modeの情報を直接取得でき、Code Connect やバリアブルなどFigmaの最新機能をフルに活用できます。Dev/Fullシートが必要です。デザインシステムを整備した大規模チームに向いています。
• コミュニティ版（Figma-Context-MCP）：個人アクセストークンを使って動作し、有料シートがなくても無料で使える点が強みです。一方で非公式のため、公式機能への追随やセキュリティ面（APIキーの管理・露出）には注意が必要です。

使い分けの目安としては、デザインシステムや Code Connect を整備し、生成コードを既存コンポーネントと厳密に揃えたいチームは公式版が有利です。一方コミュニティ版はレイアウト情報を簡潔な構造で返すことに特化しており、AIに渡すトークン量を抑えやすく、軽量に design-to-code を試したい個人や小規模開発で扱いやすい選択肢になります。両者は排他ではなく、検証はコミュニティ版で素早く始め、本番運用や大規模なデザインシステム連携では公式版へ移行する、という併用も現実的です。

Figma MCPサーバーの導入の流れ（概要）

導入手順はクライアントごとに細部が異なりますが、基本的な流れは共通しています。

• リモートサーバー：サーバー側の有効化は不要です。利用するクライアント（VS Code・Cursor・Claude Code など）に、FigmaのリモートMCPサーバーを追加するだけで接続できます。
• デスクトップサーバー：Figmaデスクトップアプリで対象ファイルを開き、Dev Mode（Shift + D）からMCPサーバーを有効化します。その後、クライアント側でローカルサーバーへ接続します。

VS Code・Cursor・Claude Code といった主要3クライアントごとの具体的な接続手順は、use_figma の解説記事で詳しく扱っています。あわせてご覧ください。

出力精度を高めるコツ

MCPサーバーを使っても、入力となるFigmaファイルの作りが粗ければ生成コードの品質は上がりません。「Garbage In, Garbage Out」の原則がそのまま当てはまります。精度を高めるには次の点が有効です。

• Auto Layout を使い、レイヤーやコンポーネントに意味のある命名を徹底する。
• バリアブル・コンポーネント・スタイルを整備し、デザインシステムとして一貫させる。
• 一度に渡すフレームは小さな単位に分け、対象範囲を明確にする。
• Code Connect やルールファイルで、技術スタックやコーディング規約を事前にAIへ伝える。

よくある質問（FAQ）

Q. Figma MCPサーバーとは何ですか？

Figmaのデザインコンテキスト（レイアウト・スタイル・コンポーネント・バリアブルなど）を、MCPという標準プロトコル経由でAIコーディングツールに渡す仕組みです。これによりAIがデザインを直接理解し、忠実なコードを生成できます。

Q. 無料で使えますか？

本記事執筆時点ではベータ期間中で無料です。ただし将来は従量課金の有料機能になる予定です。Starter プランや View/Collab シートでは月6回までの制限があり、本格利用には Pro 以上で Dev/Full シートが必要です。

Q. どのエディタ・ツールで使えますか？

VS Code（GitHub Copilot）、Cursor、Windsurf、Claude Code、Codex などに対応しています。リモートMCPサーバーに対応したクライアントであれば基本的に接続できます。

Q. use_figma とは何ですか？

use_figma は、リモートサーバーでFigmaのキャンバスに直接書き込むためのスキル（コマンド）の呼び名です。MCPクライアントからの指示で、フレーム・コンポーネント・バリアブル・Auto Layout などを既存のデザインシステムに沿って生成・編集できます（デザインの読み取り自体は別の読み取り系ツールが担当します）。詳しくはuse_figma の解説記事を参照してください。

Q. リモート版とデスクトップ版、どちらを使うべきですか？

まずは有効化不要で全シートから使えるリモート版で試すのがおすすめです。選択したフレーム単位での精密なコンテキスト指定や、ブラウザを介さないローカル動作が必要になったら、Dev/Fullシートでデスクトップ版を併用すると良いでしょう。

Q. 生成されたコードはそのまま使えますか？

そのまま使えるかは、元のFigmaファイルの作り込みに大きく依存します。Auto Layout や適切な命名、デザインシステムの整備がされているほど精度は上がりますが、最終的なレビューと調整は前提と考えてください。動作未確認のまま本番に投入するのは避けるべきです。

Q. 「ツール呼び出し上限」エラーが出たときは？

「You’ve reached the Figma MCP tool call limit…」というエラーは、シート種別・プランごとの上限（Enterprise 600回／日、Organization・Pro の Dev/Full 200回／日、Starter や View/Collab は6回／月）に達したときに表示されます。Pro 以上で Dev/Full シートを使っていてもすぐ上限に当たる場合、作業中のファイルがアップグレード済みのチーム（ワークスペース）に置かれていないことが典型的な原因です。MCPの上限は契約したチームに紐づくため、対象ファイルを正しいチームへ移すか、Dev シートでは該当プロジェクトの編集権限が付与されているかを確認してください。

関連記事

• AIがFigmaに直接書き込めるuse_figmaの全体像と開発現場での位置づけ
• Figma Code Connectとは：デザインと開発の新しいコラボレーションツール
• Figma REST APIの基本と活用方法についての徹底解説
• 「Figma Make」とは？AIを活用したプロンプトでデザインからアプリを生み出す新機能でプロトタイピングを革新
• Web版Claude Codeの使い方と魅力を徹底解説：オンラインAIコーディング環境の基本操作ガイド