XD での Creative Cloud ライブラリの操作

最終更新日 : 2023年2月10日

ここでは、XD で Creative Cloud ライブラリを使用してデザインシステムを作成し、共有する方法について 説明します。

Creative Cloud ライブラリでは、デザインやブランドシステムのアセットをチームで大規模に一元管理して、配布できます。

デザインとブランドシステムを構成するコンポーネントとスタイルのセットを使用して、XD クラウドドキュメントでステッカーシートをキュレーションすることから始めます。これらの再利用可能なアセットをより広いチームと共有する準備ができたら、ステッカーシートクラウドドキュメントをライブラリとして公開し、適切な権限セットでチームを招待します。

チームがライブラリの招待を承諾することで、ライブラリのアセットを再利用して、今後のライブラリの更新時に同期できます。

Creative Cloud ライブラリを使用する理由

Natalia(デザインライブラリの所有者)の場合

natalia_persona

「デザインライブラリの所有者として、自分のデザインアセットとコンポーネントをライブラリに公開し、他のユーザーにデザインシステムライブラリを使用するよう促したい。」

Pedro(デザインライブラリの利用者)の場合

pedro_persona

「デザインライブラリの使用者として、ライブラリの共有アセットをシームレスに再利用し、Natalia が共有アセットを変更したときに通知を受け取りたい。」

同じように感じたことはありませんか? すべてのアセットとコンポーネントをライブラリに公開し、他の人を招待してXDからデザインシステムを利用してもらいたい場合は、これ以上探す必要はありません! 

始める前に

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

リンクされたライブラリの公開と共有

ライブラリを介してデザインシステムを構築および配布するには、ソースのクラウドドキュメントのドキュメントアセットパネルでデザインシステムアセット(カラー、文字スタイル、コンポーネント)をキュレーションします。

デザインシステムアセットを定義したら、それらのアセットをソースドキュメントにリンクされたライブラリとして公開します。 それらをグループと共有して、すべての XD プロジェクトやその他の Creative Cloud アプリで一貫して再利用します。

リンクされたライブラリの公開

リンクされたライブラリの公開
リンクされたライブラリの公開

リンクされたライブラリを公開するには、次の手順に従います。

  1. ツールバーのライブラリをクリックし、ドキュメントアセットパネルビューを開きます。 
  2. 「ライブラリとして公開」をクリックして、ライブラリマネージャーを開きます。
  3. ライブラリマネージャーで、公開をクリックします。 または、新規作成をクリックして、リンクされたライブラリを公開をクリックします。

公開されたライブラリには、ソースドキュメントのドキュメントアセットパネルにあるすべてのアセットが含まれています。

メモ

リンクされたライブラリにアセットを追加できるのは、ソースドキュメントからのみですが、Creative Cloud アプリでアセットを使用することはできます。新規作成/空のライブラリを作成を選択した場合、クラウドドキュメントにリンクされていない通常の Creative Cloud ライブラリを取得します。 任意の Creative Cloud アプリから通常の Creative Cloud ライブラリにアセットを追加できます。

リンクされたライブラリまたは空のライブラリを作成する
リンクされたライブラリまたは空のライブラリを作成する

チームライブラリの公開

Creative Cloud グループ版またはエンタープライズ版をお持ちの場合、個人用ライブラリを公開するだけでなく、チームライブラリを公開できる場合があります。 チームライブラリは所有権を共有しています。

チームライブラリを公開するには、次の手順に従います。

  1. ライブラリマネージャーを開きます。
  2. 新規作成空のライブラリを作成またはリンクされたライブラリを公開を選択します。
  3. チームスペースを選択し、チームライブラリを公開します。

チームライブラリとその利点については、ビジネス用の Creative Cloud ライブラリを参照してください。

ライブラリの共有

ライブラリを公開すると、共有ダイアログが表示され、チームメンバーを招待できます。

ライブラリの共有
ライブラリマネージャーからライブラリを共有

  • 共有をクリックし、ライブラリを共有したいチームメンバーを追加します。
  • 編集可能権限を設定すると、チームメンバーは新しい更新をライブラリに公開できます。 閲覧のみ権限を設定すると、チームメンバーはライブラリのコンテンツを利用できますが、ライブラリを更新または変更することはできません。

チームメンバーを招待すると、メールまたはCreative Cloud デスクトップアプリを通じてライブラリ招待を承諾するよう促されます。

ドキュメントの共同編集者を編集権限のあるライブラリに招待する

クラウドドキュメントの権限は、リンクされたライブラリと自動的に同期されません。 そのため、ライブラリを公開する際は、必ずドキュメントの共同編集者全員を編集可能権限
のあるライブラリに招待してください。

XD クラウドドキュメントの権限は、リンクされたライブラリと自動的に同期されません。
XD クラウドドキュメントの権限は、リンクされたライブラリと自動的に同期されません。

ドキュメントの共同編集者がライブラリに対する編集権限を持っていない場合はどうなりますか?

リンクされたライブラリは、クラウドドキュメントに 1 つだけです。 そのため、ドキュメントの共同編集者をライブラリに招待しない場合、共同編集者は、ライブラリが既に存在することを知らなくても、同じドキュメントから新しいライブラリを公開できます。共同編集者が新しいライブラリを公開すると、それがドキュメントにリンクされ、元のライブラリのリンクが解除されます。 

共同編集者を閲覧のみ権限のあるライブラリに招待すると、共同編集者にはライブラリを更新するオプションが表示されません。 ソースドキュメントのライブラリウィンドウには、最新の状態が表示されます。 

ライブラリへの表示アクセス
ライブラリへの表示アクセス

ライブラリへの編集アクセス
ライブラリへの編集アクセス

例で学ぶ

  1. Natalia は、XD ドキュメント Brand_Systems の所有者であり、Pedro を共同編集者としてドキュメントに招待します。
  2. Natalia は、ドキュメントからリンクされたライブラリを作成します。このライブラリには、Brand_Systems という名前も自動的に付けられますが、Pedro をライブラリに招待するのを忘れています。
  3. Pedro はドキュメントに新しいアセットを追加し、リンクされたライブラリが存在することを知らずにライブラリを公開しようとします。
  4. Pedro は、ドキュメントのライブラリウィンドウで「公開」ボタンを選択し、これにより、リンクされた新しいライブラリ、Brand_Systems(1) が作成されます。 Brand_Systems(1) を作成すると、元のライブラリがドキュメントからリンク解除されます。
  5. Natalia は、別のドキュメントからライブラリ内のアセットへのリンクが破損していることに気付きました。

元のライブラリが共同編集者によってソースドキュメントからリンク解除されましたか?ライブラリとソースドキュメントの再リンクを参照してください。

ベストプラクティス

  • リンクされた新しいライブラリをクラウドドキュメントから公開する際は、必ずドキュメントの共同編集者全員を編集可能権限のあるライブラリに招待してください。 共同編集者がライブラリアセットを利用できるようにする場合にのみ、共同編集者を閲覧可能権限のあるライブラリに招待します。
  • ドキュメントに新しい共同編集者を招待する際は、リンクされたライブラリに招待し、必要な権限を付与してください。

注意事項

  • ライブラリを初めて公開する場合、サイズによっては公開に数分かかる場合があります。 ライブラリ公開の進捗状況は、ライブラリマネージャーの進捗状況インジケーターから確認できます。 
  • ライブラリへの招待を初めて承諾する場合、ライブラリの同期に数分かかることがあります。 ライブラリの同期状態は、Creative Cloud デスクトップアプリのクラウドアイコンをクリックして確認できます。 ライブラリが完全に同期されると、XD や他の Creative Cloud アプリからもライブラリにアクセスできます。

ライブラリの利用

ライブラリの招待を承諾すると、XD や他の Creative Cloud アプリでライブラリのアセットを使用できるようになります。 ライブラリのアセットを XD で使用するには、以下の手順を実行します。

共有ライブラリの特定

共有ライブラリを参照する

ライブラリパネルビューで、使用する共有ライブラリを見つけます。

ライブラリパネルビューで一部のライブラリを表示し、非表示にすることができます。

共有ライブラリのアセットの使用

ライブラリをクリック

利用するアセットがあるライブラリをクリックします。

カラーまたは文字スタイルの適用

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

カラーや文字スタイルをカンバス上のオブジェクトやコンポーネントに適用し、コンポーネントをカンバスにドラッグして、リンクされたアセットにすることができます。

 ドキュメント内にあるリンクされたアセットの表示

ドキュメントアセットパネルビューに切り替えると、すべてのローカルのアセットとリンクされたアセットが表示されます

ドキュメントアセットパネルビューに切り替えると、1 つまたは複数のライブラリで使用されているすべてのローカルアセットやリンクされたアセットを表示できます。

ライブラリパネルのライブラリの表示または非表示

ライブラリパネルビューでは、一部のライブラリを表示し、他のライブラリを非表示にすることができます。

  1. ライブラリマネージャーを開きます。
    • ドキュメントアセットパネルビュー:パネルの上部にある「ライブラリとして公開」をクリックします。
    • ライブラリパネルビュー:+ またはライブラリを管理をクリックします。
  2. トグルを使って、ライブラリの表示と非表示を切り替えます。
  3. ライブラリマネージャーを閉じます。
ライブラリパネルビューでライブラリを表示または非表示にする
ライブラリパネルビューでライブラリを表示または非表示にする

公開されたライブラリの更新

XD クラウドドキュメントからライブラリを公開し、その後ソースクラウドドキュメントのアセットを変更すると、XDは最後にライブラリを公開してから行われた変更について、次の方法で通知します:

  • 公開されたライブラリに変更を加えた後のアプリ内メッセージで、ライブラリの更新プロセスを簡素化するものです。 
  • ドキュメントアセットパネルの「ライブラリとして公開」にある青いバッジは、アップデートが発行可能であることを示します。

ライブラリへの更新を公開する準備ができたら、次のいずれかのオプションを使用します。

アプリ内メッセージからの更新

アプリ内メッセージからライブラリを更新する

アップデートの公開準備ができたことを通知するために、アプリ内メッセージで今すぐ更新をクリックします。

ライブラリマネージャーからの更新

ライブラリマネージャーからライブラリを更新する

ドキュメントアセットパネルビューで「ライブラリとして公開」をクリックして、ライブラリマネージャーを開きます。 更新をクリックして、最新のアップデートをチームにプッシュします。

ライブラリのアップデートのプレビューと受け入れ

ライブラリを更新して公開するとどうなりますか? デザインプロジェクトでそれらの更新されたリンクアセットを使用する仲間のデザイナーが、次の通知を受け取ります。

  • ドキュメントアセットパネルビュー:更新が保留中のリンクされたアセット上に青いバッジ が表示されるとともに、パネルの下部に「すべてアップデート」ボタンが表示されます。
  • ライブラリパネルビュー: の横にある青いバッジドキュメントアセットで、ドキュメントで保留中の更新数を示します。

ドキュメントアセットパネルビューまたはデザインカンバスからの更新のプレビュー

ドキュメントアセットパネルから更新をプレビュー

リンクされたカラー、文字スタイル、コンポーネントの青い更新アイコン にカーソルを合わせます。

 ドキュメント内のリンクされたカラー、文字スタイル、およびコンポーネントをすべてアップデート

ドキュメント内のリンクされたアセットの更新

青い更新アイコンをクリックするか、ドキュメントアセットパネルビューの下部にある更新をクリックします。 

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

ドキュメントアセットとライブラリのサイズが大きい場合、検索機能とフィルター機能を使用すると便利です。

ドキュメントアセットパネルビューで、検索語を入力してドキュメント内のアセットを検索します。 ライブラリパネルビューで、すべてのアクティブなライブラリ全体でアセットを検索します。

XD には、プロジェクトで使用するアセットを絞り込むための次の 3 つのフィルターメカニズムが搭載されています。

  • アセットタイプ:表示するアセットタイプ(カラー、文字スタイル、またはコンポーネント)でフィルターします。 フィルター結果には、ローカルアセットとリンクされたアセットの両方が表示されます。
  • ローカルアセット:ローカルドキュメントアセットのみを使用する場合は、ローカルアセットフィルターを選択します。
  • リンクされたアセットのソース:複数のクラウドドキュメントまたはライブラリからアセットがリンクされ、その中の特定のソースからのアセットのみを使用する場合は、目的のライブラリまたはリンクされたソースドキュメントをフィルターから選択します。
アセットの検索とフィルター
アセットの検索とフィルター

リンクされたアセットをローカルアセットに変換

リンクされたアセットの特定のスタイルやプロパティを試して変更する場合には、各自のドキュメントでそれらのアセットを使用している他のユーザーに影響が及ばないように、リンクされたアセットをローカルアセットに変換します。

  1. ドキュメントアセットパネルビューで、リンクされたアセットを選択します。
  2. アセットを右クリックし、「ローカルにする」を選択します。

注意事項

  • リンクされたアセットをローカルアセットに変換すると、ライブラリ内のリンクされたアセットに変更が加えられても通知が行われなくなります。 同じリンクされたアセットを持つ他の XD ドキュメントは引き続き更新を受信します。

  • ローカルにする」は、ライブラリのアセットを使用する場合や、リンクされたコンポーネントをドキュメント間でコピー&ペーストする場合、またはリンクされたアセットが壊れている場合に機能します。

リンクされたアセットをローカルアセットに変換
リンクされたアセットをローカルアセットに変換

ライブラリのソースドキュメントとの再リンク

リンク解除されたライブラリをそのソースドキュメントに再リンクする方法について詳しくは、ライブラリのソースドキュメントとの再リンクを参照してください。

ライブラリの非公開

ライブラリが不要だと判断した場合は、ライブラリマネージャーからライブラリを非公開にすることができます。 ライブラリを非公開にするには:

  1. ライブラリのソースドキュメントからライブラリマネージャーを開きます。
  2. 共有の横にある 3 つのドットをクリックして、非公開をクリックします。

ライブラリが非公開になると、このライブラリからリンクされていたアセットがリンク切れとなり、赤いバッジで示されます。 これらの破損したアセットを削除するか、ローカルアセットに変換することができます。

注意事項

  • ライブラリを非公開にした後、再公開しても、そのライブラリからのリンクが切れたアセットが、再びそのライブラリにリンクされることはありません。

Creative Cloud アプリで作成されたライブラリのアセットの使用

XD を使えば、お客様やお客様のチームは、Photoshop や Illustrator などの異なる Creative Cloud アプリで作成されたアセットを簡単に使用できます。 着想を呼ぶグラフィックコレクションのライブラリ、Adobe Stock の画像、ソースドキュメントへリンクしない再利用可能なカラーや文字スタイルのコレクションのライブラリなどから、アセットを Adobe XD で再利用できます。

XD で作成された通常の Creative Cloud ライブラリにあるアセットを使用する

他の Creative Cloud アプリにあるアセットを使用する

グラフィックをライブラリからデザインにドラッグすると、バッジで示される形でリンク化グラフィックになります。 Photoshop や Illustrator でそのリンク化グラフィックグラフィックに変更を加えると、デザインですべてのリンク化グラフィックインスタンスが自動更新されます。 リンク化グラフィックをリンク解除するには、リンクバッジをクリックするかコンテキストメニューを使用します。 

ドキュメントにリンクされていないカラー、文字スタイル、グラフィックのコレクションを使って XD で同様のライブラリを作成するには、ライブラリマネージャーで新規作成/空のライブラリを作成を選択します。

注意事項

  • コンポーネントをライブラリに追加するには、ドキュメントをライブラリとして公開することが必要です。
  •  ライブラリではカラーや文字スタイルを編集できません。
  • 3D 変形グラフィックスをライブラリに追加すると、3D 変形が失われます。

ベストプラクティス

  • ライブラリアセットの更新をより細かく制御し、チームがこれらの更新をプレビューして承認できるようにし、チームが最新の変更と確実に同期するために、この記事で説明しているように、ドキュメントからリンクされたライブラリを公開することをお勧めします。

詳細情報

XD でライブラリを操作する方法については、以下のビデオをご覧ください。

視聴時間:6 分


次のステップ

ライブラリの公開と共有の方法を最初に説明しましたが、一歩進んで、デベロッパーとデザインスペックを共有する方法を学んで、デベロッパーがデザインを Inspect できるようにします。

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

コミュニティで質問

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