Figmaでワイヤーフレームを作成できるプラグイン「Wireframe Designer」とは？具体的な使い方を詳しく解説
公開：
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で確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
What's New
新着記事
AI時代、「営業・顧客接点のためのアート思考」を公開 ― 提案を磨く前に、自分は相手の何を見ていたか
AI時代、「上司のためのアート思考」を公開 ― 部下に「もっと考えて」と伝える前に
【9月21日(月)22時・無料】営業DXが新局面へ──生成AIで営業生産性を最大化、未経験営業でも「1人あたり年商6,000万円」を目指す実践手法を公開！
San Diego and Japan Deepen Strategic Ties
