2026年8月19日

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

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

公式画面

Cursor と Figma を MCP で連携すると何が変わるのか
デザイン情報を読み取り
コンポーネントや変数、レイアウト情報をCursor側から直接参照。デザインファイルを開いて寸法を測る手間がなくなる。
選択フレームからコード生成
Figmaで選択したフレームを指示するだけでレイアウトを読み取ってコード生成。Code Connectを使うとデザインシステムの部品と一致させられる。
FigJam・Figma Slides・Makeにも対応
デザインファイル以外のホワイトボードやスライド、Makeのリソースも扱える。企画から設計、実装まで1つのエージェントで通せる。

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

室谷室谷代表取締役
これまでの開発って、Figma のデザインを目で見て、寸法を測って、コードに落とすっていう地味な往復がずっと続くじゃないですか。MCP で繋ぐと、その読み取り部分をエージェントにまるごと渡せるんですよね。
テキトー教師テキトー教師DotAI 認定講師
たしかに。コンポーネントや変数、レイアウト情報を Cursor 側から直接参照できるようになるんですよ。

いちいち「このボタンの余白いくつ?」ってデザインファイルを開かなくて済むので、最初に戸惑うのはむしろ「なんで今までこれがなかったんだ」って感覚ですね。
室谷室谷代表取締役
MYUUU の現場でも、実装前にデザイン確認する時間がかなり減りました。時給換算すると、月に数時間分は浮いてる計算ですね。

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

テキトー教師テキトー教師DotAI 認定講師
もうひとつ大きいのが、Figma で選択したフレームをそのままコード化できることですね。「この画面を実装して」って指示するだけで、レイアウトを読み取ってコードを生成してくれる。
室谷室谷代表取締役
プロトタイプの作り直しがすごく速くなるんですよ。新規機能の画面をぱっと作って、エージェントに実装させて、チームでレビューする。

このサイクルが1日で回ると、開発コストの考え方が変わってきます。
テキトー教師テキトー教師DotAI 認定講師
ただ、生成されたコードをそのまま使うより、「デザインシステムの部品と一致させたい」場合は Code Connect を噛ませるのがポイントです。実装の再現度がぜんぜん違います。

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

テキトー教師テキトー教師DotAI 認定講師
この MCP、Figma のデザインファイルだけじゃないんですよ。FigJam のホワイトボードや Figma Slides、Make のリソースも扱える。
室谷室谷代表取締役
つまり、企画の壁打ちから設計、実装まで、ひとつのエージェントで通せるということですね。開発チームだけでなく、プロダクト全体のフローが繋がるのはデカい。
テキトー教師テキトー教師DotAI 認定講師
拡張子やファイル形式の垣根を越えて、Figma 内の情報が Cursor の文脈に入ってくる。この感覚、一度体験すると戻れないですよ。
室谷室谷代表取締役
連携自体はプラグイン経由で数分あれば終わります。まずは読み取りから試すのがおすすめです。

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

Figma MCP: リモート版 vs デスクトップ版
リモート版
  • 公式推奨
  • /add-plugin figma でプラグイン追加
  • OAuth 認証込みで接続完結
  • 機能が広い
デスクトップ版
  • エンタープライズ向け
  • デスクトップアプリでサーバーを有効化
  • ローカルアドレスを手動設定
  • 手順が増える

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

室谷室谷代表取締役
実は Cursor からの Figma 連携、公式プラグインが一番速いんですよね。コマンドパレットからチャットを開いて、プロンプトに /add-plugin figma と打ち込むだけ。
テキトー教師テキトー教師DotAI 認定講師
たしかに。最初に「MCP の設定って JSON を書くんでしょ?」って身構える人が多いんですが、この手順なら Add Plugin をクリックして認証を通すだけで終わります。
室谷室谷代表取締役
これマジで拍子抜けするレベルですね。OAuth の認証込みで接続まで完了するので、エンジニアリングチームの導入コストがほぼゼロなんですよ。
テキトー教師テキトー教師DotAI 認定講師
その後は Cursor Settings の Tools & MCP から Connect を押せば、Figma が有効な状態になります。初めて触る人でも迷わず辿り着ける構成になってますね。

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

室谷室谷代表取締役
で、ここが大事なポイントで、Figma の MCP サーバーにはリモート版とデスクトップ版があるんです。公式は明確にリモート版を推奨してます。
テキトー教師テキトー教師DotAI 認定講師
デスクトップ版は特定の組織・エンタープライズ向けのユースケース向けで、機能もリモート版のほうが広いんですよね。基本的にはリモート版一択でいいと思います。
室谷室谷代表取締役
デスクトップ版は Figma デスクトップアプリを立ち上げて、デバイスモードのサイドバーからサーバーを有効化して、ローカルのアドレスを Cursor に設定する……みたいな手順になるんですけど……
テキトー教師テキトー教師DotAI 認定講師
はい、それです。プラグインで完結するリモート版に比べると、どうしても手順が増えますよね。

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

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

室谷室谷代表取締役
一方で、「どうしてもデスクトップ版を使わなきゃいけない」というケースもゼロではないので、手動の設定方法も押さえておきましょう。
テキトー教師テキトー教師DotAI 認定講師
やり方は、Figma デスクトップアプリでファイルを開き、キャンバスで何も選択していない状態からデバイスモードに切り替えて、右サイドバーの MCP サーバーを有効化します。
室谷室谷代表取締役
すると下部に確認メッセージとサーバーのアドレスが表示されて、コピー用の URL も出てくるんですよね。
テキトー教師テキトー教師DotAI 認定講師
Cursor 側はコマンドパレットから設定を開いて、MCP タブの Add Custom MCP に以下の JSON を貼り付けるだけです。
json
{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}
室谷室谷代表取締役
これで Cursor に figma-desktop が認識されたら設定完了です。ただ、繰り返しになりますけど、通常はここまでやる必要はないですね。

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

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

MCP設定JSONにfigma-desktopを追加する手順
  1. 01
    Figmaデスクトップアプリを起動
    デザインファイルを開きDev Modeに切り替える
  2. 02
    MCPサーバーを有効化
    何も選択していない状態で右サイドバーのMCPサーバーを有効化し、接続用URLをコピー
  3. 03
    CursorでAdd Custom MCPを選択
    手動で追加する場合に選択する
  4. 04
    figma-desktopとしてURLを追加
    例: http://127.0.0.1:3845/mcp をそのまま貼り付け
  5. 05
    動作確認
    ツールが表示されるか確認する

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

室谷室谷代表取締役
リモート版が基本なんですけど、組織によってはデスクトップ版を手動で設定するケースもあるんですよね。手順自体は JSON を足すだけなんでシンプルです。
テキトー教師テキトー教師DotAI 認定講師
そうですね。最初に Figma デスクトップアプリを起動して、デザインファイルを開いた状態で Dev Mode に切り替えます。

何も選択していない状態で右サイドバーの MCP サーバーを有効化すると、接続用の URL がコピーできるんですよ。
室谷室谷代表取締役
で、その URL を Cursor 側の MCP 設定に貼るわけですね。手動でやる場合は Add Custom MCP から追加して、mcpServers の下に figma-desktop として書く。
テキトー教師テキトー教師DotAI 認定講師
公式の設定例はこうです。
json
{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

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

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

テキトー教師テキトー教師DotAI 認定講師
ここで最初に戸惑うのが「設定したのにツールが表示されない」パターンです。Windows だと特に、コピーした URL を貼り間違えたり、Figma デスクトップアプリが起動していなかったり、っていうのが多いですね。
室谷室谷代表取締役
ローカルのサーバーに接続する形なんで、Figma 側でサーバーが有効になっていないと Cursor から見えないんですよね。あと、URL は http://127.0.0.1:3845/mcp の形で保存する必要がある。
テキトー教師テキトー教師DotAI 認定講師
たしかに。ポート番号込みの URL をそのまま使うのがポイントで、ここを一部書き換えてしまうと接続できないです。

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

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

室谷室谷代表取締役
エンタープライズだとプロキシやネットワーク制限があって、デスクトップ版のローカル通信がブロックされるケースがあり得ます。そういう環境で手動設定に時間をかけるより、リモート版に切り替える判断のほうが結果的に速いですね。
テキトー教師テキトー教師DotAI 認定講師
ネットワーク周りが原因の場合、切り分けが難しいんですよ。まずは Figma 側でサーバーが有効か、URL が正しいかを確認して、それでもダメならネットワーク設定を見直す流れが現実的です。

環境変数の扱いも環境によって違うので。
室谷室谷代表取締役
そもそもデスクトップ版は特定の組織・エンタープライズ向けの位置づけで、基本的にはリモート版が推奨されてますからね。手動設定が必要なケースでも、まずは公式ドキュメントの最新手順を確認するのが確実です。
テキトー教師テキトー教師DotAI 認定講師
そうですね。設定ファイルの配置場所も環境によって異なるので、詰まったら公式の情報を確認しながら進めるのがいいと思います。

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

MCPトラブルシューティングの切り分け

MCPツールが一覧に表示されない?

YES / はい(表示されない)
  • 設定画面でエラー表示を確認(loading toolsならサーバー未到達)
  • リモート版はOAuth認証を確認(Connectボタンを押す)
  • 設定JSONのURLを確認(http://127.0.0.1:3845/mcp を指すか)
NO / いいえ(表示されるが動かない)
  • 認証エラーなら、一度切断して再接続
  • connection lostなら、FigmaデスクトップアプリのMCPトグルをオン
  • Cursor側でfigma-desktopが生きているか確認
  • 大きなフレームを選ばず、小さいフレームを選択

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

室谷室谷代表取締役
MCP を追加したのにツールが空っぽ、みたいな話はよく聞きます。結局、設定ファイルは正しくても接続まで行けてないことが大半なんですよね。
テキトー教師テキトー教師DotAI 認定講師
たしかに。最初に確認したいのは、Cursor の設定画面で MCP サーバーの横にエラー表示が出てないか、ですね。

そこで「loading tools」のまま止まってたら、サーバー自体には届いてない可能性が高い。
室谷室谷代表取締役
リモート版なら Figma の OAuth 認証を通してないと、ツール一覧が空のままなんですよ。プラグイン経由で入れたあと、Command Palette から Settings を開いて MCP タブの Connect ボタンを押す、そこまでが一連の流れだと意識したほうがいい。
テキトー教師テキトー教師DotAI 認定講師
そのうえで、まだ表示されなければ追加した設定 JSON の URL を見直すのが確実です。デスクトップ版だと http://127.0.0.1:3845/mcp を指しているか、スペルミスがないか。

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

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

テキトー教師テキトー教師DotAI 認定講師
つぎに多いのが、一度つながったのに認証エラーが出るパターン。現場でよく聞くのは、Figma 側のアクセストークンが期限切れになってるケースです。
室谷室谷代表取締役
リモートサーバーは OAuth で認証するので、一定期間たつと再認証が必要になるのは仕様に近いですね。エラーが出たら、まず MCP の設定から一度切断して、もう一度 Connect し直すのが早いです。
テキトー教師テキトー教師DotAI 認定講師
ただ、エラー内容が「connection lost」っぽい場合は、Figma デスクトップアプリのサーバーが止まってる可能性もありますね。デスクトップ版は Figma 側で MCP サーバーのトグルをオンにして、さらに Cursor 側の設定で figma-desktop という名前のカスタム MCP が生きているかを確認するのが確実です。
室谷室谷代表取締役
切り分けの順番としては、認証エラーなら一度つながった証拠なのでまず再接続、そもそもつながらないなら設定とアプリの起動状態、という感じですね。ここを整理しておくとサポートに聞くときも話が速い。

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

テキトー教師テキトー教師DotAI 認定講師
connection lost 系で意外と盲点なのが、選択してるフレームが重すぎるパターンです。Figma の開発者向けドキュメントでも「大きなフレームを選ばない」という指針が明記されている。
室谷室谷代表取締役
あー、それありますね。フレームごと全部読もうとすると、AI 側に渡すコンテキストが膨大になってタイムアウトする。

実務でも、画面全体よりセクション単位で切り出したほうが生成コードの精度も上がりますし、ROI 的にも無駄がないんですよ。
テキトー教師テキトー教師DotAI 認定講師
具体的には、親フレームを選ぶのをやめて、実装したい単位の小さいフレームを1つだけ選ぶのが基本です。それでも重い場合は、Figma 側で不要なレイヤーを整理してから読み込ませると、MCP のレスポンスがかなり軽くなります。
室谷室谷代表取締役
つまり、ツールが読み込まれない問題の多くは、原因を「認証」「バージョンや設定」「重すぎる選択範囲」の3つに絞れば、ほとんど自己解決できるんですよね。エラーメッセージを眺めるより、この順で確認するほうが確実ですよ。

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

CursorでFigmaデザインを実装する3ステップ
  1. 01
    基本プロンプトで対象を絞る
    ファイル名だけでなく「どのフレーム」を明示し、コンポーネント名や変数・レイアウト情報を優先して指定する
  2. 02
    フレーム単位の生成条件を指定
    「このフレームだけ」「子フレームも含めて」など粒度と技術的条件をセットで渡し、既存コードベースに寄せる
  3. 03
    Code Connectで対応関係を準備
    事前にFigmaコンポーネントとコードの対応をマッピングし、生成時のズレや手戻りを防ぐ

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

室谷室谷代表取締役
Cursor に Figma のデザインを実装させるとき、最初のプロンプトで何を指定するかで、出力の安定度が全然変わるんですよね。
テキトー教師テキトー教師DotAI 認定講師
たしかに。最初に戸惑うのが「Figma のファイル名を言えば勝手に読んでくれるんでしょ?」って思い込み。

実は設計情報を MCP 経由で引っ張ってきたとしても、どのフレームを対象にするか曖昧だと、エージェントが勝手に一番近いフレームを選んじゃうんですよ。
室谷室谷代表取締役
なるほど。だからプロンプトにはファイル名だけでなく「どのフレーム」を明示する必要があると。

「Figma の◯◯ファイルの××フレームを実装して」と。
テキトー教師テキトー教師DotAI 認定講師
そうです。加えて「コンポーネント名をそのまま使って」とか「変数とレイアウト情報を優先して」と付け加えると、デザインコンテキストを拾いやすい。

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

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

テキトー教師テキトー教師DotAI 認定講師
実務では「フレーム単位でコード生成する」ことが多いんですけど、ここにもコツがあって。
室谷室谷代表取締役
どういう指定を入れるんですか?
テキトー教師テキトー教師DotAI 認定講師
「このフレームだけ」「ネストしている子フレームも含めて」「背景や余白の値を変数から引いて」みたいに、粒度と技術的な条件をセットで渡すと、意図しない範囲まで生成されにくい。
室谷室谷代表取締役
つまりプロンプトで制御範囲を指定するわけですね。これは US の現場でも同じで、プロンプトに「どのフレームを、どんな粒度で、どの技術で」を明記するのが当たり前になってます。
テキトー教師テキトー教師DotAI 認定講師
あとは「UI コンポーネントは既存のコードベースに合わせて」と一言添えるだけでも、ゼロから作るのではなく既存実装に寄せてくれやすくなります。

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

室谷室谷代表取締役
生成結果がデザインとズレる問題、どう防ぐのが現実的ですか?
テキトー教師テキトー教師DotAI 認定講師
そこで効くのが Code Connect です。Figma のコンポーネントとコードの対応関係を事前にマッピングしておくと、Cursor が実際のコンポーネントを参照して実装してくれる。
室谷室谷代表取締役
つまり、ゼロからコードを書かせるのではなく、既存のデザインシステムに沿って生成させる。
テキトー教師テキトー教師DotAI 認定講師
まさに。Code Connect 用のファイルを用意しておくと、コンポーネント名がズレて生成される事故が減ります。

初見では「ここまで準備するの?」と思うかもしれませんが、長期的には実装の手戻りが減って、ROI で見ると十分ペイします。
室谷室谷代表取締役
確かに、コード生成の品質を上げるには、事前の設計情報の整理が効きますね。

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

読み取り専用から書き込みまで: MCP構成の進め方
  1. 01
    読み取り専用の最小構成
    まず目的を「読むだけ」に決め、リモート版で認証を通す。コンポーネント・変数・レイアウト情報をCursorに取得し、実装前にデザイン情報をエージェントへ渡す。
  2. 02
    ライブUIをFigmaに書き込む
    Web UIをキャプチャしてFigmaファイルへ書き込む。書き込み系はリモート版限定の機能あり。ベータ期間中は無料だが、将来は従量課金になる可能性がある。
  3. 03
    フィードバックをキャンバスへ反映
    チーム運用では、エージェントに指示してコンポーネントやオートレイアウトを維持したまま更新。デザインシステムをソース・オブ・トゥルースにできるが、書き込み系は改善中なのでスモールスタートで試す。
  4. 04
    企業導入時の権限・セキュリティ確認
    Figma側のファイルアクセス範囲と認証フローを把握する。リモート版はOAuth認証。まず個人の作業ファイルで書き込みを試し、そこから共有ファイルへ広げる。

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

テキトー教師テキトー教師DotAI 認定講師
まず最初に決めたいのが、Figma の MCP を「読むだけ」で使うのか「書き込む」ところまでやるのか、そこなんですよ。最初に戸惑うのが、設定方法は同じなのに、いざ触ってみると「あれ、これ編集できない?」ってなるパターン。
室谷室谷代表取締役
たしかに。うちの現場でも「まず読み取りから」って始める人が多いんですけど、MCP はこれ自体が読み書き両対応のインターフェースなんで、どっちに使うかで権限の持ち方が変わってくる。

ここを最初に整理しておかないと、あとでセキュリティの話になったときに効いてきます。
テキトー教師テキトー教師DotAI 認定講師
はい。読み取り専用で使うだけなら、リモート版で認証を通せば、デザインのコンポーネントや変数、レイアウト情報を Cursor に読み込む形で取得できます。

生成 AI にコンテキストとして渡す分にはこれで十分。
室谷室谷代表取締役
つまり、実装の前にデザインの情報をエージェントに渡したいだけなら、最小構成で足りますね。ここから始めるのが無難だと思います。

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

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

これが MCP の魅力のひとつです。
室谷室谷代表取締役
これができると、デザイナーとエンジニアの間で「この実装、ちょっとデザインと違うんだけど」みたいな往復が、キャプチャを送って差分を確認する形に変わる。無駄なメッセージの往復が減るのは、ROI で考えると地味にでかい。
テキトー教師テキトー教師DotAI 認定講師
ただ、この書き込み系の機能はリモート版じゃないと動かないものがあります。しかも現状ベータ期間中で無料で使えるけど、将来的には従量課金になるかもしれない、と公式もアナウンスしています。
室谷室谷代表取締役
あー、それは知らなかった。つまり「書き込みまでやる」なら、まだ仕様が変わる可能性を織り込んでおく必要があるってことですね。

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

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

デザインシステムをソース・オブ・トゥルースにできます。
室谷室谷代表取締役
うちでも、エンジニアが実装しながらデザインに気づいた点を、そのまま自分で Figma に反映しちゃうケースが出てきてるんですよ。デザイナーに依頼して、また後日…みたいな待ちが消えるのは大きい。
テキトー教師テキトー教師DotAI 認定講師
そうそう。ただし注意点もあって、書き込み系は常に改善中だから、あくまで「まずは試しながら」のスタンスで運用するのがいいと思います。

「これ、バグじゃない?」ってなったら公式にフィードバックもできるし。
室谷室谷代表取締役
ベータ機能は「使って初めて見える問題」があるからね。最初から完璧を求めず、スモールスタートが正解。

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

室谷室谷代表取締役
で、企業として導入するときに最後に確認したいのが権限周り。MCP は標準化されたインターフェースだから、Figma 側でどのファイルにアクセスできるか、認証フローがどうなってるかを把握しておく必要があります。
テキトー教師テキトー教師DotAI 認定講師
リモート版は OAuth での認証になります。あと、読み取り専用か書き込みまでかの判断も、ここで効いてきます。

チームで共有するファイルに書き込める権限をエージェントに持たせるかは、ガバナンスの話として一度決めておきたいところです。
室谷室谷代表取締役
うちの現場では、まずは個人の作業ファイルで書き込みを試して、そこから共有ファイルに広げる順番にしてます。いきなり本番のデザインファイルにエージェントを突っ込むのは、リスクが読めないうちはやらないほうがいい。
テキトー教師テキトー教師DotAI 認定講師
その通りですね。デスクトップ版という選択肢も組織の事情によってはありますが、基本的にはリモート版が機能も広くておすすめです。

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

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

Cursor × Figma MCP を安定運用するポイント
  1. 01
    リモート版の最小構成から始める
    最初から凝った構成にしない。公式もリモート版を推奨しており、プラグイン経由で `/add-plugin figma` を実行するだけでMCP設定まで完了する。
  2. 02
    公式ドキュメントで最新の対応状況を確認する
    進化が速くブログ情報が古い場合があるため、公式のMCPカタログで読み取り/書き込み対応状況や対応クライアントを確認する。
  3. 03
    読み取りから書き込みへ段階的に進める
    まずはデザイン情報の読み取りから始め、慣れたらコード実装を挟み、最後に書き込みへ。小さく確実に動かすことでエラーの切り分けがしやすくなる。

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

室谷室谷代表取締役
ここまでの話を整理すると、最初から凝った構成にしないのが一番ですね。Figma の公式ドキュメントでも、リモート版が推奨されていて、デスクトップ版は特定の組織・エンタープライズ向けって位置づけです。
テキトー教師テキトー教師DotAI 認定講師
たしかに、最初に戸惑うのは「リモートとデスクトップ、どっちを入れればいいんだ?」ってところですよね。公式の手順でも、プラグインを入れて /add-plugin figma を実行するだけで、MCP の設定まで丸ごと入るので、そっちが楽です。
室谷室谷代表取締役
でしたら最初はプラグイン経由のリモート版でツールが増える感覚をつかむのが間違いないはずです。

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

室谷室谷代表取締役
この分野、進化が速いので、ブログの情報が古いまま残ってるケースが結構あります。個人的には公式の MCP カタログを見るのが早いですね。
テキトー教師テキトー教師DotAI 認定講師
そうなんですよ、私も「あれ、このツールもう無くなったの?」ってなることがあります。特に読み取りと書き込みの対応状況や、サポートしているクライアントの一覧は、公式の情報を確認しないと危ないです。
室谷室谷代表取締役
最新の仕様を確認するのが結局一番の近道です。

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

室谷室谷代表取締役
運用でうまくいってる現場は、最初から書き込みまでやらずに、まずはデザインの情報を読み取るだけから始めてますね。
テキトー教師テキトー教師DotAI 認定講師
いいポイントですね。最初から書き込もうとすると、エラーの切り分けが難しくなります。

まずは「このフレームの情報を教えて」みたいな読み取りから始めて、慣れてきたら段階的に書き込みに進むのが安全です。
室谷室谷代表取締役
まさにそれで、読み取りで感覚をつかんだら、次に「このデザインをコードで実装して」と指示して、最後に書き込みに進むのがいい流れですね。
テキトー教師テキトー教師DotAI 認定講師
はい、この順番でいけば、どこでつまずいたのかも分かりやすいです。読み取りが安定すれば、書き込みの失敗も「読み取りはできてるから、書き込みの設定の問題だな」って切り分けられますから。
室谷室谷代表取締役
いきなり全部を自動化するより、小さく確実に動かしてから広げていく。これが Cursor と Figma の MCP を現場で安定運用する一番のコツだと思います。

よくある質問

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

テキトー教師テキトー教師DotAI 認定講師
最初にここ気になりますよね。MCP サーバー自体は無料で公開されているものも多いんですけど、Figma 側の認証で Dev Mode が必要になるケースがあって、そこはプランに紐づいてきます。
室谷室谷代表取締役
ただプラン要件は時期によって変わりやすいんで、「公式の最新情報を確認して」としか言えないのが正直なところです。個人利用なら無料枠で十分なこともありますよ。
テキトー教師テキトー教師DotAI 認定講師
そう、まずは動かしてみて、必要な機能が出てきたらアップグレードを考えるので十分だと思います。

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

室谷室谷代表取締役
ここ、MCP の便利なところで、書き出さなくても Figma 上のオブジェクト情報をエージェントが参照できるんですよね。画像を渡すのとは情報量が段違いです。
テキトー教師テキトー教師DotAI 認定講師
たしかに。スクリーンショットだと「ここ、色が違う」が伝わらないけど、MCP 経由だとカラーコードや余白の数値まで取得できる。

デザイン崩れの原因が減ります。
室谷室谷代表取締役
なので「画像を貼って実装してもらう」の次のステップとして、MCP 連携はかなり効くと思います。

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

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

扱うデータの機密度で判断するのが現場的には多いです。
室谷室谷代表取締役
リモート版のほうがセットアップは楽なんですけど、社外に出すのが憚られるデータならローカルの選択肢も視野に入れてください。あとは会社のセキュリティポリシー次第ですね。
テキトー教師テキトー教師DotAI 認定講師
そう、どっちが絶対いいとは言い切れないんですよ。まずは社内ルールを確認してから、が正解です。

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

室谷室谷代表取締役
MCP はオープンな規格なんで、対応しているエディタやツールであれば同じサーバーを流用できることが多いんですよね。Cursor で覚えた設定の考え方がそのまま他でも生きるのはポイント高いです。
テキトー教師テキトー教師DotAI 認定講師
一方で、エディタごとに MCP の設定ファイルの書き方が少しずつ違うから、「同じ JSON がそのまま動く」とは限らないです。そこの差異にハマる人はいますね。
室谷室谷代表取締役
とはいえ基本概念は共通なんで、一度覚えると何度も得する領域ではあります。

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

室谷室谷代表取締役
トークンを JSON に直書きすると、リポジトリに誤ってコミットしたときに権限が漏れるリスクがあります。環境変数やシークレット管理機能に入れる癖をつけておくといいですよ。
テキトー教師テキトー教師DotAI 認定講師
あと、トークンに過剰な権限を付けないのも大事です。読み取りだけの用途なら読み取り範囲を絞っておくほうが安心です。
室谷室谷代表取締役
この辺は面倒に感じる人が多いけど、事故ってから直すほうが遥かに面倒なんで、最初にだけ気をつければいいですね。

まとめ

室谷室谷代表取締役
Cursor と Figma を MCP でつなぐと、デザインの構造データをエージェントが直接参照できるようになる。画像を見ながら当てずっぽうで実装するのとは、精度と速度の両方で差が出ます。
テキトー教師テキトー教師DotAI 認定講師
設定の流れとしては、まずリモート版でつないでみて、その後 JSON を触って仕組みを理解するところからがおすすめです。いきなり難しい構成にすると、動かないときに原因を切り分けづらいんですよ。
室谷室谷代表取締役
そう、トラブルシューティングも「どこまで動いているか」を順番に見ていくのが早い。公式ドキュメントとログを突き合わせる習慣をつけると、詰まる時間が減ります。
テキトー教師テキトー教師DotAI 認定講師
最初は読み取り専用で小さなデザインを実装してみるのがいいですね。成功体験を積んでから書き込みや複数ユースケースに広げるのが安定すると思います。
室谷室谷代表取締役
最終的には、デザイナーとエンジニアの受け渡しコストを下げられるのがこの連携の一番の価値かなと。まだ試してない人は、まず1プロジェクトだけでも導入してみるのがおすすめです。

Related

関連記事

New Articles

新着記事

ニュース

Claude Codeを生んだAnthropic Labs精鋭集団の流儀

2026年9月7日
室谷テキトー教師
ニュース

OpenAIがEUに事故報告 ドイツWebサイト乗っ取りで

2026年9月7日
室谷テキトー教師
ニュース

Geminiで登山計画の3人が遭難救助。保安官事務所が警告

2026年9月6日
室谷テキトー教師
ニュース

OpenAI幹部『AIは競争ではない』をAgenda Públicaが報道

2026年9月6日
室谷テキトー教師
ニュース

シアトル・タイムズとニューズデイ、OpenAIとMicrosoftを著作権侵害で提訴

2026年9月6日
室谷テキトー教師
ニュース

Anthropic、ClaudeをCarPlay対応に

2026年9月5日
室谷テキトー教師
ニュース

GoogleがGemini 3.8 Flashとサイバー特化版Cyberを発表

2026年9月3日
室谷テキトー教師
ニュース

カサール議員、OpenAIとAnthropicの情報開示は不十分

2026年9月3日
室谷テキトー教師
ニュース

OpenAI調査:AI-native企業は「実行力」で8.3倍差

2026年9月2日
室谷テキトー教師
ニュース

OpenAIが「強力すぎる次期モデル」に安全対策の強化を警告

2026年9月2日
室谷テキトー教師

Join

AIプレナーになる。

入会は審査制です。いまの事業と、AIで何を動かしたいのかを聞かせてください。

参加を申請する