無料で利用できるAdobe XD UIKit 15選

無料で利用できるAdobe XD UIKit 15選

  • このエントリーをはてなブックマークに追加

UI・UXデザインに欠かせないAdobe XD。そんなAdobe XDには予めAppleのiOSやGoogleのAndroid向けのUI Kitをダウンロードして利用できるようになっていますが、Web上には無料で配布されているUI Kitもあります。

そんなわけで、良さそうなAdobe XD用のUI Kitをピックアップしてみました。

関連 Adobe XDの共有機能を200%使い倒す方法

目次

  1. 凝ったデザインSocial Meet Up UI Kit FREE
  2. 綺麗・オシャレAtro Mobile UI Kit (Freebie)
  3. メンターサービスをイメージMentorMe UI Kit
  4. PC向けダッシュボードFREE Dashboard UI Kit
  5. スタイルガイドは参考にしたいPawtastic UI Kit
  6. EコマースなE-Comm Free UI Kit
  7. こんなアニメーションができる!Auto-Animate UI Kit
  8. 2バージョンPersional finance v2.1
  9. マップアプリなNavigo Transportation UI Kit FREE
  10. 旅行用にSky Travel UI Kit
  11. チュートリアルもあるTractiv UI Kit
  12. セキュリティアプリなVault UI Kit
  13. iPhoneやmacOsのUI Kit
  14. AndroidのUI Kit
  15. Adobeサイトの紹介コーナー

凝ったデザイン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のコーナーです。こちらも色々とチェックしてみてください。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter

Webデザイナー募集!

新着の記事

mautic is open source marketing automation