この記事ではAdobe XDのアセット機能について紹介していきます。
Webデザインを制作する中で、文字のスタイルを何度も調節したり、同じ色の要素を作成したりする場面が多々あります。
要素を複製する際に、コピペ以外に便利で使いやすい機能がないか困った方も多いはずです。
今回のAdobe XDのアセット機能は、そんなデザインを効率的に作成したい方のお悩みを解決する便利機能なのです。
目次
アセット機能を学ぼう
それでは早速、アセット機能について学んでいきましょう。
アセット機能とは
アセット機能とは、デザインでよく使用する要素の見た目を保存して呼び出せる機能です。
アセット（asset）は、資産・財産・資源などの意味を持つ英単語です。
デザインを制作する上で保存して使用することができる資源のイメージを持っておきましょう。
保存したアセットを呼び出す
アセット機能を使用すると、要素のスタイルを短時間で効率的に変更することができます。
画像の例のように、要素のスタイルが瞬時に切り替わったことが確認できるかと思います。
アセット機能は先ほど説明した通り、デザインでよく使用する要素の見た目を保存しておき、使用したい時に適用させることができるのです。
アセット機能の使い方
次は、アセット機能の使い方を学んでいきましょう。
皆さんもAdobe XDを開きながら、実際に操作を体験してみてください。
アセットを保存する
アセットの保存の方法を見ていきましょう。
アセットパネルを開く
まずは、Adobe XD の「アセットパネル」を開きます。
ショートカットWindows：Ctrl Shift Y
Mac：Command Shift Y
要素を選択して、「+」アイコンをクリックする
次に、アセットに保存する要素を選択し、アセットパネルに保存します。
アセットパネルの保存したい項目の箇所で「+」アイコンをクリックしましょう。
今回は文字スタイルを登録するので、テキストを選択し、文字スタイルの+アイコンをクリックします。
上記のように、アセットパネルにアセットを登録していきます。
アセットを保存するもの
次に、アセットに保存するものを確認していきましょう。
Adobe XDのアセットに保存できるものには以下の項目があります。
カラー
「塗りの種類」や「カラーコード」などの、プロパティの「塗り」に関する項目が保存されます。
「+」アイコン以外にも、以下のショートカットでも色を登録できます。
ショートカットWindow：Ctrl Shift C
Mac：Command Shift C
文字スタイル
テキストのプロパティに関する項目が保存されます。
色やフォントサイズ以外にも、行間や字間などの項目も保存されるので覚えておきましょう。
「+」アイコン以外にも、以下のショートカットでも文字スタイルを登録できます。
ショートカットWindow：Ctrl Shift T
Mac：Command Shift T
コンポーネント
要素の形、グループなどの構造が保存されます。
「+」アイコン以外にも、以下のショートカットでもコンポーネントを登録できます。
ショートカットWindow：Ctrl K
Mac：Command K
ヘッダーやフッターなどのWebサイト内でよく使用するパーツは、このコンポーネントで保存しておきます。
コンポーネントは、別途記事を作成して詳しく解説するので、ここでは割愛させていただきます。
アセットを適用する
アセットを保存したら、あとは適用するだけです。
選択ツールで要素を選択して、適用したいアセットをクリックしてあげましょう。
アセット機能の特徴
次はアセット機能がどんな機能なのか、さらにイメージを膨らませていきましょう。
アセット機能の特徴を紹介していきます。
一括で要素のスタイルを変更する
アセット機能を使用すると、要素のスタイルを一括で変更することができます。
アセットを「右クリック」して「編集」をクリックする
アセットパネルでアセットを「右クリック→編集」を選択すると、アセットで保存した項目を変更することがきます。
あらかじめ保存してたアセットの要素を一括変更したい場合には、こちらから変更を行いましょう。
アセットを一括で編集する場合、どのようになるか確認していきましょう。
画像の例のように、該当するアセットの要素全てが変更されています。
アセットに登録されている色を適用した要素は、アセットパネルで一括変更することができるのです。
デザインの修正を行う際に、１つ１つ修正するのではなく、まとめて変更ができます。
なので、こまめにアセットを保存して制作すると、大掛かりな変更も短時間で効率的に行えます。
該当するアセットをハイライトさせる
アセットを「右クリック」して「キャンパスのハイライト」をクリックする
そして、もう１つ便利な特徴が、該当するアセットが適用されている要素をハイライト表示できる点です。
（青枠で囲われている要素がハイライト表示になっている要素です。）
コーディングを行う際に、フォントサイズを１つ１つ調べる必要はなく、アセット機能のハイライトを参考にスタイルを確認することが可能です。
デザイン制作を効率化しよう
ここまででAdobe XDのアセット機能について紹介してきました。
これからデザインを作成していく上でアセット機能は欠かせない機能です。 １つ１つ要素の見た目を整える必要がなくなるので、圧倒的に作業効率を高めることができます。
皆さんも、この後の課題作成で活用してみてください。
