2026/03/25 更新
AIからFigmaに直接デザインすることが可能となりましたので以下の目次を新規に追加しました。
・AI→Figmaデザイン直接作成
・AI→Figmaデザイン直接変更
はじめに
2026/2/17にCursorでPlugins機能(Marketplace)が正式リリースされ、
Figmaを含む外部サービスとの連携プラグインが簡単にインストールできるようになりました。
これまでもMCPサーバーを用いることでFigmaとの連携は可能でしたが、
手動での設定が必要でした。
現在はプラグインをインストールするだけでMCPサーバーの設定も含めて利用できるため、
セットアップが格段に簡単になりました。
本記事ではCursorエディタを使用してFigmaプラグインを利用する方法を紹介します。
記事内容に誤りや情報の補足などがございましたらご指摘いただけますと幸いです。
目次
Figmaプラグインのインストール
CursorAIエディタにFigmaプラグインをインストール
AI→Figmaデザイン直接作成
HTML等の事前ファイルを用意せずに直接Figmaデザイン生成
(2026/03/25 新規追加)
AI→Figmaデザイン直接修正
HTML等の事前ファイルを用意せずに直接Figmaデザイン変更
(2026/03/25 新規追加)
HTMLファイル→Figmaデザイン
既存HTMLファイルからFigmaデザイン生成
(2026/03/25 一部更新)
Figmaデザイン→HTMLファイル
既存FigmaデザインからHTMLファイルを生成
Figmaデザイン→Reactコンポーネント
FigmaデザインのコンポーネントからReactコンポーネントとしてtsx作成
Figmaプラグインのインストール
CursorエディタからFigmaのデザインを取得/操作するために必要なプラグイン(MCPサーバー等を含む)をインストールします。
①Cursorの設定画面を開きます。
手順:「File」->「Preferences」->「Cursor Settings」
②Figmaのプラグインをインストールします。
手順:左ペインの「Plugins」を選択->Suggestedに「Figma」を選択してインストール
インストールが完了すると下図の通りInstalledに「Figma」プラグインが表示されます。
他のプラグイン追加方法として、公式Webからプラグイン追加することも可能です。
https://cursor.com/ja/marketplace
AI→Figmaデザイン直接作成
特にHTMLファイルなどのデザインベースとなるファイルを用意せずに、
CursorAIのプロンプトからFigmaに直接デザイン作成が可能となりました。
Figmaに会員登録画面のデザインを作ってください
※特に既存FigmaデザインのURLをプロンプトに含めなかった場合、下書きに新規デザインファイルが作成されました。
AI→Figmaデザイン直接修正
こちらも特にHTMLファイルなどのデザインベースとなるファイルを用意せずに、
CursorAIのプロンプトからFigmaに直接デザイン修正が可能となりました。
[FigmaデザインファイルURL]
ログインボタンを黄色ベースに変更を行うFigmaデザインの修正をしてください。
※少しデザインが崩れているのはHTMLファイル→Figmaデザインにした際にローカルサーバーを立ち上げなかった影響なので今回の変更指示による影響ではありません。
HTMLファイル→Figmaデザイン
2026/03/25 更新
Figmaプラグイン(MCP)のアップデートによりローカルサーバーを立ち上げなくてもHTMLファイルのデザインをFigmaに直接作成指示が可能となりました。
ですが、自分が試した際はサーバーを立ち上げないやり方だと精度が落ちました。
下記の手順は従来通りのサーバーを立ち上げて作成指示の方法となります。
既存HTMLファイルをFigmaデザインに取り込む方法を紹介します。
プロンプトで指示を与える前に準備が必要です。
以下が全体の流れで基本的にAIが勝手にやってくれるのですが、
HTMLローカルサーバーだけは事前に準備した方がトラブルが少なかったです。
①既存のHTMLファイルをローカルサーバーでプレビュー
②Figmaにキャプチャ送信
③Figmaがデザイン生成
「Live Preview」や「Live Server」等のプラグインをインストールしてHTMLをローカルサーバーで見れるようにしておく必要があります。
これをしないとpythonやnodeでローカルサーバーを起動しようとしてきます。
Live Serverをインストールした状態でhtmlファイルをCursorエディタで開き、
右下のGo Liveを押すとローカルサーバーを起動することができます。
このとき開かれたURL(127.0.0.1:5500/xxx)を後のプロンプトで使用します。
HTMLをローカルサーバーでプレビューできる状態になったら、
以下のプロンプトでFigmaのデザインが生成されます。
[HTMLローカルサーバーURL][FigmaデザインファイルURL]
login.htmlをFigmaデザインへ取り込んでもらえますか。
HTMLファイル
↓
Figmaデザイン
一部、テキストが表示されない場合があります。
Figmaが対応していないフォントファミリーを指定していることがありますので、
その場合は一括でフォントファミリーを指定しなおせば表示されます。
Figmaデザイン→HTMLファイル
今度はFigmaデザインからHTMLファイルを生成する方法の紹介となります。
追加指定としてCSSはTailwindを使用してHTML生成するように指示してみます。
[FigmaデザインファイルURL]
Figmaデザインの「01_トップページ」をHTMLファイルにしてください。
CSSはTailwindで書いてください。
Figmaデザイン
↓
HTMLファイル
Figmaデザイン→Reactコンポーネント
画面全体ではなく一部をReactコンポーネントとして作成してみます。
[FigmaデザインファイルURL]
FigmaデザインのButtonとTextFieldの2つのコンポーネントからReactコンポーネント(tsx)を作ってください。
CSSはTailwindを使用してください。
Figmaデザイン
↓
Reactコンポーネント
