Cursor はコード生成に強い AI エディタですが、Figma の設計データと連携させると、UI 実装の速度が一気に跳ね上がります。Figma MCP を使って ファイルと Cursor を連携し、自動で実装補助させるためのセットアップ方法を詳しく解説
対象者
- フロント実装だるい方
- 画像エクスポート、ポチポチやりたくない方
- レスポンシブ対応面倒な方
実際に、私はこれでLPを４時間（デザイン３時間、ノーコーディング実装１時間）で作れました。レスポンシブ対応もSP版デザインのリンク貼るだけ。簡単なコーポレートサイトなら片手間で１日でできそうですねえ…
っっってか、営業できればLP+HP受託高速でまわせるやーん！！！
効率的な魚の釣り方伝授してるワイ、偉いよね？こういう情報ばっかりXの（@commte）で発信してるからフォローしとくんやで
ちなみに、HP/LP制作は10〜30万（〜10日）、Webアプリ or SaaS（〜３ヶ月）開発は 〜200万くらいでやれますので、こちらから問い合わせくださいね。
セキュリティ対策やランニングコストが安い技術スタックで構築できるので、サーバーやヘッドレスCMSの月額料金が高いなぁと悩んでる方もご相談ください！
稼働中の案件を優先しますが、今年は後3~5プロジェクトなら無理なく対応できそうです。
なぜ Figma + Cursor が便利なのか？
- 画像を自動でダウンロードしてくれて、public フォルダに格納してくれる
- 部分的な要素のリンクも貼れるから、少しづつ実装できる
- Figma のデザインリンクを貼るだけで UI 実装の元になる情報を AI に渡せる
- スクショを貼るより構造情報が伝わるため、生成されるコードの正確性が高い
.cursor/mcp.jsonに設定しておけば、毎回手動でデータを渡さずに済む- 対応している "Framelink Figma MCP" サーバーは、レイアウトとスタイルの重要情報だけを抽出して送ってくれるので、ノイズが少ない
セットアップ手順
1. Figma アクセストークンの発行
Figma にログイン → プロジェクトに移動 → 左上の Figma アイコン
アカウント設定 → セキュリティ → "個人アクセストークン"。"新しいトークンを生成" をクリックし、任意の名前で作成
後は、API トークン（個人アクセストークン）を Cursor の mcp.json に貼り付けるだけ
.gitignore で .cursor 以下を除外する
⚠️ 個人アクセストークンは自分の Figma アカウントへのアクセス権です。第三者に渡すとファイルが見られてしまう可能性があるので、必ず .gitignore で管理 or 環境変数で扱いましょう
2. .cursor/mcp.json を作成
以下の内容で .cursor/mcp.json をプロジェクトルートに作成します。
Mac / Linux の場合はこれでOKです。Windows の場合は以下に書き換えてください。
確認
Cursor の 右上のアイコン⚙️から MCP → MCP Servers が緑色になっていたら連携完了。
実際の使い方
- Figma 上で要素を選択 → 右クリック → 「選択範囲へのリンクをコピー」
- Cursor のチャットにそのリンクを貼る
- 「このデザインを Tailwind で実装して」と指示すれば、自動でマークアップが生成されます
注意点
- Figma の画像は public 状態に自動で設定されます（非公開にはならない）
- Figma の画像は軽量化されてない
- レイアウトが複雑な場合、ずれることがあるので、補足プロンプトを同時に出す必要がある
- 出力されたコードは全体の一部なので、意図に応じて調整は必要です
.cursor/mcp.jsonを GitHub に push しないように注意（トークン漏洩リスク）
まとめ
Figma + Cursor の連携は、UI 実装を高速化する強力なワークフローです。
とくに個人開発や MVP 構築時には "デザイン → 実装" の手戻りを防げるため、設定しておいて損はありません。
