インソースマーケティングデザイン
2020.12.21 デザイン
【Adobe XD】CCライブラリの公開と共有の違いについて

こんにちは!デザイナーの岩瀬です。
今回は、今年追加されたAdobe XDの機能、CCライブラリの公開と共有の違いについて記事にまとめてみました。
「現在のファイル」の公開と、「すべてのライブラリ」から選択して共有。どちらもCCライブラリを他のユーザーと共有することができるので、
パッと見同じ機能に見えるのですが、下記のような違いがあります。
※2020.12.16時点の記事になります。
「現在のファイル」の公開
・そのファイルに登録されている全てのライブラリを共有(ドキュメントアセットも含まれる)
「すべてのライブラリ」から選択して共有
・任意のライブラリを選択して共有(ドキュメントアセットは含まれない)
実際に使ってみましたので、参考になれば幸いです。
「すべてのライブラリ」から選択して共有

まずは、共有するCCライブラリを作成する為に、左上の「+」をクリックし、新規ライブラリを作成します。
今回は「ロゴ」という名前の新規ライブラリを作成してみます。
今回は「ロゴ」という名前の新規ライブラリを作成してみます。

作成したCCライブラリのサイドメニューから、ユーザーを招待するなどの共有が出来ます。

CCライブラリでアセットが共有されていますので、
新規作成したファイル「テスト2」にも自動的に「ロゴ」というCCライブラリが反映されていることが分かります。
新規作成したファイル「テスト2」にも自動的に「ロゴ」というCCライブラリが反映されていることが分かります。

CCライブラリは、IllustratorやPhotoshopからも追加、編集が可能です。
試しにIllustratorからCCライブラリを開き、ロゴを追加してみると、XDのCCライブラリに自動的に反映されました。
試しにIllustratorからCCライブラリを開き、ロゴを追加してみると、XDのCCライブラリに自動的に反映されました。

Illustratorで色を変更すると、自動的にXDのCCライブリも色が変更されます。

ただし、XDで作成したボタンなどをCCライブラリに追加しても、編集は出来ません。
ボタンの色を変更しても、CCライブラリには影響がありません。
ボタンの色を変更しても、CCライブラリには影響がありません。
「現在のファイル」の公開

続いて、CCライブラリの「ドキュメントアセット」の方を選択して、
コンポーネントを含むアセットを作成してみます。
コンポーネントを含むアセットを作成してみます。

左上の共有アイコンをクリックし、現在のファイルの「公開」をクリックします。

すると「ドキュメントアセット」の内容が、「テスト1」という名前で自動的に共有されます。
「テスト2」の方では「テスト1」のコンポーネントが、リンクされたコンポーネントになっています。
「テスト2」の方では「テスト1」のコンポーネントが、リンクされたコンポーネントになっています。

「テスト1」のドキュメントアセットの変更すると、ライブラリの「更新」ボタンが出てきます。

更新すると、「テスト2」の方のドキュメントアセットに「更新」ボタンが出てきます。

更新すると色が変更されました!
それぞれの共有の違いを理解し、用途に合わせて使い分けるとより効率良く作業ができると思います。
頭良くなりたい。
最後まで読んでいただきありがとうございました!