前提：ClaudeとFigma MCPの役割分担

Model Context Protocol（MCP）は、AI本体を「ホスト」、外部機能への橋渡しを「クライアント」、外部機能を提供する側を「サーバー」と定義する三層規格である。Claude Desktop・Claude Code・Claude Webはホスト兼クライアントに位置する。Figma MCP Serverはサーバー側にあたる。デザインコンテキスト取得、コンポーネント検索、バリアブル参照、キャンバス上での生成・編集、Code Connect経由の対応付け、FigJam図の生成といった機能を、標準化されたツール定義としてクライアントに開放する。

Figmaは2025年6月4日、公式ブログでDev Mode MCP ServerをVS Code、Cursor、Windsurf、Claude Code向けにベータ公開した。以後は拡張が続き、リモートサーバー（https://mcp.figma.com/mcp）とデスクトップサーバー（http://127.0.0.1:3845/mcp）の二形態で提供されている。

Anthropicは2026年7月28日、MCP仕様の新版「2026-07-28」を発表した。双方向ステートフルからリクエスト／レスポンス型のステートレスへ移行している。同発表では、コネクタディレクトリのMCPサーバーが950を超え、Figma、Intuit、Netlify、PostHog、Xero、Zoomなどが公式に接続を提供していると述べている。Figma MCPはこの流れの中で、デザインツール側から先行してMCPを開放した代表例に位置付けられる。

なぜクロード起点で組む価値があるか

フィグマのWeb画面を直接使う運用と、Claudeから呼び出す運用は、扱えるファイルそのものは変わらない。差が出るのはリサーチ・要件整理・命名・レビュー観点といった前後工程を、同じ会話に束ねられる点である。Claudeはブリーフの解釈、コピー、参照事例の整理、レビュー観点の設計、社内共有用のサマリ生成といったテキスト工程を担う。Figmaは、その指示を実際のコンポーネントやバリアブルに落とす。二つを往復させる運用では、貼り直しの度にコンテキストが失われる。MCPで直結できると、ブリーフから生成、レビュー、修正までを一つの会話にまとめられる。

ブランド運用の観点では三つで効く。第一に、ガイドラインや過去アセット、命名規則をClaude側が生成の直前まで保持する。第二に、Claude Code側であれば、生成結果のフレーム名やCode Connectマップをコード側で担保できる。第三に、get_variable_defsとget_code_connect_mapが返すトークンとコード実装の対応関係を、Claudeが会話の中で照合できる。

Claude Desktopでの接続手順

Claude Desktopでは、GUIのコネクタ設定からFigma MCPを追加する。Figma公式ヘルプセンターの手順どおりに進めれば数分で完了する。

まずSettingsを開き、Connectorsを選ぶ。「Add custom connector」または「Add remote MCP」から新規追加を開始する。名称欄にFigma、URL欄にhttps://mcp.figma.com/mcpを入れて保存する。一覧に出たFigma項目で「Connect」を押すと、ブラウザが起動しフィグマのOAuth認証に遷移する。既存アカウントで「Allow access」を押せば接続が張られる。Figma公式Developer Docsのとおり、成功時には「Authentication successful. Connected to figma」と表示される。

以降は新規チャットで「Figma MCPでこのフレームを取得して」と短く指示するだけでよい。Claudeがツール呼び出しの許可プロンプトを提示する。都度承認するか、以降を一括で許すAlways Allowを選ぶかは、案件方針に応じて決める。共有アカウントでは、案件初期は都度承認を残すのが素直である。

なおFigma MCPの利用にはDevまたはFullシートが必要である。Figma公式ブログの発表時から「Available to users with Dev or Full seats」と明記されており、Viewerシートでは接続できない。組織展開の前に管理コンソールでシート種別を確認しておく。

Claude Codeでの接続手順

Claude CodeではGUIではなくCLIまたは設定ファイルでMCPサーバーを登録する。Figma公式ヘルプセンター「Claude Code and Figma: Set up the MCP server」およびDeveloper Docsの記載どおり、方法は二通りある。

第一はFigma公式プラグイン経由の追加である。次の一行で、MCPサーバー設定と、フィグマ運用でよく使うAgent Skillsをまとめて導入できる。

claude plugin install figma@claude-plugins-official

第二はclaude mcp addによる単体追加である。プラグインが使えない環境や、Skillsを併載せずMCPだけを試すときはこちらを使う。

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

--transport httpはStreamable HTTPを使うことを示す。Claude Code公式ドキュメントはHTTPを「クラウド提供のリモートMCPで最も広く対応する方式」と説明しており、Figma MCPの公開エンドポイントもこの形式に一致する。追加後、Claude Code内で/mcpを叩けば、サーバー一覧、認証状態、公開ツール数、キャッシュ状態が一画面で確認できる。認証が必要ならそのパネルからOAuthに進み、ブラウザでフィグマにログインする。

スコープは三種ある。localは現在のセッションのみ、userは同ユーザーの全プロジェクトで有効、projectはプロジェクト直下の.mcp.jsonにコミットしてチームで共有する。ブランド案件で複数名がFigma MCPを共用するなら--scope projectを選び、.mcp.jsonに接続情報を残す。承認状態はclaude mcp listとclaude mcp get figmaの出力で追える。

Figma MCPの利用そのものにAPIキーは不要である。認証はブラウザ経由のFigma OAuthで完結し、生成にかかる操作は通常のフィグマシートの権限内で許可される。トークンを~/.claude.jsonや環境変数に置く必要はなく、鍵ローテーションの運用も生じない。企業内で完結させたい場合は、フィグマデスクトップアプリを起動した上でローカルサーバー（http://127.0.0.1:3845/mcp）を追加する構成が案内されている。

Config 2026で更新されたFigma MCPとFigma Agent

FigmaはConfig 2026（2026年6月23〜25日、サンフランシスコ）で、キャンバスに置ける素材を静的フレームからコード・モーションまで広げる方針を発表した。Figma公式Learnセンターの「What's new from Config 2026」にまとまっているとおり、発表の中心はCode Layers、Figma Motion、Shader fillsとShader effects、Generative Plugins、Weave Tools、そしてFigma Agentである。Figma Agentは、テキストプロンプトから再利用できるスキルを組み上げ、Notion、GitHub、Slack、Atlassian、Hex、GranolaとMCPコネクタで接続できるように拡張された。

下の公式動画は、DylanフィールドがConfig 2026オープニングキーノートでFigma AgentとMCPコネクタの拡張を発表する回である。2026年時点の位置付けを、Figma自身の言葉で確認できる。

動画：Figma 公式チャンネルより引用

Claude側から見て重要なのは、この発表以降、Figma MCPが「読み取り＋コード生成」のサーバーから、「フィグマの中でエージェントが動き、外部サービスまで束ねる」土台に位置付け直された点である。Claude Desktopやクロード Codeから見たとき、Figma MCPは設計情報を返すだけでなく、use_figmaやgenerate_figma_designによってキャンバス上に新規レイヤーを書き出す方向にも動く。ブランドチームは、Claude側でブリーフを詰め、フィグマ側のキャンバスに反映し、そのままFigma Agentのスキルに橋渡しする構成が組める。

Claude側から呼び出せる主なFigma MCPツール

Figma公式Developer Docs「Tools and prompts」の記述に沿うと、Claude Desktop・Claude Code側から扱える主要ツールは次のように整理できる。いずれもClaude側で自然言語の指示に変換され、対応するツールがサーバー側で選ばれる。

  • 読み取り系：get_design_context（フレーム構造・スタイル・レイアウト取得）、get_metadata（レイヤー階層のスパースXML取得）、get_screenshot（選択範囲のスクリーンショット取得）、get_variable_defs（バリアブルとスタイルの定義取得）、get_motion_context（アニメーション・キーフレーム情報取得）
  • 書き込み系：use_figma（オブジェクト生成・編集・検査を担う汎用ツール、/figma-useスキル併用が必須）、generate_figma_design（ライブUIをフィグマレイヤーに変換）、create_new_file（Design・FigJam・Slidesの新規作成）、upload_assets（PNG・JPG・GIF・WebPのアップロード）
  • Code Connect系：get_code_connect_map、get_code_connect_suggestions、add_code_connect_map、send_code_connect_mappings、get_context_for_code_connect
  • デザインシステム系：get_libraries（購読済みライブラリ一覧）、search_design_system（コンポーネント・バリアブル・スタイル横断検索）
  • 図・シェイダー系：generate_diagram（Mermaid記法からFigJam図生成）、get_figjam、list_shader_effects、get_shader_effect、list_shader_fills、get_shader_fill
  • Weave連携系：weave_list_tools、weave_get_tool_inputs、weave_run_tool、weave_get_tool_run_output、weave_upload_asset、weave_cancel_tool_run
  • ユーティリティ：whoami（認証ユーザー確認）、プロンプトはcreate_design_system_rules（変換用ルールファイル生成）

ブランド運用に落とす代表ユースケース

Figma公式ドキュメントとLearnセンター記事に沿って書ける範囲で、代表例は四つある。

第一は、ブランドガイドラインの再配布である。Claudeにガイドライン原文と意思決定履歴を持たせた上で、get_variable_defsで色・タイポ・スペーシングの現状を取り、差分が出た箇所をuse_figmaで書き戻し、get_code_connect_mapでコード側と整合させる。

第二は、コンポーネントの生成と拡張である。既存の型をget_design_contextで読み、サイズ違い・状態違い・言語違いの亜種をClaudeが計画し、use_figmaとgenerate_figma_designでキャンバスに反映する。書き込み時は/figma-useスキルの併用がFigma側から必須と案内されている。

第三は、モックアップの生成である。ブリーフとリファレンスをClaudeに渡し、create_new_fileでDesign・FigJam・Slidesを新規作成し、フレーム構成を組み上げる。結果はget_screenshotで確認し、use_figmaで反復する。

第四は、FigJamでの発散である。企画段階のブレストや情報設計をgenerate_diagramでFigJamに落とし、Claude側の意思決定ログと突き合わせる。Figma公式ブログ「Think Outside of the Box with Claude and FigJam」も、この組み合わせを一次事例として扱っている。

権限・監査・データ扱いの確認事項

Claude MCP経由でフィグマを呼ぶ運用でも、確認すべき論点はSaaSベースのデザインツールと変わらない。Figma公式Developer DocsとClaude Code公式ドキュメントに沿って整理する。

一つ目は、Claude側の許可粒度である。Claude DesktopのAlways AllowとClaude Codeの.mcp.json共有では、ツール呼び出しが自動で走る前提になる。案件初期や共有アカウントでは、都度承認を残すか、.mcp.jsonのスコープをuserに絞って個人単位で試す構成が安全である。Anthropic Managed Planでは、管理者側の許可リストが上位で効くため、そちらの登録も同時に確認する。

二つ目は、Figma側のシート種別と組織ポリシーである。前述のとおりFigma MCPはDev / Fullシートに限る。プラグイン導入に管理者承認が要る組織では、claude plugin install figma@claude-plugins-official側の運用も承認フローと合わせておく必要がある。誰がどのファイルに触れるかは、従来どおりフィグマ側のプロジェクト・ファイル権限で決まる。

三つ目は、監査履歴の突き合わせである。MCP経由の編集もフィグマファイルのバージョン履歴に残る。誰が、いつ、どのプロンプトから編集したかを追える体制にするには、命名規則、案件タグ、レビュー用マニフェストをClaude側で自動生成する設計が現実的である。Config 2026で追加されたFigma AgentのMCPコネクタ（Notion・GitHub・Slack・Atlassian・Hex・Granola）を併用する場合、それぞれの監査ログもリストに加える。

四つ目は、入力素材と生成物の扱いである。フィグマの学習利用可否や、Enterpriseプラン下のAI関連ポリシーは契約種別で異なるため、Figma管理コンソールと契約条件を都度確認する。未発表商品、顧客素材、人物写真をMCP越しに扱うときは、契約種別、学習利用可否、解約後のデータ保持期間を事前に確認する。人物を扱う場合は、本人同意と用途範囲まで含めた許諾整理を、Claude側のシステムプロンプトに反映しておく。

FAQ

Q1. claude mcp figma 使い方の最短ルートは何か

Claude Desktopならコネクタ画面からhttps://mcp.figma.com/mcpを追加し、ブラウザでFigmaにOAuthログインするだけでよい。Claude Codeならclaude plugin install figma@claude-plugins-officialかclaude mcp add --transport http figma https://mcp.figma.com/mcpのどちらかで登録し、/mcpから認証に進む。いずれもAPIキー管理は不要である。

Q2. Figma MCPをClaude MCP経由で使うのに追加費用は必要か

Figma MCPそのものの利用料はFigma公式では設定されていない。ただし利用はDevまたはFullシート保有者に限られ、既存のシート料金と組織プラン料金の範囲内で使う建て付けである。Claude側は使用中のClaudeプラン（Claude Desktop / Claude Code）に準じる。

Q3. APIキーを~/.claude.jsonや環境変数に書く必要はあるか

必要ない。認証はClaude Desktopのコネクタ画面、またはClaude Codeの/mcpパネルからブラウザ経由のFigma OAuthで完結する。トークン管理と鍵ローテーションの運用は生じない。ローカルサーバー（http://127.0.0.1:3845/mcp）を選ぶ場合も、フィグマデスクトップアプリのログイン状態をそのまま使う。

Q4. Claude Codeで指定するトランスポートは何か

http（Streamable HTTP）である。Figma MCPのリモートエンドポイントはHTTPで、Claude Code公式ドキュメントもリモートMCPにはHTTPを推奨している。SSEやWebSocketの指定は不要である。ローカルサーバーを追加するときも同じくHTTPを使う。

Q5. Figma MCPから新規デザインを生成することは可能か

可能である。読み取り専用のサーバーではなく、use_figmaとgenerate_figma_designによって、フィグマキャンバス上に新規レイヤーを作成し編集できる。書き込み系ツールを使うときは、Figma側から/figma-useスキルの併用が公式に案内されており、事前にスキルを読み込むか、プラグイン経由でスキルを同梱導入するのが素直である。

まとめ

Claude Desktop・Claude Code からFigma MCPを呼び出す運用は、Figma単体を使うより、ブランドチームの前後工程を一つの会話に束ねられる点で差が出る。Claude Desktopはコネクタ画面からhttps://mcp.figma.com/mcpを、Claude Codeはclaude plugin install figma@claude-plugins-officialまたはclaude mcp add --transport http figma https://mcp.figma.com/mcpから追加でき、認証はブラウザ経由のOAuthで完結する。APIキーは不要で、DevまたはFullシート保有者が前提となる。

Config 2026でFigma AgentとMCPコネクタが拡張され、Figma MCPは「デザインを読む」サーバーから、「キャンバスに書き出し、外部サービスも束ねる」土台へ位置付け直された。Anthropicが2026年7月28日にMCP仕様の新版を出したことで、対応クライアントとサーバーがともに拡張を続けるオープン規格として、より安定した位置に入っている。ブランド運用側は、Claude側にブリーフ整理と命名を任せ、Figma MCPに読み取り・書き込み・Code Connectを任せる分業を、この上に組める。

Claude側の許可設計、Figma側のシート種別・組織ポリシー、監査履歴の突き合わせ、入力素材の扱いのいずれかを空欄のまま広げると、後工程で事故になりやすい。導入時にはこの四点をシステムプロンプトかSkill定義に書き込み、案件横断で共通化しておく。

関連記事

画像生成・動画生成モデルの全体像を見る

情報源

AIGC TIMESとは

AIGC TIMESは、AIクリエイティブ業界の専門メディアである。本メディア運営企業が一〇都市・二〇社以上のグローバルブランドへの実装を通じて蓄積したメソッド、独自調査に基づく業界動向、AIツールのアップデート情報を、公式noteと連動して継続的に発信している。

無料メソッド

AIクリエイティブの社内導入、研修、パートナー選定、ブランドコミュニケーションに関するメソッドを公開している。

AIGC TIMESのメソッドを見る

お問い合わせ

AIクリエイティブ制作、PoC、社内導入、研修についてのご相談は、公式フォームからお問い合わせください。

企業向けお問い合わせ

公式リンク