UI デザインキットへのアクセス

最終更新日 : 2023年3月15日

XD での UI キット、プラグインおよびアプリ統合の方法について説明します。

Adobe XD では、Apple iOS、Google マテリアル、Microsoft Windows およびワイヤフレーム向けの UI キットへのリンクが提供されます。 これらの UI キットには、オペレーティングシステム固有のグラフィック要素が含まれます。 例えば、iOS アプリをデザインする場合、Apple iOS キットの簡単に使用できる画面を利用してすぐに始めることができます。 XD では、デザイナー Marketplace や Dashboard UI キットなどのインスピレーションをもたらすキットにアクセスすることもできます。

XD は、デザイナーがデザイン製品の出発点として使用できるいくつかの UI キットを提供します。 

UI キットにアクセスするには、ファイル/UI キットを入手にアクセスします。

UI デザインキットへのアクセス
UI デザインキットへのアクセス

ダウンロードできるカスタム UI キットをいくつか用意しました。 必要に応じてダウンロードしてカスタマイズできます。これらのUIアクセスキットは、デザインプロセスでデザイナーの時間と労力を節約することができ、確立されたデザインガイドラインとの一貫性と準拠を確保するのに役立ちます。 

AEM:すべてのポート(イントラネット)

従業員のコミュニケーションを再考します。 Adobe Experience Manager のイントラネットプロジェクトの作成を今すぐ開始し、XD および AEM ワークフローを高速化します。

アンカーリンク

このキットを使用すると時間の節約になります。単一ページの web デザインの例がいくつか含まれており、すべてアンカーリンク、ホバー状態、および固定要素を使用して接続されています。

AEM:Sooth(eコマース)

直感的な eコマースエクスペリエンスを作成します。 Adobe Experience Manager の eコマースプロジェクトの作成を加速させ、XD および AEM ワークフローを高速化します。

AEM:WKND

Adobe Experience Manager のコアコンポーネントのみを使用して新しいサイトを構築します。

Vault

20 のカスタマイズ可能な画面、デザインスペック、およびエンドツーエンドのプロトタイプから選択します。

BFSI

金融機関向けの Adobe Experience Manager サイトのデザインを高速化します。

アニメーションチャート

複数のアートボードの相互作用とコンポーネントの状態のアニメーションチャートを作成します。

デザインシステム:Semantic

Semantic のユーザーインターフェイスから影響を受けたキットを使用して、独自のカスタムデザインシステムを構築します。

Boomerang(モバイルアプリ)

メッセージを送信し、親しい友人と写真やビデオを共有するためのモバイルアプリをデザインします。

コンポーネントステート

XD でコンポーネントのステートを使用して、ボタン、トグルスイッチ、読み込みシーケンスなどを作成する方法を探ります。

ダッシュボード

カスタマイズ可能なチャート、アイコン、コンポーネント、およびレイアウトを使用して、分析とデータの視覚化を簡素化します。

自動アニメーション

マイクロインタラクションやドラッグ効果などを作成するツールを使用して、アートボード全体で要素をアニメーション化します。

ワイヤーフレーム

これらの包括的なワイヤーフレーム UX キットを使用して、XD 専用のモバイルや web エクスペリエンスを作成します。

eコマース

完全にレイヤー化されたアートボード全体で 40 以上のカスタマイズ可能なコンポーネントを使用して、eコマースエクスペリエンスを作成します。

金融機関のデザインシステム

金融機関のエクスペリエンスのデザインシステムのクリエイティブを加速します。

プレゼンテーション

この Adobe XD テンプレートの 16 の動的なアニメーションスライドデザインで、テキストと画像の両方を作成してカスタマイズします。

Urgym(マーケティング)

これを使用して、ランディングページ、電子メールテンプレート、およびソーシャルメディアグラフィックを使用して、次のローンチに備えてキャンペーンアセットを準備します。

スマートウォッチ

iOS 用にカスタマイズ可能な、60 以上の画面、20 以上のコンポーネント、30 以上のアイコン、6 つのプロトタイプフローを備えたスマートウォッチアプリをデザインします。

watchOS

Apple Watch 用のアプリのデザインとプロトタイプ作成には、watchOS 5 のボタンやアイコンなどの様々なユーザーインターフェイスマテリアルを含むキットを使用します。

デジタルマーケティングデザイン

最新の仕様に基づいて、ソーシャルメディアプラットフォームやデジタル広告バナーのマーケティンググラフィックを作成します。

Altura(eコマース)

クリエイティビティをすぐに発揮するために、あらかじめデザインされたアセット、コンポーネント、レイアウトを使用して、家具の eコマースの web サイトをデザインします。

ワイヤーフレーム:手描き

モバイルおよび web 用の XD で、手描きのワイヤーフレームスケッチを模倣します。


関連リソース

ここでは、UI キットへのアクセス方法について説明しました。次は一歩進んで、ワークスペースの基本、XD のプラグイン、UI キットを使用してデザインを開始する方法をご確認ください。

アドビへのお問い合わせ

質問やアイデアを共有するには、 Adobe XD コミュニティにご参加ください。 皆様からのご意見や作品をお待ちしております。