このレッスンでは、XDでのアセット管理やグローバルスタイル管理に便利なドキュメントアセットの使い方について解説します。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
色をアセットとして登録
Webデザインの素材のことをアセットと呼びます。XDでは、色、文字、コンポーネントの管理をドキュメントアセットと呼ばれるパネルで行います。ライブラリパネルにドキュメントアセットが表示されていない場合は、ライブラリ一覧に移動して、ドキュメントアセットを選択します。
アートボード上で登録したい色を選択し、ドキュメントアセットの「カラー」の横の＋アイコンをクリックすると色をアセットとして登録できます。複数の色を選択して、まとめて登録することもできます。アセット名は#から始まる6桁のHEXのカラーコードがデフォルトですが、任意の名前をつけることもできます。
登録した色を選択して右クリックし、「編集」をクリックするとカラーピッカーが開き、色を編集できるようになります。実際に色を編集すると、ドキュメント内で同じ色の使われている箇所が、すべて編集前の色から編集後の色に変更されます。
また、アートボード上のオブジェクトを選択してから、ドキュメントアセットに登録した色をクリックすると、選択したオブジェクトに登録した色を適用できます。
このように、ドキュメントアセットはデザイン全体の色を管理するのに便利です。
文字スタイルをアセットとして登録
文字スタイルもアセットとして登録できます。アートボード上のテキスト要素を選択し、ドキュメントアセットの「文字スタイル」の横の＋アイコンをクリックすると、フォントの種類、大きさ、色などの文字スタイルをアセットとして登録できます。
色と同様、登録した文字スタイルは、アートボード上のテキストに適用したり、デザイン全体の文字スタイルを一括編集するために利用できます。
コンポーネントを登録
アートボード上で任意のオブジェクトを選択し、ドキュメントアセットの「コンポーネント」の横の＋アイコンをクリックすると、オブジェクトがコンポーネントに変換され、アセットとして登録されます。オブジェクトを右クリックして、コンテキストメニューからコンポーネントに変換することもできます。この場合も、作成されたコンポーネントは自動的にドキュメントアセットに追加されます。
デザインで繰り返し使われるボタンなどのパーツをコンポーネントとして登録すると、パーツ単位でまとめて修正できるようになります。