Figmaで簡単に作成できる!ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ
Post on:2020年9月29日
Figmaのワイヤーフレーム・フローチャート・プロトタイプ用の素材を紹介します。
Webサイトやスマホアプリで使用されるさまざまなコンポーネントやUI要素、基本的なスタイルが用意されており、短時間で作成できます。
![Figmaのワイヤーフレーム・フローチャート素材のまとめ](http://coliss.com/wp-content/uploads-202003/2020092801@2x.png)
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-02.png)
日本人クリエイターが制作した、Figmaのワイヤーフレーム用テンプレート。基本的なスタイル、コンポーネント、ワイヤーフレーム用のアセットが用意されており、デザイナー以外のエンジニアやディレクターでも使いやすい素材です。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-03.png)
UI Template
使い方の説明も日本語です。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-04.png)
UI Template
デザインがFixしたワイヤーフレームを移動するだけ。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-05.png)
UI Template
フロー用の素材も揃っています。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-09.png)
ラインディングページに使用されるさまざまなコンポーネントが用意されたワイヤーフレーム素材。ヒーローヘッダ・フィーチャーリスト・カード・ボタンなどを組み合わせて利用できます。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-10.png)
Wireframing
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-11.png)
Wireframing
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-06.png)
Figmaの新しい自動レイアウト機能を利用したテンプレート素材。Free版は個人利用のみ無料です。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-07.png)
Figma Wireframe UI Kit
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-08.png)
Figma Wireframe UI Kit
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-12.png)
デスクトップ・スマホ・タブレット用のプロトタイプ・ワイヤーフレームを簡単に作成できるプラグイン。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-13.png)
Wireframe plugin
デバイスを選択し、あとはカテゴリ別のテンプレートを選択するだけ。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-15.png)
Wireframe plugin
「Kits」には、フロー図用のさまざまな素材が用意されています。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-24.png)
シンプルなプラグインで、手書き風にデザインされた矩形・円・矢印などでワイヤーフレームを作成できます。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-25.png)
Hand Wireframe
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-21.png)
スマホのさまざまなUIを簡単に利用できるワイヤーフレーム素材。
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-22.png)
Mobile UI kit
![Figmaのワイヤーフレーム素材](http://coliss.com/wp-content/uploads-202003/2020071411-23.png)
Mobile UI kit
![Figmaのフローチャート素材](http://coliss.com/wp-content/uploads-202003/2020071411-16.png)
フロー図、サイトマップ、ペルソナマップ用の素材。
![Figmaのフローチャート素材](http://coliss.com/wp-content/uploads-202003/2020071411-17.png)
フローチャート用のシンプルな素材。
![Figmaのフローチャート素材](http://coliss.com/wp-content/uploads-202003/2020071411-18.png)
プロセス フローチャート用の素材。
![Figmaのフローチャート素材](http://coliss.com/wp-content/uploads-202003/2020071411-19.png)
システムのフローチャート用の素材。
![Figmaのフローチャート素材](http://coliss.com/wp-content/uploads-202003/2020071411-20.png)
組織図用の素材。
sponsors