Figma MCP Server

# Claude Code: Figma 公式が勧めるのは Figma プラグインを入れる方法です
#   claude plugin install figma@claude-plugins-official
#
# 手動で追加する場合:
#   claude mcp add --transport http figma https://mcp.figma.com/mcp
#   → Claude Code で /mcp を開き、figma を選んで Authenticate → Allow Access
#
# Claude（Web 版・デスクトップアプリ）: 設定ファイルへの JSON 追記ではなく、
#   Figma 公式の MCP カタログ（https://www.figma.com/ja-jp/mcp-catalog/）から
#   Claude のコネクタディレクトリに進んで Figma を追加します

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Figma MCP Server とは

Figma は、Web デザインや UI 設計を複数人でリアルタイム共同編集できるツールです。デザイナーがアプリ画面・Web サイト・バナーなどを描き、エンジニア・PM・経営層が同じファイルを開いてコメントやレビューできる「みんなの設計図」として、プロダクト開発に関わる多くの職種で使われています。

Figma MCP Server は、その Figma と AI をつなぐために Figma 社自身が提供している仕組みです。AI にデザインのリンクを渡すと、AI がデザインの中身を読み取ってコードを書いたり、逆に AI から Figma にデザインを作ったりできます。

これは Figma 公式のツールです。有志が作った別の MCP サーバーは Framelink MCP for Figma のページで紹介しています。

Figma MCP Server × AI でできること

接続先を登録して Figma にログインすると、デザインと実装の行き来を AI との会話の中で 進められます。

🎨 デザインをコードにする

「（Figma のフレームのリンク）このデザインを React で実装して」
→ レイアウト・色・余白などの情報を読み取ってコード化

🎭 デザインシステムの値を取り込む

「この画面で使っている変数とスタイルを一覧にして」
→ 変数・スタイル定義を取得して実装に反映

✏️ Figma にデザインを作る

「この構成で、ログイン画面のフレームを Figma に作って」
→ Figma ファイルにフレームやコンポーネントを直接作成

🗺 FigJam に図を描く

「このテーブル設計の ER 図を FigJam に描いて」
→ 説明やコードから FigJam の図を生成

提供される主なツール

公式ドキュメントの一覧から、主なツールを用途別にまとめます。「リモートのみ」は、デスクトップサーバーでは使えないツールです。

用途	主なツール	できること
デザインからコード	get_design_context / get_metadata / get_screenshot / get_variable_defs / download_assets（リモートのみ）	選んだフレームのデザイン情報・構造・画面画像・変数とスタイルの取得、画像素材の書き出し
Figma への書き込み（リモートのみ）	use_figma / create_new_file / upload_assets / generate_figma_design / generate_diagram	フレームやコンポーネントの作成・編集、新規ファイルの作成、画像のアップロード、動いている Web 画面からのデザイン生成（一部のクライアントのみ）、Mermaid 記法から FigJam の図を生成
FigJam の読み取り	get_figjam	FigJam の図を XML に変換して取得
デザインシステム	search_design_system（リモートのみ） / get_libraries（リモートのみ） / get_code_connect_map / add_code_connect_map	ライブラリのコンポーネント・変数・スタイルの検索、Figma のコンポーネントとコードの対応づけ（Code Connect）
アカウント	whoami（リモートのみ）	認証中のユーザーと所属プラン・シートの確認

このほか、生成プラグインやシェーダー、Figma Weave 向けのツールもあります。最新の一覧は 公式の Tools and prompts ページ で確認できます。

Figma MCP Server について

Figma MCP Server は、Figma 社が公式に提供する MCP サーバーです。提供形態は2つあります。

• リモートサーバー（公式の推奨）: Figma がホストする接続先 https://mcp.figma.com/mcp に接続します。Figma デスクトップアプリは不要で、使えるツールがいちばん多い形態です
• デスクトップサーバー: Figma デスクトップアプリの Dev Mode で有効にし、http://127.0.0.1:3845/mcp に接続します。Figma は特定の組織・企業向けの用途として提供しており、多くの人にはリモートサーバーを勧めています

書き込み系のツールを使う場合、Figma は Figma のスキル（エージェント向けの手順書）をあわせて入れることを勧めています。Claude Code や Cursor では、Figma のプラグインを入れると MCP サーバーの設定とスキルがまとめて入ります。

スペック

• 配布形態: リモートサーバー（https://mcp.figma.com/mcp・インストール不要）/ デスクトップサーバー（Figma デスクトップアプリ）
• 認証: Figma アカウントでのログイン（OAuth）
• 提供元: Figma 社（公式）
• 対応ファイル: Figma Design・FigJam・Figma Make（ツールごとに異なり、Figma Slides に対応するツールもあります）
• 利用条件: リモートサーバーは全プラン・全シート（呼び出し回数に上限あり）、デスクトップサーバーは有料プランの Dev・Full シート
• 料金について: 英語版の公式ヘルプは「ベータ期間中は無料で、将来は利用量に応じた有料機能になる予定」と案内しています（2026年9月15日確認。日本語版ヘルプには記載がありません）
• 公式ドキュメント: developers.figma.com/docs/figma-mcp-server

導入手順

前提条件

• Figma アカウント（無料の Starter プランでも、回数の上限内で使えます）
• Figma 公式の MCP カタログ に載っているクライアント

リモートサーバーの設定（公式の推奨）

Figma の開発者向けドキュメントが案内している手順です。

• Claude Code: claude plugin install figma@claude-plugins-official で Figma プラグインを入れます（公式の推奨）。手動の場合は claude mcp add --transport http figma https://mcp.figma.com/mcp を実行し、Claude Code を起動し直して /mcp から figma を選び、「Authenticate」→「Allow Access」で許可します
• Cursor: エージェントのチャットで /add-plugin figma と入力して Figma プラグインを入れます（公式の推奨）。手動の場合は、ページ上部の Cursor 用の設定を追加し、Figma の横の「Connect」から許可します
• VS Code: mcp.json の servers に "figma": { "url": "https://mcp.figma.com/mcp", "type": "http" } を追加し、「Start」を押して許可します
• Codex: Codex アプリのプラグイン一覧から Figma を入れるか、codex mcp add figma --url https://mcp.figma.com/mcp を実行して認証します
• Gemini CLI: gemini extensions install https://github.com/figma/mcp-server-guide で Figma の拡張機能を入れ、Gemini CLI の中で /mcp auth figma を実行します
• Claude（Web 版・デスクトップアプリ）: Figma 公式の MCP カタログから Claude のコネクタディレクトリに進み、Figma を追加します

使い方

1. Figma でフレームやレイヤーを選び、そのリンクをコピーする
2. AI に「このリンクのデザインを実装して」のように頼む

AI はリンクを開くのではなく、リンクに含まれる ID から対象のデザインを特定して情報を取り出します。

デスクトップサーバーを使う場合

1. Figma デスクトップアプリを最新版にし、Figma Design のファイルを開く
2. 画面下のツールバーで Dev Mode に切り替える（Shift + D）
3. インスペクトパネルの MCP サーバーの欄で「Enable desktop MCP server」を押す
4. クライアントに http://127.0.0.1:3845/mcp を登録する（Claude Code なら claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp）

注意事項

• ツールの呼び出し回数に上限があります。 無料の Starter プランは月20回、有料プランでも View・Collab シートは月6回です。回数を多く使う場合は、有料プランの Dev・Full シートが必要です（1日200〜600回）
• 接続できるのは、Figma 公式の MCP カタログに載っているクライアントだけです。 載っていないクライアントからは、汎用の設定では接続できません
• アクセスできるのは、自分がもともと閲覧・編集できる Figma のファイルだけです。 権限のエラーが出たら、whoami ツールで認証中のアカウントと所属プランを確認してください
• 書き込み系のツールは Figma ファイルを直接変更します。 大事なファイルで試す前に、どのファイルが対象になるかを確認してください
• 大きなフレームをまとめて選ぶと、処理が遅くなったり、エラーや不完全な結果になったりします。 公式は、カードやヘッダーなど小さな単位に分けて渡すことを勧めています
• 個人用アクセストークンで動く有志製のサーバーを使いたい場合は、Framelink MCP for Figma をご覧ください