アセットパネルを使用して、Adobe XD プロジェクトのアセットとコンポーネントを管理する方法を説明します。

XD でアセットを管理する方法

プロジェクトで使用するオブジェクトのカラー、グラデーション、文字スタイルなどのアセットを一元的に管理するには、アセットパネルにこれらを追加します。

アセットパネルには、XD で作成したコンポーネントも自動的に表示されます。コンポーネントについて詳しくは、コンポーネントを参照してください。

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

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

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

アセットの追加と削除

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

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

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

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

注意:

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

カラーをアセットとして追加、使用する

  1. カンバス上の関連オブジェクトを選択して、プロパティインスペクターから必要な色を適用します。
  2. カラーをアセットとして追加するには、アセットパネルの「カラー」の横にある「+」アイコンをクリックします。
  3. カラーをオブジェクトに適用するには、カンバス上のオブジェクトを選択し、以下のいずれかの手順に従います。
    • カラーの塗りを適用するには、アセットパネルでカラーをクリックするか、カラーを右クリックして「塗りとして適用」を選択します。
    • 線(境界線)のカラーを適用するには、アセットパネルでカラーを右クリックし、「境界線として適用」を選択します。
  4. アセットパネルでカラーを右クリックしてカラーを一元的に編集し、ドキュメント全体に適用されていることを確認します。

文字スタイルをアセットとして追加、使用する

  1. カンバス上のテキストを選択して、プロパティインスペクターからスタイルを適用します。
  2. スタイルをアセットとして追加するには、スタイルが設定されたテキストを選択し、アセットパネル内の「文字スタイル」の横にある「+」アイコンをクリックします。複数のスタイルが設定されたテキストを選択した場合は、「+」アイコンをクリックして、複数の文字スタイルを作成します。
  3. 文字スタイルをテキストに適用するには、カンバス上のテキストを選択し、アセットパネル内の文字スタイルをクリックします。
  4. 文字スタイルを選択して右クリックして編集し、表示してドキュメント全体に適用されていることを確認します。
文字スタイルをアセットとして追加
文字スタイルをアセットとして追加

アセットのラベル付け

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

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

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

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

アセットパネルでのアセットの並べ替え

アセットパネルでアセットを並べ替えることができます。頻繁に使用するアセットをリストの上に移動するか、グループとしてこれらを並べ替えることができます。

アセットパネルでのアセットの並べ替え
アセットパネルでのアセットの並べ替え
  1. アセットパネルで、パネル上にアセットをドラッグします。

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

見つからないフォントがある場合

XD ドキュメントにお使いのコンピューターにないフォントが含まれているとき、アセットパネル環境にないフォントのセクション内にそれらのフォントが一覧表示されるため、カンバス上でそれらをハイライト表示し、デザインで使用するかどうかを検討し、デザイン全体でそれらを置き換えることができます。Adobe Fonts ライブラリで入手可能な見つからないフォントについては、XD によって自動的にアクティブ化されるためシームレスなユーザーエクスペリエンスが実現されます。

Adobe フォントの使用

Adobe フォントの可能な限りシンプルな使用感を実現するために、コンピューターの操作なしで、Adobe Fonts ライブラリで入手できる環境にないフォントが自動的にアクティブ化されます。

オンラインであれば、Adobe Fonts(Creative Cloud サブスクリプションによってアクセス可能)で入手できる環境にないフォントがあるドキュメントを開くと、XD によりお使いのコンピューターでそれらが自動的にアクティブになります。

Adobe Fonts からアクティブ化されたフォントは、青いアクティブ化アイコンでハイライト表示されます。使用する準備ができると、ユーザーが特に操作することなくドキュメントで利用できるようになります。

注意:

様々なフォントが含まれた複数のドキュメントを読み込む場合は、Creative Cloud のフォントライブラリから使用しなくなったフォントを無効にしていることを確認してください。

Adobe Fonts の自動アクティブ化
Adobe Fonts の自動アクティブ化

A. 環境にないフォント B. フォントのアクティブ化 

環境にないフォントの特定と置き換え

ドキュメント内に環境にないフォントがある場合、アセットパネルの環境にないフォントの横に「!」が表示されます。環境にないフォントを置換するには:

  1. 環境にないフォントを右クリックして、「フォントを置き換え」を選択して、代わりのフォントを選択します。XD によって、カンバス上で推奨される代わりのフォントが自動的にプレビューされます。カンバスでハイライトオプションを使用して、置き換える前に、デザイン内でその不足したフォントをハイライト表示することもできます。
  2. OK」を選択して、カンバス上や定義された文字スタイル内のフォントを置き換えます。
環境にないフォントのインジケーター
環境にないフォントの特定、ハイライト表示、置き換え

A. カンバスでハイライト B. 環境にないフォントのインジケーター C. 環境にないフォントを右クリックしたときに表示されるポップアップ 
フォントを置き換えダイアログ
フォントを置き換えダイアログ

コンポーネントについてと、それを作成、編集、および削除する方法

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

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

  • オブジェクトを右クリックし、「コンポーネントにする」を選択します。
  • オブジェクトを選択し、command + K キー(Mac)または Ctrl + K キー(Windows)を押します。
  • Mac の場合、オブジェクトを選択し、オブジェクトコンポーネントにするを選択します。
  • オブジェクトを選択し、アセットパネル内のコンポーネントライブラリで「+」をクリックします。

プロジェクトで作成したすべてのコンポーネントは、アセットパネル内のコンポーネントライブラリに自動的に表示されます。

コンポーネントライブラリ。「+」をクリックし、選択したオブジェクトをコンポーネントにして、ライブラリに追加。
コンポーネントライブラリ。「+」をクリックし、選択したオブジェクトをコンポーネントにして、ライブラリに追加。

コンポーネントの編集と削除

コンポーネントのシャドウと背景ぼかしを変更するには、通常のオブジェクトとは異なり、アートボード上のコンポーネントをダブルクリックする必要があります。アートボード上のコンポーネントをダブルクリックすると、コンポーネントの境界線が太く表示されます。コンポーネントがオブジェクトのグループである場合、ダブルクリックすると、グループ内のすべてのオブジェクトを編集できるようになります。 

コンポーネントライブラリからコンポーネントを削除するには、コンポーネントを右クリックし、「コンポーネントを削除」を選択します。

コンポーネントを再利用する

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

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

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

注意:

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

コンポーネントインスタンスのテキストやビットマップをオーバーライドする

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

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

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

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

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

コンポーネントを置き換える

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

コンポーネントのすべてのインスタンスを別のコンポーネントに置き換える
コンポーネントのすべてのインスタンスを別のコンポーネントに置き換える

リンクされたアセットとは

リンクされたアセットを使用して、XD クラウドドキュメントで使用可能な 1 つまたは複数のデザインファイルのアセット(コンポーネント、カラーおよび文字スタイル)を使用することができます。リンクされたアセットは、リンクされたコンポーネントのワークフローを補完します。ソースドキュメントでリンクされたアセットを変更すると、そのリンクされたアセットを含むインスタンスにすべての更新が通知されます。その時点で、更新をプレビューして受け入れることができます。  

リンクされたアセットをアセットパネルに追加する方法

アセットパネルにアセットを追加するには、次のいずれかを実行します。

  • アセットパネルにアセットが設定されている場合は、アセットパネルの横にある「+」アイコンをクリックします。

または

  • 空のアセットパネルの場合は、「アセットをリンク」バッジをクリックします。

2 つのタブ(クラウドドキュメント共有されたアイテム)があるアセットをリンクウィンドウが開きます。「クラウドドキュメント」タブと「共有されたアイテム」タブでは、名前変更日作成日、およびサイズによってドキュメントを並べ替えることができます。 デザインプロジェクトに追加する XD クラウドドキュメントを選択します。

リンクされたアセット

ソースクラウドドキュメントのリンクされたアセットがアセットパネルに追加され、クラウドドキュメントの名前が付けられたフィルターの下に表示されます。例:CodeBrown_Tractiv_UI_kit

アセットパネルでフィルターを設定しているときに、クラウドドキュメントから新たに追加されたアセットをアセットブラウザーに表示する場合は、すべてのアセットビューに切り替えます。リンクされたドキュメントから、色、文字スタイル、およびコンポーネントが自動的にインポートされていることに注意してください。

リンクされたアセットの使用方法について詳しくは、リンクされたアセットの操作を参照してください。

リンクされたコンポーネント

リンクされたコンポーネントを使用すると、ドキュメント間でコンポーネントを共有し、UI キット、スタイルガイド、およびステッカーシートの信頼できる単一のソースを保守できます。ソースドキュメント内のリンクされたコンポーネントを更新して変更を保存すると、リンクしているドキュメント内でこの更新について通知されます。

リンクされたコンポーネントの使用方法については、リンクされたコンポーネントの使用を参照してください。

アセットパネルでアセットとコンポーネントを検索してフィルターする方法

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

デフォルトでは、アセットパネルに追加されたすべてのアセットが表示されます。アセットをアセットタイプ別にフィルターするには、アセットパネルの検索フィールドの横にあるドロップダウンの矢印を(検索フィールドが入力状態だと表示されません)クリックします。ドロップダウンで、アセットタイプをカラー文字スタイルコンポーネントのいずれかとして選択できます。

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

アセットの検索

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

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

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

アセットパネルを使用してカンバス上のアセットとコンポーネントを検索する方法

XD では、カンバス上のアセットをすばやく見つけることができます。アセットがカンバスのどこに配置されているか確認するには、アセットパネルでアセットを選択し、右クリックして、「カンバスでハイライト」を選択します。アセットは、カンバス上のどこに配置されていてもハイライト表示されます。

カンバス上のアセットを探してハイライト表示
カンバス上のアセットを探してハイライト表示

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

カンバス上で選択されたオブジェクトのアセットパネルでアセットをハイライト表示する

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

オブジェクトに使用されるアセットパネルでアセットをハイライト表示するには、アートボード上のオブジェクトを選択して右クリックし、次のいずれかのオプションを選択します。

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

選択したオブジェクトで使用されているアセットがハイライト表示されます。

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

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

リーガルノーティス   |   プライバシーポリシー