アセットパネルを使用して、プロジェクトのアセットとシンボルを管理します。

アセットパネルを使用したアセットの簡単な管理

アセットパネルを使用して、プロジェクト内のすべてのアセットを管理できます。

アセットパネルには、プロジェクトから追加したアセット(カラー、グラデーション、文字スタイルなど)が表示されます。XD で作成するシンボル(特殊なリンクアセット)も表示されます。

アセットパネルを開くには、ツールバーで をクリックするか、Command + Shift + Y(Mac)または Ctrl + Shift + Y(Windows)をクリックします。

アセットパネル
アセットパネル

A. カラー B. 文字スタイル C. シンボル D. アセットを追加 E. 不明のまたは無効化されたフォントを示すアイコン 

アセットの追加と削除

アセットパネルにカラーとグラデーション(線形または放射状)を追加する方法:アートボード上のオブジェクトまたはオブジェクトグループを選択し、アセットパネル内の「カラー」の横にある「+」アイコンをクリックします。

アセットパネルに文字スタイルを追加する方法:アートボード上のテキストまたはテキストボックスを選択し、アセットパネル内の文字スタイルの横にある「+」アイコンをクリックします。

アセットパネルからアセットを削除する方法:アセットパネル内のアセットを選択し、右クリックするか(Windows)、Ctrl キーを押しながらクリックして(Mac)、コンテキストメニューから「削除」を選択します。

アートボードまたはアートボードグループを選択し、「+」アイコンをクリックして、アートボードのすべてのカラーや文字スタイルをアセットパネルに追加することもできます。

注意:

アセットパネルに追加したカラー、グラデーション、文字スタイル、シンボルは、アートボードからアセットを削除した場合でもアセットパネルに残るため、次に必要になったときにアセットを再利用することができます。

アセットのラベル付け

Adobe XD ファイル内のアセットにカスタムラベルを追加できます。アセットパネルで、リストビューに切り替え、ラベルをクリックして名前を変更します。例えば、カラーの名前を HEX 値からタイトル背景色にカスタマイズすることができます。

シンボルの名前を変更すると、変更がわかりやすいようにレイヤーパネルのシンボルのすべてのインスタンスに適用されます。

Adobe XD では、ラベルに顔文字を追加することもできます。

アセットのラベル付け
アセットのラベル付け

アセットパネルのカラーを適用する

アクティブな XD ドキュメント内のオブジェクトを選択し、次のいずれかの操作を実行します。

  • アセットパネルでカラーをクリックするか、カラーを右クリックして「塗りとして適用」を選択します。
  • 線(境界線)のカラーを適用するには、アセットパネルでカラーを右クリックし、「境界線として適用」を選択します。

アセットパネルの文字スタイルを適用する

アートボードのテキストオブジェクトを選択します。アセットパネルで、文字スタイルをクリックします。

アセットパネルでのエレメントの並べ替え

カラー、文字スタイル、シンボルなどのアセットをプロジェクトで並べ替えできます。頻繁に使用するアセットをリストの上に移動するか、グループとしてこれらを並べ替えることができます。

アセットパネルでのエレメントの並べ替え
アセットパネルでのエレメントの並べ替え
  1. アセット」パネルで、アセットをクリックしてマウスボタンを押し続けて、パネルでアセットをドラッグします。

  2. パネルで複数のアセットを移動するには、Ctrl(Win)または command(Mac)を押したまま、アセットを複数選択します。

シンボルの使用

シンボルは、ドキュメントのアートボード間で何度でも使用できるオブジェクトです。プロジェクトで使用されるシンボルのインスタンスはすべてリンクされます。つまり、あるインスタンスに対しておこなわれた更新は、他のすべてのインスタンスに即座に反映されます。

オブジェクトをシンボルに変換するには、次のいずれかの操作を実行します。

  • オブジェクトを右クリックし、「シンボルにする」を選択します。
  • オブジェクトを選択し、Command + K キー(Mac)または Ctrl + K キー(Windows)を押します。
  • Mac の場合、オブジェクトを選択し、オブジェクトシンボルにするを選択します。
  • オブジェクトを選択し、シンボルライブラリで「+」をクリックします。
シンボルライブラリ。「+」をクリックし、選択したオブジェクトをシンボルにして、ライブラリに追加します。
シンボルライブラリ。「+」をクリックし、選択したオブジェクトをシンボルにして、ライブラリに追加します。

シンボルの編集

シンボルの編集モードに入るには、シンボルをダブルクリックします。このモードでは、シンボルは太い境界線で示されます。スタイル、サイズ、シャドウまたは位置を変更して、すべてのリンクされたインスタンスにこれらの変更が反映されていることを確認します。

シンボルがオブジェクトのグループである場合、シンボルの編集モードで、グループ内のすべてのオブジェクトを編集できます。 

シンボルライブラリからシンボルを削除するには、シンボルを右クリックし、「シンボルを削除」を選択します。

シンボルの再利用

シンボルを再利用するには、シンボルをシンボルライブラリからアートボードにドラッグします。または、1 つのシンボルをアートボード内で、またはあるアートボードから別のアートボードにコピー&ペーストします。シンボルのすべてのリンクされたインスタンスが、緑の境界線で示されます。シンボルを複数の XD ドキュメント間でコピー&ペーストすることもできます。 

他のインスタンスに影響を与えずに特定のシンボルインスタンスのスタイルを変更するには、そのインスタンスを右クリックして、「シンボルをグループ解除」を選択します。これで、処理を続行し、変更をおこなうことができます。

シンボルインスタンスのテキストまたはビットマップを変更する場合は、シンボルをグループ解除する必要はありません。詳しくは、シンボルインスタンスのテキストやビットマップをオーバーライドするを参照してください。

注意:

シンボルをグループ解除し、同じオブジェクトを使用してシンボルを再作成した場合、新しいシンボルが作成されます。

シンボルインスタンスのテキストやビットマップをオーバーライドする

オリジナルに影響を与えずに、シンボルのインスタンスのテキストやビットマップを変更することができます。オーバーライドでは、シンボルインスタンスごとに個別のテキストまたはビットマップを指定して、XD ドキュメント全体で同じシンボルを再利用できます。

オーバーライドは、デザインエレメントを共有するものの、異なるテキストブロックまたは画像を必要とするボタンなどのナビゲーションエレメントを作成するときに特に便利です。

シンボルインスタンスのテキストまたはビットマップをオーバーライドするには、テキストを選択して新しいテキストを入力するか、特定のシンボルインスタンスのビットマップを他のビットマップに置き換えます。

テキストまたはビットマップへの変更は、その 1 つのインスタンスにのみ発生します。元のシンボルには影響しません。

特定のシンボルインスタンスのテキストまたはビットマップの変更を、残りのリンクされたシンボルに反映するには、シンボルを右クリックし、「オーバーライドをプッシュ」を選択します。

シンボルの置き換え

シンボルのすべてのインスタンスを別のシンボルに置き換えることができます。アセットパネルからシンボルを別のシンボルにドラッグします。上部にドラッグすると、アイコンが、シンボルとそのすべてのインスタンスが置換されることを示す矢印に変わります。

シンボルのすべてのインスタンスを別のシンボルに置き換え
シンボルのすべてのインスタンスを別のシンボルに置き換え

リンクされたシンボルの使用

リンクされたシンボルを使用すると、ドキュメント間でシンボルを共有し、UI キット、スタイルガイド、およびステッカーシートの信頼できる単一のソースを保守できます。ソースドキュメントでリンクされたシンボルを更新した場合、別のドキュメントにソースのリンクされたシンボルをコピーしたときに必ず Adobe XD により他のデザイナーに通知されます。

リンクされたシンボルの使用方法については、リンクされたシンボルの使用を参照してください。

アセットとシンボルの検索とフィルター

アセットタイプに基づいたアセットのフィルター

Adobe XD のアセットパネルからアセットをフィルターできます。デフォルトでは、パネルにすべてのアセットが表示されています。アセットをタイプ別にフィルターするには、アセットパネルのドロップダウンの矢印を使用します。ドロップダウンの矢印をクリックし、アセットタイプ(カラー文字スタイルシンボル)のいずれかを選択します。選択に基づいて、特定のアセットタイプが一覧表示されます。

Adobe XD でのアセットのフィルター
Adobe XD でのアセットのフィルター

アセットの検索

アセットパネルでカラー、文字スタイルおよびシンボルを検索できます。カラーを検索するには、目的のカラーの 16 進コードを入力します。同様に、文字スタイルとシンボルを検索するには、アセット名と一致する文字列を入力します。検索文字列に基づいて、アセットパネルに結果が表示されます。

Adobe XD で 16 進コードを使用してカラーを検索
16 進コードを使用してカラーを検索

Adobe XD は、各セッションについて直近の 5 つの検索クエリーを記憶しています。これらのクエリーは検索履歴に表示されます。

アセットとシンボルをハイライト表示して見つける

Adobe XD を使用すると、エレメントをすばやくハイライト表示して見つけることができます。プロジェクト内のアセットが使用されている場所を見つけるには、アセットパネルでカラー、文字スタイルまたはシンボルを選択します。右クリックして、「カンバスでハイライト」を選択します。アセットがどこで使用されていても、エレメントがアートボード内でハイライト表示されます。

カンバス上のアセットをハイライト表示して見つける
カンバス上のアセットをハイライト表示して見つける

この機能は、Adobe XD ファイル内の特定のアセットまたはシンボルが使用されている場所を特定するのに便利です。 

シンボルがプロジェクトのどこにも使用されていない場合、このシンボルのコピーが使用されていないことを示すメッセージが表示されます。

アセットパネルでハイライト選択を反転する

Adobe XD では、選択したエレメントに使用されているアセットのハイライト表示を反転させることもできます。カンバス上のオブジェクトを選択して、エレメントに使用されているカラー、文字スタイルまたはシンボルをすばやく見つけることができます。

エレメントのハイライト表示を反転させるには、アートボードからエレメントを選択します。エレメントを右クリックして、次のいずれかのオプションを選択します。

  • カラーを選択アセットパネルで、使用されているカラーをハイライト表示します。
  • 文字スタイルを選択:エレメントで使用されている文字スタイルをハイライト表示します。
  • シンボルを選択:既にパネルに追加されているシンボルをハイライト表示します。

選択したエレメントに使用されているアセットがハイライト表示されます。

Adobe XD での選択したオブジェクトで使用されるアセットの表示
選択したオブジェクトで使用されるアセットの表示

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー