CursorとFigmaをMCPで連携する完全ガイド【2026年最新】：デザインからコードへの自動変換・設定方法・活用ワークフローを徹底解説
室谷CursorとFigmaの連携、これ今めちゃくちゃ熱いんですよね。.AI（ドットエーアイ）コミュニティでも「Figma MCPどうやって使うの？」って毎週聞かれます。
テキトー教師講座でも受講生さんからの質問が一気に増えました。デザイナーとエンジニアが混在するチームでは特に「どっちが設定するの？」みたいな混乱も起きていて。
室谷本質的な話をすると、Figma MCPが解こうとしている問題って「デザイン↔コードの翻訳コスト」なんですよね。プロダクト開発って現実には「デザイン↔コード」の往復じゃないですか。
でも今まではAIはコードの世界でしか動けなかった・・・
でも今まではAIはコードの世界でしか動けなかった・・・
テキトー教師そこが変わりましたよね。Figmaのデザイン情報をAIが直接読み込んで、コードに変換できるようになった。
教える立場から言うと「デザイナーがFigmaで作ったもので、エンジニアがコーディングを省略できる」という体験が一番刺さります。
教える立場から言うと「デザイナーがFigmaで作ったもので、エンジニアがコーディングを省略できる」という体験が一番刺さります。
室谷MYUUUでもFigma MCPを試してみて、感触がかなり良かったです。デザインカンプからコンポーネントを起こすときの時間が半分以下になるケースもあって・・・
テキトー教師整理すると、この記事では「CursorでFigma MCPをどう設定するか」「設定後にどんなことができるか」「実際のワークフローはどう組むか」の3点を網羅します。前回のCursor MCPの基本設定を学んだ方は、今回でFigma連携まで一気に使えるようになりますよ。
Figma MCPとは？なぜCursorと組み合わせると強いのか
室谷まずFigma MCP自体の話をしておかないといけないですね。FigmaがMCPサーバーを公式でリリースして、今はだいぶ機能が充実してきています。
テキトー教師MCPって聞くと難しそうに聞こえるんですけど、要は「FigmaのデータをAIが読み書きできるインターフェース」ですよね。コードエディタ側（Cursorなど）から「このFigmaデータをくれ」と言えるようになった。
室谷正確に言うと、Model Context Protocolの略で、AIエージェントが外部ツールと標準化されたインターフェースでやりとりできるプロトコルです。FigmaがMCPサーバーを持つことで、CursorのAIエージェントがFigmaの設計情報を直接参照できるようになる。
テキトー教師以前は「FigmaのスクショをAIに渡して実装して」みたいな手順を踏む必要があったんですが、MCPがあれば直接デザインデータが取れる。変数の値もコンポーネントの構造も、全部精度高く読み取れます。
室谷しかもFigma公式の情報によると、リモートMCPサーバーは全プランで利用可能なんですよ。無料プランでもFigmaを使っている人は試せる。
テキトー教師それは受講生さんに言うと驚かれますね。「有料機能じゃないの？」って。
ただし書き込み系の機能（AI AgentがFigmaキャンバスに直接書き込む機能）は現在ベータで無料、将来的には有料になる予定とFigmaが明言しています。
ただし書き込み系の機能（AI AgentがFigmaキャンバスに直接書き込む機能）は現在ベータで無料、将来的には有料になる予定とFigmaが明言しています。
室谷読み取り（コード生成のためにFigmaのデザイン情報を参照する）は無料。書き込み（AIがFigmaキャンバスを直接編集する）は現在ベータ無料。
このあたりのコスト感はちゃんと把握しておかないと、後で「あれ、課金されてる」ってなりますw
このあたりのコスト感はちゃんと把握しておかないと、後で「あれ、課金されてる」ってなりますw
テキトー教師Cursorと組み合わせると何が強いかというと、CursorはAgentモードで自律的にコードを書けるじゃないですか。Figma MCPで読み取ったデザイン情報を元に、Agentが「よし、このデザインを実装しよう」と自律的に動いてくれる。
室谷ここが従来の「スクショ渡す」方法との大きな差ですよね。スクショは画像情報しか持てない。
MCPで取得するとコンポーネント構造、カラー変数、フォントサイズ、余白すべてが精密なデータとして渡せる。
MCPで取得するとコンポーネント構造、カラー変数、フォントサイズ、余白すべてが精密なデータとして渡せる。
Figma MCP Cursorで使える2種類のサーバー：リモートとデスクトップの違い
テキトー教師設定に入る前に、Figma MCPには2種類のサーバーがあることを理解しておきましょう。
室谷リモートサーバーとデスクトップサーバーですよね。これ、どっちを使うかで設定方法が変わってきます。
テキトー教師Figma公式では「リモートMCPサーバーを推奨」と明記しています。整理すると、こういう違いがあります。
| リモートMCPサーバー | デスクトップMCPサーバー | |
|---|---|---|
| 利用可能プラン | 全プラン（無料含む） | 有料プランのDev/Fullシートのみ |
| 設定の手軽さ | 簡単（プラグイン経由） | やや複雑 |
| 最新機能 | 最新ツール・スキル搭載 | 基本機能 |
| Figmaキャンバスへの書き込み | 対応（ベータ） | 非対応 |
| ローカル実行 | 不要 | Figmaデスクトップアプリ必要 |
室谷ほぼリモートサーバー一択ですね。無料プランでも使えて、機能も充実してる。
テキトー教師そうです。デスクトップサーバーを選ぶ理由があるとすれば、オフライン環境での作業やセキュリティ上の制約がある企業くらいじゃないですかね。
CursorでFigma MCPを設定する方法（リモートサーバー推奨）
室谷では実際の設定方法を見ていきましょう。Figma公式のプラグイン経由でCursorに設定する方法が一番シンプルです。
テキトー教師これ、コマンドパレットを使うだけなんですよ。講座でやってみると「あ、5分でできた」ってなる受講生さんが多い。
ステップ1：CursorのコマンドパレットからFigmaプラグインを追加する
室谷手順を説明しますね。まずCursorを開いてコマンドパレットを起動します。
- Mac:
Cmd + Shift + P - Windows:
Ctrl + Shift + P
テキトー教師で、コマンドパレットに「Open chat」と入力してEnterを押す。チャットウィンドウが開いたら、プロンプトボックスに
/add-plugin figma と入力してSubmitします。室谷「Add Plugin」ボタンが出てくるのでクリック。これでFigmaプラグインのインストールが始まります。
ステップ2：Figmaアカウントと認証する
テキトー教師インストールが完了したら、再度コマンドパレットを開いて「Cursor Settings」を検索します。「Tools & MCP」を選択すると、インストール済みのMCPサーバー一覧が見えます。
室谷そこに「Figma」が出てきているはずなので、「Connect」をクリックして認証プロセスに入ります。ブラウザが開いてFigmaのログイン画面になるので、Figmaアカウントでログインしてアクセスを許可。
テキトー教師これで完了です。CursorのSettings画面にFigma MCPサーバーが「Enabled」と表示されていれば成功。
室谷実際に試してみると、コマンドの
/add-plugin figma を入力するだけで、MCPサーバーの設定とAgentスキルの両方が一括でインストールされます。以前のように mcp.json を手動で編集する必要がなくなった点が大きいですよね。テキトー教師その点は受講生さんにも好評です。前は設定ファイルの記述が必要で「JSONって何？」ってところから教えないといけなかったんで（笑）
手動設定（mcp.jsonを使う場合）
室谷一応、
mcp.json を手動で設定する方法も残っています。プラグイン経由で設定できない環境や、設定をコードで管理したい場合は以下を使います。{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}
基本はプラグイン経由で入れてしまうのが圧倒的に楽です。手動設定はトラブルシューティングや細かいカスタマイズが必要なときに使う感じですね。
CursorとFigmaの連携でできること：主要機能を整理する
室谷設定が終わったら、実際に何ができるかを押さえましょう。Figma MCPの機能は大きく4つに整理できます。
テキトー教師「デザインからコード」だけじゃないんですよね、実は。書き込み方向もできるようになってきた。
デザインからコードを生成する
室谷一番使われるユースケースですね。FigmaのフレームをCursorに読み込ませて、そのままReact/Vue/Tailwindのコードを生成する。
テキトー教師プロンプトはシンプルで、「このFigmaファイルのURLのフレームをReactコンポーネントとして実装してください」みたいな指示で動きます。MCPがFigmaのAPIを呼んでデザインデータを取得して、Cursorがコードを生成するという流れです。
室谷精度がかなり高くて、カラー変数・スペーシング・フォントサイズがデザインと一致したコードが出てきます。以前の「スクショからコード生成」だとピクセル値を目視で確認する必要があったんですが、その手間がなくなりますね。
テキトー教師ただ、コンポーネントが複雑だったりネストが深かったりすると一発で完璧には仕上がらないこともあります。「ここのpadding違う」みたいな調整は発生するので、完全自動化というよりは「8割はAIが、残り2割は人が確認する」くらいのイメージが現実的です。
デザインシステムを取り込む
室谷Code Connect機能と組み合わせると、Figmaのコンポーネントと実際のコードコンポーネントをマッピングできます。
テキトー教師これが地味に強力で。Figmaで「ButtonコンポーネントはReactの
