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

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

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

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

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

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

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

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

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

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

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

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

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

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

2バージョンPersional finance v2.1

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

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

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

旅行用にSky Travel UI Kit

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

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

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

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

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

iPhoneやmacOsのUI Kit

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

Android用UI Kit

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

Adobeサイトの紹介コーナー

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