Figmaでサクッとワイヤーフレームが作れる素材検索プラグイン「Wireframe」

Figmaでワイヤーフレームなどを作成するときに、「Wireframe」というプラグインを開いて検索すると、ワイヤーフレームの素材が出てきます。
ある程度凝ったものを作る場合はイチから作った方がいいかもしれませんし、色が付いてしまっているので変にイメージが引っ張られないように顧客との認識合わせ時には注意が必要ですが、本当にざっくりの画面構成とページ一覧を確認したい場合は使えます。
こういうプラグインは、知っているか知らないかでかなり差が出る部分だと思うので、変に切り捨てずに自分の引き出しに入れておくと使えるタイミングがあるかもしれません。
Wireframe

「Wireframe」は名前の通り、ワイヤーフレームに使える素材を検索してFigma上に挿入できるプラグインです。
素材に関しては営利でも使えるものになっています。
– All Wireframes can be downloaded and used completely free
– Use on personal/commercial projects.
– We reserve the right to change content, resources, prices, and revise the license at any moment.
– We don’t take any type of responsibility and are not responsible, Use it wisely and not use it on any other things that are harmful.
直訳すると下記の通りです。
– すべてのワイヤーフレームは無料でダウンロードして使用可能
– 個人・商用プロジェクトどちらでも使用可能
– 当社は、いつでもコンテンツ・リソース・価格を変更し、ライセンスを改訂する権利を持っています
– 素材の利用に関して、いかなる責任も負いません。有害なものには使用しないでください
今後ライセンス改定があると変わってしまう可能性もゼロではありませんが、
また、2022年9月時点のFigmaは、プラグインをインストールしなくても検索して1回だけ起動という使い方ができます。
頻繁に使うものではないので、インストールせずに使いたいときだけ「Wireframe」と検索して使うのがオススメです。
基本的な使い方
「Wireframe」を起動してパネルを開きます。
検索ボックスから検索して素材を選んで、クリックするか、もしくは画面上にドラッグアンドドロップすれば素材が挿入されます。

検索ボックス下のカテゴリをクリックすると、他のカテゴリを選択できます。

使い方としてはこれだけです。
素材はSVGなのでダブルクリックしたり、shift + command + Gでグループ化を解除すれば好きに編集できます。


Figmaのコンポーネント入門|コンポーネントの作成方法から特徴まで
Figmaでデザインデータ上の画像を圧縮してファイルサイズを軽くする「Downsize」
Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法
Figma × Keyboard Maestroでどこまで効率化できる?
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
Figmaのレイヤー名を一括変更するプラグイン「Rename It」
Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
iPhoneで特定のアプリだけ別の言語設定に切り替える方法
面倒なことを解消するアプリの細かい設定 #1日1Tips – 2019年11月
ATOKで目的の単語にすぐ変換するための「辞書・学習」タブの設定項目
Googleの検索結果をカスタマイズするChrome拡張機能まとめ
メールとチャットを一元管理してワークスペースを整理する「Rambox」
一般的によく使われているテキストエディタでのEmmetの設定方法まとめ
JavaScriptで配列内から特定条件の要素を探す方法
ウインドウを画面の上にドラッグしたときに、Mission Controlが起動するのを無効化する方法
作業効率化に大きく貢献してくれているMacのアプリ達
iTerm2終了時に表示される確認ダイアログを非表示にする