Cursor と Figma を MCP で連携する完全ガイド: 設定・JSON・トラブル対処

Cursor と Figma を MCP で連携すると、何が変わるのか

Figma のデザイン情報を Cursor から読み取れる

室谷代表取締役

これまでの開発って、Figma のデザインを目で見て、寸法を測って、コードに落とすっていう地味な往復がずっと続くじゃないですか。MCP で繋ぐと、その読み取り部分をエージェントにまるごと渡せるんですよね。

テキトー教師.AI認定講師

たしかに。コンポーネントや変数、レイアウト情報を Cursor 側から直接参照できるようになるんですよ。

いちいち「このボタンの余白いくつ？」ってデザインファイルを開かなくて済むので、最初に戸惑うのはむしろ「なんで今までこれがなかったんだ」って感覚ですね。

室谷代表取締役

MYUUU の現場でも、実装前にデザイン確認する時間がかなり減りました。時給換算すると、月に数時間分は浮いてる計算ですね。

選択したフレームからコードを生成する

テキトー教師.AI認定講師

もうひとつ大きいのが、Figma で選択したフレームをそのままコード化できることですね。「この画面を実装して」って指示するだけで、レイアウトを読み取ってコードを生成してくれる。

室谷代表取締役

プロトタイプの作り直しがすごく速くなるんですよ。新規機能の画面をぱっと作って、エージェントに実装させて、チームでレビューする。

このサイクルが1日で回ると、開発コストの考え方が変わってきます。

テキトー教師.AI認定講師

ただ、生成されたコードをそのまま使うより、「デザインシステムの部品と一致させたい」場合は Code Connect を噛ませるのがポイントです。実装の再現度がぜんぜん違います。

FigJam・Figma Slides・Make にも対応している

テキトー教師.AI認定講師

この MCP、Figma のデザインファイルだけじゃないんですよ。FigJam のホワイトボードや Figma Slides、Make のリソースも扱える。

室谷代表取締役

つまり、企画の壁打ちから設計、実装まで、ひとつのエージェントで通せるということですね。開発チームだけでなく、プロダクト全体のフローが繋がるのはデカい。

テキトー教師.AI認定講師

拡張子やファイル形式の垣根を越えて、Figma 内の情報が Cursor の文脈に入ってくる。この感覚、一度体験すると戻れないですよ。

室谷代表取締役

連携自体はプラグイン経由で数分あれば終わります。まずは読み取りから試すのがおすすめです。

Cursor に Figma MCP を設定する手順: リモート版がおすすめ

/add-plugin figma でプラグインを追加する手順

室谷代表取締役

実は Cursor からの Figma 連携、公式プラグインが一番速いんですよね。コマンドパレットからチャットを開いて、プロンプトに /add-plugin figma と打ち込むだけ。

テキトー教師.AI認定講師

たしかに。最初に「MCP の設定って JSON を書くんでしょ？」って身構える人が多いんですが、この手順なら Add Plugin をクリックして認証を通すだけで終わります。

室谷代表取締役

これマジで拍子抜けするレベルですね。OAuth の認証込みで接続まで完了するので、エンジニアリングチームの導入コストがほぼゼロなんですよ。

テキトー教師.AI認定講師

その後は Cursor Settings の Tools & MCP から Connect を押せば、Figma が有効な状態になります。初めて触る人でも迷わず辿り着ける構成になってますね。

リモート版とデスクトップ版のどちらを選ぶ？

室谷代表取締役

で、ここが大事なポイントで、Figma の MCP サーバーにはリモート版とデスクトップ版があるんです。公式は明確にリモート版を推奨してます。

テキトー教師.AI認定講師

デスクトップ版は特定の組織・エンタープライズ向けのユースケース向けで、機能もリモート版のほうが広いんですよね。基本的にはリモート版一択でいいと思います。

室谷代表取締役

デスクトップ版は Figma デスクトップアプリを立ち上げて、デバイスモードのサイドバーからサーバーを有効化して、ローカルのアドレスを Cursor に設定する……みたいな手順になるんですけど……

テキトー教師.AI認定講師

はい、それです。プラグインで完結するリモート版に比べると、どうしても手順が増えますよね。

まずは /add-plugin figma のルートに進むのが正解です。

デスクトップ MCP サーバーを手動設定する方法

室谷代表取締役

一方で、「どうしてもデスクトップ版を使わなきゃいけない」というケースもゼロではないので、手動の設定方法も押さえておきましょう。

テキトー教師.AI認定講師

やり方は、Figma デスクトップアプリでファイルを開き、キャンバスで何も選択していない状態からデバイスモードに切り替えて、右サイドバーの MCP サーバーを有効化します。

室谷代表取締役

すると下部に確認メッセージとサーバーのアドレスが表示されて、コピー用の URL も出てくるんですよね。

テキトー教師.AI認定講師

Cursor 側はコマンドパレットから設定を開いて、MCP タブの Add Custom MCP に以下の JSON を貼り付けるだけです。

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

室谷代表取締役

これで Cursor に figma-desktop が認識されたら設定完了です。ただ、繰り返しになりますけど、通常はここまでやる必要はないですね。

リモート版が圧倒的に楽です。

MCP 設定 JSON を手動で編集する: Windows での注意点

mcpServers に figma-desktop を追加する書き方

室谷代表取締役

リモート版が基本なんですけど、組織によってはデスクトップ版を手動で設定するケースもあるんですよね。手順自体は JSON を足すだけなんでシンプルです。

テキトー教師.AI認定講師

そうですね。最初に Figma デスクトップアプリを起動して、デザインファイルを開いた状態で Dev Mode に切り替えます。

何も選択していない状態で右サイドバーの MCP サーバーを有効化すると、接続用の URL がコピーできるんですよ。

室谷代表取締役

で、その URL を Cursor 側の MCP 設定に貼るわけですね。手動でやる場合は Add Custom MCP から追加して、mcpServers の下に figma-desktop として書く。

テキトー教師.AI認定講師

公式の設定例はこうです。

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

まずはこの形で動くか確認するのが早いですね。

Windows でローカル URL が通らないときの注意点

テキトー教師.AI認定講師

ここで最初に戸惑うのが「設定したのにツールが表示されない」パターンです。Windows だと特に、コピーした URL を貼り間違えたり、Figma デスクトップアプリが起動していなかったり、っていうのが多いですね。

室谷代表取締役

ローカルのサーバーに接続する形なんで、Figma 側でサーバーが有効になっていないと Cursor から見えないんですよね。あと、URL は http://127.0.0.1:3845/mcp の形で保存する必要がある。

テキトー教師.AI認定講師

たしかに。ポート番号込みの URL をそのまま使うのがポイントで、ここを一部書き換えてしまうと接続できないです。

コピーした値をそのまま JSON に貼るのが確実ですね。

室谷代表取締役

組織のネットワーク経由だと、ローカル通信がブロックされるケースもあるらしいです。そういうときは、設定ファイルを疑う前にまずデスクトップアプリ側の状態を確認したほうが早い。

環境変数・ネットワーク制限がある場合の確認ポイント

室谷代表取締役

エンタープライズだとプロキシやネットワーク制限があって、デスクトップ版のローカル通信がブロックされるケースがあり得ます。そういう環境で手動設定に時間をかけるより、リモート版に切り替える判断のほうが結果的に速いですね。

テキトー教師.AI認定講師

ネットワーク周りが原因の場合、切り分けが難しいんですよ。まずは Figma 側でサーバーが有効か、URL が正しいかを確認して、それでもダメならネットワーク設定を見直す流れが現実的です。

環境変数の扱いも環境によって違うので。

室谷代表取締役

そもそもデスクトップ版は特定の組織・エンタープライズ向けの位置づけで、基本的にはリモート版が推奨されてますからね。手動設定が必要なケースでも、まずは公式ドキュメントの最新手順を確認するのが確実です。

テキトー教師.AI認定講師

そうですね。設定ファイルの配置場所も環境によって異なるので、詰まったら公式の情報を確認しながら進めるのがいいと思います。

MCP が動かないときのトラブルシューティング: loading tools / not working の対処

ツール一覧に MCP が表示されないときの確認順

室谷代表取締役

MCP を追加したのにツールが空っぽ、みたいな話はよく聞きます。結局、設定ファイルは正しくても接続まで行けてないことが大半なんですよね。

テキトー教師.AI認定講師

たしかに。最初に確認したいのは、Cursor の設定画面で MCP サーバーの横にエラー表示が出てないか、ですね。

そこで「loading tools」のまま止まってたら、サーバー自体には届いてない可能性が高い。

室谷代表取締役

リモート版なら Figma の OAuth 認証を通してないと、ツール一覧が空のままなんですよ。プラグイン経由で入れたあと、Command Palette から Settings を開いて MCP タブの Connect ボタンを押す、そこまでが一連の流れだと意識したほうがいい。

テキトー教師.AI認定講師

そのうえで、まだ表示されなければ追加した設定 JSON の URL を見直すのが確実です。デスクトップ版だと http://127.0.0.1:3845/mcp を指しているか、スペルミスがないか。

ここはコピペが一番事故らない。

認証エラーや接続が切れるときの切り分け方

テキトー教師.AI認定講師

つぎに多いのが、一度つながったのに認証エラーが出るパターン。現場でよく聞くのは、Figma 側のアクセストークンが期限切れになってるケースです。

室谷代表取締役

リモートサーバーは OAuth で認証するので、一定期間たつと再認証が必要になるのは仕様に近いですね。エラーが出たら、まず MCP の設定から一度切断して、もう一度 Connect し直すのが早いです。

テキトー教師.AI認定講師

ただ、エラー内容が「connection lost」っぽい場合は、Figma デスクトップアプリのサーバーが止まってる可能性もありますね。デスクトップ版は Figma 側で MCP サーバーのトグルをオンにして、さらに Cursor 側の設定で figma-desktop という名前のカスタム MCP が生きているかを確認するのが確実です。

室谷代表取締役

切り分けの順番としては、認証エラーなら一度つながった証拠なのでまず再接続、そもそもつながらないなら設定とアプリの起動状態、という感じですね。ここを整理しておくとサポートに聞くときも話が速い。

大きなフレームを選んで処理が重い場合の対処

テキトー教師.AI認定講師

connection lost 系で意外と盲点なのが、選択してるフレームが重すぎるパターンです。Figma の開発者向けドキュメントでも「大きなフレームを選ばない」という指針が明記されている。

室谷代表取締役

あー、それありますね。フレームごと全部読もうとすると、AI 側に渡すコンテキストが膨大になってタイムアウトする。

実務でも、画面全体よりセクション単位で切り出したほうが生成コードの精度も上がりますし、ROI 的にも無駄がないんですよ。

テキトー教師.AI認定講師

具体的には、親フレームを選ぶのをやめて、実装したい単位の小さいフレームを1つだけ選ぶのが基本です。それでも重い場合は、Figma 側で不要なレイヤーを整理してから読み込ませると、MCP のレスポンスがかなり軽くなります。

室谷代表取締役

つまり、ツールが読み込まれない問題の多くは、原因を「認証」「バージョンや設定」「重すぎる選択範囲」の3つに絞れば、ほとんど自己解決できるんですよね。エラーメッセージを眺めるより、この順で確認するほうが確実ですよ。

Cursor のエージェントに Figma のデザインを実装させる実践プロンプト

デザインコンテキストを読み取らせる基本プロンプト

室谷代表取締役

Cursor に Figma のデザインを実装させるとき、最初のプロンプトで何を指定するかで、出力の安定度が全然変わるんですよね。

テキトー教師.AI認定講師

たしかに。最初に戸惑うのが「Figma のファイル名を言えば勝手に読んでくれるんでしょ？」って思い込み。

実は設計情報を MCP 経由で引っ張ってきたとしても、どのフレームを対象にするか曖昧だと、エージェントが勝手に一番近いフレームを選んじゃうんですよ。

室谷代表取締役

なるほど。だからプロンプトにはファイル名だけでなく「どのフレーム」を明示する必要があると。

「Figma の◯◯ファイルの××フレームを実装して」と。

テキトー教師.AI認定講師

そうです。加えて「コンポーネント名をそのまま使って」とか「変数とレイアウト情報を優先して」と付け加えると、デザインコンテキストを拾いやすい。

最初の1文で対象を絞ることが、結果を大きく左右します。

フレーム単位でコード生成するときの指定方法

テキトー教師.AI認定講師

実務では「フレーム単位でコード生成する」ことが多いんですけど、ここにもコツがあって。

室谷代表取締役

どういう指定を入れるんですか？

テキトー教師.AI認定講師

「このフレームだけ」「ネストしている子フレームも含めて」「背景や余白の値を変数から引いて」みたいに、粒度と技術的な条件をセットで渡すと、意図しない範囲まで生成されにくい。

室谷代表取締役

つまりプロンプトで制御範囲を指定するわけですね。これは US の現場でも同じで、プロンプトに「どのフレームを、どんな粒度で、どの技術で」を明記するのが当たり前になってます。

テキトー教師.AI認定講師

あとは「UI コンポーネントは既存のコードベースに合わせて」と一言添えるだけでも、ゼロから作るのではなく既存実装に寄せてくれやすくなります。

Code Connect でコンポーネントのズレを防ぐ

室谷代表取締役

生成結果がデザインとズレる問題、どう防ぐのが現実的ですか？

テキトー教師.AI認定講師

そこで効くのが Code Connect です。Figma のコンポーネントとコードの対応関係を事前にマッピングしておくと、Cursor が実際のコンポーネントを参照して実装してくれる。

室谷代表取締役

つまり、ゼロからコードを書かせるのではなく、既存のデザインシステムに沿って生成させる。

テキトー教師.AI認定講師

まさに。Code Connect 用のファイルを用意しておくと、コンポーネント名がズレて生成される事故が減ります。

初見では「ここまで準備するの？」と思うかもしれませんが、長期的には実装の手戻りが減って、ROI で見ると十分ペイします。

室谷代表取締役

確かに、コード生成の品質を上げるには、事前の設計情報の整理が効きますね。

読み取り専用から書き込みまで: ユースケース別の MCP 構成ガイド

読み取り専用で使う最小構成

テキトー教師.AI認定講師

まず最初に決めたいのが、Figma の MCP を「読むだけ」で使うのか「書き込む」ところまでやるのか、そこなんですよ。最初に戸惑うのが、設定方法は同じなのに、いざ触ってみると「あれ、これ編集できない？」ってなるパターン。

室谷代表取締役

たしかに。うちの現場でも「まず読み取りから」って始める人が多いんですけど、MCP はこれ自体が読み書き両対応のインターフェースなんで、どっちに使うかで権限の持ち方が変わってくる。

ここを最初に整理しておかないと、あとでセキュリティの話になったときに効いてきます。

テキトー教師.AI認定講師

はい。読み取り専用で使うだけなら、リモート版で認証を通せば、デザインのコンポーネントや変数、レイアウト情報を Cursor に読み込む形で取得できます。

生成 AI にコンテキストとして渡す分にはこれで十分。

室谷代表取締役

つまり、実装の前にデザインの情報をエージェントに渡したいだけなら、最小構成で足りますね。ここから始めるのが無難だと思います。

ライブ UI を Figma に送ってデザインを更新する

テキトー教師.AI認定講師

次の段階が、逆方向のフローですね。実際にコードで描画された Web の UI をキャプチャして、そのまま Figma のデザインファイルに書き込む。

これが MCP の魅力のひとつです。

室谷代表取締役

これができると、デザイナーとエンジニアの間で「この実装、ちょっとデザインと違うんだけど」みたいな往復が、キャプチャを送って差分を確認する形に変わる。無駄なメッセージの往復が減るのは、ROI で考えると地味にでかい。

テキトー教師.AI認定講師

ただ、この書き込み系の機能はリモート版じゃないと動かないものがあります。しかも現状ベータ期間中で無料で使えるけど、将来的には従量課金になるかもしれない、と公式もアナウンスしています。

室谷代表取締役

あー、それは知らなかった。つまり「書き込みまでやる」なら、まだ仕様が変わる可能性を織り込んでおく必要があるってことですね。

フィードバックをキャンバスへ反映するチーム運用

テキトー教師.AI認定講師

チームでやる場合は、フィードバックを Figma のキャンバスに直接書き込む運用が効きますね。エージェントに「このフレームをこう変えて」って指示すると、コンポーネントやオートレイアウトを維持したまま更新できる。

デザインシステムをソース・オブ・トゥルースにできます。

室谷代表取締役

うちでも、エンジニアが実装しながらデザインに気づいた点を、そのまま自分で Figma に反映しちゃうケースが出てきてるんですよ。デザイナーに依頼して、また後日…みたいな待ちが消えるのは大きい。

テキトー教師.AI認定講師

そうそう。ただし注意点もあって、書き込み系は常に改善中だから、あくまで「まずは試しながら」のスタンスで運用するのがいいと思います。

「これ、バグじゃない？」ってなったら公式にフィードバックもできるし。

室谷代表取締役

ベータ機能は「使って初めて見える問題」があるからね。最初から完璧を求めず、スモールスタートが正解。

企業導入時に確認したい権限・セキュリティ

室谷代表取締役

で、企業として導入するときに最後に確認したいのが権限周り。MCP は標準化されたインターフェースだから、Figma 側でどのファイルにアクセスできるか、認証フローがどうなってるかを把握しておく必要があります。

テキトー教師.AI認定講師

リモート版は OAuth での認証になります。あと、読み取り専用か書き込みまでかの判断も、ここで効いてきます。

チームで共有するファイルに書き込める権限をエージェントに持たせるかは、ガバナンスの話として一度決めておきたいところです。

室谷代表取締役

うちの現場では、まずは個人の作業ファイルで書き込みを試して、そこから共有ファイルに広げる順番にしてます。いきなり本番のデザインファイルにエージェントを突っ込むのは、リスクが読めないうちはやらないほうがいい。

テキトー教師.AI認定講師

その通りですね。デスクトップ版という選択肢も組織の事情によってはありますが、基本的にはリモート版が機能も広くておすすめです。

まずは目的を決めて、それに合った構成と権限を選ぶのが最短ルートだと思います。

まとめ: Cursor × Figma MCP を安定運用するポイント

まずはリモート版の最小構成から始める

室谷代表取締役

ここまでの話を整理すると、最初から凝った構成にしないのが一番ですね。Figma の公式ドキュメントでも、リモート版が推奨されていて、デスクトップ版は特定の組織・エンタープライズ向けって位置づけです。

テキトー教師.AI認定講師

たしかに、最初に戸惑うのは「リモートとデスクトップ、どっちを入れればいいんだ？」ってところですよね。公式の手順でも、プラグインを入れて /add-plugin figma を実行するだけで、MCP の設定まで丸ごと入るので、そっちが楽です。

室谷代表取締役

でしたら最初はプラグイン経由のリモート版でツールが増える感覚をつかむのが間違いないはずです。

公式ドキュメントで最新の対応状況を確認する

室谷代表取締役

この分野、進化が速いので、ブログの情報が古いまま残ってるケースが結構あります。個人的には公式の MCP カタログを見るのが早いですね。

テキトー教師.AI認定講師

そうなんですよ、私も「あれ、このツールもう無くなったの？」ってなることがあります。特に読み取りと書き込みの対応状況や、サポートしているクライアントの一覧は、公式の情報を確認しないと危ないです。

室谷代表取締役

最新の仕様を確認するのが結局一番の近道です。

読み取りから書き込みへ段階的に進める

室谷代表取締役

運用でうまくいってる現場は、最初から書き込みまでやらずに、まずはデザインの情報を読み取るだけから始めてますね。

テキトー教師.AI認定講師

いいポイントですね。最初から書き込もうとすると、エラーの切り分けが難しくなります。

まずは「このフレームの情報を教えて」みたいな読み取りから始めて、慣れてきたら段階的に書き込みに進むのが安全です。

室谷代表取締役

まさにそれで、読み取りで感覚をつかんだら、次に「このデザインをコードで実装して」と指示して、最後に書き込みに進むのがいい流れですね。

テキトー教師.AI認定講師

はい、この順番でいけば、どこでつまずいたのかも分かりやすいです。読み取りが安定すれば、書き込みの失敗も「読み取りはできてるから、書き込みの設定の問題だな」って切り分けられますから。

室谷代表取締役

いきなり全部を自動化するより、小さく確実に動かしてから広げていく。これが Cursor と Figma の MCP を現場で安定運用する一番のコツだと思います。

よくある質問

Q1. Figma MCP を使うのに Figma の有料プランは必要？

テキトー教師.AI認定講師

最初にここ気になりますよね。MCP サーバー自体は無料で公開されているものも多いんですけど、Figma 側の認証で Dev Mode が必要になるケースがあって、そこはプランに紐づいてきます。

室谷代表取締役

ただプラン要件は時期によって変わりやすいんで、「公式の最新情報を確認して」としか言えないのが正直なところです。個人利用なら無料枠で十分なこともありますよ。

テキトー教師.AI認定講師

そう、まずは動かしてみて、必要な機能が出てきたらアップグレードを考えるので十分だと思います。

Q2. Figma のデザインデータを Cursor に渡すとき、ファイルの書き出しは必要？

室谷代表取締役

ここ、MCP の便利なところで、書き出さなくても Figma 上のオブジェクト情報をエージェントが参照できるんですよね。画像を渡すのとは情報量が段違いです。

テキトー教師.AI認定講師

たしかに。スクリーンショットだと「ここ、色が違う」が伝わらないけど、MCP 経由だとカラーコードや余白の数値まで取得できる。

デザイン崩れの原因が減ります。

室谷代表取締役

なので「画像を貼って実装してもらう」の次のステップとして、MCP 連携はかなり効くと思います。

Q3. 公開されている MCP サーバーとローカルで動かすのはどっちが安全？

テキトー教師.AI認定講師

セキュリティの話ですね。デザインデータを外部サーバーに通したくない場合は、ローカルで完結する構成を選ぶ手もあります。

扱うデータの機密度で判断するのが現場的には多いです。

室谷代表取締役

リモート版のほうがセットアップは楽なんですけど、社外に出すのが憚られるデータならローカルの選択肢も視野に入れてください。あとは会社のセキュリティポリシー次第ですね。

テキトー教師.AI認定講師

そう、どっちが絶対いいとは言い切れないんですよ。まずは社内ルールを確認してから、が正解です。

Q4. Cursor 以外のエディタでも Figma MCP は使えますか？

室谷代表取締役

MCP はオープンな規格なんで、対応しているエディタやツールであれば同じサーバーを流用できることが多いんですよね。Cursor で覚えた設定の考え方がそのまま他でも生きるのはポイント高いです。

テキトー教師.AI認定講師

一方で、エディタごとに MCP の設定ファイルの書き方が少しずつ違うから、「同じ JSON がそのまま動く」とは限らないです。そこの差異にハマる人はいますね。

室谷代表取締役

とはいえ基本概念は共通なんで、一度覚えると何度も得する領域ではあります。

Q5. Figma MCP を使うとき、アクセストークンの管理で気をつけることは？

室谷代表取締役

トークンを JSON に直書きすると、リポジトリに誤ってコミットしたときに権限が漏れるリスクがあります。環境変数やシークレット管理機能に入れる癖をつけておくといいですよ。

テキトー教師.AI認定講師

あと、トークンに過剰な権限を付けないのも大事です。読み取りだけの用途なら読み取り範囲を絞っておくほうが安心です。

室谷代表取締役

この辺は面倒に感じる人が多いけど、事故ってから直すほうが遥かに面倒なんで、最初にだけ気をつければいいですね。

まとめ

室谷代表取締役

Cursor と Figma を MCP でつなぐと、デザインの構造データをエージェントが直接参照できるようになる。画像を見ながら当てずっぽうで実装するのとは、精度と速度の両方で差が出ます。

テキトー教師.AI認定講師

設定の流れとしては、まずリモート版でつないでみて、その後 JSON を触って仕組みを理解するところからがおすすめです。いきなり難しい構成にすると、動かないときに原因を切り分けづらいんですよ。

室谷代表取締役

そう、トラブルシューティングも「どこまで動いているか」を順番に見ていくのが早い。公式ドキュメントとログを突き合わせる習慣をつけると、詰まる時間が減ります。

テキトー教師.AI認定講師

最初は読み取り専用で小さなデザインを実装してみるのがいいですね。成功体験を積んでから書き込みや複数ユースケースに広げるのが安定すると思います。

室谷代表取締役

最終的には、デザイナーとエンジニアの受け渡しコストを下げられるのがこの連携の一番の価値かなと。まだ試してない人は、まず1プロジェクトだけでも導入してみるのがおすすめです。