全部無料!Figmaで使える良質UIテンプレート50選(ウェブ&アプリ素材)

最終更新日:

無料で利用できるFigmaは、はじめての人にもオススメのUI作成ツールです。

 

ブラウザ上で利用できたり、他の人とリアルタイムで同時編集、プラグインによるカスタマイズなど、Figmaの基本的な使い方を押さえておけば、すぐに美しいUIデザインを作成できるのも人気の理由でしょう。

 

この記事では、Figmaで利用できる無料UIキット&テンプレート素材をまとめています。

 

ウェブサイトやスマホアプリの作成に必要なパーツを揃えた、UIキットを使えば、より素早く効率的にWebサイトやスマホアプリのデザインを作成できます。

 

各素材はカテゴリ別に分けています、今後も随時アップデート予定です。

 


コンテンツ目次

 

Figma 無料UIキット

 

Card Components Free Ui Kit for Figma

カード型デザインに特化したUIコンポーネントだけ、90種類以上を揃えた無料デザイン素材。

 

 

Figma iOS 15 Free Demo Version

AppleのiOS 15を完全再現したUIキットで、ドラッグ&ドロップのお手軽操作でデザインを完成させる、便利アイテムのひとつ。

 

 

Atro Mobile UI Kit

すぐにプロジェクトをはじめることができる、12のスクリーン画面をコンポーネント別にFigmaでデザインしたUIキット。SketchやAdobe XDにも対応。

 

 

Ticketapp Template

実際のアプリで利用しているUIデザインをまとめたプロ仕様のフリー素材。手軽に編集できオススメ。

 

 

Chat Dashboard Figma

シンプルでクリーンなデザインが特長のチャット機能を揃えたUIキット。

 

 

Social Food App : Free Figma UI Kit

ユーザー投稿型のレシピや検索UI,スプラッシュ画面、プロフィールページなどそのままモバイルアプリとして利用できる本格的UIキット。

 

 

JDD | JP + Ui Kit iOS]

日本語フォントに最適化された、モバイルアプリ向けUIキット。

 

 

NFT Market App

人気、注目ともに高まっているNFTアート作品販売サイト向けUIキット。

 

 

One Page Calendar Ui for 2022

2022年用にアップデートされた、使いやすいカレンダーUIデザインキット。

 

 

Nucleus UI

350以上のコンポーネントが揃ったフリーUIキットで、豊富なスクリーン画面サンプルも収録されており、はじめてのひともすぐにデザインを楽しむことができます。

 

 

 

Figma Web Design Kit – Call to Action Blocks

CTAセクションのみを集めたUIライブラリで、訴求力の高いデザインが揃います。

 

 

Neumorphic UI Kit – Tesla App

モバイルアプリを想定したUIキットですが、一緒にニューモーフィズム・スタイルをFigmaで再現できる基本ファイルがセットになったお得な素材。

 

 

Grada – Free Figma UI Kit

グラデーションカラーが特長のUIデザインキットで、ダークモードを検討しているときにいかがでしょう。入力フォームやタイポグラフィー、ヘッダー&フッター、各種ウィジェットが一式揃います。

 

 

Deca Kit for Figma

美しくデザインされた150を超えるコンポーネントを揃えたUIライブラリ。次のプロジェクトに必要なすべてのパーツ一式でどうぞ。

 

 

Material UI: React Components in Figma

React対応のUIコンポーネントをFigmaで完全再現したマテリアルデザイン。

 

 

Figma ウェブテンプレート

 

Responsive Portfolio Template

個人、フリーランス向けのポートフォリオ作成を手助けする、おしゃれなテンプレート集。FigmaとSketch,XDに対応しています。

 

 

CreateX – Website Templates for Figma on Envato Elements

 

 

Travel Agency Landing Page

旅行代理店向けウェブサイトを想定した、Figma用ウェブテンプレート。この他にも、さまざまな無料テンプレートが公開中です。

 

 

New Year Deal Web Page

2022年注目のノスタルジックな90年スタイルのWebテンプレート。太めのラインが特長です。

 

 

Brutalism UI Kit

デザイントレンドのひとつ「ブルータリズム」をつかったレイアウト70種類以上を揃えたフリーUIキット素材。メニューからヒーローイメージ、CTAなど各種パーツが揃います。

 

 

Marka Email Genearator

作成したフレームにコンポーネントを放り込むだけで、メール向けテンプレートを手軽にデザインできるフリー素材。

 

 

Bookshop Website

本、コミック販売Eコマースサイトを想定したウェブテンプレート素材。シンプルでカスタマイズしやすいのも嬉しいポイント。

 

 

Agency Landing Page on Envato Elements

モダンなイラストをつかった、シンプルで使い勝手の良いランディングページ向けWebテンプレート。Figmaの他、Adobe XDやPSD,AIファイルなど9つのファイル形式に対応。

 

 

Open – Tailwind CSS Landing Page Template

Tailwindフレームワークに対応した、ランディングページ用テンプレート。

 

 

Breakpoints

Figmaのなかでレスポンシブデザインの各レイアウトをアニメーション付きで再現、シェアできるフリーツール。

 

 

Figma スタイルガイド、スターターキット

Olson Brand Identity and Style Guide

統一感のあるスタイルガイドとブランド・アイデンティティを作成できる、合計32ページにおよぶ本格的なスターターキット。お好みの色に変更するだけですぐに使えるのもポイントです。

 

 

Free Figma Design System | UI styleguide

デザインシステムに必要なパーツをすべてそろえた基本セット、上記アイテムと一緒に検討したいスターターキット向け素材。

 

 

Figma Starter Kit 1.4

すぐにFigmaでプロジェクトをはじめることにフォーカスした基本デザイン素材を収録。面倒な入力フォームやコンポーネント化されたボタン、統一感のあるアイコンなど。

 

 

Button UI / Design System

通常時からホバー、アクティブなどそれぞれデザイン、コンポーネント化されたボタンUIデザイン素材。

 

 

Wireframe

ベーシックなUIデザインやワイヤーフレーム、プロトタイプを手軽に作成できるフリー素材。

 

 

Paper Wireframe Kit on Envato Elements

アイデアをとにかくかたちにする、統一感のあるワイヤーフレームを瞬時に作成できる素材。ヘッダーやブログなど細かくカテゴリ分けされており、レイヤーごと分かりやすく整理されています。

 

 

Wireframe in Figjam

Figma内で利用できるホワイトボード機能Figjam専用のワイヤーフレーム作成ツールキット。

 

 

iPhone 12 Clay Mockups for Sketch and Figma

粘土を固めたような丸いフォルムが特長のクレイ(英: Clay)スタイルのモックアップをFigmade作成。モバイルアプリのスクリーン画面に。

 

 

Figma アイコン素材

Material Design Icons

Figma Communityでも特に人気の高い、汎用性の高いシンプルなデザインが特長。35,000個のPNGとSVGアイコンをいつでも利用できます。

 

 

Roundd – App Logo Icon Maker

6,800種類以上の組み合わせができるアプリ向けロゴ作成キット。ワンクリックでエクスポートでき便利。

 

 

Website Page Builder Icons Set on Envato Elements

ウェブページビルダーで見かけるアイコンデザインが揃う、マニアックなベクターアイコン素材集。

 

 

3Dicons – Open SOurce 3D Icon library

120種類を超える超立体的でリアルな3Dアイコン素材を、Figma内でデザインに追加できます。

完全無料の3Dアイコン1,400個がパブリックドメインで登場 3D Icons

 

 

Social Network Icons 2022

各種ソーシャルネットワーク関連のロゴデザインをまとめたフリー素材、2022年版。

 

 

Crypto Logos

55種類を超える仮想通貨のロゴマークを集めたFigmaファイル。

 

 

Figma フローチャート

Flow chart kit 2.0

詳しいサイトマップ作成を目的としたフローチャート素材で、ドラッグ&ドロップの簡単操作のみで美しいワイヤーフレームが完成です。

 

 

Greyhound Flowcharts

そのまま使えるフローチャート200種類が揃っているので、サイトマップやワイヤーフレームの作成に重宝するアイテム。

 

 

Design Presentation Guide

プロジェクトを端的にまとめ、プレゼン資料として活用できるフリー素材。さまざまなUIコンポーエントがサイズやシェイプ別に揃います。

 

 

その他のFigma便利ツール、プラグインなど

 

上記で紹介したUIキットと一緒に活用したい便利アイテムも増えています。

 

美しいドロップシャドウを作成できるツール Beautiful Shadows。作成した影は、CSS box-shadowプロパティで出力できます。

 

 

Figmaで作成したファイルをボタン一発でウェブサイト化してしまう、魔法のようなツールFrom Figma to Site。これ系のサービス、増えてます

 

標準ではない機能もプラグインを利用することで、自分用に最強カスタマイズできるのもFigmaの強みです。

 

Figmaを最強デザインツールにする便利な無料プラグイン、ツールまとめ

 

Figmaのショートカット小技テクニックも活用し、さらに快適で高速なデザインも可能です。

 

参照元リンク : Handy Components by thepentool.co – Figma Community