Figma AIのFirst Draftを利用してワイヤーフレームを作る

AIツールの発達が目まぐるしいですね。

そんな中、デザインツールであるFigmaのAIがあるということで利用してみました。

• FigmaのAIを使うためには何が必要か
• 何ができるか
• どういった物ができるのか

実体験ベースでまとめています。

この記事では、デザインの生成項目であるFirst Draftを中心に触っています。

Figmaを使うデザイナー、コーダーの参考になれば幸いです。

＼Figmaを学べる最新の書籍！／

Figma AIを使うために有料契約「フルシート」

AIを使うために有料プランのフルシートを契約する必要があります。各プランで一番月額が高いやつですね。

それぞれにクレジットが設けられており、クレジットがあればAIによる生成や編集が可能になります。

フリープランやフル以外のシートでも使えるようですが、１日に制限があったり、１ヶ月に制限があったりと、色々と制限があるようです。

AI生成や利用にはクレジットが必要なのですが、私が調べた限りでは元クレジット残数がいくつなのか、確認する方法は見つかりませんでした。

3000クレジットで50~70makesとあるので、内容によって幅がある、50サイト分くらいは作れるのかなという印象です。

エディケーションプランだと使えない

エデュケーションプランだとAIの選択肢が出ないとのことです。

AI機能を利用できない理由としては、以下が考えられます。

• Figmaエデュケーションアカウントを使用している: AI機能は現在、Figmaエデュケーションアカウントではご利用いただけません。

Figma Learn|AIクレジットの仕組みhttps://help.figma.com/hc/ja/articles/33459875669015-AI%E3%82%AF%E3%83%AC%E3%82%B8%E3%83%83%E3%83%88%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF

Figma AIの使い方

使うにあたり、様々な記事を見た中で、キラキラマークを押すと使える、といったものが多数出ましたが、私のFigmaには出てません

と思ったら一番右のアイコンからAIを選択することが出来ました。

FigmaAIで使える機能

画像に関すること、コンテンツデザインを作る、テキストの編集、修正といったことができるようです。

First Draft

テキストベースで指示を出し、デザインを作成してくれる項目です。

以下の４つの項目から選びます。

• 基本アプリ
• アプリのワイヤーフレーム
• 基本サイト
• サイトのワイヤーフレーム

試しに基本サイトで自動車保険で3プランを表示したサイトと指示を出し作ってみます。

1分足らずで大枠のサイトを作ってくれました。

横幅1440pxで標準的なサイトのサイズだと思われます。流石にそのままは使えませんが、デザインのベースには良いのではないでしょうか。

下の選択肢を選ぶと色や角丸の調整、ドット文字などの遊び心のある表現なんかも提案してくれます。

レイアウトにはオートレイアウトが使われており、オートレイアウトの機能に明るくないと少し調整に手間取る印象です。

ほとんどの箇所に使われております。

コードに起こすときは楽かもしれませんね。

サイトのワイヤーフレームを選択。

同じプロンプトで指示を出しました。

追加のプロンプトで調整していきます。もう少しサイトらしくしたいですね。

指示の出し方によっては、

とてもサイトらしいものが出来上がるので、色んなパターンのワイヤーフレームを作ってもらうのが良さそうです。

構造やレイヤーがしっかり出来ているので、ベースとして使うにはかなり良さそうな印象を受けました。

いろんなパターンを作ってもらい、セクション単位で使うところを移植したら構造も見た目も良いサイトになるのではないでしょうか。

注意点としてはベースが英語なので、日本語にするプロンプトを入れないと全部英語になりますね。

色々作ってみました。

画像を生成

figma AIの画像生成はGoogleのnanobanana基準のようです。

自動車保険の画像を作ってもらいます。

出てきたのがこちら

サイズを指定しても変わらず1024×1024でした。

まとめ：Figma AIを使う

Figma AIの利用条件、サイト生成方法について触れてきました。

• AIモードを利用するにはフルシートである必要がある。
• サイト生成はFirst Draftを使う。

AIで使えるのは以下の機能

これは私の所感ですが、First Draft以外の機能は他のAIを使ったほうがいいのではないかと思います。

サイトデザインについてはオートレイアウトやレイヤーがしっかりしており、さすがFigmaのAIといったところですが、他の機能につきましてはnanobananaそのままだったり、テキストに関してもChatGPTやCloudeのほうが勝っている印象です。

他のAIで補えるところに有料のクレジットを使うのはもったいないので、ワイヤフレームを量産してもらいましょう。