FigmaのAIプラグイン「Wireframe Designer」とは?特徴と具体的な使い方を詳しく解説

FigmaのAIプラグイン「Wireframe Designer」とは?特徴と具体的な使い方を詳しく解説

公開: 更新:

Figmaにはさまざまなプラグインがあります。その中でも生成AIを用いた「Wireframe Designer」がを使うと、数秒でワイヤーフレームを作成できることをご存じでしょうか。

本記事ではFigmaのAIプラグイン「Wireframe Designer」の特徴と具体的な使い方について詳しく解説します。



FigmaのAI機能「Wireframe Designer(ワイヤーフレームデザイナー)」とは

Figmaの生成AIプラグイン「Wireframe Designer」は、プロンプトでワイヤーフレームを作成できる機能です。Wireframe Designerを使うことでデザインの大枠を短時間で作成可能。デザイン作業の効率化につながります。

たとえば「ECサイトのデザインを作って」と指示すると、商品一覧やレビュー欄などECサイトに求められるデザインを作成できます。


Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

Wireframe Designerは無料で利用できる

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のAIプラグイン「Wireframe Designer」の使い方

Figmaより

表示画面にある「Open in Figma」をクリックします。

FigmaのAIプラグイン「Wireframe Designer」の使い方

Figmaより

Figmaのアカウント登録画面が表示されるので、Googleアカウントかメールアドレスのいずれかで登録してください。

すでにアカウントを持っている方は、画面下部にある「Log in」リンクをクリックしましょう。

FigmaのAIプラグイン「Wireframe Designer」の使い方

Figmaより

表示画面の「Open in...」をクリックします。

FigmaのAIプラグイン「Wireframe Designer」の使い方

Figmaより

Figmaで使用したファイル情報が表示されます。画面下部にある「New file」から「Figma file」をクリックしてください。

FigmaのAIプラグイン「Wireframe Designer」の使い方

Figmaより

Wireframe Designerプラグインの画面が表示されるので「Run」をクリックします。

FigmaのAIプラグイン「Wireframe Designer」の使い方

Figmaより

すると利用するデバイスとプロンプトの入力欄が表示されます。デバイスはスマホとPCの2種類から選択できるので、任意のアイコンをクリックしてください。

そのあと画面下部にある入力欄へ作りたいデザインを支持します。今回は「Design of an e-commerce site selling accessories(アクセサリーを販売するECサイトのデザイン)」という指示を入力します。

最後にDesignボタンをクリックして実行して下さい。

FigmaのAIプラグイン「Wireframe Designer」の使い方

Figmaより

実行から数秒で上記のワイヤーフレームを作成できました。もちろん各内容をクリックして自分好みに編集できます。

おすすめのPython研修一覧

Python研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Python研修の一覧を見る

おすすめのDX研修一覧

DX研修を提供しているおすすめの企業・法人を一覧で掲載しております。

DX研修の一覧を見る

おすすめのJava研修一覧

Java研修を提供しているおすすめの企業・法人を一覧で掲載しております。

Java研修の一覧を見る

おすすめのJavaScript研修一覧

JavaScript研修を提供しているおすすめの企業・法人を一覧で掲載しております。

JavaScript研修の一覧を見る

日本語のプロンプトにも対応

FigmaのAIプラグイン「Wireframe Designer」の使い方

Figmaより

「アクセサリーを販売するECサイトのデザイン」というプロンプトを実行して、日本語にも対応しているのか確かめてみました。

結果は日本語のプロンプトに則ったフレームワークを出力できたので、日本語を用いてスムーズに活用できそうです。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア 中途採用者向けのIT・プログラミング研修 - IT・プログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する