Adobe XD と他の Creative Cloud アプリケーションとの間で、Creative Cloud ライブラリを介してデザインアセットを共有する方法を説明します。

XD では、Creative Cloud ライブラリを使用して共有されているアセットを簡単に利用きます。XD のカラー、文字スタイル、コンポーネントを Creative Cloud ライブラリに追加して、Photoshop や Illustrator などの他のアプリケーション内で簡単に利用できます。同様に、Creative Cloud ライブラリを使って、これらのアプリケーションのカラー、文字スタイル、グラフィックを XD に取り込むこともできます。

Creative Cloud ライブラリを使用するには、すべての CC アプリケーションに同じ Adobe ID でログインする必要があります。

Creative Cloud ライブラリへの XD アセットの追加

XD のカラー、文字スタイル、コンポーネント、グラフィックを Creative Cloud ライブラリに追加することができます。これらのアセットを CC ライブラリに追加するには、以下の手順を実行します。

cc-lib
「+」をクリックして、カラー、文字スタイル、またはコンポーネントを追加する

1. デザインモードまたはプロトタイプモードで、次のいずれかのオプションを使用して CC ライブラリウィンドウを開きます。

  • アセットパネルを開き、CC ライブラリアイコン をクリックします。
  • macOS の場合は、ファイルCC ライブラリを開くを選択します。Windows の場合は、ハンバーガーメニューをクリックし、「CC ライブラリを開く」を選択します。

2. CC ライブラリウィンドウで、省略記号アイコン)をクリックし、「新規ライブラリを作成」を選択します。既存のライブラリにアクセスする場合は、ライブラリドロップダウンリストからライブラリを選択します。

3.XD アセットを Creative Cloud ライブラリに追加するには:

  • カラー、文字スタイル、コンポーネントがあるアートボード上のエレメントを選択します。
  • CC ライブラリウィンドウで「+」アイコンをクリックし、追加するアセットタイプをクリックします。選択したアセットタイプが追加され、CC ライブラリにサムネイル画像として表示されます。

Creative Cloud ライブラリのアセットが自動的にクラウドに同期され、他の Adobe アプリケーションで使用できるようになります。例えば、Photoshop では、Creative Cloud ライブラリに移動して XD アセットにアクセスできます。

ライブラリを他のユーザーと共有するには、CC ライブラリウィンドウで、省略記号)をクリックし、「フォルダー共有」を選択します。ライブラリを他のユーザーと共有する方法について詳しくは、Creative Cloud ライブラリおよびフォルダーで共同作業するを参照してください。

ライブラリアセットをグループ別に整理する

Creative Cloud ライブラリに追加したアセットは、グループを作成して、関連するアセットをさらに整理して 1 つにまとめることができます。例えば、ボタン、トグル、モーダルなどの関連コンポーネントをグループ化して、アセットを見つけやすくすることができます。またブランド要件に合わせて、様々なアセットタイプのグループを作成することもできます。グループを使用して、クリエイティブアセットをより効率的に整理することをお勧めします。

XD での Creative Cloud ライブラリアセットの利用

XD プロジェクトから Creative Cloud ライブラリにあるカラー、グラデーション、文字スタイル、グラフィック、コンポーネントにアクセスできます。 

カラーと文字スタイルの適用

cc-lib
「+」をクリックして、カラーや文字スタイルを追加します。

1. CC ライブラリからカラーまたはカラーストローク(線)を適用するには、アートボード上のエレメントを選択し、次のいずれかを実行します。

  • CC ライブラリウィンドウで、適用するライブラリのカラーサムネイルをクリックします。
  • 右クリックして「塗りのカラーの適用 」を選択します。カラーストロークの場合は、「線カラーの適用」を選択します。

2. 文字スタイルを適用するには、アートボードでテキストエレメントを選択し、次のいずれかを実行します。

  • CC ライブラリで文字スタイルをクリックします。 
  • 右クリックして「文字スタイルを適用」を選択します。

Creative Cloud ライブラリのカラーや文字スタイルを XD から直接編集することはできません。

グラフィックの使用

cc-lib
CC ライブラリを使用して、Photoshop または Illustrator のグラフィックを XD に追加する

Creative Cloud ライブラリのグラフィックをアートボードにドラッグして、XD プロジェクトにグラフィックを取り込むことができます。ラスタライズグラフィック(画像)とベクターグラフィックの両方を編集できます。デフォルトでは、画像はリンク画像としてアートボードに追加されます。つまり、アセットに対する変更は、すべてのリンクされたコピーに反映されます。 

プロパティインスペクターで、元の画像に影響を与えることなく、画像のサイズを変更したり画像のプロパティを編集したりできます。元の画像に影響を与えずにさらに編集するには、画像のリンクを解除する必要があります。 

Creative Cloud ライブラリからリンクされていないアセットとしてグラフィックを取り込むには、Alt キー(Windows)または Option キー (Mac)を押しながら、CC ライブラリからグラフィックをドラッグします。

グラフィックをリンクされたアセットからリンクされていないアセットに変更するには、アセットの左上隅にある緑色のリンクアイコンをクリックします。画像を右クリックし、プロパティインスペクターで「グラフィックをリンク解除」を選択することもできます。

Creative Cloud ライブラリでのグラフィックの編集

  1. Creative Cloud ライブラリでグラフィックを編集するには、Creative Cloud ライブラリのグラフィックを右クリックして「編集」を選択します。ラスタライズグラフィックは Photoshop で開き、ベクターグラフィックは Illustrator で開きます。
  2. グラフィックを変更して保存します。グラフィックは Creative Cloud ライブラリ内で更新され、XD の Creative Cloud ライブラリパネル内のサムネイルが自動的に更新されます。また、アートボードの画像にも変更が反映されます。

XD から Creative Cloud ライブラリに追加されたグラフィックやコンポーネントは編集できません。

XD コンポーネントの使用

Creative Cloud ライブラリのコンポーネントをアートボードにドラッグして、XD プロジェクトにコンポーネントを取り込むことができます。コンポーネントを CC ライブラリから XD にドラッグするたびに、新しいマスターコンポーネントがアートボードに追加され、アセットパネルに表示されます。 

1. アセットパネルで、Creative Cloud ライブラリウィンドウを開きます(アイコンをクリックします)。

2. 使用するコンポーネントを CC ライブラリで選択し、アートボードにドラッグします。新しいマスターコンポーネントがアートボードに追加され、アセットパネルに表示されます。現在、コンポーネントインスタンスはソースコンポーネントにリンクされていないため、XD でコンポーネントを変更しても、Creative Cloud ライブラリのソースコンポーネントには影響を及ぼしません。

制限事項

  • 1 つのコンポーネントが複数のステートを持つことができます。ただし、CC ライブラリにコンポーネントを追加すると、コンポーネントのアクティブなステートのみが追加されます。

  • コンポーネントインスタンスは、Creative Cloud ライブラリのコンポーネントにリンクされていません。したがって、XD ドキュメントのマスターコンポーネントを変更しても、Creative Cloud ライブラリに保存されているコンポーネントには影響を及ぼしません。