Xdのアセットを複数ファイルで使うには？
デザインを作成・管理する便利な機能をご紹介！
アセットを複数ファイルで使用することはできる？
過去記事で、「アセット」＝くり返し使うデザイン要素やパーツを登録する機能としてご紹介しました。
ここで、デザインの規模が大きくなった場合、ファイルをまたいでアセットを使用できるのか？を解説します。結論、できます！正確には、「リンクアセット」という形で、ライブラリに登録することで、一元管理したアセットを複数ファイルで使用することができます。
アセットを複数ファイルで使用するのはどんな時？
例えばページ数が膨大な規模間のWEBサイトのデザインを制作していて、
デザイン画面を複数のxdファイルを分けているとします。
制作途中でボタンデザインが変更になった場合、
通常通りxdファイルごとにアセットを登録していると、
すべてのxdを開いて各アセットを修正する必要があります。
それは手間ですし、更新ミスや反映もれの原因にもなり得ます。
その場合はリンクアセットとしてアセットをクラウド保存して、
各xdでそれを参照するように設定し、一元管理しましょう。
通常、アセットはXdファイルが各々持っている記録になりますが、
アセットのマスターをクラウド保存して、AdobeのCCライブラリとして公開することで
各Xdファイルでライブラリを読み込み、
大元のデザインはライブラリのモノに1つにすることができます。
ざっくりした流れとしては、以下のようになります。
- クラウド保存のxdファイルにアセットを作成する
- アセットをCCライブラリとして公開
- CCライブラリから読み込んだアセットを使用する
こうすることで、途中でデザイン要素が変更になったとしても
CCライブラリのアセットを編集→各xdで読み込んでいるアセットを最新化するだけで
変更を反映することができるようになります。
設定方法
具体的な設定方法を見ていきましょう。
いくつか方法がありますが、今回はデザインシステムとして推奨されている方法をご紹介します。
- リンクアセット保管用のxdファイル（クラウド保存）を用意し、
リンクアセットにしたいアセットを全てドキュメントアセットに登録します - ドキュメントライブラリパネルの「公開」アイコンをクリックし
「新規作成」→「リンクしたライブラリを公開」の順にクリックします
（自分以外に使用するメンバーがいる場合は、対象者のアカウントを編集ユーザーに招待してください） - リンクアセットを使用したいデザイン画面作成用のxdを開き、CCライブラリに先ほどのファイルが追加されているか確認します
- CCライブラリパネルから、ドラッグ＆ドロップで使用したいアセットを引き出します
（コンポーネントであれば、リンクアセット保管用のxdファイルを開き
コンポーネントをコピーしてデザイン画面作成用のxdにペーストすることでも
リンクアセットとして利用することができます）
リンクアセットの見分け方
リンクアセットも含めて、そのxdで使用されるアセットはすべて
xdファイルが独自に持つドキュメントアセットとして登録されます。
リンクアセットになっているかの確認方法としては、
- ドキュメントアセットパネルの一覧で、該当アセットにリンクアイコンがついているか
- コンポーネントの場合は、オブジェクトを選択した時に左上にリンクアイコンがついているか
で判断できます。
リンクアセットの更新方法
リンクアセットを更新する場合は、
- まずリンクアセット保管用のxdファイル（クラウド保存）を開き、アセットを修正します
※コンポーネントの場合はマスターコンポーネントを修正してください - 次にドキュメントライブラリパネルの「公開」アイコンをクリックして
ライブラリパネルを開き、現在のファイルの「更新」ボタンをクリックします - デザイン画面作成用のxdを開き、ドキュメントアセットのパネルを開きます
更新が読み込まれていれば下に「更新」ボタンが表示されるのでクリックします - デザインに更新内容が反映されていれば完了です
結論
複数ファイルで共通のアセットを使いたい場合は、リンクアセットとして登録することで
アセットを一元管理できます。
ライブラリパネルからアセットを
「リンクされたライブラリ」として公開することでリンクアセットとして利用できます。
リンクアセットを更新する場合は、
ライブラリを開いて更新後、各xdのドキュメントアセットを最新化しましょう。
個人的は解釈イメージとしては、
・アセット＝デザイン要素（設計書）一つひとつのこと
・ドキュメントアセット＝各xdファイルが独自に持つ、使用するアセット（デザイン要素）
・ライブラリ＝クラウドに保存するデザイン要素
と区別してもらえたらと思います。
