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

Model Context Protocol（MCP）は、AIアプリケーション本体を「ホスト」、ホストから外部機能への接続を張るのが「クライアント」、外部機能を提供する側が「サーバー」と定義する三層構造の規格である。Claude Desktop・Claude Code・Claude Webは、この定義でいえば「ホスト兼クライアント」の側にあたる。Figma MCP Serverは「サーバー」であり、デザインコンテキスト取得、コンポーネント検索、デザイントークン参照、Figma上でのオブジェクト生成・編集、Code Connect経由でのコード側マッピング、FigJam図の生成といった機能を、標準化されたツール定義としてクライアントに公開する。

Figmaは2025年6月4日、公式ブログ「Introducing our Dev Mode MCP server」において、Dev Mode MCP ServerをVS Code、Cursor、Windsurf、Claude Codeなどの主要MCPクライアント向けにベータで公開した。同発表では、コード生成、スクリーンショット取得、変数定義の三系統のツールに加え、コンポーネントやスタイルをCode Connectを介してコード側にひも付ける設計思想が示されている。以後、Figmaは同サーバーを拡張し、リモートサーバー（https://mcp.figma.com/mcp）とデスクトップサーバー（http://127.0.0.1:3845/mcp）の二形態で提供している。

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

Claude側から見ると、Figma MCPは「同じ会話文脈のまま、自然言語の指示だけでFigma上のデザインを読み、編集し、コードとひも付けられる外部ツール」として現れる。ユーザーが「このフレームを取得してブランドトークンでコンポーネント化し、React側のマッピングも入れて」と書くと、Claudeはツールカタログから該当機能を選び、パラメータを組み立て、Figmaに実行を依頼する。生成結果はチャットに戻り、次の指示でそのまま反復に入れる。

なぜブランドチームにClaude起点で組む価値があるか

Figmaのウェブ画面を直接使う運用と、Claudeから呼び出す運用は、扱えるファイルそのものは大きく変わらない。違いは、リサーチ・要件整理・命名規則・レビュー観点といった前後工程を、同じ会話の中に束ねられる点にある。

Claudeは、ブリーフの解釈、コピー、参照事例の整理、レビュー観点の設計、社内共有用のサマリ作成といったテキスト側の工程を得意とする。一方、Figmaは、それらの工程で生まれた指示を、実際のコンポーネント、フレーム、バリアブル、Code Connectマップに落とす。両者を別々のツールとして往復させる運用では、指示の要約や貼り直しでコンテキストが失われ、反復のたびに人が介在する。ClaudeがMCPでFigmaを直接呼び出せると、ブリーフ整理からデザイン生成、レビュー、修正、確定までを一つの会話の中に束ねられる。

ブランド運用の観点では、この束ね方が三点で効く。第一に、ブランドガイドライン、過去アセット、命名規則といったコンテキストを、生成の直前までClaudeが保持する。第二に、Claude Code側であれば、生成結果のフレーム名、命名ルール、Code Connectマップをコード側で担保でき、複数プロダクト横断の管理コストが下がる。第三に、Figma側のget_variable_defs・get_code_connect_mapが返すデザイントークンとコード側実装の対応関係を、Claudeが会話の中で照合できる。

Claude Desktopでの接続手順

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

まず、Claude DesktopのSettingsを開き、Connectorsを選ぶ。「Add custom connector」または「Add remote MCP」から新規追加を開始し、名称欄にFigma、URL欄にhttps://mcp.figma.com/mcpを入力して保存する。保存後の一覧に表示されたFigma項目で「Connect」を押すと、ブラウザが起動しFigmaのOAuth認証画面に遷移する。既存アカウントで「Allow access」を押すと、Claude DesktopとFigmaの間に接続セッションが張られる。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シートでは接続できない。組織展開を始める前に、Figma管理コンソールのシート種別を確認しておく。

Claude Codeでの接続手順

Claude Codeでは、GUIではなくCLIコマンドまたは設定ファイルでMCPサーバーを登録する。Figma公式ヘルプセンター「Claude Code and Figma: Set up the MCP server」およびDeveloper Docs「Set up the remote server (recommended)」によれば、二通りの方法がある。

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

claude plugin install figma@claude-plugins-official

第二の方法は、claude mcp addによるMCPサーバー単体の追加である。プラグインが導入できない環境や、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を実行すると、サーバー一覧、認証状態、公開ツール数、キャッシュ状態が一画面で確認できる。認証が必要な場合は/mcpのパネルからOAuthサインインに進み、ブラウザでFigmaにログインする。

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

Figma MCPの利用そのものにAPIキーは不要である。Figma公式Developer Docsに記載のとおり、認証はブラウザ経由のFigma OAuthで完結し、生成にかかる操作は通常のFigmaシートから許可される。APIキーを~/.claude.jsonや環境変数に埋め込む必要はなく、鍵ローテーションの運用も生じない。企業内のみで完結させたい場合は、Figmaデスクトップアプリを起動した上でローカルサーバー（http://127.0.0.1:3845/mcp）を追加する構成も用意されており、Developer Docs「Set up the desktop server」に手順がある。

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コネクタの拡張を発表する回である。本稿で扱うFigma MCPの2026年時点の位置付けを、Figma自身の言葉で確認できる。

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

Claude側のユースケースで重要なのは、この発表以降、Figma MCPが「デザイン読み取り＋コード生成」のためのサーバーから、「Figmaの中でエージェントが動き、外部サービスまで束ねられる」土台に位置付け直された点である。Claude DesktopやClaude Codeから見たとき、Figma MCPはFigma上の設計情報を返すだけでなく、use_figmaやgenerate_figma_designによってFigma側のキャンバス上に新しいレイヤーを書き出す方向にも動く。ブランドチームは、Claude側の会話でブリーフを詰め、Figma側のキャンバスに反映し、そのまま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上のオブジェクト生成・編集・検査を担う汎用ツール、専用の/figma-useスキル併用が必須）、generate_figma_design（ライブUIをFigmaレイヤーに変換）、create_new_file（Design・FigJam・Slidesの新規ファイル作成）、upload_assets（PNG・JPG・GIF・WebPのアップロード）
  • Code Connect系：get_code_connect_map（Figmaノードとコードコンポーネントの対応取得）、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（FigJamをXMLで取得）、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（Weaveワークフローとの往復）
  • ユーティリティ：whoami（認証ユーザー確認）、プロンプトはcreate_design_system_rules（デザインシステム変換用ルールファイル生成）

ブランドチームの実務ユースケース

Figma MCPをClaude側から使うと、ブランド運用の反復ループを会話の中に束ねられる。Figma公式ドキュメントと公式Learnセンター記事に沿って書ける範囲で、次の四つが代表例となる。

第一は、ブランドガイドラインの再配布である。Claudeにガイドラインの原文と、色・タイポ・スペーシングの意思決定履歴を持たせた上で、Figma側のバリアブルとスタイルをget_variable_defsで取得する。差分が出た箇所をuse_figmaで書き戻し、Code Connect側のトークンとの整合をget_code_connect_mapで確認する流れになる。

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

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

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

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

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

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

権限設計の第二段は、Figma側のシート種別と組織ポリシーである。前述のとおりFigma MCPはDev / Fullシートに限定される。加えて、Figma組織プラン下でプラグインインストールに管理者承認が必要な場合、claude plugin install figma@claude-plugins-official側の運用も組織承認フローと合わせておく必要がある。誰がどのファイルにアクセスできるかは、従来どおりFigma側のプロジェクト・ファイル権限で決まる。

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

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

よくある質問

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

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

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

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

Claude Codeでclaude mcp addを実行する際に指定するトランスポートは何か

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

Claude以外のクライアントからも同じFigma MCPを使えるか

使える。Figma公式Developer Docsは、公式にサポートするリモートMCPクライアントとしてVS Code、Cursor、Claude Codeを挙げている。Claude Desktopもコネクタ経由で接続できる。いずれの場合も、同一のFigmaアカウントとシート枠を共有する。

Figma MCPからコードを書き戻す、あるいはFigma上に新規デザインを生成することは可能か

可能である。読み取り専用のサーバーではなく、use_figmaとgenerate_figma_designによって、Figmaキャンバス上のオブジェクトを新規作成・編集できる。書き込み系ツールを使う際は、Figma側から/figma-useスキルを併用することが公式に案内されており、Claude側でスキルを事前に読み込むか、claude plugin install figma@claude-plugins-officialでスキルを同梱導入するのが素直な運用となる。

まとめ

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から追加でき、いずれも認証はブラウザ経由のFigma OAuthで完結する。APIキーを扱う必要はなく、DevまたはFullシート保有者が前提となる。

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

Claude側の許可設計、Figma側のシート種別・組織ポリシー、監査履歴の突き合わせ、入力素材の扱いのいずれかひとつでも空欄のまま運用を広げると後工程で事故になりやすい。導入時にはこの四点をシステムプロンプトかSkill定義に書き込み、案件横断で共通化しておく。個々のツール仕様やスキル詳細は、Figma公式Developer Docsと当社の関連稿で扱う。

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

公式情報

AIGC TIMESとは

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

無料メソッド

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

AIGC TIMESのメソッドを見る

お問い合わせ

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

企業向けお問い合わせ

公式リンク