AI がデザインを“作る”時代へ — Figma Make を試してみた
気になっていた Figma Make をついに触ってみました。
実際に使ってみる機会があったので、使い心地や従来の Figma との違いなどをまとめてみます。
Figma Makeとは？
Figma Make は、Figmaが提供する AI搭載のデザイン支援ツール です。
同じようなレイヤーのツールとしては、v0 by Vercel などがあります。
AIチャットを通してプロンプト（指示文）を入力すると、UIデザインを自動生成してくれます。
生成されたデザインは コードとして展開 できるため、モックアップ作成やデザインの方向性を検討するときに、素早くプロトタイプを作れるのが特徴です。
個人で試して作ったもの
仕事でも使い始めましたが、個人でも使ってみました。
作ったのは、最近よく作ってる家計簿アプリをベースにやってみました。
生成されるデザインは、利用するコンポーネントがだいたい決まってることが多いので、他のAIコーディングエージェントと似たように生成されます。このあたりはいろいろなCSSフレームワークを使ってみるのは面白いかもしれません。
使ってみた所感
実際に Figma Make を使ってみた印象としては、デザイン指示の抽象度がかなり高い という点がまず感じられました。
抽象的なプロンプトを入力すると、レイアウトが意図どおりに生成されなかったり、思い描いたデザインに近づけるのが難しい 場面が多かったです。
その理由は、デザインを細かく制御するためには、
たとえば「何px左に配置する」「この装飾にはユーザーアイコンを使う」といった、具体的なCSS的な指示を与える必要がある からです。
そもそもデザインというのは、脳内のイメージに近い「言語化しにくい領域」に属しています。
フロントエンドの現場で長く仕事をしていると「脳内マークアップ」がもはや思考というより身体感覚になります。
「このレイアウトならこのプロパティを使うかな」と自然に手が動くような感覚です。
脳内マークアップできるようになるという訓練が、染み付いているほどに細かいデザインコントロールするための 言語化（レイアウトの文脈）された指示に苦戦をしました。
大まかなデザインコントロールはできるものの、細かい部分の指示出しは難しい印象です。
デザイナーの意図をCSSやHTMLに落とし込む力を持つエンジニアほど、AIへのプロンプト設計にもセンスが問われる のではないかと感じました。
そして最終的に、Figma Make は、AIがデザインを生成するというよりも、自分の頭の中のデザインをどこまで言葉で伝えられるかを試すツール だと感じました。
現時点での使い方について
AIツールは日々進化しているため、今うまくいかなくても、いずれ改善されていくと思っています。
そのうえで、現時点でのFigma Makeの使い方 について感じたことを整理してみました。
現段階では、いきなり本番のプロダクトデザインに組み込むのは難しい という印象です。
まずは モックアップを作成して方向性を固め、ブラッシュアップを重ねたうえでコード化し、最終的にリファクタリングする ——
といったフローが現実的だと感じました。
また、生成されたデザインは アトミックデザインのような階層構造ではなく、
ひと通りのコンポーネント単位で出力されます。
そのため、コードとして展開した後に、AIコーディングエージェントなどを活用してリファクタリングする 流れが実用的だと思います。
0→1ベースの新規案件向き
わかってはいることですが、運用フェーズに入ったプロダクトへの導入は現時点では難しい という印象です。
新しいコンポーネントやデザインを作成する工程であっても、Figma Make を取り入れることで大きな効果が得られる場面は限られそう です。
既存プロダクトの場合、デザインシステムやガイドラインといった 既定のルールが多く存在するため、
それらを踏まえたうえで構築を行うのは現状の Figma Make では難しいと感じました。
一方で、パーツ単位での生成や検証 であれば、ある程度の活用はできそうです。
ただしその場合も、AI駆動開発で既存のパーツを組み合わせて構築する方が、より実用的で効果的 だと感じました。
アイディア出しを即座にできる
Figma Make の大きな特徴は、プロトタイプを即座に作成できる点 です。
このおかげで、多くの恩恵を受けることができました。
AIコーディングエージェントでも似た効果はありますが、Figma Make は特に チームメンバーやPO、CSの方々とやり取りする際に言語化しづらい領域をデザインで表現できる 点が強みです。
たとえば、UI を作るのに通常半日かかる作業も、0フェーズのプロジェクトであれば1時間程度である程度整ったプロトタイプが生成できる ため、スピード面で大きく工数を削減できます。
また、アイディアレベルのものも即座に形にしてフィードバックを受けられる ことも、実際に使ってみて非常に便利だと感じました。
生成されるコードについて
Figma Make で生成されるコードは、React ベース の構成になっているようです。
試しに「Next.js で」とプロンプトを指定してみても、実際には Vite 構成の React プロジェクト が生成されました。
このことから、現時点では React を基盤としたコード生成がデフォルト仕様 になっているのかもしれません。
一方で、Vue など他のフレームワークへの対応はまだ難しい印象 です。
もしかすると、今後のアップデートや特定のプロンプト指定によって実現できる可能性はありますが、
少なくとも現時点では、「動くデザインモックを素早く試す」用途 に留めておくのが現実的だと感じました。
公開機能の活用
Figma Make には 生成したアプリをそのままブラウザで公開できる機能 があります。
個人開発レベルのアプリやランディングページ（LP）など、一発モノのプロジェクトでは、そのまま展開できる点が非常に効果的 だと感じました。
Studio | ノーコードWeb制作プラットフォーム や他のノーコードツールのように、AIで生成したデザインをすぐ公開できるのは便利です。
プロダクト開発では載せ替えが前提
一方で、プロダクト開発の場合は インフラやバックエンドとの統合が前提 になるため、生成されたコードをそのまま使うことは難しい印象です。
通常は以下のようなフローで対応する必要があります：
- 吐き出されたコードをダウンロード
- 手元の環境に合わせて調整
- この段階で AIにファイル整理や補助をお願いする ことも可能
- エラー解消
- 例えば
use clientの付与など、必要な修正は人間が確認
- 例えば
- リファクタリング
- ここまでくると、Figma Make の領域は終了
- そのため、Figma Make にはコンポーネント単位の小さい粒度で生成してもらい、コード上で組み合わせる のが現実的です
プロダクトに組み込む場合は 生成コードの調整とリファクタリングの工程が必須 になります。
要件定義の重要性
Figma Make を使う際も、AI駆動開発と同様に 事前の要件定義が非常に重要 です。
プロンプトを渡すだけでなく、何を作りたいのか、どのような方向性でデザインするのか を明確にしておかないと、無駄な調整やレイアウトの試行錯誤で時間を浪費してしまいます。
プロトタイプ作成の段階でも 要件整理をしっかり行うことが、効率的な活用のポイント です。
小さく指示を与える
Figma Make も他の AI エージェントと同様に、小さな指示を少しずつ与える ほうが精度よく動作することがわかりました。
大きな指示を一度に出すと、デザインが意図せず壊れてしまうことがあります。
そのため、作業が順調に進んでいるときほど、小さな指示を積み重ねることで、デザインを大幅に崩さずに生成を進める のが効果的です。
まとめ
Figma Make は、AIを活用して UIデザインやコンポーネントの生成をサポートするツール です。
使ってみた感触としては、現時点では 既存プロダクトの運用フェーズでフル活用するのはまだ難しい ものの、新規プロジェクトやモックアップ作成 には十分効果的だと感じました。
特に印象的だったのは、Figma Make は単にデザインを生成するだけでなく、「頭の中のイメージをどこまで言語化して伝えられるか」を試すツール であるという点です。
長年フロントエンドに携わっていると、脳内マークアップが体に染みついており、ついコード的な思考でプロンプトを出してしまう自分に気づきました。
現時点での活用方法
- 個人開発レベルのアプリやランディングページのモックアップ作成に向いている
- プロダクト開発では生成コードをダウンロードし、手元の環境に合わせて調整・リファクタリングする必要がある
- Figma Make には コンポーネント単位の小さい粒度 で生成してもらい、コード上で組み合わせるフローが現実的
- AIコーディングエージェントと同様に、要件定義をしっかり行うこと が効率的な活用のポイント
今後、AIツールはさらに進化していくと思われるため、今回うまくいかなかったことも将来的には解決される可能性は十分考えられます。
現時点では、0→1 のプロジェクトやプロトタイプ作成のフェーズで活用するのが最も効果的 だと感じました。
Discussion