こんにちは、デザイナーのryu_nxwです。
「株式会社ネクスウェイ Advent Calendar 2025」12日目の記事です🎄
今年デザイナー界隈で話題になった FigmaMake を触ってみました。
「実務で使えるの？」
「FigmaのUIをそのまま読み取れるの？」
そんな疑問を持ちながら、実際に検証してみた結果をまとめます。
FigmaMakeってなに？
Figmaが提供する「コード生成 × UI生成」のAIツールです。
ライブラリやフレームを読み込みつつ、UIの自動生成やコード出力をしてくれます。
今回は、既存プロダクトのUIをどれくらい修正できるのか、検証してみました。
既存プロダクトをベースにUI修正してみた
✅ 今回の検証内容
実務でよくある「既存UIのちょい改修」を想定して、
- 既存ライブラリの読み込み
- 既存UIフレームの取り込み
- ソートUIの追加依頼
- 最終的な微調整
これらを順に試しました。
1. 既存ライブラリを読み込む
まずは、既存ライブラリをFigmaMakeに取り込みます。
「ライブラリの管理 > ライブラリを公開」から
「FigmaMakeにエクスポート」 すると読み込みが始まります。
読み込みが完了すると、
FigmaMake側でコンポーネントやStyleをそのまま利用できます。
ライブラリ選択画面
作成途中でもライブラリを追加可能 （スタイルやガイドラインの編集も◎）
2. 既存の画面UIフレームを反映してみる
次に、実際の画面UIをFigmaMakeに渡してみます。
以下の方法を試しました。
- スクリーンショット
- Figmaコンポーネント
- React/SassをHTML/CSSに変換して添付
しかし、どの方法でも 構造の再現が難しい という結果に…。
レイアウトが崩壊することもありました。
左が元UI、右がFigmaMake版。
見た目は近いけど、細部の構造がかなり違う。
実務レベルで使うには、結局コードで調整した方が早い場面が多そうです。
（しかも…正しく読み取ってもらうために、バリアントを外したり、構造を単純化したりする必要がありました。既存UIが揃っていても大変でした…）
🐣 なぜ崩れるのか？
FigmaMakeは
「見た目 → 構造を推測 → コード生成」
という手順のため、
情報が欠けると推測が増え、崩れやすくなります。
- スクショ：構造情報ゼロ
- コンポーネント：AutoLayout・階層が複雑だと破綻
- HTML/CSS：フォルダ構成・JSロジックが欠落
- Sass：非対応
特に実プロダクトは構造が複雑なので、
完全復元は現状むずかしい という印象です。
3. ソートUIの追加を依頼
気を取り直して、生成UIに 並び替え（ソート）UI を追加してみました。
これはとてもスムーズで、複数パターンの生成も一瞬でした。
部分的なUI追加はかなり強いです。
4. 最終的な微調整
色や余白などの、細かい部分を仕上げていきました。
実際に動かせるので、叩き台として実用的です。
💎 https://deer-hug-13633744.figma.site
やってみて感じたこと
- 既存UIの完全復元はかなり難しい
- 部分追加は爆速で便利
- 完全再現を目指す場合は、結局AIの補正が多く苦戦する
仮にUIが生成できても、
既存コードの構造に沿って組み直すのはほぼ無理で、
プロダクトにそのまま戻す運用は現実的ではない と感じました。
ただし、軽いUI追加や叩き台づくりには最適 です。
ちなみに…新規で診断ゲームも作ってみた
既存UIとは別に、ゼロからアプリも試作してみました。
💎 https://basil-thank-40137058.figma.site
診断ロジックはChatGPTに、
イラストはGeminiに生成してもらっています。
✨ 必要コンポーネントは最低限でOK
用意したのは button と radio の2つだけ。
雰囲気の再現が得意で、
スタイル指定もプロンプトだけで十分でした。
✨ ノーコードで“動く”プロダクトが作れる強み
UI/UXデザイナーにとって、「動くUI」を作るのは意外とハードルが高いものです。
その点、コードなしで動くUIまで作れてしまうのは、
デザイナーにとってかなり魅力的だと感じました。
📝 まとめ
- アイデアを“動く形”にするスピードは強い
- 既存UIの完全再現には向かない
- 部分追加・新規UIの叩き台として良い
FigmaMakeは、サクッと動くものを作れる、
AI×UIプロトタイピングツールとして非常に優秀だと思います。
一方で、UIの構造を深く理解させたり、
デザインシステムに完全準拠させたりするのは、まだ苦手そうです。
既存プロダクトの効率化という観点では、課題もまだ多いと感じました。
今後のアップデート次第で、デザイナーにとって強力な選択肢になると思います。
来年以降のFigmaMakeの進化に期待しています！
最後まで読んでいただきありがとうございました。
株式会社ネクスウェイ Advent Calendar 2025では明日以降も、開発メンバーがそれぞれの「好き」と「学び」を自分の言葉で綴っていく予定です。
明日13日目の記事は、@yusake_nxw さんの「脳内で、ちょくちょく404エラー吐いていた件 」です。
引き続き、お楽しみください🎄
もっと他の記事も読んでみたい方
当社に興味がある方はこちら👀