Adobe XD でドキュメントアセットによる作業

XD でドキュメントアセットを管理する方法について説明します。

ライブラリのドキュメントアセットからは、デザインプロジェクトで使用するカラー、文字スタイル、コンポーネント、オーディオアセットを一元的に作成、管理および共有できます。

ドキュメントアセット

ドキュメントアセットを使用する理由

Richard は、デザインリーダーとして、クラウドベースのシステムでデザインアセットの作成と使用を標準化する作業に取り組んでいます。彼は、デザインシステムトレーニング全体のカラー、文字スタイル、コンポーネント、オーディオアセットを管理する方法について調査を進めています。

 

  • XD でのアセットの作成方法や管理方法について情報を収集しています。

 

  • XD でアセット管理システムを構築するための支援を必要としています。

以下では、Richard のような方を対象として、XD のドキュメントアセットの概要を説明し、使用を開始できるように支援します。

Adobe XD を初めてご使用ですか?

無償体験版アプリを入手

このアプリケーションの基本を学ぶ

XD を既に使用している場合

アプリケーションを更新

新機能のご紹介

この機能を試す

サンプルファイルを入手

.xdc、604KB

始める前に

必要に応じて、XD に関する以下の概念を確認してください。

ドキュメントアセットの追加

ドキュメントアセットパネルからデザインのスタイルとコンポーネントのキュレーションを始めるには、ツールバーのライブラリをクリックするか「Cmd + Shift + Y(Mac)」または「Ctrl + Shift + Y(Windows)」を押してから、「ドキュメントアセット」をクリックします。
ドキュメントアセットパネルでは、ドキュメント全体で再利用するか後でライブラリの一部として公開するカラー、文字スタイル、コンポーネント、またはオーディオを、次の手順に従って追加してください。

カラーを追加

カラーを追加

  • +」アイコンをクリックして、「カラー」とグラデーションを追加します。選択したオブジェクトに関連した、塗りつぶしと線カラーのテキストレイヤー、カラー、およびサブ範囲のスタイルが、XD によって抽出されます。

文字スタイルの追加

アセットへの文字の追加

  • +」アイコンをクリックして、「文字スタイル」を追加します。テキストレイヤーに適用されているすべてのスタイル(サブ範囲のスタイルを含む)が XD によって抽出されます。

コンポーネントの追加

アセットへのコンポーネントの追加

  • +」アイコンをクリックして、選択したオブジェクトをコンポーネントに変換します。カンバス上でコンポーネントを作成すると、XD から自動的にドキュメントアセットに追加されます。

オーディオの追加

アセットにオーディオを追加する

  • プロトタイプモードのプロパティインスペクターでプロトタイプに追加されたオーディオファイルは、自動的にドキュメントアセットに表示されます。

注意事項

  • ドキュメントアセットに影のカラーを追加することはできません。
  • 共通のプロパティを持つ文字スタイルはグループ化できません。 
  • オーディオファイルは、ドキュメントアセットからのみ削除できます。

  • プロトタイプモードのプロパティインスペクターから、オーディオファイルを追加できます。
  • オーディオファイルの名前を変更したり、並べ替えたりすることはできません。
  • クラウドドキュメントにリンクしているオーディオファイルは、リンクされません。 

ベストプラクティス

  • ドキュメントアセットの リストビューは、組織のニーズに応じて、アセット名の変更や並べ替えをおこなう場合に便利です。
    グリッドビュー は、サムネイルとアセットが大きなレンディションで表示されているため、アセットの再利用に最適です。
  • プリフライトチェックをおこなう場合は、ドキュメント内のすべてのアートボードを選択して、ドキュメントで使用されているすべてのカラーと文字スタイルを抽出します。

ドキュメントアセットの適用と再利用

これで追加されたアセットをドキュメントアセットから表示できるようになりました。アートボード上でオブジェクトやオブジェクトグループを選択し、カラーや文字スタイルをクリックして選択範囲に適用できます。

デザインで 1 つ以上のコンポーネントを使用するには、ドキュメントアセットパネルでそれらを選択し、キャンバスにドラッグします。これらのコンポーネントのインスタンスはキャンバス上に作成されます。

カラー、文字スタイル、コンポーネントを再利用するには、次の手順に従います。

カラーの再利用

カラーの再利用

  1. 1 つのオブジェクトまたはテキストレイヤーを選択し、カラースウォッチをクリックして、単色の塗りつぶしカラーとして適用します。
  2. 複数のオブジェクトを選択し、選択範囲に 1 つのカラーまたはグラデーションを適用することもできます。
  3. またはドキュメントアセットでカラースウォッチを右クリックし、「線カラーを適用」を選択して線カラーとして適用したり、16 進値をコピーして再利用したりできます。

文字スタイルの再利用

文字スタイルの再利用

  1. テキストレイヤーまたはテキストの一部を選択し、文字スタイルをクリックして文字スタイルを適用します。
  2. 複数のオブジェクトを選択して、選択範囲全体に文字スタイルを適用することもできます。

複数コンポーネントの再利用

複数コンポーネントの再利用

  1. ドキュメントアセットからカンバスにコンポーネントをドラッグ&ドロップします。
  2. 複数のオブジェクトを選択し、カンバス上で複数のコンポーネントをドラッグすることもできます。
  3. コンポーネントをドラッグするときに、別のコンポーネントインスタンスにカーソルを合わせて入れ替えることができます。 

ベストプラクティス

  • 使用するカラーや文字スタイルの統一を図るため、カラーと文字スタイルを保存した後は、選択したオブジェクトに対して必ずドキュメントアセットからカラーと文字スタイルを適用します。

ドキュメントアセットの編集

アセットを追加して再利用した後は、ドキュメントアセットでアセットを編集することで、ドキュメント全体に一括で変更を適用できます。これにより、ドキュメント全体のカラーや文字スタイルを効率的に変更できます。 

ドキュメントのアセットを編集するには、次の手順に従います。

カラーの編集

カラーの編集

  • カラースウォッチを右クリックし、「編集」を選択して、ドキュメント全体のカラー値を変更します。
  • そのカラーを使用しているカンバス上のすべてのオブジェクトがリアルタイムで更新されます。これは、全体にわたってカラーの変更をプレビューし、編集をおこなう場合に便利です。

文字スタイルの編集

文字の編集

  • 文字スタイルを右クリックし、「編集」を選択すると、ドキュメント全体でそのスタイルを変更できます。
  • そのスタイルを使用しているカンバス上のすべてのテキストレイヤーが、リアルタイムで更新されます。

複数コンポーネントの編集

コンポーネントの編集

  • カンバス上またはドキュメントアセットパネルでコンポーネントを右クリックし、「メインコンポーネントを編集」を選択して、カンバス上のメインコンポーネントをハイライト表示するか、削除されている場合は再作成します。
  • メインコンポーネントに加えられた変更は、他のコンポーネントインスタンスに反映されます。

 

注意事項 

  • 複数のオブジェクト(100 個以上)で使用されるカラーまたは文字スタイルを編集した場合、パネルでの変更内容がカンバス上のすべてのオブジェクトに反映されるまでに時間がかかる場合があります。

ベストプラクティス

  • 編集がデザインに及ぼす影響を判断するには、ドキュメントアセットでアセットを編集する前に、「カンバスでハイライト」オプションを使用します。
  • 文字スタイルのカラーを編集するには、カラー値を変更した後、グローバルなカラー値を変更して文字スタイルを保持します。
  • リンクされたカラーまたはリンクされた文字スタイルを更新すると、適用対象のリンクされたカラーまたは文字スタイルを持つオブジェクトのみが更新されます。

ドキュメントアセットの管理と整理

アセットを表示したり並べ替えたりするには、ドキュメントアセットで、グリッドビューと リストビューを切り替えます。

  • グリッドビュー:サムネイルの表示に最適化され、アセットを視覚的に識別できます。
  • リストビュー:整理がしやすいように最適化され、すべてのアセットの名前を表示して並べ替えることができます。

どちらのビューでもアセットを追加、再利用、編集し、検索を使用してアセットを検索したり、パネルを特定のカテゴリーでフィルターすることができます。

ドキュメントアセットでアセットを追加し再利用した後、アセットを整理して管理することもできます。 

アセットの削除、ハイライト、名前の変更

削除とハイライト

  • ドキュメントアセットからカラー、文字スタイル、コンポーネント、またはオーディオを削除するには、右クリックして「削除」を選択します。パネルからコンポーネントを削除すると、そのインスタンスがグループ解除され、カンバス上の通常のオブジェクトに戻ります。
  • 右クリックして「カンバスでハイライト」を選択すると、特定のカラーや文字スタイルを使用しているすべてのオブジェクト、または特定のコンポーネントのインスタンスを確認できます。カンバス上で任意のオブジェクトまたはコンポーネントのインスタンスを選択し、コンテキストメニューを使用すると、ドキュメントアセットでそのカラー、文字スタイル、またはコンポーネントを表示できます。
  • 右クリックしてアセットの名前を変更できます。また、リストビューに切り替えて、すべてのアセットの名前を変更することもできます。

アセットにカーソルを合わせる

アセットをポイントする

アセットのサムネール上にカーソルを合わせると、次の情報が表示されます。

  • カラー:16 進値またはカスタムカラー名が表示されます。
  • グラデーション:グラデーション値の分岐点が表示されます。文字スタイルの場合、追加の文字プロパティ(行の高さなど)はサムネイルに表示されません。
  • コンポーネント:カンバス上にあるそのコンポーネントのインスタンス数が表示されます。

アセットの表示

アセットの表示

リストビューでは、各カテゴリー内のすべてのアセットの名前が表示されます。

アセットの並べ替え

アセットの並べ替え

リストビューで、各カテゴリー内のアセットをドラッグして並べ替えることができます。

注意事項

  • リストビューの使用中は、コンポーネントの大きなプレビューは表示できません。
  • アセットを並べ替えて、様々なカテゴリーに分類できます。 

ベストプラクティス

  • ドキュメントアセットのフィルターを使用すると、特定のカテゴリーまたはアセットのソースのみをフィルターして表示できます。
  • 変更がデザインにどのような影響を与えるか不明な場合は、「カンバスでハイライト」を使用して、ドキュメント全体でそのアセットのインスタンスを表示できます。
  • 未使用のコンポーネントを特定するには、カンバス上のすべてのオブジェクトを選択して右クリックし、「アセットのコンポーネントを表示」を選択して、ハイライト表示されたコンポーネントをリストの一番上にドラッグします。
  • 次の場所にカーソルを合わせると、対応する情報が表示されます。
    • グラデーション:グラデーションの開始値と終了値がツールチップに表示されます。値の間の「–」は、2 つの分岐点を持つグラデーションを示し、値の間の「...」は、複数のカラー分岐点を持つグラデーションを示します。
    • コンポーネント:カンバス上にあるそのコンポーネントのインスタンス数がツールチップに表示されます。
  • リストビューでアセットの名前を変更する場合、TAB キーを使用すると、リストビューの次のアセットの名前を変更できるようになります。SHIFT+TAB キーを押すと、逆方向に移動します。

アセットの共有と公開

これでドキュメントアセット内に、再利用可能なカラー、文字スタイル、コンポーネントをすべて作成できました。この後は、Creative Cloud ライブラリを使ってデザインシステムアセットを公開し、チーム内で共有する方法をご確認ください。

詳細情報

アセットの操作について詳しくは、以下のビデオをご覧ください。

次のステップ

ここでは、XD のアセットとライブラリの操作方法について説明しました。さらに一歩踏み込んで、ライブラリを使用して、アセット、コンポーネント、デザインシステムを共有する方法や、既存の XD クラウドドキュメントをライブラリに移行する方法をご確認ください。

ご質問または共有するアイデアがある場合

コミュニティで質問

質問やアイデアを共有するには、Adobe XD コミュニティにご参加ください。皆様からのご意見や作品をお待ちしております。

アドビのロゴ

アカウントにログイン