無料で利用できるFigmaは、はじめての人にもオススメのUI作成ツールです。
ブラウザ上で利用できたり、他の人とリアルタイムで同時編集、プラグインによるカスタマイズなど、Figmaの基本的な使い方を押さえておけば、すぐに美しいUIデザインを作成できるのも人気の理由でしょう。
この記事では、Figmaで利用できる無料UIキット＆テンプレート素材をまとめています。
ウェブサイトやスマホアプリの作成に必要なパーツを揃えた、UIキットを使えば、より素早く効率的にWebサイトやスマホアプリのデザインを作成できます。
各素材はカテゴリ別に分けています、今後も随時アップデート予定です。
- 1. Webデザイン便利ツール
- 2. 配色ツール
- 3. デザインツール
- 4. プロトタイプ・アイコンツール
- 5. フォント・書体ツール
- 6. クリエイティブ・面白ツール
Figma 無料UIキット
Card Components Free Ui Kit for Figma
カード型デザインに特化したUIコンポーネントだけ、90種類以上を揃えた無料デザイン素材。
Figma iOS 15 Free Demo Version
AppleのiOS 15を完全再現したUIキットで、ドラッグ&ドロップのお手軽操作でデザインを完成させる、便利アイテムのひとつ。
すぐにプロジェクトをはじめることができる、１２のスクリーン画面をコンポーネント別にFigmaでデザインしたUIキット。SketchやAdobe XDにも対応。
実際のアプリで利用しているUIデザインをまとめたプロ仕様のフリー素材。手軽に編集できオススメ。
シンプルでクリーンなデザインが特長のチャット機能を揃えたUIキット。
Social Food App : Free Figma UI Kit
ユーザー投稿型のレシピや検索UI，スプラッシュ画面、プロフィールページなどそのままモバイルアプリとして利用できる本格的UIキット。
日本語フォントに最適化された、モバイルアプリ向けUIキット。
人気、注目ともに高まっているNFTアート作品販売サイト向けUIキット。
2022年用にアップデートされた、使いやすいカレンダーUIデザインキット。
350以上のコンポーネントが揃ったフリーUIキットで、豊富なスクリーン画面サンプルも収録されており、はじめてのひともすぐにデザインを楽しむことができます。
Figma Web Design Kit – Call to Action Blocks
CTAセクションのみを集めたUIライブラリで、訴求力の高いデザインが揃います。
モバイルアプリを想定したUIキットですが、一緒にニューモーフィズム・スタイルをFigmaで再現できる基本ファイルがセットになったお得な素材。
グラデーションカラーが特長のUIデザインキットで、ダークモードを検討しているときにいかがでしょう。入力フォームやタイポグラフィー、ヘッダー＆フッター、各種ウィジェットが一式揃います。
美しくデザインされた150を超えるコンポーネントを揃えたUIライブラリ。次のプロジェクトに必要なすべてのパーツ一式でどうぞ。
Material UI: React Components in Figma
React対応のUIコンポーネントをFigmaで完全再現したマテリアルデザイン。
Figma ウェブテンプレート
個人、フリーランス向けのポートフォリオ作成を手助けする、おしゃれなテンプレート集。FigmaとSketch，XDに対応しています。
CreateX – Website Templates for Figma on Envato Elements
旅行代理店向けウェブサイトを想定した、Figma用ウェブテンプレート。この他にも、さまざまな無料テンプレートが公開中です。
2022年注目のノスタルジックな90年スタイルのWebテンプレート。太めのラインが特長です。
デザイントレンドのひとつ「ブルータリズム」をつかったレイアウト70種類以上を揃えたフリーUIキット素材。メニューからヒーローイメージ、CTAなど各種パーツが揃います。
作成したフレームにコンポーネントを放り込むだけで、メール向けテンプレートを手軽にデザインできるフリー素材。
本、コミック販売Eコマースサイトを想定したウェブテンプレート素材。シンプルでカスタマイズしやすいのも嬉しいポイント。
Agency Landing Page on Envato Elements
モダンなイラストをつかった、シンプルで使い勝手の良いランディングページ向けWebテンプレート。Figmaの他、Adobe XDやPSD，AIファイルなど9つのファイル形式に対応。
Open – Tailwind CSS Landing Page Template
Tailwindフレームワークに対応した、ランディングページ用テンプレート。
Figmaのなかでレスポンシブデザインの各レイアウトをアニメーション付きで再現、シェアできるフリーツール。
Figma スタイルガイド、スターターキット
Olson Brand Identity and Style Guide
統一感のあるスタイルガイドとブランド・アイデンティティを作成できる、合計32ページにおよぶ本格的なスターターキット。お好みの色に変更するだけですぐに使えるのもポイントです。
Free Figma Design System | UI styleguide
デザインシステムに必要なパーツをすべてそろえた基本セット、上記アイテムと一緒に検討したいスターターキット向け素材。
すぐにFigmaでプロジェクトをはじめることにフォーカスした基本デザイン素材を収録。面倒な入力フォームやコンポーネント化されたボタン、統一感のあるアイコンなど。
通常時からホバー、アクティブなどそれぞれデザイン、コンポーネント化されたボタンUIデザイン素材。
ベーシックなUIデザインやワイヤーフレーム、プロトタイプを手軽に作成できるフリー素材。
Paper Wireframe Kit on Envato Elements
アイデアをとにかくかたちにする、統一感のあるワイヤーフレームを瞬時に作成できる素材。ヘッダーやブログなど細かくカテゴリ分けされており、レイヤーごと分かりやすく整理されています。
Figma内で利用できるホワイトボード機能Figjam専用のワイヤーフレーム作成ツールキット。
iPhone 12 Clay Mockups for Sketch and Figma
粘土を固めたような丸いフォルムが特長のクレイ（英: Clay）スタイルのモックアップをFigmade作成。モバイルアプリのスクリーン画面に。
Figma アイコン素材
Figma Communityでも特に人気の高い、汎用性の高いシンプルなデザインが特長。35,000個のPNGとSVGアイコンをいつでも利用できます。
6,800種類以上の組み合わせができるアプリ向けロゴ作成キット。ワンクリックでエクスポートでき便利。
Website Page Builder Icons Set on Envato Elements
ウェブページビルダーで見かけるアイコンデザインが揃う、マニアックなベクターアイコン素材集。
3Dicons – Open SOurce 3D Icon library
120種類を超える超立体的でリアルな3Dアイコン素材を、Figma内でデザインに追加できます。
各種ソーシャルネットワーク関連のロゴデザインをまとめたフリー素材、2022年版。
55種類を超える仮想通貨のロゴマークを集めたFigmaファイル。
Figma フローチャート
詳しいサイトマップ作成を目的としたフローチャート素材で、ドラッグ＆ドロップの簡単操作のみで美しいワイヤーフレームが完成です。
そのまま使えるフローチャート200種類が揃っているので、サイトマップやワイヤーフレームの作成に重宝するアイテム。
プロジェクトを端的にまとめ、プレゼン資料として活用できるフリー素材。さまざまなUIコンポーエントがサイズやシェイプ別に揃います。
その他のFigma便利ツール、プラグインなど
上記で紹介したUIキットと一緒に活用したい便利アイテムも増えています。
美しいドロップシャドウを作成できるツール Beautiful Shadows。作成した影は、CSS box-shadowプロパティで出力できます。
Figmaで作成したファイルをボタン一発でウェブサイト化してしまう、魔法のようなツールFrom Figma to Site。これ系のサービス、増えてます。
標準ではない機能もプラグインを利用することで、自分用に最強カスタマイズできるのもFigmaの強みです。
Figmaのショートカットや小技テクニックも活用し、さらに快適で高速なデザインも可能です。
参照元リンク : Handy Components by thepentool.co – Figma Community
