こんにちは！ZEROBASEのデザイン担当のW.Nです！
皆さま、日々の業務にAIを活用していますか？🤔
実は私、つい最近までAIにちょっと抵抗感があって、積極的に使えていませんでした。
でも、もはや「AI時代」は避けて通れない！ということで、最近はAIツールについて勉強中なんです✨
そこで今回検証していくのが、デザイナー注目の「Figma Make」です！
デザイン生成やコード生成のAIツールは数多く登場していますが、Figmaユーザーにとって朗報なのが、無料版でも使えるようになった「Figma Make」。
今回はその実力を試してみたいと思います！💻
▼目次
- Figma Makeとは？
- 使用方法
- 【検証】 このブログのアイキャッチ画像作成
- Figma MakeからFigmaに持ってくる方法
- デザイン修正
- まとめ
Figma Makeとは？
ざっくりいえば、プロンプトを入力するとコードからデザインを生成してくれます。
また、Figmaで作ったデザインをコーディングすることもできます。
公式サイト：https://www.figma.com/ja-jp/make/
使用方法
他のAI同様作成してほしいものをテキストで指示するだけです。
細かく指示をすればするほど自分の理想に近づくはずです。
【検証】 このブログのアイキャッチ画像作成
【プロンプト】
あなたは、webデザイナーです。
【検証】Figma Makeを使ってみた！というブログを書きます。AIで作成している様子のイラストのアイキャッチを作ってください。
【サイズ】
（横）1280px ×（縦）720px
結果（1回目）
何とも言えないものが出力されました。
この結果を受け、下記修正指示を出します。
ちょっと抽象的過ぎていまいちです。
パソコンのイラスト画面にAIで作成している様子と、人が作業している感じを出してください。
結果（2回目）
ちょっとそれっぽくなってきました。ですが、まだまだ理想には遠いです。
何で背景夜っぽいんだろう。
この結果を受け、下記修正指示を出します。
【プロンプト】
背景の色はバージョン3の色にしてください。
パソコンは画像の真ん中に持ってきてください。
動きは必要ありません。
ロボットのイラストは人間のイラストにしてください。
結果（3回目）
ロボットのイラスト以外は少しいい感じになった気がします。
これ以上は指示出しが大変そうなので、figmaデータで修正していきます。
Figma MakeからFigmaに持ってくる方法
手順①
Figma Makeのコードをコピーします。
ただし、最初はHTMLコードになっていないので、HTMLコードに変換する必要があります。
Figmaのプラグインhtml.to.designで使用したいので、HTMLコードに変換してください。
手順②
Figmaのプラグインhtml.to.designを、以下の手順で実行する。
①html.to.designのプラグインを実行
②Editorから、HTMLに貼り付け
※今回のコードはHTML内にCSSが入っているので、HTMLだけに貼り付けでOK
③入れたらCreateクリック
④Goをクリック ※Fontは変えたい人は変えてください。
⑤出力されます！
デザイン修正
html.to.designで出力されたものはFigmaで編集できるので、気になった箇所を修正していきます。
色々修正して完成したのがこのブログのアイキャッチ画像です！（原型があまりないですが）
まとめ
今回検証してみて思ったのは、アイキャッチ画像を作るなら、Figma Makeよりも他の生成AIツールの方が効率的かもしれません。
ただし、公式サイトを見ていただくと分かるのですが、Figma Makeの真価はもっと別のところにあります！
例えば、おしゃれな表のデザイン、ワイヤーフレームの素早い作成、デザインのラフ案出し、UIアプリのプロトタイピングなど、デザイン作業の効率化には役立ちそうなツールだと感じました。
特にFigmaユーザーにとっては、ワークフローに自然に組み込めるのが魅力です。
私自身、まだまだAI活用については勉強中の身です。
これからも効果的な指示の出し方や、各AIツールの得意分野をしっかり学んで、デザイン業務に取り入れていきたいと思います。
皆さんも、ぜひ自分の作業に合ったAIツールを見つけてみてくださいね！
