Figma MCP を Claude Code で使う：リモート・デスクトップ・Framelink の設定方法

結論

Figma MCP を Claude Code に接続するには、claude mcp add --transport http figma https://mcp.figma.com/mcp を実行し、新しい Claude Code セッションを開始して /mcp と入力し、figma を選んで Authenticate を選択し、ブラウザで Allow access をクリックします。これが Figma 公式のリモートサーバーで、Figma がほとんどの人に推奨している方法です。

ほかに 2 つの選択肢があります。Figma デスクトップアプリ内で動く Figma のデスクトップサーバーと、個人アクセストークンを使うコミュニティ版の Framelink サーバーです。このガイドではそれぞれを設定し、どれを選ぶべきかを説明します。

Figma を Claude Code に接続する 3 つの方法

公式サーバーの情報は Figma の開発者ドキュメント、Framelink の情報は README とクイックスタートに基づいています。

方法 1：Figma のリモート MCP サーバー（推奨）

プラグインとしてインストールする

Figma のドキュメントでは、Figma のエージェントスキルも一緒に入るプラグインが推奨されています。

claude plugin install figma@claude-plugins-official

Claude Code が起動中なら再起動します。/plugin と入力し、右矢印キーで Installed タブに移動して figma を選び Enter、もう一度 Enter を押してサインインします。ブラウザで Allow access をクリックしてください。インストールコマンドが失敗する場合は、組織でプラグインのインストールがブロックされている可能性があります。その場合は手動のコマンドを使います。

または手動でサーバーを追加する

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

これは現在のプロジェクトだけに追加されます（Claude Code のデフォルトの local スコープ）。すべてのプロジェクトで使うには次のようにします。

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

チームで共有するなら --scope project を使います。.mcp.json に次の内容が書き込まれます。各メンバーが自分の Figma アカウントでサインインするため、シークレットは含まれません。

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

サインインする

1. 新しい Claude Code セッションを開始する。
2. /mcp と入力し、figma を選ぶ。
3. Authenticate を選び、ブラウザで Allow access をクリックする。
4. "Authentication successful. Connected to figma" と表示される。
5. もう一度 /mcp を入力して確認する。

トークンは Claude Code が保存し、自動で更新します。プロトコルの詳細は MCP の認証と OAuth をご覧ください。

なお、Figma のリモートサーバーに接続できるのは、Figma の MCP カタログに掲載されたクライアントだけです。Claude Code はそのひとつです。

方法 2：Figma のデスクトップ MCP サーバー

リンクをコピーせずに、Figma でいま選択しているものを元に Claude に作業させたい場合はこちらを使います。

要件：Figma デスクトップアプリと、Professional、Education、Organization、Government、Enterprise のいずれかのプランにおける Dev または Full シート。

1. Figma デスクトップアプリを開き、最新版に更新する。
2. Figma Design ファイルを開く。
3. 何も選択していない状態で、ツールバーのトグルか Shift + D で Dev Mode をオンにする。
4. 右サイドバーの MCP server セクションで Enable desktop MCP server をクリックする。画面下部に確認メッセージが表示されます。

続いて Claude Code に追加します。

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Claude Code を再起動して /mcp を確認します。別途サインインは不要で、デスクトップアプリ自体が認証の役割を果たします。デスクトップサーバーはキャンバスに書き込めないため、選択ベースの作業が特に必要でない限り、Figma 自身もリモートサーバーを推奨しています。

方法 3：Framelink（コミュニティサーバー）

Framelink MCP for Figma は Figma 公式サーバーより前から存在し、今も人気があります。あなたのトークンで Figma REST API を呼び出し、レスポンスをレイアウトとスタイルのデータに絞り込んでからモデルに渡すため、コンテキストを小さく保てます。提供するツールは get_figma_data と download_figma_images の 2 つです。

トークンを作成する

Figma でプロフィールアイコンをクリックし、Settings → Security を開いて Personal access tokens までスクロールし、Generate new token をクリックします。Framelink のクイックスタートでは、デフォルトのスコープのトークンは動作しないと注意されています。少なくとも file_content:read、file_metadata:read、current_user:read と、ドキュメントに記載されたその他のスコープにチェックを入れ、トークンをコピーします（表示は一度だけです）。

Claude Code に追加する

Framelink のドキュメントに記載のコマンドです。

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp \
  --figma-api-key=YOUR-KEY --stdio

トークンをコマンド引数に含めたくない場合は、サーバーが読み取る FIGMA_API_KEY 環境変数で渡せます。

claude mcp add framelink --env FIGMA_API_KEY=YOUR-KEY -- npx -y figma-developer-mcp --stdio

.mcp.json を共有する場合は、Claude Code の環境変数展開を使い、各自が自分のトークンを用意するようにします。

{
  "mcpServers": {
    "framelink": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": { "FIGMA_API_KEY": "${FIGMA_API_KEY}" }
    }
  }
}

本物のトークンは絶対にコミットしないでください。また npx を動かすには Node.js が必要です。

どれを選ぶべき？

• リモートサーバーを選ぶ：デザインコンテキスト、スクリーンショット、変数、Code Connect、Figma への書き戻し（新規ファイル作成、図の生成、動作中の UI をキャンバスへ送る）といったフル機能が欲しい場合。デスクトップアプリ不要で、Figma の推奨でもあります。
• デスクトップサーバーを選ぶ：デスクトップアプリ中心で作業し、いま選択しているものを Claude に処理させたい場合。有料プランの Dev または Full シートが必要です。
• Framelink を選ぶ：シートが公式サーバーの上限に達しがち、スクリプトでも使えるトークンベースの設定が欲しい、あるいはコンパクトなツール出力を好む場合。キャンバスへの書き込みと Code Connect は使えません。

複数を同時に入れることもできます。それぞれ別の名前（figma、figma-desktop、framelink）を付け、どれを使うかをプロンプトで指定しましょう。

公式サーバーのレート制限

Figma のレート制限ページによると、データを読み取るツールの上限は次のとおりです。

create_new_file や generate_figma_design など一部の書き込みツールは対象外です。Figma はこれらの上限をいつでも変更する可能性があるとしています。下書き以外のキャンバスへの書き込みには Full シートが必要で、ベータ期間中は無料です。

確認して最初のプロンプトを試す

ターミナルで claude mcp list、またはセッション内で /mcp を実行します。追加したすべてのサーバーが接続済みになっているはずです。次に Figma でフレームのリンクをコピーし（右クリック → Copy link to selection）、試してみましょう。

• 「この Figma フレームを Tailwind を使った React コンポーネントとして実装して：（リンクを貼る）。」
• 「この Figma の選択範囲で使われている色と余白の変数は？ うちの CSS 変数に対応付けて。」
• 「このフレームのスクリーンショットを取って、localhost:3000 のページと比較して。」
• 「このフレーム内のアイコンを SVG として public/icons に書き出して。」
• 「このリポジトリのモデルから、データベース構造の FigJam 図を生成して。」

公式サーバーは、コードベースに再利用できるコンポーネントがすでにあるときに最も力を発揮します。create_design_system_rules プロンプトでルールファイルを生成すれば、Claude がプロジェクトの規約に沿ったコードを書くようになります。

トラブルシューティング

各ツールが何を返すかを正確に確認したい場合は、サーバーを MCP Inspector に接続してください。

次のステップ

Claude が自分の成果物を確認できると、Figma MCP はさらに便利になります。Playwright MCP を追加すれば、Claude が作ったページを開いてデザインと比較でき、GitHub MCP サーバーで PR まで作れます。ほかのデザイン・フロントエンド系サーバーは MCP サーバーディレクトリで探せます。追加したサーバーの管理については Claude Code MCP ガイドをご覧ください。