デザインデータからのコーディングは、スクリーンショットの貼り付けや手作業での数値確認が必要で、開発の大きなボトルネックになりがちです。Figma MCPサーバーは、この課題をAIエージェントとの直接連携で解消する仕組みとして注目されています。
本記事では、Figma MCPサーバーの基本的な仕組みから具体的なセットアップ手順、料金プランとの関係、実務で成果を出すための活用テクニックまでを体系的に整理しています。
Figma MCPサーバーとは？デザイン情報をAIに直結させる仕組み
Figma MCPサーバーは、Anthropicが策定した**Model Context Protocol（MCP）**に準拠したサーバーです。Figmaのデザインファイルから、レイアウト構造・カラー・タイポグラフィ・変数・コンポーネント情報などを構造化データとしてAIコーディングツールに提供します。
従来のワークフローでは、デザインを確認しながらCSSの値を手動でコピーしたり、コンポーネントの仕様をドキュメントで共有したりする必要がありました。MCPサーバーを導入すると、AIエージェントがFigmaのデザインデータを直接読み取り、そのコンテキストに基づいたコード生成を行えるようになります。
MCPの基本アーキテクチャ
MCPは「クライアント─サーバー」型のプロトコルです。Figma MCPサーバーにおける構成要素は以下の通りです。
| 構成要素 | 役割 | 具体例 |
|---|---|---|
| MCPサーバー | デザインデータを構造化して配信 | Figma MCPサーバー（デスクトップ/リモート） |
| MCPクライアント | サーバーからデータを受け取りAIに渡す | VS Code、Cursor、Claude Codeなど |
| AIモデル | デザインコンテキストを基にコードを生成 | Claude、GPTなど |
開発者はMCPクライアント（エディタ）上でプロンプトを入力するだけで、AIがFigmaの正確なデザイン情報を参照しながらコードを出力します。
デスクトップ版とリモート版の違い
Figma MCPサーバーにはデスクトップサーバーとリモートサーバーの2種類があります。用途やチーム構成に応じた選択が重要です。
| 比較項目 | デスクトップサーバー | リモートサーバー |
|---|---|---|
| 動作環境 | Figmaデスクトップアプリ（ローカル） | Figmaクラウド（ブラウザ利用可） |
| エンドポイント | http://127.0.0.1:3845/mcp | https://mcp.figma.com/mcp |
| 操作方式 | セレクションベース＋リンクベース | リンクベースのみ |
| 必要なプラン | 有料プランのDevシートまたはFullシート | 全プランで利用可能（呼び出し回数制限あり） |
| Figmaアプリ | デスクトップアプリが必須 | 不要（ブラウザのみで完結） |
| レスポンス速度 | ローカル通信のため高速 | ネットワーク経由のため若干の遅延あり |
セレクションベースとリンクベースの違い
セレクションベースはデスクトップサーバー限定の機能です。Figmaアプリ上でフレームやレイヤーを直接選択し、MCPクライアント側で「選択中の要素を実装して」と指示できます。直感的な操作が可能で、特定のUI部品を素早くコード化する場面に適しています。
リンクベースはデスクトップ・リモート両方で使えます。Figma上でフレームを右クリックして「リンクをコピー」し、そのURLをエディタのプロンプトに貼り付けて指示を出します。ファイル全体のURLを渡せば、ページ単位の一括処理も可能です。
料金プランとMCPサーバーの利用条件
Figma MCPサーバーの利用可否はFigmaのプランとシートタイプによって異なります。2025年3月のプラン改定以降の体系を整理します。
プラン別の利用条件一覧
| プラン | シートタイプ | デスクトップMCP | リモートMCP | 月額目安（年払い時） |
|---|---|---|---|---|
| Starter（無料） | - | 利用不可 | 月6回まで | 無料 |
| Professional | Devシート | 利用可 | レート制限内で利用可 | $12/月 |
| Professional | Fullシート | 利用可 | レート制限内で利用可 | $16/月 |
| Organization | Dev/Fullシート | 利用可 | レート制限内で利用可 | $55/月〜 |
| Enterprise | Dev/Fullシート | 利用可 | レート制限内で利用可 | $90/月〜 |
リモートサーバーは無料プランでも利用できますが、ツール呼び出し回数が月6回に制限されています。実用的にMCPを活用するには、最低でもProfessionalプランのDevシート（年払いで月額$12相当）が必要です。
Dev ModeとMCPの関係
MCPサーバーの効果を最大限に引き出すには、Dev Modeの活用が不可欠です。Dev Modeでは、デザインファイル内の要素に対して以下の情報が構造化されて取得できます。
- CSSプロパティ（色・サイズ・余白・フォントなど）
- Auto Layoutの制約・パディング
- バリアブル（デザイントークン）の定義値
- コンポーネントのバリアント一覧
- Code Connectで紐づけた実装コード
Dev Modeを有効にした状態でMCPサーバーを起動すると、AIエージェントがこれらの構造化データに直接アクセスでき、より精度の高いコードが出力されます。
セットアップ手順（エディタ別）
共通の前提条件
- Figmaアカウント（Professionalプラン以上を推奨）
- MCPに対応したエディタ（VS Code / Cursor / Claude Code など）
デスクトップサーバーの起動手順
- Figmaデスクトップアプリを最新版に更新
- デザインファイルを開き、
Shift + DでDev Modeに切り替え - 右側のインスペクトパネルに表示される「MCP server」セクションで「Enable desktop MCP server」をクリック
- サーバーが
http://127.0.0.1:3845/mcpで起動
VS Codeでの接続設定
Cmd + Shift + P（macOS）またはCtrl + Shift + P（Windows）で「MCP: Open User Configuration」を選択し、以下のJSONを追加します。
デスクトップサーバーの場合：
{
"servers": {
"figma-desktop": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
}
}
リモートサーバーの場合：
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}
設定後、サーバー名の横に表示される「Start」ボタンをクリックしてサーバーを起動します。
出典: Figma Developer Docs - Remote Server Installation
Cursorでの接続設定
デスクトップサーバーの場合：
プロジェクトルートに .cursor/mcp.json を作成し、以下を記述します。
{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}
リモートサーバーの場合：
Figma公式のMCPカタログページからCursor用のディープリンクをクリックし、「Install」→「Connect」で認証を完了します。
出典: Figma Developer Docs - Desktop Server Installation
Claude Codeでの接続設定
ターミナルで以下のコマンドを実行します。
デスクトップサーバーの場合：
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
リモートサーバーの場合：
claude mcp add --transport http figma https://mcp.figma.com/mcp
接続後、/mcp コマンドで「figma」を選択し、「Authenticate」でアクセスを許可します。
対応するMCPクライアント一覧
Figma MCPサーバーは、2026年2月時点で以下のクライアントに対応しています。
| クライアント名 | デスクトップ対応 | リモート対応 | 備考 |
|---|---|---|---|
| VS Code (Copilot) | 対応 | 対応 | Agent Mode使用 |
| Cursor | 対応 | 対応 | ディープリンクで簡単設定 |
| Claude Code | 対応 | 対応 | CLIコマンドで追加 |
| Claude Desktop | 対応 | 対応 | - |
| Windsurf | 対応 | 対応 | - |
| Codex by OpenAI | 対応 | 対応 | - |
| Google Gemini CLI | 対応 | 対応 | - |
| Android Studio | 対応 | 対応 | - |
| Kiro | 対応 | 対応 | AWS製AIエディタ |
| Amazon Q | 対応 | 対応 | - |
| Warp | 対応 | 対応 | ターミナルベース |
| Zed | 対応 | 対応 | - |
| Replit | - | 対応 | リモートのみ |
公式版と非公式版（Figma-Context-MCP）の比較
Figma公式のDev Mode MCPサーバー以前から、オープンソースのFigma-Context-MCP（旧称：Framelink Figma MCP）が広く使われていました。両者の特性を比較します。
| 比較項目 | 公式 Dev Mode MCPサーバー | Figma-Context-MCP（非公式） |
|---|---|---|
| 提供元 | Figma公式 | コミュニティ（オープンソース） |
| 認証方法 | OAuth（Figmaアカウント連携） | 個人アクセストークン（PAT） |
| デザイントークン | バリアブル値を直接取得可能 | Figma REST API経由で間接取得 |
| Code Connect | 連携済みの実装コードを参照可能 | 非対応 |
| Make連携 | Figma Makeリソースの取得可能 | 非対応 |
| 利用料金 | Figmaプランに含まれる | 無料（Figma APIの利用枠内） |
| セットアップ | Figmaアプリから数クリック | トークン発行＋npxコマンド実行 |
| 更新頻度 | Figmaの製品アップデートに追従 | コミュニティメンテナンス |
公式版はDev Modeの情報を直接取得できるため、Code ConnectやVariablesなどFigmaの最新機能をフルに活用できます。一方、Figma-Context-MCPは無料プランでも制限なく使える点が強みです。
実務で成果を出すための活用テクニック
AIルールファイルとの組み合わせ
MCPサーバーだけでは、出力されるコードの品質がプロジェクトの規約と合わないことがあります。AIエージェント向けのルールファイルを用意して、技術スタックやコーディング規約を事前に伝えておくと精度が大きく向上します。
Cursorの場合、プロジェクトルートに .cursorrules を作成します。
# コーディング規約
- フレームワーク: Next.js (App Router)
- スタイリング: Tailwind CSS v4
- コンポーネント: React Server Components優先
- 命名規則: コンポーネントはPascalCase、関数はcamelCase
- Figmaのデザイントークンは@themeディレクティブで定義済みのCSS変数を使用すること
Claude Codeの場合は CLAUDE.md に同様の規約を記述します。
フレーム選択のコツ
Figma MCPサーバーに大きすぎるフレームを渡すと、データ量が膨大になりAIの処理精度が低下します。以下のポイントを意識してください。
- ページ全体ではなく個別のセクション単位で渡す
- 共通ヘッダー・フッターは別途コンポーネントとして切り出す
- アイコンや装飾画像はAuto LayoutのFrame内に整理しておく
小さな単位で段階的にコード化し、最後に統合する方法が安定した結果を得やすいです。
Code Connectによるコンポーネント一貫性の確保
Code Connectは、Figmaのコンポーネントと実装コードを紐づける機能です。MCPサーバー経由でAIがコードを生成する際に、Code Connectで登録済みのコンポーネントがあれば、そのプロジェクト固有の実装パターンが優先して参照されます。
たとえば、デザインシステムで定義したButtonコンポーネントがCode Connectで紐づいていれば、AIは汎用的な<button>タグではなく、プロジェクトの<Button variant="primary">を使ったコードを生成します。
Storybook MCPとの併用
デザインシステムの一貫性をさらに高めるには、Storybook MCPサーバーとの併用が有効です。Figma MCPでデザインコンテキストを取得し、Storybook MCPでコンポーネントの実装パターンを参照することで、デザイントークンからコンポーネントの振る舞いまで一貫したコード生成が可能になります。
よくあるトラブルと対処法
デスクトップサーバーに接続できない
| 原因 | 対処法 |
|---|---|
| Figmaデスクトップアプリが古い | 最新版にアップデート |
| Dev Modeが無効 | Shift + DでDev Modeに切り替え |
| ポート3845が別プロセスで使用中 | lsof -i :3845で確認し、該当プロセスを終了 |
| ファイアウォールがブロック | ローカルホスト通信を許可 |
リモートサーバーで認証エラーが発生する
リモートサーバーはOAuth認証を使用します。ブラウザでFigmaにログインした状態でエディタから接続してください。企業ネットワークでプロキシが介在する場合は、https://mcp.figma.com への通信を許可する必要があります。
500エラーが返る
大きなフレームや複雑なネストを含むデザインファイルでは、サーバー側でタイムアウトが発生する場合があります。対象を小さなフレーム単位に分割してリクエストしてください。
まとめ
Figma MCPサーバーは、デザインとコーディングの間にある手作業を大幅に削減するための実用的な仕組みです。デスクトップ版はセレクションベースの直感的な操作が可能で、リモート版はブラウザだけで完結する手軽さがあります。
導入のポイントを整理すると以下のようになります。
- Professionalプラン以上のDevシートまたはFullシートがあればフル機能を利用可能
- リモートサーバーは無料プランでも月6回まで試用可能
- VS Code・Cursor・Claude Codeなど主要エディタに対応済み
- Code Connectやルールファイルとの組み合わせでコード品質をさらに向上できる
- フレームは小さな単位で渡す方が精度が安定する
デザインデータを正確にコードへ変換する手段として、Figma MCPサーバーはフロントエンド開発の生産性を底上げする有力な選択肢です。