CursorとFigmaの連携で何が変わるのか？
MCP連携がもたらす新しい開発体験
室谷代表取締役これ、FigmaのMCPサーバーをCursorから使うと、デザインデータを直接読んでコード生成できるようになるんですよね。従来みたいに「このボタンの高さ何px？」って手動で確認する必要がなくなる。
テキトー教師.AI認定講師たしかに。現場でよく聞かれるのが「結局、MCPって何が便利なの？」って質問で。
単にファイルを開くだけでなく、コンポーネントや変数の構造までCursorが理解できるのが大きいんですよ。
単にファイルを開くだけでなく、コンポーネントや変数の構造までCursorが理解できるのが大きいんですよ。
室谷代表取締役うちのチームでも試してみてるんですが、初回のコード生成精度がかなり高い。時給換算すると、デザインハンドオフの時間が半減する計算になる。
テキトー教師.AI認定講師その「構造を理解できる」ってのがポイントで、単なる画像の読み込みと違って、ちゃんとFigmaのレイヤー階層を認識してコードに落としてくれる。
デザインデータをそのままコードに変換
テキトー教師.AI認定講師で、具体的に何が変換できるかというと、Figma MCPサーバーは選択したフレームからコードを生成できるんです。コンポーネントや変数、レイアウトデータをそのまま拾ってくる。
室谷代表取締役しかもCode Connectと連携すれば、実際のコードベースのコンポーネントと整合させられる。つまり「デザインと実装でズレが生まれない」ってことですよね。
テキトー教師.AI認定講師そうそう。最初に戸惑うのが「どこまで自動でやってくれるの？」ってところなんですが、フレーム全体を投げればCSSやJSXの形でコードを返してくれる。
もちろん細かい調整は必要ですけど。
もちろん細かい調整は必要ですけど。
室谷代表取締役そこが肝ですね。100%を期待するんじゃなくて、ベースを生成してから修正する。
そのベースの質が上がってるから、総合的な工数が減る。ROIで考えると十分すぎる。
そのベースの質が上がってるから、総合的な工数が減る。ROIで考えると十分すぎる。
デザイナーとエンジニアの橋渡しを自動化
テキトー教師.AI認定講師これまでは「このインタラクション、どう動く？」みたいな細かい質問を都度チャットで確認してたんですけど、MCP連携だとFigmaのデータをそのままCursorが読むので、エンジニアがコードを書くときに自然にデザイン情報が入ってくる。
室谷代表取締役実際、シリコンバレーのプロダクトチームでは「デザインハンドオフの往復が月に数回になった」って声を聞きます。結局、エンジニアがFigmaから情報を取りに行く手間がゼロになるのが効いてる。
テキトー教師.AI認定講師あとは、FigmaのDev Modeと組み合わせると、デザイナーが「このセクションは開発準備完了」とステータスを設定して、エンジニア側で開くと自動でコード生成の準備ができる、みたいなワークフローも現実的になります。
室谷代表取締役チームで統一ルールを作っておけば、お互いの裁量で動ける。僕はこれでかなりの工数削減が期待できると思ってます。
MCPサーバーの設定手順：リモート版とデスクトップ版
リモート版（推奨）
- コマンドパレットで /add-plugin figma を実行しプラグイン追加
- Cursor設定のTools & MCPでConnectをクリックし認証
- Installed MCP ServersにFigmaがConnectedと表示されれば成功
デスクトップ版（セキュリティ制限時）
- FigmaデスクトップアプリでDev Modeに切り替え、MCPサーバートグルを有効化
- サーバー起動後、アドレス http://127.0.0.1:3845/mcp をコピー
- Cursor設定のMCPタブから「Add Custom MCP」を選び、アドレスを貼り付け
リモート版Figma MCPサーバーの設定（推奨）
室谷代表取締役FigmaのMCPサーバー、公式がリモート版を強く推奨してるんですよね。プラグイン入れるだけで設定完了するので、開発者にとってはこれ一択です。
テキトー教師.AI認定講師そうなんです。最初に「どこから手をつければいいんだ」って迷う人が多いんですが、実際の手順はコマンドパレットから
/add-plugin figma と入力してプラグインを追加するだけです。室谷代表取締役その後Cursorの設定画面にあるTools & MCPでConnectを押せば認証が通って有効になります。MYUUUの現場でも新メンバーはみんなこの流れで5分かからずセットアップしてますね。
テキトー教師.AI認定講師これでFigmaのコンポーネントや変数、レイアウトデータをCursorが読めるようになるので、デザインからコード生成への第一歩がスムーズになります。
デスクトップ版の設定手順
室谷代表取締役ただ、企業や組織のセキュリティポリシーでリモート版が使えないケースもあるんですよ。そういう時はデスクトップ版を選ぶことになります。
テキトー教師.AI認定講師デスクトップ版はFigmaのデスクトップアプリが必要で、Dev Modeに切り替えてMCPサーバーを有効にするトグルがあるんです。公式は「リモート版の方が機能が広い」と明言してるので、基本はリモートですね。
室谷代表取締役設定自体はFigma側でサーバーを起動してアドレスをコピーし、CursorのMCP設定にカスタムMCPとしてJSONを貼るだけです。コードの形は
http://127.0.0.1:3845/mcp になります。テキトー教師.AI認定講師この手順、最初にやる人だと「カスタムMCPってどこにあるの？」で止まりがちなんですよ。Cursor設定のMCPタブから「Add Custom MCP」を選ぶんですが、視覚的に見つけにくい位置にあるので注意が必要です。
設定完了後の確認とトラブルシューティング
室谷代表取締役設定が終わったら、CursorのMCP一覧にFigmaが表示されていれば成功です。リモート版なら「Installed MCP Servers」の下にFigmaが出て、Connectedになっているのを確認します。
テキトー教師.AI認定講師よくあるのが、認証が通らないケースですね。リモート版だとプラグイン追加後にConnectをクリックしてFigmaの認証画面が開くんですが、そこでうまくいかない場合はFigmaのアカウントが正しくリンクされているか確認すると解決します。
室谷代表取締役デスクトップ版では、URLを間違えてコピーしているパターンが多いです。
http://127.0.0.1:3845/mcp の末尾の /mcp を忘れると接続できません。テキトー教師.AI認定講師どちらの方法でも、設定後に「Figmaのコンポーネントを読み取ってコードを生成して」とCursorに依頼してみて、正常に動作すれば完了です。最初のハードルを越えると、あとはかなり快適ですよ。
デザインからコードを生成する実践ワークフロー
自然言語でデザインを操作する方法
室谷代表取締役MCPサーバーを繋ぐと、CursorのチャットからFigmaのデザインを直接いじれるようになるんですよね。「このボタンのテキストをタイトルケースに変えて」って言うだけで反映される。
テキトー教師.AI認定講師そこが一番驚くポイントですね。プラグイン経由で自然言語がそのまま編集命令になる。
初期設定さえ済めば、繰り返し作業が一気に減ります。
初期設定さえ済めば、繰り返し作業が一気に減ります。
室谷代表取締役チームで使うと、デザイナーが細かい修正をエンジニアに依頼する回数が減るのが大きい。時給換算すると結構なコスト削減になる。
テキトー教師.AI認定講師初めてだと「どこまでできるの？」ってなるんですけど、レイヤー名の一括変更やカラーの置き換えもいける。粒度はプラグイン次第ですね。
選択したフレームからコードを自動生成
室谷代表取締役次はフレームを選んでコード生成。Figma MCPサーバーなら、選択したデザインから直接ReactとかCSSを吐き出せる。
テキトー教師.AI認定講師現場でよく聞かれるのが「どの程度完成度が高いか」です。生成されるのは構造ベースで、スタイルの細かい調整は必要。
室谷代表取締役それでもゼロから書くよりはるかに速い。手動ハンドオフの時間が飛躍的に減るんですよね。
ROIで見て導入する価値は高い。
ROIで見て導入する価値は高い。
テキトー教師.AI認定講師注意点としては、Figma内でコンポーネントがちゃんと定義されてないと、コードもばらける。設計の整理が前提です。
生成コードの品質を高めるコツ
室谷代表取締役品質を上げるにはCode Connectとの組み合わせが効く。実装済みのコンポーネントと紐付けることで、生成コードがそのままプロダクトに使える。
テキトー教師.AI認定講師デザインシステムが整っているほど恩恵が大きいですね。変数名やトークンを統一しておくだけで、出力がグッと安定します。
室谷代表取締役結局、Figma側の整理整頓が生成結果を左右する。そこに投資すれば、コード生成の精度は比例して上がる。
テキトー教師.AI認定講師最初のうちは出力をそのまま使わず、差分を確認しながら慣れていくといいですよ。
よくあるトラブルとエラー対応
MCPサーバーが認識されない場合の対処
テキトー教師.AI認定講師最初にぶつかるのが「MCPサーバーが表示されない」ですね。Cursorのチャットで /add-plugin figma を実行してインストールした後、設定画面のTools & MCPでConnectを押すのを忘れてるケースが多いんですよ。
室谷代表取締役ああ、ありますね。プラグイン自体は入ってるのに認証が通ってないパターン。
うちのチームでも「接続できない」と来たから見たらConnectボタンが未クリックでした。
うちのチームでも「接続できない」と来たから見たらConnectボタンが未クリックでした。
テキトー教師.AI認定講師あとデスクトップ版のMCPサーバーを使う場合も、Figma側でDev ModeのMCPスイッチを有効にしてURLをコピーしないと認識されないんです。そこで詰まる人が後を絶たない。
室谷代表取締役デスクトップ版は組織・エンタープライズ向けで、ほとんどのユーザーはリモート版で十分なんですけどね。公式も「リモート版使え」って書いてます。
認識されないときはまずリモート版が正しく設定できてるか確認した方が早いです。
認識されないときはまずリモート版が正しく設定できてるか確認した方が早いです。
認証エラーや権限の問題を解決する
テキトー教師.AI認定講師認証エラーは権限周りが多いです。プラグインインストール後に出てくる認証画面で許可を与えないと、Figmaのファイルにアクセスできないんです。
室谷代表取締役これ、Figmaのファイル権限にも依存するんですよね。個人ファイルなら問題ないけど、チームライブラリのコンポーネントにアクセスするには、プラグインがそのファイルのedit権限を持ってる必要がある。
テキトー教師.AI認定講師実際「読み取りはできるけど書き込みができない」という問い合わせもよく聞きます。認証が通った後でも、対象ファイルの共有設定で「編集者」になってないとMCP経由の変更は拒否されます。
室谷代表取締役権限周りはROIで考えると地味に効くポイントですね。最初にファイルのアクセス権を整理してから連携を始めると、後で詰まらずに済みます。
プラグインの互換性トラブルを回避
テキトー教師.AI認定講師コミュニティのサードパーティプラグインを使うときは互換性に注意が必要です。「マニフェストエラー：editortype does not include dev」というエラーが出た例がありました。
室谷代表取締役それ、プラグインがDev Modeに対応してないパターンですね。公式のFigma MCPプラグイン（/add-plugin figma）を使えばそういう問題は起きないんですが、どうしても機能追加が欲しくて他を選ぶケースもある。
テキトー教師.AI認定講師実際、Talk To Figma MCP Pluginのような人気プラグインでも「Dev Modeで使えない」「localhostのチェックボックスが更新で消えた」といった報告が上がってました。更新頻度が高いものは追従できてますが、長期放置されると動かなくなるリスクがあります。
室谷代表取締役開発チームの生産性を考えると、公式プラグインで足りない機能を確認してからサードパーティを検討するのが無難です。互換性トラブルでハマる時間を時給換算すると、意外とバカにならないので。
チーム開発での連携ルールとベストプラクティス
デザインハンドオフを効率化する運用ルール
テキトー教師.AI認定講師ハンドオフって、結局「伝えたつもり」が一番問題になりますよね。FigmaのDev Mode使うと、開発者用のビューで計測値やスペックがそのまま見えるので、余計なやりとりが減るんです。
室谷代表取締役MYUUUでもDev Mode導入してから、実装後の手戻りが減りましたね。MCPサーバー経由でFigmaのコンポーネントや変数をCursorが直接読めるようになると、さらにスムーズです。
テキトー教師.AI認定講師あとはSection Statusで「Ready for dev」を明示しておくと、開発側が「これもう実装していいんだな」と即判断できます。コミュニケーションコストが一気に下がりますよ。
室谷代表取締役チームのROIで考えると、このちょっとしたルール作りが効いてきます。
バージョン管理とアセット管理のポイント
室谷代表取締役Figmaのバージョン履歴は、デザインの変更差分を追うのに便利です。Dev Modeでフレームごとの比較ができるので、開発者は「前回から何が変わったか」をすぐ把握できます。
テキトー教師.AI認定講師さらにMCPサーバーがCode Connectに対応しているので、実際のコンポーネントとデザインの整合性を保ちやすいんです。トークン化しておけば、コード側の変更も自動で反映されます。
室谷代表取締役アセットの書き出しも、MCP経由でCursorから指示できるようになりました。CSSやiOS、AndroidのコードスニペットをFigma内で生成できるので、ファイルの受け渡しが減ります。
テキトー教師.AI認定講師現場でよく聞くのは「どのファイルが最新かわからない」という声。Figma上で一元管理すれば、混乱がなくなります。
セキュリティとデータ漏洩を防ぐ設定
テキトー教師.AI認定講師Figma MCPサーバーにはリモート版とデスクトップ版があるんですが、基本的にはリモート版を使うのがおすすめです。認証プロセスを通して接続するので、安全なんです。
室谷代表取締役デスクトップ版は組織やエンタープライズの特定のユースケース向けで、ローカルのMCPサーバーを立てます。セキュリティポリシーが厳しいチームはそちらを選ぶケースもありますね。
テキトー教師.AI認定講師プラグインを利用する場合は、オープンソースのものを選べばコードを確認できます。データが外部に送信されない設計になっているか、確認しておくと安心です。
室谷代表取締役結局、チームのセキュリティ要件に合わせて適切な設定を選ぶのがベストプラクティスです。
まとめ：CursorとFigmaの連携で開発を加速する
MCP連携の導入効果
室谷代表取締役この連携、本当に効くんですよね。デザインデータを参照してコード生成できるだけで、PRレビューのやりとりが半分以下になる。
ROIで見ると導入コストゼロに等しい。
ROIで見ると導入コストゼロに等しい。
テキトー教師.AI認定講師たしかに。最初に触る人は「CursorからFigmaのコンポーネントや変数が読める」ことの価値が想像しづらいんですが、実際に使うと「今まで手動でコピペしてた情報が一発で取れる」と感動します。
室谷代表取締役しかもFigma側に書き戻せるのが強い。Cursorで生成したUIをそのままFigmaのレイヤーとして送れる。
デザイナーとエンジニアの往復が激減する。
デザイナーとエンジニアの往復が激減する。
まずはリモート版から始めよう
テキトー教師.AI認定講師導入方法ですが、公式がリモート版を推奨してます。Figmaのプラグインをインストールするだけで、コマンドパレットから
/add-plugin figma と打てば設定完了。室谷代表取締役デスクトップ版も一応あるけど、リモート版のほうが機能範囲が広い。エンタープライズで特別な要件がある場合以外はリモート版で事足りる。
テキトー教師.AI認定講師認証まで含めて数分で終わるので、まずは試してみるのがいいですね。
今後の展望とコミュニティリソース
室谷代表取締役コミュニティプラグインも充実してきてて、Talk To Figma MCPやDesign with AI Agentみたいに自然言語でFigmaを操作できるものも出てきてる。
テキトー教師.AI認定講師あとはFigma to Cursorみたいにフレームのプロパティをコードに変換するツールもある。どれもMCPプロトコルで繋がるので、自分たちのワークフローに合わせて選べる。
室谷代表取締役この領域、まだ発展途上だからこそ、今仕込んでおくと今年後半には大きな差になると思いますね。
よくある質問
Q1. Cursor以外のエディタでもFigma連携は可能ですか？
テキトー教師.AI認定講師実は、VS Codeでも似たような拡張機能はあります。ただ、CursorのMCPサーバー対応はかなりスムーズで、設定も簡単です。
室谷代表取締役そうですね。VS Codeだとプラグイン探して設定ファイルいじる手間がかかる。
Cursorだと最初から統合されてる感覚で使えるので、よく「これで戻れない」って声を聞きます。
Cursorだと最初から統合されてる感覚で使えるので、よく「これで戻れない」って声を聞きます。
Q2. Figmaの無料プランでも連携は使えますか？
室谷代表取締役基本使えます。ただ、チームでコンポーネントライブラリを共有するなら有料プランが必要になるケースはあります。
テキトー教師.AI認定講師個人開発で自分が作ったデザインだけなら無料で問題ないです。
Q3. 連携時に読み込めるデザインデータの容量制限は？
室谷代表取締役公式の制限値は出てないですが、ぼくの体感だと100MB超えるフレームは危ないです。軽量に分割してから読ませると安定します。
テキトー教師.AI認定講師巨大なファイルだとエラーが起きやすいので、実務ではページごとや画面ごとに分割するのが現場の知恵ですね。
Q4. 生成されたコードをそのまま本番で使っても大丈夫ですか？
室谷代表取締役使い回すなら少なくともリファクタ前提。特にCSSのクラス名とかはプロジェクト規約に合わないケースが多いです。
テキトー教師.AI認定講師「雛形として使うのがベスト」とよく言われます。つまり、エラーや構造を確認してから手直しする、というのが現実的です。
Q5. MCPサーバーのデスクトップ版とリモート版、どちらを選ぶべき？
テキトー教師.AI認定講師個人で試すならデスクトップ版で十分。チームであるとリモート版の方が管理が楽です。
室谷代表取締役リモート版はデプロイ手順が要るので、最初からリモートにするとハマる人も多い。まずデスクトップで感覚掴んでから移行するのがおすすめです。
まとめ
室谷代表取締役CursorとFigmaの連携、個人的には「デザインとコードの溝を埋める」という点でかなり実用的だと思ってます。
テキトー教師.AI認定講師たしかに、デザイナーとエンジニアの認識ずれが減るのは大きい。特にカラーやスペーシングがコードに直接落ちてくるのは現場で助かります。
室谷代表取締役設定自体は15分もあれば終わるので、まずはサンプルプロジェクトで試してほしい。業務に入れるならチームでルール決めもセットで。
テキトー教師.AI認定講師最初は「どのレイヤーを読み込むか」に戸惑うと思いますが、慣れれば開発速度が確実に変わります。
室谷代表取締役MCPサーバーは一度仕組みを理解すれば、Figma以外のツールにも応用できる。この機会に触ってみてください。
