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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2019.09.12