Figmaにはさまざまなプラグインがあります。その中でも生成AIを用いた「Wireframe Designer」がを使うと、数秒でワイヤーフレームを作成できることをご存じでしょうか。
本記事ではFigmaのAIプラグイン「Wireframe Designer」の特徴と具体的な使い方について詳しく解説します。
Figmaのワイヤーフレーム作成プラグイン「Wireframe Designer」とは
Figmaでワイヤーフレームを生成できるプラグイン「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サイトのデザイン」というプロンプトを実行して、日本語にも対応しているのか確かめてみました。
結果は日本語のプロンプトに則ったフレームワークを出力できたので、日本語を用いてスムーズに活用できそうです。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
-
オンラインホワイトボート「FigJam」の使い方。FigJamとMiroの比較結果や料金プランも併せて解説 -
AI搭載のプレゼンツール「gamma」の使い方。料金プランや日本語対応の有無も併せて解説 -
ChatGPT搭載のスマートグラス「Solos AirGo 3」登場！言語翻訳やメッセージ読み上げなど豊富な機能を搭載 -
Figmaの新機能「Figma Slide」の使い方を機能別に詳しく紹介 -
Luma Dream Machineの新機能「キーフレーム」を使ってみた。2枚の写真から中割り動画を作成可能
