Adobe xdでのUIキットの使い方

Webデザインに興味がある人のために、Adobe XDのUIキットは新しいデザインプロジェクトに飛び出すための素晴らしい方法です。 これらのキットを使用すると、自分のWebサイトやアプリの設計に変更して使用できる便利なリソースにアクセスできます。

あなたがソフトウェアに不慣れで、Adobe XDでUIキットをどのように使うべきかわからないならば、あなたは正しい場所に来ました。 では、ソフトウェアにUIキットをインストールしてから、プロジェクトに含まれているリソースを使用する方法について説明します。

についても

Adobe Bridgeで写真を一括変換する方法

Adobe XDでUIキットをダウンロードする方法

まず、Adobe XDでUIキットをソフトウェア内からダウンロードする方法を見てみましょう。 以下の手順に従って始めてください。

ステップ1：ソフトウェアの左上隅にあるハンバーガーメニューボタンをクリックしてください。

ステップ2：メニューで、Get UI Kitsオプションまでスクロールし、次に利用可能なオプションの3つをクリックしてください。

この記事では、Google Material UIキットを選択します。 ただし、プロジェクトによっては、Apple iOSまたはMicrosoft Windowsのキットを選択できます。 これで公式のWebページが開き、そこからUIキットを無料でダウンロードできます。

手順3：次のWebページでAdobe XD UIキットを見つけて、システムにダウンロードします。

ステップ4： Adobe XDでダウンロードしたファイルを開くと、それぞれのプラットフォーム用のUIリソースを含む多数のアートボードが表示されます。

Ctrlキーを押しながらスクロールホイールを動かすと、個々のアートボードをすべて見ることができます。

代わりにWireframeをダウンロードしたい場合は、Get UI KitsメニューのWireframeオプションをクリックしてください。

また、Get UI KitsメニューのMore UI Kitsオプションをクリックして、アドビのWebサイトで追加のUIキットを探すこともできます。

Webサイトには、ヘッドアップディスプレイのように見える、この本当にクールなMovie Magic UIキットなど、いくつかの優れた選択肢があります。

UIキットのダウンロード方法がわかったので、プロジェクトでそれらを使用する方法を見てみましょう。

Adobe XDでUIキットを使用する方法

プロジェクトでUIキットを使用するには、次の簡単な手順に従ってください。

ステップ1：プロジェクトで使用したいUI要素を拡大して、そのタイトルをクリックして選択します。

ステップ2： Ctrl + Cショートカットを使って要素をコピーしましょう。

ステップ3：それからメニューから新しいAdobe XDプロジェクトを開きます。

ステップ4：ここでは、Ctrl + Vショートカットを使用してUI要素を貼り付けます。

この記事では、Google Material UIキットのMobile Dark要素を使用します。 この要素には、より多くのレイヤーを配置するのに役立つガイドが含まれていますが、使用したくない場合は、次の手順に従って簡単に削除できます。

ステップ5：ガイドを削除するには、左上隅にあるカギのアイコンをクリックして、Deleteを押します。 ガイドを使用してより多くのオブジェクトを要素に正確に配置する場合は、この手順を省略できます。

ステップ6： UIキットに戻って、このページに追加する別の要素を選択してください。 もう一度、要素のタイトルをクリックして、Ctrl + Cショートカットを使用してコピーします。

この記事のための基本的な乾杯を作成します。そのために、ダイアログの1つを使用します。

ステップ7：前の要素に新しい要素を貼り付けてから、ガイドに従って配置します。

ステップ8：トーストの各要素を編集するには、テキストボックスをダブルクリックしてから使用するテキストを入力します。 まず、乾杯のタイトルを変更しましょう。

次に、テキストボックスをダブルクリックして追加したい内容を入力して、本文の内容を変更します。

ボタンのテキストも同じ方法で変更できます。 テキストの編集が終わったら、テキストの色と不透明度を変更できます。 不透明度を変更するには、ツールバーの不透明度オプションの下にあるスライダを右に動かすだけです。

テキストの色を変更するには、[塗りつぶし]オプションの横にある四角形をクリックしてから、カラーピッカーから新しい色を選択します。

このように編集できるのは、テキストだけではありません。 ダイアログボックス内のほとんどすべての項目の色と不透明度を変更することもできます。これは、独自の配色を選択する場合に最適です。

結果に満足したら、先に進み、メニューの[名前を付けて保存]オプションをクリックするか、Shift + Ctrl + Sショートカットを使用してファイルを保存します。

についても

#グラフィックデザイン

グラフィックデザインの記事ページを見るにはここをクリック

UIキットを使用してデザインを完成させる

Adobe XDでUIキットをダウンロードして使用する方法がわかったので、すぐに素晴らしいデザインを作成し始めるでしょう。 これらのUIキットは間違いなく非常に便利で、各UI要素を設計することを心配することなくあなたがあなたのプロジェクトに直行するのを助けます。

次のステップ： Adobe XDでプロジェクトを完成させ、それをHTMLにエクスポートする方法がわからない？ 簡単なステップバイステップのチュートリアルについては、次の記事をチェックしてください。