Figma × Layermate × Cursor × MCPで生成AI時代のUI制作フローを実験してみた
1. はじめに
最近は、Figma MakeやLayermate（Figmaプラグイン）のような生成AIを搭載したデザインツールが増えています。
これらの登場は、「デザインは手を動かす仕事」という形を変えつつあります。
この記事では、生成AIを駆使して「デザインシステムの生成から実装まで」を完結するフローを実験した過程を記録します。
2. 今回使用したツールと流れ
使用ツール
- Figma: デザインツール
- Layermate: AI UI生成アシスタント
- Dev Mode MCP server: Dev ModeからMCPでコード生成コンテキストを取得
- Cursor: AIコードエディタ
- Next.js: Reactベースのフレームワーク
- Tailwind CSS: ユーティリティベーススタイルCSS
実験のフロー
- Layermateでデザインシステムを生成
- 「1.」のデザインシステムを使って労務SaaS LPをLayermateで作成
- 「2.」で作成されたFigmaデザインファイルの確認
- Cursor上で「3.」のデザインファイルをDev Mode MCP serverを使って、Next.js + TailwindCSSで実装
3. Step1: Layermateでデザインシステムを生成
Layermateに「サービス用のデザインシステムを作って」と指示。
生成されたものは、カラーパレット、タイポグラフ、ボタン、モジュール等が含まれたベースシステム。
元々の指示が簡潔でも、相当にインプット解析力の高さを感じました。
📸 キャプチャ：生成されたデザインシステム画面
4. Step2: Step1のデザインシステムを使って「労務SaaS LPを作って」と依頼
Layermateに「上記のデザインシステムを使って労務管理SaaS LPを作成」とプロンプト指示。
📸 キャプチャ：プロンプトと構成説明画面
5. Step3: Figmaデータで生成デザインを確認
Step2の指示によって出力されたFigmaデザインデータです。
デザインは凡庸ではあるけれど、必要最低限の要素が出力され、UI構成力は非常に高いと感じました。
Figma上で多少の微調整は必要そう。。。（Autolayoutなど）
📸 キャプチャ：Figmaファイルの画面
6. Step4: MCP Server + Next.js + Tailwindで実装
FigmaのDev Modeの中に、新しく機能開始されたMCP Serverを使用。
Dev Mode MCP server設定方法
わたしは、Cursorで進めていきます。
これにより、Figmaの情報をコンテキストとしてAIに渡し、Next.js + TailwindCSSのコードとして生成。
Figmaデザインデータの再現性の高さにちょっと感動しました。
📸 キャプチャ：MCPで生成された画面
📸 キャプチャ：FigmaデザインデータとMCPでの実装の画面比較
📸 キャプチャ：全4Stepの画像
7. 感想と気づき
Layermateを使って感じたのは、汎用性のあるコンポーネントの実装――例えば一般的なデザインシステム構成など――においては、すでに十分なレベルで生成可能であるということです。
そのため、今後は「どこからAIに任せるか」「どこまで人間が制御するか」といった生成機能の“使い所”を見極める判断そのものが、プロダクトデザイナーの重要な役割になっていくと感じました。
また、Figma Dev ModeのMCP Serverの登場により、UIデザイナー、デザインエンジニア、フロントエンドエンジニア、そしてプロダクトマネージャーの垣根は、より一層グラデーション化していく未来も想像できました。
もはや「どの職能がどこまでやるべきか」ではなく、“すべてできて当たり前”の前提が広がっていくのかもしれません。
この流れがさらに進めば、BizDevやマーケティングなどの非エンジニア職にも、実装の選択肢が開かれる未来も、そう遠くはないと思います。
8. おわりに
生成AIの進化によって、デザインは「作る」から「導く」へとシフトしつつあります。
何を・なぜ・どう作るかを判断し、AIと協働して価値を生み出すことが、これからのプロダクトデザイナーに求められる役割だと強く感じました。
最後まで読んでくださり、ありがとうございました。
プロダクトデザインを、もっともっと楽しもう！もっともっとワクワクしよう！🚀
Discussion