Figma MCPサーバーは、AIクライアントへデザインの構造・画像・Variables・コンポーネント情報などを提供する仕組みです。最初はFigmaが推奨するリモート版を検討し、Figma上で選択中のレイヤーを参照したい場合はデスクトップ版を選びます。
リモート版では対象フレーム・レイヤーのURLを渡します。「選んでいるフレームを見て」と入力するだけで、ブラウザーの選択状態が伝わるわけではありません。この記事は2026年10月3日に確認した公式仕様に基づき、MCPクライアントの接続・生成コードの実動作は未検証です。公式リモート設定
リモート版とデスクトップ版の比較
| 比較 | リモートMCP | デスクトップMCP |
|---|---|---|
| サーバーURL | https://mcp.figma.com/mcp | http://127.0.0.1:3845/mcp |
| 必要なFigmaアプリ | デスクトップアプリは不要 | Figmaデスクトップアプリ |
| 対象の指定 | フレーム・レイヤーのURL | 選択中のレイヤー、またはURL |
| 認証・起動 | クライアントからFigmaを認証 | Dev Modeでサーバーを有効化 |
| ツール | リモート専用ツールを含む | 提供されるツールの範囲が異なる |
接続できるクライアントは、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"
}
}
}- VS CodeのMCP設定で、ユーザー用か対象ワークスペース用かを選びます。
- 上のHTTPサーバー設定を追加します。
- サーバーをStartし、Figmaへの認証案内に従います。
- AgentモードでFigmaのツールを選択できるか確認します。
- 権限のあるフレームのURLを渡し、小さな範囲の情報取得から確認します。
ブラウザーでFigmaにログインしているだけでは、MCPクライアントの認証完了にはなりません。リモート版のOAuth認証に、個人アクセストークンを設定ファイルへ貼り付ける必要はありません。
Claude Codeから手動で接続する例
公式はFigmaプラグインを使う導入も案内しています。手動でHTTPサーバーを登録する場合は、次のコマンドで追加し、/mcpからFigmaの認証を行います。設定の適用範囲はクライアントの設定を確認してください。
claude mcp add --transport http figma https://mcp.figma.com/mcp登録コマンドの完了後も、認証とツール読み込みの確認が必要です。すでにFigmaのプラグイン接続がある場合は、同じサーバーを重複登録する前に現在の設定を確認します。
デスクトップMCPを有効にする
- 最新のFigmaデスクトップアプリでDesignファイルを開きます。
- Dev Modeへ切り替えます。
- InspectからEnable desktop MCP serverを有効にします。
- MCPクライアントに
http://127.0.0.1:3845/mcpを登録します。 - 実装したいフレームを選び、選択対象を参照する指示を出します。
デスクトップ版はブラウザー版Figmaだけでは起動できません。別のPCや外部サービスから接続するときも、その環境の127.0.0.1は自分のPCとは異なります。公式デスクトップ設定
最初に試す情報取得と指示
リモート版の指示は、「このフレームのURLを使い、デザイン構造とスクリーンショットを取得してください」のように対象を明示します。続いて、実装言語、既存コンポーネント、変更してよい範囲を伝えます。
| 目的 | 主なツール・確認点 |
|---|---|
| 構造と実装向け情報 | get_design_context。既定のReact・Tailwind以外は使用技術を指定 |
| 画面の見た目 | get_screenshot。生成コードと元デザインの比較に使う |
| 大きなファイルの対象探し | get_metadataで構造を確認し、対象nodeを絞る |
| VariablesやStylesの確認 | get_variable_defsなど、クライアントに提供されるツールを確認 |
| 実装コンポーネントの再利用 | Code Connectの対応情報を確認 |
| Figma内の作成・編集 | リモート版のuse_figmaなど。読み取りとは権限・影響を分けて確認 |
ツール名と対象は公式ツール一覧が基準です。create_design_system_rulesはプロジェクトのルールを作るためのプロンプトで、通常の情報取得ツールと混同しないでください。
Code Connectを設定すると実際のコンポーネントへの参照をAIへ渡せます。ただし、対応付けがあることだけで、生成コードの正確性や画面全体の完成は保証されません。Code Connectの設定と、生成後のビルド・画面比較を組み合わせます。
利用回数とファイルの権限
Starter、または有料プランのView・Collab席は、読み取りツールの呼び出しが月20回までです。有料プランのDev・Full席は、Professionalで日200回、Organizationで日200回、Enterpriseで日600回という上限に加え、毎分の制限があります。EducationはProfessional相当として案内されています。これは2026年10月3日に確認した条件で、変更される可能性があります。公式の利用条件と制限
この上限は読み取りツールについてのものです。すべてのMCP呼び出しやREST APIへ同じ表を当てはめないでください。ファイルへの権限も引き継がれるので、MCP接続によって未共有ファイルを読めるようにはなりません。
接続できない・ツールが出ない場合
| 状況 | 確認すること |
|---|---|
| 認証を求められる | MCPクライアント側のFigma認証とアカウント |
| リモートで選択対象が取得できない | node-idを含むフレーム・レイヤーURLを渡したか |
| デスクトップ版につながらない | アプリ起動、Designファイル、Dev Mode、サーバー有効化 |
| 一部のツールがない | 対応クライアント、リモート／デスクトップの違い |
| 読み取り回数のエラー | 席・プラン、日／月の制限、短時間の連続呼び出し |
| 作成・編集用のツールが出ない | 両方式を設定している場合、どちらのサーバーのツールか確認 |
ツールが読み込まれない場合はFigma公式の確認手順を参照してください。接続設定の確認と、生成コードの動作確認は分けて進めます。