Figma Makeでできることの幅を知りたい
Figma Makeは生成AIで「動く」画面をAIと対話しながら生成することができます。
実際に動かせる画面を瞬時に作れるのは非常に嬉しいですね。
一方、Figma Makeで生成された画面は「シンプルなデザイン」になりがちです。
※もちろん、まずは動かせる画面を作れるだけでも十分イメージを伝えることができるのでFigma Makeは最高のツールです。
そこで今回の記事はFigma Makeで「デザインをどれぐらい変えられるか」を検証してみたいと思います。
※Figma Makeの基本的な使い方や機能については、以下の記事に詳細に記載されていますのでぜひご覧ください！
Figma Makeとは？徹底解説します！
【Figma Make】1000以上のプロンプトを書いて見つけた5つのコツ
検証方法
・題材：ブログを投稿する画面を作成します。
・可能な限りTailwind CSSのデフォルトっぽいデザインをなくせる様にプロンプトを工夫します。
いざ、検証！
まずは、シンプルに以下のプロンプトで画面を生成します。
プログを作成して
Figma Makeで生成された画面はこちらです。
ここから、デザインを変更していきたいと思います。
最終的なデザイン案はNano Bananaで生成しました。（ブログの文章が変わってしまったのはご愛嬌ください）
プロンプトはこちらです。
添付の画像の様に「コーヒーが飲みたくなる様なデザイン」にデザインを変更してください。 画面の構成は変更しないでください。
この画像を読み込んで読ませてデザインを修正してもらった結果はこちらになります。
色合いは近づきましたが、「コーヒーが滲んでいる感じ」や「手ちぎり風」のデザインにはなっていないですね。
各コンポーネントをピンポイントで修正し、デザインを変更していきます。
最終的なアウトプットはこちらになります。
できたこと
- フォントの変更
- 背景色の変更
- 画像を背景として適用する（背景のコーヒーやコーヒーが染み込んだ紙風など）
- 枠のギザギザ感（clip-pathを使用している様でした）
- 簡易的なアニメーションの追加（カーソルをボタンに当てた際に湯気を立つようにする）
難しかったこと
画像で表現したほうがいい箇所をcssで表現しようとする
以下のキャプチャは「コーヒー豆の背景を作って」とプロンプトに指示した結果です（茶色の粒がCSSで作られました・・）。
適宜、画像を背景として読み込ませるのが良さそうです。
細かいレイアウトを調整するには限界がある。
各記事のカードを「手ちぎり風の紙」で表現したかったのですが、流石に思い描くレベルまでは到達が難しかったです。
気づきと学び
今回はあえて、「デザインに重きを置く」ことを試してみましたが、デザイン先行でやってしまうと以下のデメリットがあると感じました。
- イメージに合致するデザインになりにくい（手ちぎり風の紙というコンテキストをAIが理解するのが難しかったのかもしれません）
- ciipPath等で無理やり作ったデザインが量産されるので、デザインからコードを出力した時に実装が大変になる
実際の業務でデザインにこだわったアプリケーションを利用する際には、以下の様にFigma MakeとFigmaを棲み分けると良いと思いました！
Figma Make：ワイヤーフレームとしてで大枠の方針のイメージを作る
Figma：各コンポーネントのデザインの調整
最後に
Figma Makeの「動く」画面を生成するスピードが魅力的に感じました。
このスピード感なら、お客様との打ち合わせをしつつ、動く画面を生成しイメージの認識合わせをすることができそうです。
AI活用によって変化が激しい世の中ですが、Figma Makeの様なツールを活用して激しい変化に対応できる様にしていきたいですね。
簡単30秒