Figma MCPリモート版完全ガイド｜デザイン連携から実装
Figma MCP とは
Figma MCP Server は、Figma が提供する Model Context Protocol 実装で、AI エージェントに デザインファイルの構造・変数・コンポーネント情報 を IDE 側へ渡したり、対応クライアントでは Figma キャンバスへの書き込み（write to canvas） を行ったりします。デザイン→実装の往復を、スクリーンショット貼り付けだけに頼らず リンクと MCP ツール で標準化するのが目的です。
公式 Introduction では、リモート MCP サーバー（https://mcp.figma.com/mcp）の利用が推奨されています。本記事は Remote server installation を軸に、OAuth、クライアント別セットアップ、beta 機能の料金注意、実践プロンプトまでを整理します。
前提環境
| 項目 | 内容 |
|---|---|
| MCP クライアント | Figma MCP Catalog 掲載クライアントのみ（VS Code、Cursor、Claude Code 等） |
| 認証 | Figma OAuth（リモートサーバー利用時） |
| Figma デスクトップ | リモートサーバーなら 不要（デスクトップ版 MCP は別経路） |
| 新規クライアント開発 | Catalog 外は waitlist（公式記載） |
Catalog 制限は重要です。任意の自作 MCP クライアントが即座に Figma エンドポイントへ接続できるわけではありません。
リモートサーバー概要
エンドポイント:
https://mcp.figma.com/mcp
トランスポートは HTTP です。Figma デスクトップアプリを常時起動しなくても、エージェントが フレーム URL から node-id を抽出 し、デザインコンテキストを取得できます（クライアントは URL を「閲覧」するのではなく、MCP ツールが node を特定します）。
できること（公式）
| 機能 | 概要 |
|---|---|
| Extract design context | 変数、コンポーネント、レイアウトを IDE へ |
| Generate code from frames | 選択フレームからコード生成 |
| Write to canvas | エージェントが Figma 上にフレーム等を作成・更新（beta） |
| Retrieve Make resources | Make ファイルからコードリソース取得 |
| Code Connect | 実コードベースのコンポーネントと Figma を一致させ品質向上 |
write to canvas と料金
公式 Introduction および Remote installation ページ:
This will eventually be a usage-based paid feature, but is currently available for free during the beta period.
beta 終了後の課金モデル詳細には未確定部分があります。導入判断時は beta 表示と Developer Docs の更新を定期確認してください。
Claude Code への接続
推奨: 公式プラグイン
claude plugin install figma@claude-plugins-official
Anthropic 公式 marketplace の Figma プラグインには、MCP 設定 + Agent Skills + ワークフロー が同梱されます（Remote installation - Claude Code）。
手動: HTTP MCP 追加
claude mcp add --transport http figma https://mcp.figma.com/mcp
全プロジェクトで使う場合:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
初回は Claude Code 内で /mcp → figma → Authenticate → ブラウザで Allow Access です。成功メッセージ Authentication successful. Connected to figma を確認してからプロンプトを開始します。
write to canvas を安定させるには、公式が Figma 向け Skills の追加インストール も推奨しています（プラグイン経由が簡便）。
Cursor への接続
推奨: プラグイン
Cursor の Agent チャットで:
/add-plugin figma
プラグイン同梱物（公式記載）:
- Figma MCP サーバー設定
- デザイン実装・Code Connect・デザインシステムルール用 Skills
- Figma MCP からのアセット取り扱い Rules
手動
Figma 提供の deep link から Cursor の MCP 設定を開き、Install → Connect → OAuth 許可、という流れ（Remote installation - Cursor）。
VS Code への接続
Command Palette（Cmd+Shift+P / Ctrl+Shift+P）から:
- MCP: Open User Configuration（グローバル）
- MCP: Open Workspace Folder MCP Configuration（ワークスペース限定）
mcp.json 例（公式）:
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}
Start を押し、Allow Access で OAuth 完了後にプロンプト可能です。
実践: デザインコンテキスト取得
基本は Figma フレーム/レイヤーのリンク をエージェントに渡す方式です。
- Figma で対象フレームを選択し リンクをコピー
- IDE でエージェントに依頼:
この Figma フレームを React + Tailwind で実装して。
https://www.figma.com/design/xxxxx/...?node-id=1-234
エージェントは URL から node-id を解釈し、MCP ツールでレイアウト・スタイル・コンポーネント情報を取得します。ピクセル画像の OCR より 構造化データ に基づくため、デザインシステム（Variables、Auto Layout）が整っているほど出力品質が上がりやすい、というのが Figma 側の設計意図です。
Code Connect との組み合わせ
Code Connect は、Figma コンポーネントと リポジトリ内の実コンポーネント を結び、生成コードが @/components/Button 等の 既存実装 を再利用するよう促します。MCP だけでは「それっぽい JSX」になりがちな問題を、デザインシステムの正本で抑える用途です。モノレポでは Code Connect マッピングのメンテナンスコストとセットで評価してください。
write to canvas（beta）の位置づけ
対応クライアントでは、エージェントが Figma Design / FigJam 上にフレーム、コンポーネント、stickies 等を直接作成・更新できます。FigJam 向けダイアグラム生成（アーキテクチャ図、ERD）も Remote installation ページに例があります。
運用上は 本番デザインファイル直書き より、検証用ファイルや FigJam ボードで試し、確定後に Design ファイルへ移すフローが安全です。beta かつ将来有料のため、チームポリシーで利用範囲を決めておくことを推奨します。
出力品質を上げるルール
Figma Developer Docs は エージェント向け rules の設定を推奨しています（example rules へのリンクあり）。例:
- デザイントークン（色・spacing）を CSS 変数 / Tailwind theme にマッピング
- アイコンは SVG export 方針を明記
- 画像アセットは
public/配置ルールを固定
Cursor プラグイン同梱 Rules を起点に、プロジェクトの .cursor/rules や Claude CLAUDE.md と整合させると、MCP 取得情報の 解釈ブレ が減ります。
よくあるつまずき
| 症状 | 原因 | 対処 |
|---|---|---|
| 接続できない | Catalog 外クライアント | 公式対応 IDE を使用 |
| Authenticate ループ | OAuth 未完了 / トークン失効 | /mcp から再認証 |
| node-id 不一致 | リンクがファイル全体のみ | フレーム単位リンクをコピー |
| 生成コードがバラバラ | Code Connect 未設定 | コンポーネントマッピングを整備 |
| write が失敗 | beta 制限・権限 | ファイル権限と beta 状態を確認 |
FAQ
Q. デスクトップ MCP とリモート MCP、どちらを選ぶべきですか。
公式は リモート https://mcp.figma.com/mcp を推奨。機能面でも「最も広い」とされています。Enterprise 固有要件がある場合のみデスクトップ版を検討（Introduction）。
Q. OAuth は誰のアカウントで行いますか。 通常は デザインファイルへアクセス権のある Figma ユーザー で認証します。チーム利用では権限モデルを事前に合意してください。
Q. Claude Code で plugin と manual add を両方すると？
重複設定になりうるため、プラグイン推奨経路か手動 HTTP のどちらか一方 に寄せ、 /mcp でエントリ数を確認するのが安全です。
Q. write to canvas は今無料ですか。 beta 期間中は無料と公式記載です。将来 usage-based 有料化が予定されているため、本番運用前に Developer Docs の料金表記を再確認してください。
Q. Playwright MCP と併用できますか。 はい。Figma で実装 → Playwright で UI 確認、という分割が有効です（Playwright MCP ガイド）。
Q. 日本語 UI の Figma ファイルも扱えますか。 MCP は構造データ取得のため言語依存は小さいです。生成コード側の i18n はプロジェクトルールで別途指示してください。
関連記事
- MCPサーバーとは？AIエージェントに“道具”を持たせる仕組み
- Playwright MCP完全導入ガイド｜セットアップと実践
- Serena MCPサーバー導入完全ガイド｜コード検索の使い方
- Claude Code セットアップ完全ガイド
正本: developers.figma.com/docs/figma-mcp-server/ / Remote server installation
関連サービス
最終確認日: 2026-07-23