ライターは「こたつ記事」と「取材記事」どちらに特化すべき？
- “文章下手”でも稼げるライターになる方法
- Webライター
- 連載
無料で使えるFigmaテンプレート35選。Webデザイン/モバイルUI/デザインガイドライン作成におすすめ
Adobe XDやSketchと並ぶ人気のデザインツール『Figma』。Figmaはさまざまな機能を無料で提供していますが、それでもデザインを0から作るのは簡単ではありません。
そこで今回は、Figmaでの作業を効率化してくれる、魅力的なテンプレートをご紹介します。
目次
FigmaのモバイルUIテンプレート
1. Nucleus UI Component Library
▲出典：speckyboy
ボタンなど300種類のデザイン要素と、30種類以上のワイヤーフレームを無料で提供しているライブラリ。このライブラリとFigmaさえあれば、かんたんにアプリをデザインできます。
2. Grada Figma UI Kit
▲出典：speckyboy
ダークモードに適応したUIキット。モバイルインターフェイスのデザインに必要な要素が揃っています。
3. Ticketapp Figma Template
▲出典：speckyboy
チケット売買のアプリを作るなら、このUIキットがおすすめです。チケット購入画面や座席指定などの画面デザインを提供しており、FigmaだけでなくSketchでも動作します。
4. Material-UI React Components in Figma
▲出典：speckyboy
Googleのマテリアルデザインをベースに、バー、アバター、バッジ、拡張パネルなどのコンポーネントを組み込んでいます。商用利用も可能。React Material UIと互換性があります。
Material-UI React Components in Figma
5. Chat Dashboard Figma Template
▲出典：speckyboy
このUIモバイルキットを使えば、簡単にメッセージ画面をデザインできます。カスタマイズもかんたんです。
6. Finance Wireframe Template for Figma
▲出典：speckyboy
支払い処理、銀行サービス、会計などの財務アプリに必要なデザイン要素を提供しています。個人・商用ともに利用可能です。
Finance Wireframe Template for Figma
7. Deca Kit for Figma
▲出典：speckyboy
美しいデザインのUIコンポーネントライブラリ。150種類以上のコンポーネントを提供しているため、ニーズにあったものが見つかるはずです。
8. Login Wallet Mobile UI Kit for Figma
▲出典：speckyboy
近年、注目が集まる、決済機能からポイントカード、会員証、クーポンまでアプリに格納できる「モバイルウォレット」。このUIキットを使えば、モバイルウォレットのログイン画面を簡単に作成できます。個人プロジェクト向けに無料で提供されており、色やフォントを自由に選べるのが特徴です。
Login Wallet Mobile UI Kit for Figma
9. Atro Mobile Figma UI Kit
▲出典：speckyboy
ミニマルで美しいUIキット。12種類のUIデザインを提供しており、アプリの画面を簡単に制作できます。キットには、アイコンなども含まれます。
10. iOS iPhone GUI
▲出典：speckyboy
Facebookのデザインチームがデザインを担当しており、検索バー、ドロワー、アバター、バッジなどの要素を提供しているUIキットです。
FigmaのWebデザインテンプレート
11. Responsive Portfolio Template
▲出典：speckyboy
レスポンシブ対応が可能なポートフォリオ用のFigmaテンプレート。デスクトップ版とモバイル版が含まれており、SketchとAdobe XDにも対応しています。
12. Call To Action Blocks Figma Templates
▲出典：speckyboy
Webサイトやアプリにとってもっとも重要な要素であるCTA。このテンプレートを使えば、コンバージョン率の高いCTAブロックを簡単に作成できます。
Call To Action Blocks Figma Templates
13. Wireframe Library for Figma
▲出典：speckyboy
ワイヤーフレーム、プロトタイプなどを作成するのにぴったりの、シンプルなFigmaプラグインです。
14. Breakpoints Responsive Figma Plugin
▲出典：speckyboy
Figmaのフレーム内でレスポンシブデザインのレイアウトのテストに活用できるプラグインです。テンプレートととしても活用できるでしょう。
Breakpoints Responsive Figma Plugin
15. Figma Web Dashboard & Statistics Template
▲出典：speckyboy
Webダッシュボードや統計パネルを作るなら、このプラグインが役に立つはずです。ライトモードとダークモード両方のテンプレートを提供しており、力強いデザインのダッシュボードを制作できます。
Figma Web Dashboard & Statistics Template
16. Bookshop Figma Website Template
▲出典：speckyboy
イラスト入りのバナーを提供している、書店やアート販売のWebサイトにぴったりのFigmaテンプレートです。個人のプロジェクトであれば無料で使用できます。
Bookshop Figma Website Template
17. Brutalist Web Kit for Figma
▲出典：speckyboy
ブルータリズムが好きな人におすすめのUIキット。70種類以上のワイヤーフレームを提供しており、お役様の声やサービス、チームメンバーなどのセクションが用意されています。個人・商用ともに無料で利用可能です。
Figmaのデザインガイドラインテンプレート
18. Figma Starter Kit
▲出典：speckyboy
フォーム、ボタン、ベーシックなアイコンといった基本的なデザイン要素を含む、Figmaのスターターキット。ライトバージョンとダークバージョンがあり、個人・商用ともに無料で利用可能です。
19. Product Design Kit for Figma
▲出典：speckyboy
デスクトップ製品を対象にした無料デザインキット。ワイヤーフレーム、UI、スタイルガイドを簡単に作成できます。フルカスタマイズ可能です。
20. Figjam Wireframe Templates
▲出典：speckyboy
Figmaのオンラインホワイトボードに必要なコンポーネントを提供している、無料のワイヤーフレームライブラリです。
21. Figma Design System UI Styleguide
▲出典：speckyboy
Figmaでデザインガイドラインを作成するなら、このキットを活用してみましょう。デザインガイドを作るために必要なパターン、タイポグラフィ、色、その他の設定を提供しています。
Figma Design System UI Styleguide
22. Eggplore Figma UI StyleGuide
▲出典：speckyboy
無料のシンプルなUIスタイルガイド。個人・商用ともに無料で利用可能です。
23. Button UI Design System for Figma
▲出典：speckyboy
この無料のUIデザインシステムを使えば、Figmaで簡単にボタンを作成できます。個人・商用ともに無料で利用可能です。
Button UI Design System for Figma
24. iPhone Clay Mockup Templates
▲出典：speckyboy
FigmaとSketch両方で使える、iPhone12のモックアップテンプレート。ミニマルなデザインを12種類提供しています。
Figmaのアイコンテンプレート
25. Dripicons Figma Library
▲出典：speckyboy
ワンクリックでFigmaアカウントにファイルを複製できます。個人・商用ともに無料で利用可能です。
26. Social Network Icon Collection 2022
▲出典：speckyboy
シンプルで美しいSNSアイコンを、モノクロとカラーでそれぞれ34種類提供しています。
Social Network Icon Collection 2022
27. 55 Crypto Logos
▲出典：speckyboy
仮想通貨やブロックチェーン関係のプロジェクトに取り組んでいるなら、このFigma用アイコンセットを使ってみましょう。もっとも人気が高い50サービス以上のロゴがテンプレートに含まれています。
28. Evericons for Figma
▲出典：speckyboy
あらゆるプロジェクトに活用できる、汎用性の高いアイコンが460種類セットで提供されています。個人・商用ともに無料で利用可能です。
29. Figma Social Icons
▲出典：speckyboy
SNSのアイコンをFigmaに取り入れたいなら、このセットがおすすめです。カスタマイズ可能なアイコンを100種類以上提供しています。個人・商用ともに無料で利用可能です。
30. Material Icons Figma Library
▲出典：speckyboy
あらゆるタイプのプロジェクトやプロトタイプに活用できるアイコンを、1000種類以上提供しています。個人・商用ともに利用可能です。
31. Figma Font Awesome 5 Icon Component Library
▲出典：speckyboy
Font Awesomeのアイコンをベースにしたアイコンを、1200種類以上提供しています。個人のプロジェクトのみ、無料で利用可能です。
Figma Font Awesome 5 Icon Component Library
32. Figma Entypo Icon Component Library
▲出典：speckyboy
Figmaのために作られた無料／有料のアイコンを、411種類提供しています。個人のプロジェクトのみ、無料で利用可能です。
Figma Entypo Icon Component Library
Figmaのフローチャートテンプレート
33. Greyhound Flowchart Templates for Figma
▲出典：speckyboy
このフローチャートテンプレートセットには、フローチャートやサイトマップのプロトタイプを作成するために必要な、200種類以上のカードが付属しています。個人・商用ともに無料で利用可能です。
Greyhound Flowchart Templates for Figma
34. Flow Chart Kit 2.0 for Figma
▲出典：speckyboy
サイトマップをデザインしたり、プロセスを簡単に可視化したりするのにぴったりのフローチャートキット。FigmaだけでなくSketchにも対応しており、個人・商用ともに無料で利用可能です。
35. Design Presentation Template for Figma
▲出典：speckyboy
UIデザインのプレゼンテーションをスピーディーに作成できるように設計されています。フルカスタマイズ可能なボタン、チャート、テキストブロックが付属しています。
Design Presentation Template for Figma
有料のFigmaテンプレート
ここまで無料で使用できるテンプレートをご紹介してきました。この項目では、有料登録が必要ですが、異なるバリエーションのテンプレートをダウンロードできるEnvato Elementsを紹介します。
1. Agency Landing Page
▲出典：speckyboy
このテンプレートを使えば、ランディングページを簡単に制作できます。カスタマイズが簡単で使いやすいレイヤーとアートボードを提供しています。
2. Createx Website Templates
▲出典：speckyboy
eコマース、教育、クリエイティブエージェンシー、デジタルマーケティング、そして建築サービスのための5種類のテンプレートを提供しています。
3. Paper Wireframe Kit
▲出典：speckyboy
プロトタイピングを効率化するのにぴったりの、シンプルなワイヤーフレームキットです。必要なコンポーネントを選択し、画面上にドロップするだけで、カスタマイズできます。
4. Dashboard UI Kit 2.0
▲出典：speckyboy
Webやモバイルアプリのダッシュボードを作成する必要があるなら、このUIキットがおすすめです。完璧にレスポンシブ対応したモバイル画面、チャート、グラフ、オンボーディング画面、アイコンセット、そして詳細なスタイルガイドを提供しています。
5. Website Page Builder Icon Pack
▲出典：speckyboy
ページビルダーのUIを作る必要があるなら、このアイコンセットが役に立つはずです。
Website Page Builder Icon Pack
6. Shopping Icons for Figma
▲出典：speckyboy
ネットショップやショッピングアプリ、Webサイトなどに活用できる60種類のアイコンをセットで提供しています。線の太さが調整可能で、FigmaだけでなくIllustratorやPhotoshopなどでも使用できます。
7. Computer and IT Figma Icons
▲出典：speckyboy
IT関連のプロジェクトには、このアイコンセットを活用してみましょう。60種類以上のアイコンを提供しています。
おわりに：Figmaのおすすめ機能＆プラグイン紹介記事
Figmaと無料のテンプレートを組み合わせれば、お金をかけることなくハイクオリティなUIを作成できます。
ニーズにあったテンプレートを見つけて、ぜひプロジェクトに活用してみてください。
（執筆：Paul Andrew 翻訳：Asuka Nakajima 編集：泉 提供元：speckyboy）
超便利なおすすめFigmaプラグイン19選【UXデザイナーが厳選！】
Workship MAGAZINE
Figmaの使い方＆便利機能11選。今すぐ使えるショートカットを一挙紹介
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Way back in October 2007, we initially launched Speckyboy as a small inspirational site for web designers.
この記事はspeckyboyからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
50 Free Web & Mobile UI Templates for Figma
