「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
Web上で手軽にデザインができるFigmaは、デザイナーの強い味方です。しかし、そのFigmaを使っても、制作に多くの時間がかかってしまうこともあります。
そんなとき、Figmaでの制作に使える画面デザインやレイアウト、パーツなどの要素を詰め込んだ「UIキット」はプロジェクトにかかる時間を節約し、作業を合理化してくれる便利な存在です。
そこで、今回はおすすめのUIキット10選を紹介します。
Figmaの使い方&便利機能11選。今すぐ使えるショートカットを一挙紹介
Workship MAGAZINE
目次
▲出典:UX Planet
オートレイアウトやダークモード、カラースタイルなどで開発されたバラエティ豊富なコンポーネントやバリアントを3,000点提供しているFigmaのUIキット。「The Frames X handbook」という94ページもあるハンドブックが付属しており、デザインの生産性を高め、拡張性の高いデザインシステムを構築する手助けをしてくれます。
▲出典:UX Planet
配色や基本的な要素の制作など、Figmaでの細かい作業をショートカットできるUIキット。900以上の構成要素が、プロジェクトに新鮮なアイデアを与えてくれます。
▲出典:UX Planet
ランディングページのデザインを作るのにおすすめのUIキット。1,000種類以上のUIブロックが、ページレイアウトの制作を手助けしてくれます。FigmaのUIキットだけでなく、テンプレートもセットで提供している点が魅力です。
▲出典:UX Planet
プロフェッショナルで現代的なデザインが特徴のUIキット。Figmaだけでなく、Sketchにも活用できます。
▲出典:UX Planet
個人のポートフォリオサイトに特におすすめのUIキット。フリーフォントを使用しており、23種類のレイヤー付きページテンプレートを提供しています。
▲出典:UX Planet
モックアップやプロトタイプを、Figmaでスピーディーに作成できるUIキット。モバイルアプリを作るのにおすすめです。
▲出典:UX Planet
現代的なモバイルスクリーンやコンポーネントを提供するUIキット。ハイエンドなアプリのデザインインスピレーションとして活用できます。7つのカテゴリーに分けられた、70種類以上のベクターベースのデザイン要素も魅力です。
▲出典:UX Planet
ボタンや画像、タブ、テキストフィールドなど、100種類近いワイヤーフレーム作成用パーツを無料で使用できるUIキット。多くのワイヤーフレーム作成ツールを開発してきた、経験豊富な作者が提供しています。
▲出典:UX Planet
丁寧に作られた、とくに初心者におすすめのUIキット。Figma Communityのファイルからいくつの要素を再利用し、おもにマーケティングウェブサイトのデザインを対象としています。6,000以上のコンポーネントとバリアント、150以上のカラースタイルとアイコンを提供しています。
▲出典:UX Planet
9,000以上の標準化された要素、バリアント、配色、アイコンを提供するUIキット。Figmaのベストプラクティスを活用して作られています。
今回紹介したコンポーネントは、どれもFigmaでの制作を効率化してくれます。自分のニーズにあったUIコンポーネントを選んで、プロジェクトに取り入れてみましょう。
(執筆:Shantanu Kumar 翻訳:Asuka Nakajima 編集:少年B 提供:UX Planet)
Figmaのホワイトボードツール『FigJam』。使い方や魅力を紹介します
Workship MAGAZINE
超便利なおすすめFigmaプラグイン19選【UXデザイナーが厳選!】
Workship MAGAZINE
無料で使えるFigmaテンプレート35選。Webデザイン/モバイルUI/デザインガイドライン作成におすすめ
Workship MAGAZINE