デザイン素材やUIキットを使うと、デザイン制作作業の時間を短縮できたり、デザインのインスピレーションを得ることができます。

また、UIキットはデザインツール自体の使い方を学ぶときにも大いに役立ちますね。

今回は、Figmaで使えるおすすめのデザイン素材やUIキットをご紹介したいと思います。

おすすめのFigmaデザイン素材・UIキット

Marvie iOS UI Kit Dark theme

様々なコンポーネントが詰まったスマホアプリ用のUIキットです。色使いがとてもきれいで、シンプルかつ魅力的なデザインが特徴的ですね。

コンポーネントやシンボル、タイポグラフィなど、管理しやすくまとめられているので、自分でFigmaのUIキットを作る時はこのUIキットを参考にすると、しっかりと整理された管理しやすいUIキットを作ることができるのではないでしょうか。

初めてFigmaを使うという方も、このUIキットの中身を見れば細かな使い方が分かるかもしれません。

Neomorphic Travel UI Kit

こちらは旅行用アプリをモチーフにしたUIキットです。

細かくコンポーネント化されているので、色やスタイルなどを変更する場合は親コンポーネントを変更すれば子コンポーネントや画面デザインに反映されます。

Figmaでデザインシステムを作る時は、このUIキットのような管理方法にすると管理しやすいですね。

Grada – Free Figma UI Kit

Webサイト向けに作られたUIキットです。サイト内にウィジェットとして配置できるパーツが多く揃えられている他、ヘッダーやフッターのコンポーネントが豊富です。

コンポーネント化はされていないため、UIキットとして使うというよりは、デザインする時に参考にすると良さそうです。

Wireframe Prototyping System

画面遷移図やサイトマップを作る時に役立つ矢印やブロック、エレメントなどが詰まったUIキットです。

気軽におしゃれなフローチャートを作ることができます。

カラーもスタイルで管理しているので、ベースの設定を変更すればすべてのコンポーネントの色を一括で変更することができます。

Material Icon

Googleが公式に提供しているマテリアルアイコンがFigmaファイルとしてまとめられたものです。

マテリアルアイコンを使う場合に、いちいち公式サイトからファイルをダウンロードして使うのは面倒なので、こちらを利用して作業時間を短縮しましょう。

おすすめのFigmaデザイン素材配布サイト

uistore.design

こちらはFigmaに限らず、SketchやXDなど様々なデザインツールのデザイン素材が配布されているサイトです。

素材の種類も多く、クオリティが高いものも多いのでUIデザインをされる方はぜひチェックしてみてください。

Templates – Figma Official

こちらはFigma公式サイト内にある、目的ごとのテンプレートファイルを配布しているページです。

フローチャートやワイヤーフレーム、Instagramやユーザーストーリーマップなど、色々なファイルが用意されているので、ぜひ一度見てみてください。

Assets – Figma Official

こちらもFigma公式サイト内のページで、色々な目的に合わせたUIキットやデザイン素材などが紹介されているページです。

無料のものも多いですが、一部有料素材なので注意してください。

Figma Crush

FigmaのUIキットやデザイン素材が配布されている海外のサイトです。

あまり種類は多くないですが、有料素材も配布されているので気になる方は見てみてください。

Figma Freebies

こちらもFigmaのデザイン素材が配布されているサイトです。すべての素材が無料で提供されています。

SketchのUIキットも使える

FigmaはSketchファイルをインポートすることができるため、Sketch用のUIキットをインポートして使用することができます。

稀にインポート時にデザインが崩れることがありますが、ほとんど問題ありません。

もしFigmaのデザイン素材に探しているものが見つからなかったら、Sketchのデザイン素材から探してみましょう。