Figmaで簡単に作成できる!ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ
Post on:2020年9月29日
Figmaのワイヤーフレーム・フローチャート・プロトタイプ用の素材を紹介します。
Webサイトやスマホアプリで使用されるさまざまなコンポーネントやUI要素、基本的なスタイルが用意されており、短時間で作成できます。


日本人クリエイターが制作した、Figmaのワイヤーフレーム用テンプレート。基本的なスタイル、コンポーネント、ワイヤーフレーム用のアセットが用意されており、デザイナー以外のエンジニアやディレクターでも使いやすい素材です。

UI Template
使い方の説明も日本語です。

UI Template
デザインがFixしたワイヤーフレームを移動するだけ。

UI Template
フロー用の素材も揃っています。

ラインディングページに使用されるさまざまなコンポーネントが用意されたワイヤーフレーム素材。ヒーローヘッダ・フィーチャーリスト・カード・ボタンなどを組み合わせて利用できます。

Wireframing

Wireframing

Figmaの新しい自動レイアウト機能を利用したテンプレート素材。Free版は個人利用のみ無料です。

Figma Wireframe UI Kit

Figma Wireframe UI Kit

デスクトップ・スマホ・タブレット用のプロトタイプ・ワイヤーフレームを簡単に作成できるプラグイン。

Wireframe plugin
デバイスを選択し、あとはカテゴリ別のテンプレートを選択するだけ。

Wireframe plugin
「Kits」には、フロー図用のさまざまな素材が用意されています。

シンプルなプラグインで、手書き風にデザインされた矩形・円・矢印などでワイヤーフレームを作成できます。

Hand Wireframe

スマホのさまざまなUIを簡単に利用できるワイヤーフレーム素材。

Mobile UI kit

Mobile UI kit

フロー図、サイトマップ、ペルソナマップ用の素材。

フローチャート用のシンプルな素材。

プロセス フローチャート用の素材。

システムのフローチャート用の素材。

組織図用の素材。
sponsors