この記事ではFigmaで使えるWebサイトやアプリのUI、LPなどのテンプレートを紹介します。
Figmaでテンプレートを使うにはダウンロードしたファイルをインポートするだけでOK。
Webサイトだけでなく、管理画面やスマホのUIに特化したものなどからとくにおすすめできるものを厳選して紹介します。
Figmaの無料テンプレート
まずはFigmaで使える無料テンプレートをまとめて紹介します。
無料テンプレートではワイヤーテンプレートやUIコンポーネントを集めたテンプレート、Gridテンプレートなどデザインのベースになるようなものがたくさんあります。
Figmaの公式サイトで配布されているものを中心にかなりクオリティが高いものを集めてみました。
無料のワイヤーテンプレート
Figmaで使えるワイヤーフレームテンプレートはWebサイトやアプリのUIでよくあるパターンをシンプルなワイヤーフレームのスタイルでまとめたものです。
デザインするときはまずワイヤーを引いてからスタイリングしていくことが多いのでこのようなテンプレートが1つあると便利です。
ボタンやアイコン、ナビゲーションなど基本的なUIコンポーネントが揃ったシンプルなワイヤーテンプレートです。
Figmaでそのまま開いてすぐに使うことができるのでインストールなどの手間もかからず使うことができます。
スマホ向けの無料で使えるUIKit
2つ目はこちら。
こちらはiOSやAndroidなどのモバイル向けのUIコンポーネントがたくさん用意されているワイヤーフレームテンプレートです。
ナビゲーションやキーボードによく使われるアイコンやDate pickerなどのUIコンポーネントも揃ってます。
モバイルアプリのワイヤー作るならこれ1本あればOKですね。
Bootstrap5対応の無料テンプレート
FigmaでBootstrap5のレイアウトを使ったWebデザインを行うならBootstrap5に対応したUIKitがおすすめ。
グリッドシステムやボタン、ナビゲーション、テーブル、モーダルなどBootstrap4や5で使えるコンポーネントが全て揃っています。
Figmaなら配色の一括変更も簡単にできるのでデザインシステムとして使用するのもありです。
まずはBootstrap5のテンプレートがこちら。
Bootstrap5のコンポーネントが揃っており、スタイルも登録されてるので一括変更も簡単にできます。
コンポーネントをそのまま使って画面を作ったら親コンポーネントを修正するだけで作成したページのデザインも変わるのが便利です。
Bootstrap4対応の無料テンプレート
こちらはBootstrap4のテンプレート。
1つ前のバージョンですが、今もよく使われるBootstrap4のUIKit。
コンポーネントだけでなくアイコンも揃ってるのでBootstrap4でUI作るならこれを使いましょう。
FigmaのLPテンプレート
Figmaで使えるLPテンプレートはブロックを組み立てるだけで簡単にレイアウトが作れるテンプレートがおすすめ。
こちらのテンプレートでは150以上のUIコンポーネントを使ってブロックのように組み立てるだけで簡単にレイアウトを構築できます。短時間に複数パターンのLPを作成できるため、LPを量産したいときにおすすめ。
Figmaのデザインファイルに加えてBootstrap5で作成されたHTMLファイルも付属しています。
FigmaのWebデザインテンプレート
FigmaのWebデザインテンプレートは会社のホームページやポートフォリオサイト、ブログなど一般的なWebサイトに対応したコンポーネントやページが用意されています。
とりあえずホームページを作りたいときはこのようなデザインテンプレートを選ぶのがおすすめです。
コーポレートサイト向けテンプレート
会社のホームページのデザインを作る場合はこちらのようなコーポレートサイト向けのデザインテンプレートを使いましょう。
Silicon - Multipurpose Business
トップページはもちろん、Aboutページ、事業内容を表示するサービスページ、ブログなど基本的なデザインが全て揃っています。
ポートフォリオサイト向けテンプレート
ミニマルデザインなポートフォリオサイトを作るならこちらのデザインテンプレートがおすすめ。
Rhye – Photography & Portfolio Figma Template
トップページだけでなくブログやプロダクトページ、プロフィールページなど様々なページテンプレートが揃っています。
UIコンポーネントも多数用意されいるのでコンポーネントをペタペタ配置していくだけで簡単にポートフォリオを作成できます。
FigmaのECサイト向けテンプレート
ECサイト向けのデザインテンプレートでは再利用できるUIだけでなくShopifyなどのシステムに対応したデザインを選びましょう。
こちらはシンプルでモダンなデザインのEコマースサイト向けテンプレートです。
Uomo - Modern & Multipurpose eCommerce Figma Template
ファッションや家電、スポーツ、アウトドアなどどんなカテゴリのショップでも作れます。
Shopifyのページ構成やレイアウトに対応しているので、Shopifyでショップを作る場合にもおすすめです。
Figmaで使える管理画面テンプレート
管理画面向けにデザインされたテンプレートでは、一般的によくあるサイドメニューやデータテーブル、グラフなどのUIが揃っているのでプロトタイプとしても便利。
FigmaならそのままReactのコードに変換してVSCodeにコピーすることもできます。
Vuexy
まずはこちら。ダッシュボード向けのUIコンポーネントが多数登録されていて。ドラッグ&ドロップで画面を作成していくことができます。
Vuexy – Figma Admin Dashboard Builder
あらかじめ用意された画面レイアウトを使ったり、ベースレイアウトにコンポーネントを配置していくこともできます。
Rocketboard
こちらはスッキリとしたデザインでシンプルな管理画面ページをデザインできるテンプレート。
Vuexy – Rocketboard – Admin Dashboard & UI Kit
グラフだけでなく、ECサイト向けの管理画面やカレンダー、メール、Slackのようなチャット、ファイルマネージャなど様々な管理画面に対応しています。
ダークモードにも対応しているので黒い画面の実装が必要な場合もこれ1本で作ることができます。
FigmaのアプリなどのUIデザインテンプレート
こちらはアプリのUIデザインコンポーネントが大量に使えるテンプレートです。
Uixgami | Multipurpose App UI Kit
ログイン画面からECサイト、チャット、カレンダー、カメラなど様々なコンポーネントが用意されています。
デザインはスッキリとシンプルな感じなのでどんなアプリにも活用できるテンプレートデザインになっています。
まとめ
Figma向けテンプレートはワイヤーテンプレートから管理画面に最適化されたもの、スマホのUIが大量に詰め込まれたものなど色々あるので用途に合わせて選んでみてください。
とくにECサイトのテンプレートは使用しているシステム(Shopifyなど)にあったものを選ぶことでデザインからテーマに移植しやすくなります。