アセットパネルでアートボードのスタイルを一括変換する方法

Adobe XDのアセットパネルでは、プロジェクト内のすべてのアセットを管理することができます。アセット（カラー、文字スタイル、シンボルなど）をアセットパネルに追加することで、これらを簡単に繰り返し再利用できるだけでなく、追加されたアセットを変更するとプロジェクト全体に自動的に反映されるため、デザインの更新作業が大幅に効率化します。まずは、下の1分動画で制作工程を確認しましょう。

本チュートリアル内で使用する主な機能

アセットパネル（グラデーション、カラー、文字スタイルの追加および編集）

手順

手順1/4

ファイルを開き、アセットを追加する

Adobe XDを起動し、「ファイル」→「開く」から練習用サンプルファイル「global_changes.xd」を選択して「開く」をクリックします。ファイルが開くと、既にデザインされた複数のアートボードが表示されます。

画面左のアセットパネルを見てみましょう。（パネルが開いていない場合は、ツールバーの下にあるアセットボタンをクリックします。アセットパネルには「カラー」「文字スタイル」「シンボル」の項目が表示され、ここでプロジェクト内で使用する共通のアセットを追加、管理することができます。

まず、左から2つ目のアートボード「Home」をクリックし、アートボード全体が選択された状態で、アセットパネルの「カラー」の右にある「+」をクリックします。これで、現在プロジェクト内で使用している5つのカラーと1つのグラデーションがアセットパネルに追加されます。

注意：お使いのコンピューターに「Acumin Pro ExtraCondensed」のフォントがインストールされていない場合、ファイルを開く際にアラートが表示されます。Creative Cloudメンバーの方であれば、あらかじめTypekitにアクセスしてフォントを同期させておきましょう。

手順2/4

グラデーションを一括変換する

このアートボードには、リピートグリッドで作成された3つの画像が配置されており、画像の上にはグラデーションが適用されています。このグラデーションを変更してみましょう。アセットパネルの「カラー」に登録されているグラデーションを右クリックし、コンテキストメニューから「編集」を選択します。

グラデーションカラーピッカーが表示されたら、上部のグラデーションスライダーの右側のつまみをクリックして選択します。その状態で、不透明度スライダーのつまみを上にドラッグすると、3つの画像に適用されたグラデーションの濃度が同時に変化します。さらに、別のアートボードの「Welcom」と「Saved Trip」に配置された画像のグラデーションも同時に変化します。つまり、同様の設定がされたプロジェクト内の全てのグラデーションが一度に変更されたことになります。

手順3/4

カラーを一括変換する

今度はアセットパネルの「カラー」に登録されている紫を、別のカラーに変更します。紫を右クリックし、コンテキストメニューから「編集」を選択します。

カラーピッカーが開いたら、カラースライダーおよびカラーフィールドのつまみをドラッグして、紺色に変更します。
アートボードの「Home」を見てみると、同じ紫が指定されていたロゴ、文字、ボタンメニューが、一度に紺色に変換されます。さらに、「Saved Trip」と「Add To」のアートボードでも文字やアイコンに同じ紫が指定されていたため、これらのカラーも一斉に紺色に変換されます。

同様に他のカラーも試してみましょう。オレンジを赤に変更すると、全てのアートボード上で適用されているオレンジが一斉に赤に変換されます。

ヒント：アセットパネルに登録されているカラーが、カンバス上のどの部分で使用されているかを確認するには、任意のカラーを右クリックし、コンテキストメニューから「カンバスでハイライト」を選択します。そのカラーが指定されているすべてのテキストやオブジェクトがアートボード内でハイライト表示されます。

手順4/4

文字スタイルを一括変換する

アートボードの「Saved Trip」をクリックし、アートボード全体が選択された状態で、アセットパネルの「文字スタイル」の右にある「+」をクリックします。これで、アートボード内のテキストに適用された文字スタイルがアセットパネルに登録されます。文字スタイルには、フォントの種類とウェイト、サイズ、カーニング、行送り、およびカラーの設定などが含まれます。

文字スタイルを変更してみましょう。紺色の「Acumin Pro ExtraCondensed/Semibold 一 22pt」を右クリックし、コンテキストメニューから「編集」を選択します。編集画面が開いたら、フォントサイズを22ptから29ptに変更します。

同様の文字スタイルが適用されたプロジェクト内のすべてのテキストが同時に変更されます。

Adobe XDのアセットパネルは、アドビツールではおなじみの「カラースウォッチ」パネルや「文字スタイル」パネル、「シンボル」パネルが1つのパネルに集約されたものです。アートボードが数十枚、数百枚にもなるような複雑なプロジェクトでも、このアセットパネルを使用することで制作時間を大幅に短縮できます。ぜひご活用ください。