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で細かいアニメーションを作成できるプラグイン「Motion」
Figmaの図形周りの基本操作|図形の作成方法から細かい設定項目まで
Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法
Figmaのフォント選択時に分かりやすくプレビューしてくれるプラグイン
Figmaのサイズの大きい画像を縮小せずにインポートするプラグイン「Insert Big Image」
Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法
Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする
今から始めるUIデザインツールSketch入門 Sketchの特徴と使う理由
Sketchのライブラリアップデートの方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
Sassのマップ機能を使った変数の管理方法
Chrome拡張機能「PocketTube」を使って、YouTubeの登録チャンネルをグループ分けして管理する
BetterSnapToolでリサイズ前のウインドウサイズを復元する方法・復元しない方法
ターミナルでGitを使う時に最低限覚えておきたいコマンド
Google Drive内のドキュメントを検索して開けるAlfredのWorkflow「Google Drive Workflow for Alfred」
Local by Flywheelのページ遷移を軽くする設定
デフォルトのままじゃもったいない!Google日本語入力での品詞の設定方法と意味まとめ