Adobe XDをもっと使いこなすヒント！第39回ドキュメント間でスタイルを共有する

Adobe XDをもっと使いこなすヒント！

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、文字や色などのスタイルをドキュメント間で共有する方法に関連する4つのツイートを紹介します。

Tip 1. クラウドドキュメントのアセットをまとめて読み込む

#adobexd #protip New in the May release – linked assets! You can import an entire assets panel from a cloud document to any other document by clicking on the plus button in the upper right hand corner of the panel. @adobexd pic.twitter.com/tcmFdVxOaZ

— Elaine Chao (@elainecchao) June 10, 2019

クラウドに保存されているドキュメントからは、全アセットをまとめて読み込むことができます。色やフォントなどのスタイルを共有して作業したい時などに便利な機能です。

上の動画のように、アセットパネル右上の「＋」ボタンをクリックすると、クラウドドキュメントの一覧が表示されます。そこから読み込みたいアセットが定義されているドキュメントを選択すると、カラーやフォントスタイルがアセットパネルに読み込まれます（読み込まれたアセットはクラウドドキュメントにリンクされています）。

その際、コンポーネントも同時に読み込まれています。コンポーネントの共有は、ローカルファイルからコピーする方法でも可能ですが、カラーと文字スタイルの共有はクラウド経由限定です。

Tip 2. フィルター機能を使ってアセットを絞り込む

#adobexd #protip Easily filter assets from specific linked documents using the dropdown on the top of the assets panel. @adobexd pic.twitter.com/dL0Q31zD9G

— Elaine Chao (@elainecchao) June 11, 2019

アセットパネルのフィルター機能を使うと、「カラーだけ」、あるいは「文字スタイルだけ」のように、パネルに表示するアセットの種類を指定できます。

同じ操作で、アセットが定義されているファイルごとに絞り込むことも可能です。プルダウンに表示されるドキュメント名を選択すると、選択されたドキュメント内で定義されているアセットだけが表示されます。また、プルダウンから「ドキュメントアセット」を選択すると、ローカルアセット（編集中のドキュメント内で定義されているアセット）だけが表示されます。

Tip 3. 参照元のスタイルを編集する

#adobexd #protip If you need to make a change in a linked asset, right click on the asset and select “Edit in Source Document…” The document will then open for you to edit. @adobexd pic.twitter.com/vgNShzNrSZ

— Elaine Chao (@elainecchao) June 12, 2019

クラウドドキュメントのスタイルを参照していて、それを修正したい場合には、リンク先のファイルを開いて編集する必要があります。

その際は、修正したいカラーや文字スタイルを右クリックして、コンテキストメニューから「元のドキュメントでマスターを編集」を選択します。編集権限があれば、新しいウインドウが開き、リンク先のアセットが定義されているドキュメントが編集可能な状態で表示されます。

Tip 4. 変更後に参照元のスタイルを確認する

#adobexd #protip Just like with linked components, updates to linked colors and character styles show up as a blue badge on your assets panel. Hover over the icon to preview the change in the assets panel and on the canvas. @AdobeXD pic.twitter.com/lO09oxBcIN

— Elaine Chao (@elainecchao) June 13, 2019

リンク先のスタイルが変更されると、参照しているドキュメントでは、アセットパネルの該当する欄に青いアイコンが表示されます。このアイコンの上にカーソルを移動すると、変更を適用した状態を、アセットパネル内とカンバス上でプレビューできます。

そのままクリックすると、変更をローカルに反映できます。反映する前の状態に戻したい場合はUndo機能が使えます。

いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？