UI・UXデザインに欠かせないAdobe XD。そんなAdobe XDには予めAppleのiOSやGoogleのAndroid向けのUI Kitをダウンロードして利用できるようになっていますが、Web上には無料で配布されているUI Kitもあります。 そんなわけで、良さそうなAdobe XD用のUI Kitをピックアップしてみました。 関連 Adobe XDの共有機能を200%使い倒す方法

凝ったデザインSocial Meet Up UI Kit FREE

Social Meet Up UI Kit FREE for Adobe XD https://www.behance.net/gallery/72907227/Meetio-UI-Kit 少し変わったサンプルデザイン、そして80以上の画面デザインがあり、しかもプレビュー時の画面の動きがけっこう凝った作りになっており、Adobe XDでここまでできるのかと思わせてくれます。 「Download .xd file」のリンクからダウンロードできます。

綺麗・オシャレAtro Mobile UI Kit (Freebie)

Adobe XD UIKit / Atro Mobile UI Kit (Freebie) https://gumroad.com/l/atro-freebie 綺麗、オシャレなデザインに仕上がってて、細かいところまで確認できるので勉強にもなります。プロトタイプのリンク設定はなされていないので、プレビューしたら十字キーで画面を動かして見ることができます。 「公平な価格を設定して下さい: $」の入力欄に「0」と入力、「これが欲しいです!」をクリックして進めてメアドの入力もすると、無料でダウンロードできます。

メンターサービスをイメージMentorMe UI Kit

MentorMe UI Kit for Adobe XD https://www.behance.net/gallery/65354875/MentorMe-UI-Kit-for-Adobe-XD メンターサービスを想定したアプリのUIデザインになっています。使用しているアイコンを一覧に並べている画面もあり、作業効率を上げるという意味では参考にしたいですね。

PC向けダッシュボードFREE Dashboard UI Kit

FREE Dashboard UI Kit for Adobe XD https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD Adobe XDはスマホ向けのアプリだけではなく、PC向けのUIデザインも行えます。サンプルはダッシュボードのデザインUI Kitとなっています。

スタイルガイドは参考にしたいPawtastic UI Kit

Pawtastic UI Kit for Adobe XD https://www.behance.net/gallery/62932019/Pawtastic-UI-Kit-for-Adobe-XD これもPC向けですが、UI Kit、サイドバーイメージ、プロトタイプ、ワイヤーフレームと、デザインするにあたり、各パーツのスタイルガイドをしっかりと作り込んでいるので修正や流れを把握しやすい作りになっているのではないかと思います。ぜひともチェックしておきたい制作ガイドです。

EコマースなE-Comm Free UI Kit

E-Comm Free UI Kit for Adobe XD https://www.behance.net/gallery/72486017/E-Comm-Free-UI-Kit-for-Adobe-XD Eコマースを想定したアプリのUI Kitサンプルです。スタイルガイド的なところでコンポーネントという箇所に様々なパーツサンプルがあります。

こんなアニメーションができる!Auto-Animate UI Kit

Auto-Animate UI Kit for Adobe XD https://www.behance.net/gallery/72065227/Auto-Animate-UI-Kit-for-Adobe-XD UI Kitデザインというよりも、Adobe XDで表現できるアニメーションのやり方をサンプルで見せてくれる感じです。プロトタイプ画面で、見たいサンプルの画面を選択してプレビューをクリックでアニメーションが見れます。

2バージョンPersional finance v2.1

Persional finance v2.1 https://gumroad.com/l/PERSONAL_FINANCE iPhone 6、7、8向けのサイズと、iPhone X向けの2サイズ向けのデザインが用意されています。 これも、「公平な価格を設定して下さい: $」の入力欄に「0」と入力、「これが欲しいです!」をクリックして進めてメアドの入力もすると、無料でダウンロードできます。

マップアプリなNavigo Transportation UI Kit FREE

Navigo Transportation UI Kit FREE for Adobe XD https://www.behance.net/gallery/60581581/Navigo-Transportation-UI-Kit-FREE-for-Adobe-XD マップを使ったアプリとなっていて、思わずサービスとして使いたくなりそうなになります。やはり雰囲気を感じさせるデザインは大事ですね。

旅行用にSky Travel UI Kit

Sky Travel UI Kit for Adobe XD https://www.behance.net/gallery/61170611/Sky-Travel-UI-Kit-for-Adobe-XD 旅行用のサンプルデザインUI Kitです。紫ベースのデザインとなっていて、ここは好みが分かれそうです。

チュートリアルもあるTractiv UI Kit

Tractiv UI Kit for Adobe XD https://www.behance.net/gallery/70103089/Tractiv-Adobe-XD-UI-Kit アクティビティをトラックするためのアプリをイメージしたUI Kitです。チュートリアルサンプルも表示される設計となっています。

セキュリティアプリなVault UI Kit

Vault UI Kit for Adobe XD https://www.behance.net/gallery/66784311/Vault-UI-Kit-for-Adobe-XD セキュリティ用のアプリのデザインUI Kitです。

iPhoneやmacOsのUI Kit

AppleのiPhoneやmacOs用UI Kit https://developer.apple.com/design/resources/ 紹介するまでもないですが、Appleの公式iPhoneやmacOs向けのUIKitが配布されています。dmgファイルで配布されているため、Windowsで開く場合には、7-Zipを使うといいでしょう。

Android用UI Kit

Android用のUI Kit https://material.io/archive/guidelines/resources/sticker-sheets-icons.html#sticker-sheets-icons-components こちらもおなじみのAndroidのUI Kitです。

Adobeサイトの紹介コーナー

AdobeのUI Kit紹介 https://www.adobe.com/jp/products/xd/resources.html#panel-3a Adobeさんが紹介しているUI Kitのコーナーです。こちらも色々とチェックしてみてください。

あわせて読みたい記事