🎨

Cursor × Figma MCPでデザインをコード化する【ブラウザ完結・無料プランOK】

に公開
Figma
デザイン
UI
Model Context Protocol
Cursor
tech

はじめに

Figmaでいい感じのデザインを作ったはいいものの、それをコードに落とし込むのが大変だと感じた経験はないでしょうか？自分は普段の開発業務で遭遇したことがあります。

この記事は、そういった方々に向けて「Figma MCPでデザインをコード化するまで」の手順をできるだけ分かりやすく伝えるために作りました。

AIが生成したUIをFigmaデザイン化したいという方は、前回の記事が参考になると思います。
https://zenn.dev/canon/articles/505992b5928b57

Figma MCPでできること

Figma MCPを使うと、CursorなどのAIがFigmaのデザインを見てくれるようになります。それにより、AIにスクリーンショットやHTMLなどを共有してコード化する場合よりも高い精度でデザインをコード化してくれるようになります。

事前準備

  • Figmaアカウント
  • CursorなどAIエディタのインストール

Figma MCPを利用するためのセットアップ

  1. 以下のリンクをクリックするとCursorが開き、自動的にFigma MCPの設定画面が表示されます。
    Figma MCPをCursorにインストール
  1. Cursorの設定画面にて、「install」を押下します。入力欄はそのままでOKです。

    Figma MCPのインストール
  2. インストールが完了すると「Connect」が表示されますので、押下します。

    Figma MCPの接続
  3. ブラウザにてFigma MCPのアクセス許可の画面が開きますので、アクセスを許可します。

    Figma MCPのアクセス許可
  4. Cursorの設定画面でこのような表示になっていればOKです。これでFigma MCPを利用できるようになりました。

    Figma MCPのセットアップ完了

実際にFigma MCPでデザインをコード化してみる

今回は例として、ランディングページの基本的な構造（ヘッダー・メインコンテンツ・フッター）を持つデザインを使用します。


今回コード化するFigmaデザイン

手順

  1. Figmaでデザインのリンクを取得
    要素を選択し、右クリックで「選択範囲へのリンクをコピー」を押下します。
    Figmaのリンクコピー画面
  2. Cursorでプロンプト入力
    例として、Cursorのチャットから、以下のようにプロンプトを入力して実行します。自動でFigmaのデザイン情報を取得し、コードを生成してくれます。
    以下のFigmaデザインをReact + Tailwind CSSでコード化してください
[Figmaのリンク]
  3. 生成されたコード・画面を確認
    今回の指示によって作成された画面がこちらです。ロゴやフッターなど、いくつかおかしい箇所はありますが、概ねデザイン通りかと思います。
    今回はCursorのFreeプランで実施しましたが、使用するAIのモデルやプロンプトを充実させるなどの工夫することで、より精度の高い生成ができると思われます。

    Figmaデザインをもとに生成された画面

よくあるエラーと対処法

  • 認証エラーが出る場合
    • Cursorの設定画面でFigma MCPを一度オフにして、再度オンにしてみてください
    • それでも解決しない場合は、Cursorを再起動してください
  • 403エラー（Forbidden）が出る場合
    • 自分がアクセス権を持つファイルか確認してください（削除されていないか等）
    • 無料プランの場合、月6回の制限を超えていないか確認してください
  • リンクが認識されない場合
    • 手順1の通り、Figmaで要素を選択後、右クリックから「選択範囲へのリンクをコピー」でリンクを取得してください
    • リンクの形式が正しいか確認してください

まとめ

この記事では「Figma MCPでデザインをコード化するまで」の手順を解説しました。
Figma MCPを使うことで、FigmaデザインをAIが直接参照し、高精度でコード化できるようになります。
ブラウザ完結でセットアップも簡単なため、デザインからコードへの変換作業を大幅に効率化できます。

Discussion