Figmaにはさまざまなプラグインがあります。その中でも生成AIを用いた「Wireframe Designer」がを使うと、数秒でワイヤーフレームを作成できることをご存じでしょうか。
本記事ではFigmaのAIプラグイン「Wireframe Designer」の特徴と具体的な使い方について詳しく解説します。
FigmaのAI機能「Wireframe Designer（ワイヤーフレームデザイナー）」とは
Figmaの生成AIプラグイン「Wireframe Designer」は、プロンプトでワイヤーフレームを作成できる機能です。Wireframe Designerを使うことでデザインの大枠を短時間で作成可能。デザイン作業の効率化につながります。
たとえば「ECサイトのデザインを作って」と指示すると、商品一覧やレビュー欄などECサイトに求められるデザインを作成できます。
Wireframe Designerは無料で利用できる
Figmaより
Wireframe Designerは毎月10回まで無料のユーザーでも利用できます。また、月額5ドルのProプラン（有料）に加入すると無制限で利用可能。上記のProプラン詳細画像には精度が向上することも記載されています。
Wireframe Designerの使い方
はじめにWireframe Designerのプラグインページへアクセスします。
Wireframe Designer:https://www.figma.com/community/plugin/1228969298040149016/wireframe-designer
Figmaより
表示画面にある「Open in Figma」をクリックします。
Figmaより
Figmaのアカウント登録画面が表示されるので、Googleアカウントかメールアドレスのいずれかで登録してください。
すでにアカウントを持っている方は、画面下部にある「Log in」リンクをクリックしましょう。
Figmaより
表示画面の「Open in...」をクリックします。
Figmaより
Figmaで使用したファイル情報が表示されます。画面下部にある「New file」から「Figma file」をクリックしてください。
Figmaより
Wireframe Designerプラグインの画面が表示されるので「Run」をクリックします。
Figmaより
すると利用するデバイスとプロンプトの入力欄が表示されます。デバイスはスマホとPCの2種類から選択できるので、任意のアイコンをクリックしてください。
そのあと画面下部にある入力欄へ作りたいデザインを支持します。今回は「Design of an e-commerce site selling accessories（アクセサリーを販売するECサイトのデザイン）」という指示を入力します。
最後にDesignボタンをクリックして実行して下さい。
Figmaより
実行から数秒で上記のワイヤーフレームを作成できました。もちろん各内容をクリックして自分好みに編集できます。
日本語のプロンプトにも対応
Figmaより
「アクセサリーを販売するECサイトのデザイン」というプロンプトを実行して、日本語にも対応しているのか確かめてみました。
結果は日本語のプロンプトに則ったフレームワークを出力できたので、日本語を用いてスムーズに活用できそうです。
