Figma MCPの設定方法｜リモート・デスクトップの違いと接続確認

Figma MCPサーバーは、AIクライアントへデザインの構造・画像・Variables・コンポーネント情報などを提供する仕組みです。最初はFigmaが推奨するリモート版を検討し、Figma上で選択中のレイヤーを参照したい場合はデスクトップ版を選びます。

リモート版では対象フレーム・レイヤーのURLを渡します。「選んでいるフレームを見て」と入力するだけで、ブラウザーの選択状態が伝わるわけではありません。この記事は2026年10月3日に確認した公式仕様に基づき、MCPクライアントの接続・生成コードの実動作は未検証です。公式リモート設定

接続方法を選び、認証とツールを確認する

設定の流れを、先に確認しておきます。内容は、このページの説明にもとづく目安です。ページは、2026年10月3日に確認した公式仕様に基づいており、MCPクライアントの接続と生成コードの実動作は未検証です。仕様は変わることがあるため、Figmaの公式ガイドで最新の内容を確認してください。

1. まず、リモート版かデスクトップ版かを選ぶ。Figmaが推奨するリモート版を基本とし、Figma上で選択中のレイヤーを参照したい場合はデスクトップ版の利用条件を確認する。
2. 使うクライアント（VS CodeやClaude Codeなど）が、Figma公式の対応クライアント一覧に入っているかを確認する。
3. リモート版は、クライアントのMCP設定にFigmaのHTTPサーバーを追加し、サーバーを起動して、Figmaへの認証案内に従う。既存のMCP設定は、置き換えずに追加する。
4. デスクトップ版は、最新のFigmaデスクトップアプリでDesignファイルを開き、Dev ModeでEnable desktop MCP serverを有効にして、クライアントにローカルのURLを登録する。
5. 接続できたら、権限のあるフレームのURLを渡し、デザイン構造やスクリーンショットの取得など、小さな範囲から試す。
6. ツールが出ない・接続できない場合は、認証の完了、ツールの読み込み、重複登録の有無を、順に確認する。

リモート版では、選んでいるフレームを見て、と入力するだけでは、ブラウザーの選択状態は伝わりません。対象フレーム・レイヤーのURLを渡してください。

リモート版とデスクトップ版の比較

接続できるクライアントは、Figma公式の対応クライアント一覧で確認します。すべてのエディターが同じツールや認証方式を使えるとは限りません。VS Codeでデザインを人が検査するだけなら、Figma for VS Codeが別の選択肢になります。

VS CodeでリモートMCPを設定する

公式が案内するHTTP接続の設定例は次の形式です。既存のMCP設定がある場合は、serversにFigmaの項目を追加してください。ほかのサーバー設定を置き換える必要はありません。

{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

1. VS CodeのMCP設定で、ユーザー用か対象ワークスペース用かを選びます。
2. 上のHTTPサーバー設定を追加します。
3. サーバーをStartし、Figmaへの認証案内に従います。
4. AgentモードでFigmaのツールを選択できるか確認します。
5. 権限のあるフレームのURLを渡し、小さな範囲の情報取得から確認します。

ブラウザーでFigmaにログインしているだけでは、MCPクライアントの認証完了にはなりません。リモート版のOAuth認証に、個人アクセストークンを設定ファイルへ貼り付ける必要はありません。

Claude Codeから手動で接続する例

公式はFigmaプラグインを使う導入も案内しています。手動でHTTPサーバーを登録する場合は、次のコマンドで追加し、/mcpからFigmaの認証を行います。設定の適用範囲はクライアントの設定を確認してください。

claude mcp add --transport http figma https://mcp.figma.com/mcp

登録コマンドの完了後も、認証とツール読み込みの確認が必要です。すでにFigmaのプラグイン接続がある場合は、同じサーバーを重複登録する前に現在の設定を確認します。

デスクトップMCPを有効にする

1. 最新のFigmaデスクトップアプリでDesignファイルを開きます。
2. キャンバスで何も選択していない状態にし、Dev Modeへ切り替えます。
3. 右サイドバーのMCP serverセクションでEnable desktop MCP serverを有効にします。
4. MCPクライアントにhttp://127.0.0.1:3845/mcpを登録します。
5. 実装したいフレームを選び、選択対象を参照する指示を出します。

2026年10月23日に確認した公式ガイドでは、デスクトップ版にはProfessional・Education・Organization・Government・EnterpriseのいずれかのプランとDev席またはFull席が必要です。Figma for Governmentでは専用のデスクトップアプリを使い、リモートMCPは利用できません。デスクトップ版はキャンバスへの書き込みやUIの送信には対応しません。ブラウザー版Figmaだけでは起動できません。別のPCや外部サービスから接続するときも、その環境の127.0.0.1は自分のPCとは異なります。公式デスクトップ設定

最初に試す情報取得と指示

リモート版の指示は、「このフレームのURLを使い、デザイン構造とスクリーンショットを取得してください」のように対象を明示します。続いて、実装言語、既存コンポーネント、変更してよい範囲を伝えます。

ツール名と対象は公式ツール一覧が基準です。create_design_system_rulesはプロジェクトのルールを作るためのプロンプトで、通常の情報取得ツールと混同しないでください。

Code Connectを設定すると実際のコンポーネントへの参照をAIへ渡せます。ただし、対応付けがあることだけで、生成コードの正確性や画面全体の完成は保証されません。Code Connectの設定と、生成後のビルド・画面比較を組み合わせます。

利用回数とファイルの権限

Starter、または有料プランのView・Collab席は、読み取りツールの呼び出しが月20回までです。有料プランのDev・Full席は、Professionalで日200回・毎分10回、Organizationで日200回・毎分15回、Enterpriseで日600回・毎分20回です。Educationは日200回・毎分10回で、日次と毎分の両方の制限が適用されます。これは2026年10月28日に確認した条件で、変更される可能性があります。公式の利用条件と制限

この上限は読み取りツールについてのものです。すべてのMCP呼び出しやREST APIへ同じ表を当てはめないでください。ファイルへの権限も引き継がれるので、MCP接続によって未共有ファイルを読めるようにはなりません。

接続できない・ツールが出ない場合

ツールが読み込まれない場合はFigma公式の確認手順を参照してください。接続設定の確認と、生成コードの動作確認は分けて進めます。

よくある質問：Figma MCPの設定で迷ったときのチェックリスト

リモート版とデスクトップ版は、どちらを選べばよいですか？

最初はFigmaが推奨するリモート版を検討します。Figma上で選択中のレイヤーを参照したい場合は、対象プランとDev席またはFull席を用意してデスクトップ版を使います。

Figma MCPと、Figma for VS Codeは何が違いますか？

Figma MCPは、AIクライアントへデザインの構造・画像・Variables・コンポーネント情報などを提供する仕組みです。VS Codeでデザインを人が検査するだけなら、Figma for VS Codeが別の選択肢になります。

ブラウザーでFigmaにログインしていれば、認証は完了しますか？

完了しません。ブラウザーでFigmaにログインしているだけでは、MCPクライアントの認証完了にはなりません。リモート版のOAuth認証に、個人アクセストークンを設定ファイルへ貼り付ける必要はありません。

デスクトップ版は、ブラウザー版のFigmaで使えますか？

使えません。デスクトップ版は、ブラウザー版Figmaだけでは起動できません。別のPCや外部サービスから接続するときも、その環境のローカルのアドレスは、自分のPCとは異なります。

最初は、どんな指示を出せばよいですか？

対象を明示します。リモート版の例として、このフレームのURLを使い、デザイン構造とスクリーンショットを取得してください、という指示を紹介しています。続いて、実装言語、既存コンポーネント、変更してよい範囲を伝えます。

この設定は、動作確認済みですか？

いいえ。ページに書かれているとおり、MCPクライアントの接続と生成コードの実動作は未検証です。お使いの環境で、小さな範囲から確認してください。