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

Figmaでワイヤーフレームなどを作成するときに、「Wireframe」というプラグインを開いて検索すると、ワイヤーフレームの素材が出てきます。

ある程度凝ったものを作る場合はイチから作った方がいいかもしれませんし、色が付いてしまっているので変にイメージが引っ張られないように顧客との認識合わせ時には注意が必要ですが、本当にざっくりの画面構成とページ一覧を確認したい場合は使えます。

こういうプラグインは、知っているか知らないかでかなり差が出る部分だと思うので、変に切り捨てずに自分の引き出しに入れておくと使えるタイミングがあるかもしれません。

Wireframe

Figma

Figma

https://www.figma.com/community/plugin/742764242781786818/Wireframe

Figma Community plugin - Free Popular Wireframes library for everyone, Wireframe plugin is the best Figma plugin for creating beautiful wireframes, user flow, prototypes and basic structures, so no other kits, files or skills required! just drag and drop to add it on Figma, All the Wireframe can be used freely under crea...

「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.

Logo Shaper(Creator) Licence — Hexorial Studio

直訳すると下記の通りです。

– すべてのワイヤーフレームは無料でダウンロードして使用可能
– 個人・商用プロジェクトどちらでも使用可能
– 当社は、いつでもコンテンツ・リソース・価格を変更し、ライセンスを改訂する権利を持っています
– 素材の利用に関して、いかなる責任も負いません。有害なものには使用しないでください

今後ライセンス改定があると変わってしまう可能性もゼロではありませんが、

また、2022年9月時点のFigmaは、プラグインをインストールしなくても検索して1回だけ起動という使い方ができます。
頻繁に使うものではないので、インストールせずに使いたいときだけ「Wireframe」と検索して使うのがオススメです。

基本的な使い方

「Wireframe」を起動してパネルを開きます。
検索ボックスから検索して素材を選んで、クリックするか、もしくは画面上にドラッグアンドドロップすれば素材が挿入されます。

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

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