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のレイヤー名を一括変更するプラグイン「Rename It」
13インチのMacBook Proでのモダンブラウザごとのサイト表示領域のまとめ
Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
Figmaの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
Figmaでモックアップをすばやく作成する「Mockuuups Studio」
Figmaのコンポーネント入門|コンポーネントの作成方法から特徴まで
FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する
Illustratorの選択系のツールを徹底的にまとめる
Photoshopでファイルを開いたとき「予期せずにファイルの末尾に達しました。」と表示される場合の対処法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Alfredで設定しておくと便利な細かいことまとめ
UAからGoogleアナリティクス4(GA4)へ移行する方法
Todoistでタスクを「繰り返し」に設定してApple Watchから確認するようにすれば、習慣化がしやすくなる!
Ulyssesで目標や締め切りを決めて特定のプロジェクトの文章を管理できる機能
機能の差が分かりにくいDropboxの「選択型同期」と「同期の無視」の違い
散らかりがちなMacのメニューバーをBartender 3でキレイに整理する
Google Drive内のドキュメントを検索して開けるAlfredのWorkflow「Google Drive Workflow for Alfred」
入力関連のトラブルを防ぐためにも、システム環境設定の[キーボード]→[ユーザ辞書]を確認しておく
Visual Studio CodeでCSVの編集を見やすく行う拡張機能「Edit csv」
Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法