このレッスンでは、XDのアセットパネルを活用し、すべてのアートボードのスタイルを一括返還する方法を解説します。
アセットボードを確認する
画面左のアセットパネルを確認します。パネルが開いていない場合は、ツールバーの下にあるアセットアイコンをクリックします。アセットパネルには「カラー」「文字スタイル」「コンポーネント」の項目が表示され、プロジェクトで使用する共通のアセットを管理することができます。
カラーアセットを追加する
「Home」アートボード全体が選択された状態で、アセットパネルの「カラー」の右にある「+」をクリックします。これで、現在プロジェクト内で使用しているすべてののカラーとグラデーションがアセットパネルに追加されます。
グラデーションを一括変換する
このアートボードには、リピートグリッドで作成された3つの画像などが配置されており、画像の上にはグラデーションが適用されています。このグラデーションを変更します。アセットパネルの「カラー」に登録されているグラデーションを右クリックし、コンテキストメニューから「編集」を選択します。
グラデーションカラーピッカーが表示されたら、上部のグラデーションスライダーの右側のつまみをクリックして選択します。その状態で、不透明度スライダーのつまみを上にドラッグすると、画像に適用されたグラデーションの濃度が同時に変化します。さらに、別のアートボードに配置された画像のグラデーションも同時に変化します。つまり、同様の設定がされたプロジェクト内の全てのグラデーションが一度に変更されたことになります。
カラーを一括変換する
アセットパネルの「カラー」に登録されている紫を、別のカラーに変更します。紫を右クリックし、コンテキストメニューから「編集」を選択します。
カラーピッカーが開いたら、カラースライダーおよびカラーフィールドのつまみをドラッグして、色を変更します。アートボードの「Home」を見てみると、同じ紫が指定されていたロゴ、文字、ボタンメニューが、一度に変換されています。さらに、他のアートボードでも文字やアイコンに同じ紫が指定されていたため、これらのカラーも一斉に色が変換されます。
文字スタイルを追加する
アートボードの「route」をクリックし、アートボード全体が選択された状態で、アセットパネルの「文字スタイル」の右にある「+」をクリックします。これで、アートボード内のテキストに適用された文字スタイルがアセットパネルに登録されます。文字スタイルには、フォントの種類とウェイト、サイズ、カーニング、行送り、およびカラーの設定などが含まれます。
文字スタイルを一括変換する
文字スタイルを変更してみましょう。文字スタイルを一つ選んで右クリックし、コンテキストメニューから「編集」を選択します。編集画面が開いたら、フォントサイズを22ptから29ptに変更します。
同様の文字スタイルが適用されたプロジェクト内のすべてのテキストが同時に変更されます。
Adobe XDのアセットパネルは、アドビツールではおなじみの「カラースウォッチ」や「文字スタイル」、「コンポーネント」が1つのパネルに集約されたものです。アートボードが数十枚、数百枚にもなるような複雑なプロジェクトでも、このアセットパネルを使用することで制作時間を大幅に短縮できます。ぜひご活用ください。