FREENANCE Ad

無料で使えるFigmaテンプレート35選。Webデザイン/モバイルUI/デザインガイドライン作成におすすめ

Figma UI Templates
FREENANCE Ad

Adobe XDやSketchと並ぶ人気のデザインツール『Figma』。Figmaはさまざまな機能を無料で提供していますが、それでもデザインを0から作るのは簡単ではありません。

そこで今回は、Figmaでの作業を効率化してくれる、魅力的なテンプレートをご紹介します。

>>初心者向けFigmaの使い方解説はこちら

FigmaのモバイルUIテンプレート

1. Nucleus UI Component Library

Figma UI Templates

▲出典:speckyboy

ボタンなど300種類のデザイン要素と、30種類以上のワイヤーフレームを無料で提供しているライブラリ。このライブラリとFigmaさえあれば、かんたんにアプリをデザインできます。

Nucleus UI Component Library

2. Grada Figma UI Kit

Figma UI Templates

▲出典:speckyboy

ダークモードに適応したUIキット。モバイルインターフェイスのデザインに必要な要素が揃っています。

Grada Figma UI Kit

3. Ticketapp Figma Template

Figma UI Templates

▲出典:speckyboy

チケット売買のアプリを作るなら、このUIキットがおすすめです。チケット購入画面や座席指定などの画面デザインを提供しており、FigmaだけでなくSketchでも動作します。

Ticketapp Figma Template

4. Material-UI React Components in Figma

Figma UI Templates

▲出典:speckyboy

Googleのマテリアルデザインをベースに、バー、アバター、バッジ、拡張パネルなどのコンポーネントを組み込んでいます。商用利用も可能。React Material UIと互換性があります。

Material-UI React Components in Figma

5. Chat Dashboard Figma Template

Figma UI Templates

▲出典:speckyboy

このUIモバイルキットを使えば、簡単にメッセージ画面をデザインできます。カスタマイズもかんたんです。

Chat Dashboard Figma Template

6. Finance Wireframe Template for Figma

Figma UI Templates

▲出典:speckyboy

支払い処理、銀行サービス、会計などの財務アプリに必要なデザイン要素を提供しています。個人・商用ともに利用可能です。

Finance Wireframe Template for Figma

7. Deca Kit for Figma

Figma UI Templates

▲出典:speckyboy

美しいデザインのUIコンポーネントライブラリ。150種類以上のコンポーネントを提供しているため、ニーズにあったものが見つかるはずです。

Deca Kit for Figma

8. Login Wallet Mobile UI Kit for Figma

Figma UI Templates

▲出典:speckyboy

近年、注目が集まる、決済機能からポイントカード、会員証、クーポンまでアプリに格納できる「モバイルウォレット」。このUIキットを使えば、モバイルウォレットのログイン画面を簡単に作成できます。個人プロジェクト向けに無料で提供されており、色やフォントを自由に選べるのが特徴です。

Login Wallet Mobile UI Kit for Figma

9. Atro Mobile Figma UI Kit

Figma UI Templates

▲出典:speckyboy

ミニマルで美しいUIキット。12種類のUIデザインを提供しており、アプリの画面を簡単に制作できます。キットには、アイコンなども含まれます。

Atro Mobile Figma UI Kit

10. iOS iPhone GUI

Figma UI Templates

▲出典:speckyboy

Facebookのデザインチームがデザインを担当しており、検索バー、ドロワー、アバター、バッジなどの要素を提供しているUIキットです。

iOS iPhone GUI

FigmaのWebデザインテンプレート

11. Responsive Portfolio Template

Figma UI Templates

▲出典:speckyboy

レスポンシブ対応が可能なポートフォリオ用のFigmaテンプレート。デスクトップ版とモバイル版が含まれており、SketchとAdobe XDにも対応しています。

Responsive Portfolio Template

12. Call To Action Blocks Figma Templates

Figma UI Templates

▲出典:speckyboy

Webサイトやアプリにとってもっとも重要な要素であるCTA。このテンプレートを使えば、コンバージョン率の高いCTAブロックを簡単に作成できます。

Call To Action Blocks Figma Templates

13. Wireframe Library for Figma

Figma UI Templates

▲出典:speckyboy

ワイヤーフレーム、プロトタイプなどを作成するのにぴったりの、シンプルなFigmaプラグインです。

Wireframe Library for Figma

14. Breakpoints Responsive Figma Plugin

Figma UI Templates

▲出典:speckyboy

Figmaのフレーム内でレスポンシブデザインのレイアウトのテストに活用できるプラグインです。テンプレートととしても活用できるでしょう。

Breakpoints Responsive Figma Plugin

15. Figma Web Dashboard & Statistics Template

Figma UI Templates

▲出典:speckyboy

Webダッシュボードや統計パネルを作るなら、このプラグインが役に立つはずです。ライトモードとダークモード両方のテンプレートを提供しており、力強いデザインのダッシュボードを制作できます。

Figma Web Dashboard & Statistics Template

16. Bookshop Figma Website Template

Figma UI Templates

▲出典:speckyboy

イラスト入りのバナーを提供している、書店やアート販売のWebサイトにぴったりのFigmaテンプレートです。個人のプロジェクトであれば無料で使用できます。

Bookshop Figma Website Template

17. Brutalist Web Kit for Figma

Figma UI Templates

▲出典:speckyboy

ブルータリズムが好きな人におすすめのUIキット。70種類以上のワイヤーフレームを提供しており、お役様の声やサービス、チームメンバーなどのセクションが用意されています。個人・商用ともに無料で利用可能です。

Brutalist Web Kit for Figma

Figmaのデザインガイドラインテンプレート

18. Figma Starter Kit

Figma UI Templates

▲出典:speckyboy

フォーム、ボタン、ベーシックなアイコンといった基本的なデザイン要素を含む、Figmaのスターターキット。ライトバージョンとダークバージョンがあり、個人・商用ともに無料で利用可能です。

Figma Starter Kit

19. Product Design Kit for Figma

Figma UI Templates

▲出典:speckyboy

デスクトップ製品を対象にした無料デザインキット。ワイヤーフレーム、UI、スタイルガイドを簡単に作成できます。フルカスタマイズ可能です。

Product Design Kit for Figma

20. Figjam Wireframe Templates

Figma UI Templates

▲出典:speckyboy

Figmaのオンラインホワイトボードに必要なコンポーネントを提供している、無料のワイヤーフレームライブラリです。

Figjam Wireframe Templates

21. Figma Design System UI Styleguide

Figma UI Templates

▲出典:speckyboy

Figmaでデザインガイドラインを作成するなら、このキットを活用してみましょう。デザインガイドを作るために必要なパターン、タイポグラフィ、色、その他の設定を提供しています。

Figma Design System UI Styleguide

22. Eggplore Figma UI StyleGuide

Figma UI Templates

▲出典:speckyboy

無料のシンプルなUIスタイルガイド。個人・商用ともに無料で利用可能です。

Eggplore Figma UI StyleGuide

23. Button UI Design System for Figma

Figma UI Templates

▲出典:speckyboy

この無料のUIデザインシステムを使えば、Figmaで簡単にボタンを作成できます。個人・商用ともに無料で利用可能です。

Button UI Design System for Figma

24. iPhone Clay Mockup Templates

Figma UI Templates

▲出典:speckyboy

FigmaとSketch両方で使える、iPhone12のモックアップテンプレート。ミニマルなデザインを12種類提供しています。

iPhone Clay Mockup Templates

Figmaのアイコンテンプレート

25. Dripicons Figma Library

Figma UI Templates

▲出典:speckyboy

ワンクリックでFigmaアカウントにファイルを複製できます。個人・商用ともに無料で利用可能です。

Dripicons Figma Library

26. Social Network Icon Collection 2022

Figma UI Templates

▲出典:speckyboy

シンプルで美しいSNSアイコンを、モノクロとカラーでそれぞれ34種類提供しています。

Social Network Icon Collection 2022

27. 55 Crypto Logos

Figma UI Templates

▲出典:speckyboy

仮想通貨やブロックチェーン関係のプロジェクトに取り組んでいるなら、このFigma用アイコンセットを使ってみましょう。もっとも人気が高い50サービス以上のロゴがテンプレートに含まれています。

55 Crypto Logos

28. Evericons for Figma

Figma UI Templates

▲出典:speckyboy

あらゆるプロジェクトに活用できる、汎用性の高いアイコンが460種類セットで提供されています。個人・商用ともに無料で利用可能です。

Evericons for Figma

29. Figma Social Icons

Figma UI Templates

▲出典:speckyboy

SNSのアイコンをFigmaに取り入れたいなら、このセットがおすすめです。カスタマイズ可能なアイコンを100種類以上提供しています。個人・商用ともに無料で利用可能です。

Figma Social Icons

30. Material Icons Figma Library

Figma UI Templates

▲出典:speckyboy

あらゆるタイプのプロジェクトやプロトタイプに活用できるアイコンを、1000種類以上提供しています。個人・商用ともに利用可能です。

Material Icons Figma Library

31. Figma Font Awesome 5 Icon Component Library

Figma UI Templates

▲出典:speckyboy

Font Awesomeのアイコンをベースにしたアイコンを、1200種類以上提供しています。個人のプロジェクトのみ、無料で利用可能です。

Figma Font Awesome 5 Icon Component Library

32. Figma Entypo Icon Component Library

Figma UI Templates

▲出典:speckyboy

Figmaのために作られた無料/有料のアイコンを、411種類提供しています。個人のプロジェクトのみ、無料で利用可能です。

Figma Entypo Icon Component Library

Figmaのフローチャートテンプレート

33. Greyhound Flowchart Templates for Figma

Figma UI Templates

▲出典:speckyboy

このフローチャートテンプレートセットには、フローチャートやサイトマップのプロトタイプを作成するために必要な、200種類以上のカードが付属しています。個人・商用ともに無料で利用可能です。

Greyhound Flowchart Templates for Figma

34. Flow Chart Kit 2.0 for Figma

Figma UI Templates

▲出典:speckyboy

サイトマップをデザインしたり、プロセスを簡単に可視化したりするのにぴったりのフローチャートキット。FigmaだけでなくSketchにも対応しており、個人・商用ともに無料で利用可能です。

Flow Chart Kit 2.0 for Figma

35. Design Presentation Template for Figma

Figma UI Templates

▲出典:speckyboy

UIデザインのプレゼンテーションをスピーディーに作成できるように設計されています。フルカスタマイズ可能なボタン、チャート、テキストブロックが付属しています。

Design Presentation Template for Figma

有料のFigmaテンプレート

ここまで無料で使用できるテンプレートをご紹介してきました。この項目では、有料登録が必要ですが、異なるバリエーションのテンプレートをダウンロードできるEnvato Elementsを紹介します。

1. Agency Landing Page

Figma UI Templates

▲出典:speckyboy

このテンプレートを使えば、ランディングページを簡単に制作できます。カスタマイズが簡単で使いやすいレイヤーとアートボードを提供しています。

Agency Landing Page

2. Createx Website Templates

Figma UI Templates

▲出典:speckyboy

eコマース、教育、クリエイティブエージェンシー、デジタルマーケティング、そして建築サービスのための5種類のテンプレートを提供しています。

Createx Website Templates

3. Paper Wireframe Kit

Figma UI Templates

▲出典:speckyboy

プロトタイピングを効率化するのにぴったりの、シンプルなワイヤーフレームキットです。必要なコンポーネントを選択し、画面上にドロップするだけで、カスタマイズできます。

Paper Wireframe Kit

4. Dashboard UI Kit 2.0

Figma UI Templates

▲出典:speckyboy

Webやモバイルアプリのダッシュボードを作成する必要があるなら、このUIキットがおすすめです。完璧にレスポンシブ対応したモバイル画面、チャート、グラフ、オンボーディング画面、アイコンセット、そして詳細なスタイルガイドを提供しています。

Dashboard UI Kit 2.0

5. Website Page Builder Icon Pack

Figma UI Templates

▲出典:speckyboy

ページビルダーのUIを作る必要があるなら、このアイコンセットが役に立つはずです。

Website Page Builder Icon Pack

6. Shopping Icons for Figma

Figma UI Templates

▲出典:speckyboy

ネットショップやショッピングアプリ、Webサイトなどに活用できる60種類のアイコンをセットで提供しています。線の太さが調整可能で、FigmaだけでなくIllustratorやPhotoshopなどでも使用できます。

Shopping Icons for Figma

7. Computer and IT Figma Icons

Figma UI Templates

▲出典:speckyboy

IT関連のプロジェクトには、このアイコンセットを活用してみましょう。60種類以上のアイコンを提供しています。

Computer and IT Figma Icons

おわりに:Figmaのおすすめ機能&プラグイン紹介記事

Figmaと無料のテンプレートを組み合わせれば、お金をかけることなくハイクオリティなUIを作成できます。

ニーズにあったテンプレートを見つけて、ぜひプロジェクトに活用してみてください。

(執筆:Paul Andrew 翻訳:Asuka Nakajima 編集:泉 提供元:speckyboy

リンク先のURLを設定してください

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship