WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

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.

Logo Shaper(Creator) Licence — Hexorial Studio

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

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

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

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

基本的な使い方

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

素材の選択

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

素材のカテゴリ

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね