最近、Figmaが提供するMCP（Model Context Protocol）サーバーを使って、デザインから直接コードを生成できるようになったと聞いて、実際に検証してみました。Next.jsプロジェクトで404エラーページのデザインを実装するまでを試したので紹介します。
セットアップは意外と簡単
まず、Figmaの公式ガイドを参考にセットアップを進めました。思っていたより簡単で、特につまずくポイントはありませんでした。
基本的な流れは以下の通りです。
-
Figmaデスクトップアプリでdev modeを有効化
-
Cursorの
.cursor/mcp.jsonに設定を追記
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
「New MCP server detected」と表示されれば、登録成功です。
- 念の為、対象のMCPサーバーが有効化されているかチェックしましょう
この設定だけで、CursorからFigmaのデザインデータを直接参照できるようになります。
実際の検証：404エラーページの実装
今回は、比較的複雑な404エラーページのデザインを選んで検証しました。ヘッダー、メインコンテンツ、フッター、CTAセクション、チャットボタンなど、実際のWebサイトに近い構成です。
まずは対象のデザインデータをFigmaで選択します。右クリックのメニューにある「形式を指定してコピー」から「選択範囲へのリンクをコピー」を選びましょう。
プロンプトは非常にシンプルです。「FigmaのMCPを使うこと」「コピーしたURL」「依頼したい作業」の３点だけを伝えれば動作します。例えば次のような指示を出しましょう。
Figmaの@https://www.figma.com/design/XXXXX/XXXX?node-id=1113-24028&t=5lVXNPHso1J3NRXU-4 をMCPで参照して。このデザインを実装してください。
これで Cursor はURLから情報を収集し、 Figmaのデータを取得し始めます。
「これは404ページのデザインですね」と話しているところから、データを読めていることがわかります。あとは作業が完了するのを待ちましょう。
約5分程度で作業は完了しました。
検証結果：再現度は50-60％程度
右側が実際のデザインで、左側が生成されたページです。
実際に生成されたページを確認してみると、全体的な構成や大まかなレイアウトは非常によく再現されているという印象です。中央寄せやフォントサイズなどの再現度は比較的高いのではないでしょうか。
ただし比較していただくとわかるように、まだまだ粗さの残る結果でもあります。ロゴなどの画像取得やアイコンの配置、色の調整などはある程度追加情報などを提供する必要があるかもしれません。この辺りは作業指示が「データに従って実装しろ」以外のことを書いていないことが原因である可能性もあります。
どういう場面で使えそうか
今回の検証を通じて、以下のような用途であれば十分実用的だと感じました。
プロトタイピングには最適
「とりあえず動くものを作って、デザインの雰囲気を確認したい」という用途には非常に有効です。完璧な実装は求めず、全体感やレスポンシブ動作を素早くチェックしたい時には重宝しそうです。
デザインレビューの効率化
「このデザイン、実装するとどんな感じになるんだろう？」という疑問を実際のコードで確認できるのは大きなメリットです。デザインがコーディングしやすいかどうかの事前チェックとしても活用できそうですね。
開発初期の骨組み作成
ゼロからコンポーネントを作る時の土台作りには十分使えると思います。細かな調整は後から人間が行う前提ですが、最初の構造を作ってもらえるだけでもかなり時短になります。
さらなる可能性
今回はいきなりページデータを読み込ませました。しかしもっと段階を踏んだ作業にしてみるのはどうでしょうか？例えばデザインパターンやカラーパレットといったデザインのベース情報をまず Figma から読み込みます。生成結果もいきなりページを作るのではなく、Cursor RulesやClaude.mdなどのドキュメント、または Tailwind CSSの設定ファイルなどを作らせます。画像データについてもまずは切り出しでDLするだけの作業を指示して、それに集中させることで精度を高めることができるかもしれません。
このような方法でより実用性の高いワークフローを実現できる可能性があります。
まとめ：まだ発展途上だが可能性は大きい
正直なところ、「雑に全部AIにお任せできます！」というレベルには達していません。ただ、これくらいシンプルな指示でもモックアップや簡易的なプロトタイプを生成させる分には十分なケースもあると思います。手軽にデータをHTMLにする用途に使うか、より精度の高いワークフローを実現させるための試行錯誤を目指すかは、チームの目的や課題に合わせて検討してみてください。
Discussion