Figma MCPサーバーは、Figmaのデザイン情報をAIコーディングツールへ直接渡し、デザインをそのままコードへ変換するための仕組みです。提供開始時の呼称は「Dev Mode MCPサーバー」でしたが、公式ドキュメントでは現在「Figma MCP Server」に統一されました。リモート版とデスクトップ版の違い、対応クライアント17種の接続可否、プラン別のツール呼び出し上限、接続手順の設定ファイル例までを、2026年9月時点の公式ドキュメントで数値を取り直してまとめます。
まとめ:リモート優先・ベータ無料・上限の実数
接続方法はクラウド上のリモートサーバーとFigmaデスクトップアプリ内で動くデスクトップサーバーの2種類。ただしFigmaは現在リモート版を推奨しており、デスクトップ版は組織・エンタープライズ特有の事情がある場合の選択肢という位置づけへ変わりました。
料金はベータ期間中は無料で、将来は利用量に応じた従量課金になる予定です。実務で効くのは金額より呼び出し上限のほうでしょう。Dev/Fullシートなら Professional と Organization が1日200回、Enterprise が1日600回。View/Collabシートは月6回に絞られ、Starterプランだけは月20回です。キャンバスへの書き込みにはFullシートと編集権限が要り、Devシートは読み取り専用にとどまります。出力品質はFigmaファイルの作り込みに左右されるため、Auto Layoutと命名規則、Code Connectを先に整えてから導入してください。
MCPという標準規格とFigma MCPサーバーが担う役割の整理
MCP(Model Context Protocol)は、AIエージェントが外部のツールやデータソースとやり取りするための共通インターフェースです。規格そのものの考え方はMCPの仕組みを整理した解説記事で扱っています。
Figma MCPサーバーは、この標準をFigmaへ適用したものです。デザインファイルからレイアウト・スタイル・コンポーネント・バリアブル(variables)といったコンテキストを抽出し、コードを書くAIエージェントへ渡します。以前はデザイン画像やAPIレスポンスをチャットへ貼り付けるしかありませんでしたが、MCP経由なら構造化されたデータがそのまま届くため、デザインの意図がコードへ落ちやすくなる。公式ドキュメントの概要ページではキャンバスへ書き戻す機能も並列に紹介されており、一方向の変換器から往復の道具へ役割が広がりました。
リモートサーバーとデスクトップサーバーの機能差と選び分けの条件
Figmaは、MCPサーバーの利用方法を2種類用意しています。Figmaがホストするクラウド上で動くリモートサーバーと、Figmaデスクトップアプリ内でローカルに動くデスクトップサーバーです。
動作場所・対象の指定方法・利用条件で分かれる6項目の比較と判断軸
両者の違いを、導入判断に効く6項目で並べます。
| 項目 | リモート | デスクトップ |
|---|---|---|
| 動作場所 | Figmaのクラウド | デスクトップアプリ内 |
| 有効化 | 不要 | Dev Modeで有効化 |
| 対象の指定 | リンク(URL) | 選択中のフレーム |
| ブラウザ版Figma | 利用可 | 不可(アプリ必須) |
| キャンバス書き込み | 対応 | 非対応 |
| 利用条件 | 全シート・全プラン | 有料プランのDev/Full |
ここは以前と評価が入れ替わった部分です。デスクトップサーバーの設定ドキュメントには「特定の組織・エンタープライズ向けの用途に提供しているが、リモート版を強く推奨する」と明記されています。まずリモートで始め、選択ベースの指定が要る場面だけデスクトップを足す順序になるでしょう。
Figma for Governmentがデスクトップ限定になる制約と監査範囲
例外が1つあります。Figma for Government ではリモートMCPサーバーが提供されず、デスクトップサーバーだけが使えます。ツールも get_design_context や get_metadata など8種に限られ、キャンバス書き込み(use_figma)とエージェントスキルは対象外。公式ドキュメントは、この環境のMCP機能がFedRAMPの監査範囲に含まれていない点にも触れています。公共調達の案件では、MCP前提の開発フローを設計する前にこの一点を確認してください。
読み取り18種と書き込み11種のツール構成と代表ツールの役割分担
公式のツール一覧ドキュメントでは、読み取り系18種・書き込み系11種が公開されています(Weave関連は別掲)。提供開始当初の数点から大きく増えました。
get_design_contextを起点にした読み取り系ツールの使い分け
読み取りの入口は get_design_context です。既定の出力はReact+Tailwindで、プロンプトでVueやプレーンなHTML+CSS、iOS向けへ切り替えられます。残りは、この入口への入力か、選択範囲が大きすぎるときの代替という位置づけです。
get_metadata:レイヤーID・名前・種別・位置・サイズだけを疎なXMLで返す。巨大なフレームで先に構造だけ取る用途。get_screenshot:選択範囲のスクリーンショット。レイアウトの再現度を保つため既定で有効のままにしておく。download_assets:SVG・PDF・JPGなど非PNG形式や、エクスポート設定に従った書き出しが要るとき。1回あたり最大20ノード。get_variable_defs:選択範囲のバリアブルとスタイルの定義。デザイントークンをコード側と突き合わせるとき。whoami:認証に使われたメールアドレスと所属プラン・シート種別を返す。権限エラーの切り分けはここから。
選択ベースのプロンプトはデスクトップサーバー専用です。リモートサーバーはリンクを要求するため、「選択中のものを実装して」という指示は通りません。
use_figmaとgenerate_figma_designが担う書き込み系の処理
書き込み系の中心は use_figma です。作成・編集・検査を一手に引き受ける汎用ツールで、Plugin API経由でFigmaファイルの文脈でJavaScriptを実行する点に特徴があります。スクリーンショットや静的な書き出しではなく、フレーム・コンポーネント・バリアント・バリアブル・Auto Layoutといった実データが生成される。これが画像を貼るだけの手法との決定的な差です。役割と制限はuse_figmaの仕組みと制限をまとめた記事で扱っています。
用途特化のツールも揃っています。generate_figma_design はコード側のインターフェースからデザインレイヤーを起こし、generate_diagram はMermaid記法でFigJamの図を作るもの。ほかに空ファイルを作る create_new_file、画像を送り込む upload_assets があります。
対応クライアント17種の接続可否とプラグイン・スキルの提供状況
MCPサーバーを使うには、MCPに対応したコードエディタやアプリケーションが必要です。対応状況はクライアントごとに揃っておらず、リモートだけ・デスクトップだけという組み合わせも存在します。
リモート・デスクトップ・キャンバス書き込みの対応状況を17種で比較
Figma公式ヘルプセンターのMCPサーバーのガイドに掲載された対応表です。
| クライアント | デスクトップ | リモート | 書き込み | プラグイン等 |
|---|---|---|---|---|
| Amazon Q | 対応 | — | — | — |
| Android Studio | 対応 | 対応 | — | — |
| Augment Code | 対応 | 対応 | 対応 | — |
| Claude Code | 対応 | 対応 | 対応 | Figmaプラグイン |
| Claude Desktop | 対応 | 対応 | 対応 | Figmaコネクタ |
| Codex by OpenAI | 対応 | 対応 | 対応 | Codex Skills |
| Copilot CLI | 対応 | 対応 | 対応 | Figmaプラグイン |
| Cursor | 対応 | 対応 | 対応 | Figmaプラグイン |
| Factory | 対応 | 対応 | 対応 | — |
| Firebender | 対応 | 対応 | 対応 | — |
| Gemini CLI | 対応 | 対応 | — | 拡張機能 |
| Kiro | 対応 | 対応 | 対応 | Kiro Powers |
| Openhands | 対応 | — | — | — |
| Replit | — | 対応 | — | — |
| VS Code | 対応 | 対応 | 対応 | Figmaプラグイン |
| Warp | 対応 | 対応 | 対応 | — |
| Xcode(ベータ) | — | 対応 | 対応 | Figmaプラグイン |
キャンバス書き込みまで通るのは12種です。Amazon QとOpenhandsはデスクトップ専用、Replitとベータ版のXcodeはリモート専用という偏りがあるため、標準エディタを決めてから接続方法を選ぶ順序になります。
MCPカタログ未掲載のクライアントが接続できない制約と認証方式
見落としやすい制約があります。Figma MCPサーバーへ接続できるのはFigma MCPカタログに掲載されたクライアントだけで、MCP対応を名乗る任意のクライアントから自由につなげるわけではありません。未掲載のクライアントには、接続の待機リストへ登録する導線が用意されています。認証はユーザーごとのOAuthログインが前提ですが、エンタープライズ管理下の認可としてOkta Cross App Access(XAA)にも対応済み。対象は現時点でClaudeのみです。
リモートとデスクトップの接続手順とクライアント別の設定ファイル例
導入手順はクライアントごとに細部が違いますが、指定する接続先は2つしかありません。リモートは https://mcp.figma.com/mcp、デスクトップは http://127.0.0.1:3845/mcp です。
Claude Code・Codex・VS Codeへリモートサーバーを追加する手順
リモートサーバー側での有効化操作はありません。クライアントへエンドポイントを登録し、OAuthで認証を通せば接続できます。導入ドキュメントに掲載されたコマンドと設定は次のとおりです。
# Claude Code(プロジェクト横断で使うなら --scope user を付ける)
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
# Codex CLI
codex mcp add figma --url https://mcp.figma.com/mcp
# VS Code の mcp.json
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}
Claude Code・Cursor・VS Code・Copilot CLI・Xcodeには、MCP設定とエージェントスキルをまとめたFigmaプラグインも用意されています。Claude Codeなら claude plugin install figma@claude-plugins-official、Cursorならチャットで /add-plugin figma と打つだけ。設定ファイルを手書きするより事故が少なくなります。
デスクトップサーバーの有効化と127.0.0.1への接続設定の手順
デスクトップ版はFigmaアプリ側の操作から始めます。対象のDesignファイルを開き、下部ツールバーからDev Mode(Shift+D)へ切り替え、インスペクトパネルの「MCP server」セクションで「Enable desktop MCP server」を押してください。有効化されると http://127.0.0.1:3845/mcp が待ち受け状態になります。
# Claude Code からローカルサーバーへ接続
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
# Cursor などの設定ファイル
{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}
接続後、VS Codeのチャットで #get_design_context と入力してツールが候補に出れば成功です。出てこないときはFigmaアプリとエディタを再起動してください。インスペクトパネルの設定モーダルでは、画像アセットをローカル参照にするかプロジェクトへ書き出すかと、Code Connectのマッピングを応答へ含めるかを切り替えられます。
料金体系とプラン別のツール呼び出し上限・毎分レート制限の実数値
2026年9月時点で、Figma MCPサーバーはベータ期間中のため無料で使えます。ただしFigmaは、これを従量課金の有料機能にする予定だと公式ヘルプセンターに明記しています。実務でぶつかるのは料金より上限のほうでしょう。
シート種別とプランごとの1日・1か月の上限と毎分レートの実数値
レート制限とアクセスのドキュメントに掲載された数値を整理します。1日または1か月の上限に加えて、毎分のレート制限が別途かかります。
| プラン | View/Collab | Dev/Full |
|---|---|---|
| Starter | 月20回まで | 該当なし |
| Professional | 月6回まで | 1日200回・10回/分 |
| Organization | 月6回まで | 1日200回・15回/分 |
| Enterprise | 月6回まで | 1日600回・20回/分 |
数えかたに逆転があります。無料のStarterプランは月20回まで使えるのに対し、有料プランでもView/Collabシートしか持たないメンバーは月6回で止まる。試用の窓口としてはStarterのほうが広い、という直感に反する並びです。教育プランはProfessionalのDev/Fullと同じ1日200回・毎分10回。レート制限がかかるのは読み取り系のツールで、add_code_connect_map、create_new_file、whoami は対象外と明記されています。
ツール呼び出し上限エラーの原因切り分けと引き上げ手段の優先順序
「You’ve reached the Figma MCP tool call limit…」というエラーが出たら、まず whoami を実行します。認証に使われたメールアドレスとシート種別が返るため、想定と違うアカウントで認証していたという取り違えをここで潰せる。Dev/Fullシートを持っているのにすぐ上限へ当たる場合は、作業中のファイルがアップグレード済みのチームに置かれていない、という原因が典型です。MCPの上限は契約したチームに紐づくため、対象ファイルを正しいチームへ移すか、該当プロジェクトの編集権限を確認してください。なおFigmaは上限値を変更する権利を留保しているため、見積もりの前提に置くなら都度の確認が要ります。
use_figmaによるキャンバス書き込みの前提シートと現在の制限
リモートサーバーの目玉機能がキャンバス書き込みです。チャットでレイアウトを言葉にして手作業で組み直す代わりに、フレーム・コンポーネント・バリアブル・Auto Layoutをエージェントが直接生成します。既存のデザインシステムを参照して組むため、ライブラリと突き合わせ直す後工程が減ります。
前提条件は明確です。書き込みにはFullシートが必要で、Devシート保持者は読み取り専用の用途に限られます。既存ファイルを変更するなら、そのファイルの編集権限も別途必要。リモートサーバーはリンクベースなので、プロンプトにはファイルURLか選択範囲へのリンクを必ず含めてください。
現時点の制限も公式ドキュメントに列挙されています。1回の呼び出しあたりの応答は20kbが上限、画像アセットは未対応で画像や動画を含むコンポーネントの取り込みとGIF生成はできず、カスタムフォントも未対応、コンポーネントは手動公開が要る、の4点です。大きな変更を一度に投げるより、構造を読ませてからバリアブル・コンポーネント・レイアウトの順に小さく刻む進め方が現実的でしょう。
公式サーバーとコミュニティ版Figma-Context-MCPの選択基準
Figma向けのMCPサーバーには、公式のもののほかにオープンソースのコミュニティ製サーバー(GLips/Figma-Context-MCP、旧称Framelink)があります。公式サーバーはDev Modeの情報を直接取得でき、Code Connectやバリアブル、キャンバス書き込みまでカバーする。コミュニティ版は個人アクセストークンで動き、有料シートなしでも無料で使える一方、非公式のため公式機能への追随は遅れ、APIキーの保管と露出にはこちら側の管理が要ります。
選び分けの結論を書きます。デザインシステムとCode Connectを整備し、生成コードを既存コンポーネントへ厳密に揃えたいチームは公式サーバーです。コミュニティ版はレイアウト情報を簡潔な構造で返すため、AIへ渡すトークン量を抑えやすく、design-to-codeの筋を軽く確かめたい個人・小規模開発に向きます。検証をコミュニティ版で始め、本番運用では公式版へ移す併用も成り立つでしょう。
MCPを使わずFigma APIから直接デザインデータを取得する方法も残っています。バリアブルの読み書きにEnterprise条件が付く制約はありますが、CIで定期的にトークンを同期する自動化には、エージェントを挟まないぶん向いています。
出力精度を左右するFigmaファイル構造とCode Connectの整備
MCPサーバーを入れても、入力となるFigmaファイルが粗ければ生成コードの品質は上がりません。精度を左右するのは次の4点です。
- Auto Layoutを使い、レイヤーとコンポーネントへ意味のある名前を付ける。
- バリアブル・コンポーネント・スタイルを整え、デザインシステムとして一貫させる。
- 一度に渡すフレームを小さく分ける。1画面より、ボタンやカード単位のほうが出力が安定する。
- Code Connectやルールファイルで、技術スタックと規約を事前に伝える。
このうち効きが大きいのはCode Connectです。Figmaのコンポーネントとコード側のコンポーネントを対応づけておくと、エージェントが実在のコンポーネントを再利用するため、生成コードが既存のコードベースと揃います。1つのライブラリに複数の接続を張れるので、同じFigmaコンポーネントへReactとSwiftUIの両方を紐づけることも可能。リモートサーバー経由で送るマッピングは、clientFrameworks パラメータへ React などのラベルを指定させて制御します。設定手順はFigma Code Connectの解説記事にまとめました。
採用を見送る条件と受託開発の現場で成果につながる使いどころの整理
導入すべきでない場面から書きます。デザインシステムが未整備で、Auto Layoutも命名規則も揃っていないファイルしかない状態でMCPサーバーを入れても、投資は回収できません。生成コードのレビューと手直しに、手で書くのと変わらない時間が溶けるためです。この段階で先にやるべきは、コンポーネントとバリアブルの整理でしょう。
単発のLPやキャンペーンサイトのように、コンポーネントの再利用がほとんど発生しない案件も見送りの対象です。Code Connectの整備コストを回収する機会がないまま、ツール呼び出し上限だけを消費することになる。案件の性格に応じた変換手段の比較はFigmaをReactへ変換する手段を比較した記事で整理しました。
逆に効くのは、デザインシステムが動いていて、同じコンポーネントを多数の画面で組み替える継続開発です。管理画面や業務システムのフロントエンドはここに当たります。バリアブルがトークンとして機能していれば、色やスペーシングの変更がコード側へそのまま流れ、デザイナーと実装者の間の伝言が減ります。
自社では、Figmaでのデザイン設計からフロントエンド実装までを一続きで請けています。デザインシステムの整備から入るか、既存のFigmaファイルを前提に実装だけを切り出すか。その判断も含め、UI/UXデザインのサービスページから相談を受け付けています。design-to-codeの前提づくりでつまずいているなら、ファイル構造の診断から着手するのが近道でしょう。
よくある質問
検索されることの多い質問へ、2026年9月時点の公式ドキュメントの記載をもとに答えます。
Q. Figma MCPサーバーとは何ですか?
Figmaのデザインコンテキスト(レイアウト・スタイル・コンポーネント・バリアブルなど)を、MCPという標準プロトコル経由でAIコーディングツールへ渡す仕組みです。読み取りだけでなく、エージェントがキャンバスへフレームやコンポーネントを書き戻す機能も備えます。提供開始時の呼称「Dev Mode MCPサーバー」は、現在「Figma MCP Server」に統一されました。
Q. 無料で使えますか?
2026年9月時点ではベータ期間中のため無料です。Figmaは将来、利用量に応じた従量課金の有料機能にする予定だと公式ヘルプセンターに記載しています。無料でも呼び出し回数には上限があり、シートとプランごとの実数は本文の表にまとめました。
Q. どのエディタ・ツールで使えますか?
VS Code、Cursor、Claude Code、Codex、Copilot CLI、Gemini CLI、Kiro、Warp、Android Studioなど、公式ヘルプセンターの対応表では17種が挙がっています。ただし接続できるのはFigma MCPカタログの掲載クライアントに限られます。
Q. リモート版とデスクトップ版、どちらを使うべきですか?
公式ドキュメントはリモート版を推奨しています。機能の幅が広く、デスクトップアプリの導入も要らないためです。デスクトップ版に残る利点は、選択中のフレームを対象に指定できる点と、Figma for Governmentで唯一使える点の2つになります。
Q. 「ツール呼び出し上限」エラーが出たときは?
まず whoami でアカウントとシート種別を確認してください。想定どおりのDev/Fullシートなら、作業中のファイルがアップグレード済みのチームに置かれていない可能性が高いです。MCPの上限は契約したチームに紐づきます。
関連記事
- use_figmaとは?Figma MCPでAIがキャンバスに書き込む仕組みと制限:書き込み系ツールの挙動と制限を深掘りしています。
- Figma Code Connectの使い方とは?設定手順・対応フレームワーク・Dev Modeでの仕組みを解説:生成コードを既存コンポーネントへ揃える設定手順です。
- Figma APIの使い方|レート制限・トークン・Variables APIのEnterprise条件:MCPを挟まずAPIで直接デザインデータを扱う方法です。
- Figma Makeの料金・AIクレジットとは?プラン別の上限と消費量・使い方・エクスポートまで解説:同じFigmaのAI機能でプロトタイプを作る選択肢です。
- Claude Code Web版とは?ブラウザでできること・使い方・料金とCLI版の違い:MCPクライアント側の使い方をまとめています。