ドキュメント間でリンクされたアセットを使用して、生産性のワークフローを高める方法を説明します。

増え続けるデザインの中で、デザイナーは、簡単に共同作業をおこなって、一貫したデザインを作成して維持する必要があります。リンクされたアセットを使用すると、デザイナーは、デザインの一貫性を保つために必要なすべてのアセット(カラー、文字スタイル、およびコンポーネント)を含むクラウドドキュメントに基づくコンテキストライブラリを作成できます。

最新バージョンの Adobe XD では、コンポーネント(以前のシンボル)だけでなく、カラーと文字スタイルもほんの数ステップで簡単に共有して使用できます。グループでブランドキットやステッカーシートを共有している場合、これは非常に役立つ機能です。あるいは、単に自分のデザイン要素をプロジェクト間で再利用する場合にも便利な機能として使用できます。リンクされたアセットは、リンクされたコンポーネントのワークフローを補完します。ソースドキュメントでリンクされたアセットを変更すると、そのリンクされたアセットを使用しているドキュメントに更新が通知されます。その時点で、更新をプレビューして受け入れることができます。    

Adobe XD でリンクされたアセットを使用する方法を次に示します。

リンクされたアセット
リンクされたアセットを使用する

リンクされたアセットの作成

リンクされたアセットを作成するには、次の操作をおこないます。

  1. アセットパネルに XD クラウドドキュメントのカラー、文字スタイル、およびコンポーネントを設定することで、アセットの単一の情報源を作成します。

  2. 共有/編集に招待するをクリックします。「招待」タブで、招待者のメールアドレスを追加し、必要に応じて任意のメッセージを追加し、「招待」をクリックします。

  3. 空のアセットパネルでは、「アセットをリンク」ボタンをクリックします。アセットが設定されているアセットパネルでは、アセットパネルの横にある「」アイコンをクリックします。

  4. XD クラウドドキュメントをアセットパネルに追加するには、アセットをリンクウィンドウでドキュメントを選択します。ソースクラウドドキュメントのリンクされたアセット(カラー、文字スタイル、およびコンポーネント)が、クラウドドキュメントの名前が付けられたフィルターの下に追加されます。

    Adobe XDでリンクされたアセットを作成する方法を次に示します。

    リンクされたアセット
    リンクされたアセットの作成

リンクされたクラウドドキュメント内でのリンクされたアセットの検索とフィルター処理

アセットパネルで、リンクされたアセットとローカルアセットの両方を検索することができます。リンクされたカラーを検索するには、目的のカラーの割り当て名または 16 進コードを入力します。同様に、リンクされた文字スタイルとリンクされたコンポーネントを検索するには、アセット名と一致する文字列を入力します。検索文字列に基づいて、アセットパネルに結果が表示されます。 

リンクされたクラウドドキュメントのアセットをリスト表示とグリッド表示の両方でフィルター処理するには、アセットパネルでドロップダウンからリンクされたクラウドドキュメントを選択します。リンクされたクラウドドキュメントからリンクされたカラー、リンクされた文字スタイル、およびリンクされたコンポーネントがフィルター処理され、アセットパネルに表示されます。

リンクされたクラウドドキュメント内のアセットの検索とフィルター処理をおこなう方法を次に示します。

リンクされた文字スタイルの文字を使用した検索
リンクされた文字スタイルの文字を使用した検索

リンクされたカラーと文字スタイルの操作

ドキュメントのカラーや文字スタイルと同様に、リンクされたカラーと文字スタイルをアセットパネルで選択することで、カンバス上の選択した要素にそれらを適用できます。

例えば、デザインファイルのリンクされたカラーまたは文字スタイルを変更する場合は、次のワークフローに従います。

リンクされたカラーを塗りと境界線に適用する

アクティブな XD ドキュメント内のオブジェクトを選択し、次のいずれかの操作を実行します。

  • アセットパネルでカラーをクリックするか、カラーを右クリックし、「塗りとして適用」を選択します。
  • 線(境界線)のカラーを適用するには、オブジェクトを選択し、アセットパネルでカラーを右クリックし、「境界線として適用」を選択します。
塗りとして適用
リンクされたカラーを塗りと境界線に適用する

ソースドキュメントのリンクされたカラーと文字スタイルを編集する

リンクされたカラーと文字スタイルをアセットパネルで編集できます。アセットパネルでリンクされたカラーまたは文字スタイルを右クリックし、「ソースドキュメントで編集」を選択します。ソースドキュメントが開き、 リンクされたカラーまたは文字スタイルがソースドキュメントのアセットパネル(デフォルトではリスト表示)にハイライト表示されます。ソースドキュメントのそれらを変更し、使用されているドキュメント(クラウドドキュメント)で変更をプレビューします。

ソースドキュメントのリンクされたカラーを編集する
ソースドキュメントのリンクされたカラーを編集する

リンクされたカラーと文字スタイルをカンバスでハイライト表示する

選択したカラーと文字スタイルを使用して、オブジェクトのすべてのインスタンスをハイライト表示します。アセットパネルでリンクされたカラーまたは文字スタイルを右クリックし、「カンバスでハイライト」を選択します。

リンクされたカラーをカンバスでハイライト表示する
リンクされたカラーをカンバスでハイライト表示する

リンクされたカラーの 16 進値をコピーする

リンクされた既存のカラーの 16 進値をコピーするには、リンクされたカラーを右クリックし、#HEXValue を選択します。16 進値がクリップボードにコピーされます。    

16 進値をコピーする
リンクされたカラーの 16 進値をコピーする

ソースドキュメントのリンクされたカラーと文字スタイルの名前を編集する

リスト表示のソースドキュメントで、リンクされたカラーまたは文字スタイルの名前を変更するには、次のいずれかを実行します。

  • リンクされたカラーまたは文字スタイルをダブルクリックします。
  • リンクされたカラーまたは文字スタイルを右クリックし、「名前変更」を選択します。
リンクされたカラーの名前を変更する
ソースドキュメントのリンクされたカラーと文字スタイルの名前を編集する

ソースドキュメントのリンクされたカラーと文字スタイルを削除する

ソースドキュメントのリンクされたカラーと文字スタイルの削除は、それらが壊れている場合のみ実行できます。削除すると、リンクされたカラーと文字スタイルはアセットパネルから削除されます。削除されたカラーまたは文字スタイルにリンクされているすべてのオブジェクトは、リンクが解除され、カンバスに残ります。   

リンクされたカラーを削除する
ソースドキュメントのリンクされたカラーまたは文字スタイルを削除する

リンクが壊れているカラーをローカルカラーに変換できます。アセットパネルでリンクされたカラーを右クリックし、「ローカルカラーにする」を選択します。これにより、それにリンクされていたすべてのオブジェクトは、ローカルカラーにリンクされます。

ソースドキュメントのリンクされたカラーを更新しても、ローカルカラーには影響しません。    

ローカルカラーにする
リンクが壊れているカラーをローカルカラーに変換する

リンクが壊れている文字スタイルをドキュメントの文字スタイルに変換する

リンクが壊れている文字スタイルをローカル文字スタイルに変換します。アセットパネルでリンクされた文字スタイルを右クリックし、「ローカル文字スタイルにする」を選択します。

これにより、それにリンクされていたすべてのオブジェクトが、ローカル文字スタイルにリンクされます。

ソースドキュメントのリンクされた文字スタイルを更新しても、ローカル文字スタイルには影響しません。

リンクが壊れている文字スタイルを変換する
リンクが壊れている文字スタイルをドキュメントの文字スタイルに変換する

リンクされたカラーと文字スタイルの更新をプレビューする

ソースドキュメントでリンクされたカラーまたは文字スタイルが更新されると、それらを使用しているドキュメントは更新通知を受信し、アセットパネルに青色のバッジ アイコンが表示されます。

リンクされたカラーまたは文字スタイルの  アイコンの上にマウスポインターを合わせます。

  • 更新をプレビューし、最終変更日とソースドキュメントの詳細を確認した後、変更をコミットします。
  • アセットパネルのサムネイル(リスト表示とグリッド表示)とカンバスの両方で、デザインのコンテキストで更新された変更を確認します。

リンクされたカラーと文字スタイルの更新を受け入れる

リスト表示とグリッド表示で、リンクされたカラーと文字スタイルの更新を受け入れることができます。1 つのカラーの更新を受け入れるには、次の手順に従います。

  • リンクされたカラーまたは文字スタイルを右クリックし、「更新」を選択します。
リンクされたカラーの更新を受け入れる
リンクされたカラーの更新を受け入れる
  • アセットパネルで青い更新 アイコンをクリックします。

複数の更新を受け入れるには、「すべてアップデート」をクリックします。

すべての更新を受け入れる
すべての更新を受け入れる

新たに追加されたリンクされたカラーと文字スタイルの更新を受け入れる

ソースドキュメントに新たに追加されたリンクされたカラーまたは文字スタイルの更新を受け入れることができます。更新を受け入れるには、アセットパネルで青い更新 アイコンをクリックします。

新たに追加されたリンクされたカラーの更新を受け入れる
新たに追加されたリンクされたカラーの更新を受け入れる

リンクされたコンポーネントの操作

リンクされたコンポーネントは、かつてシンボルであったものを置き換え、繰り返し使用するデザイン要素の構築タスクを合理化し、強力にします。Adobe XD には、比類のない柔軟性を持つデザイン要素であるリンクされたコンポーネント(以前はシンボルと呼称)が導入されています。リンクされたコンポーネントを使用して、ボタンのような繰り返し要素を作成して管理したり、様々なコンテキストやレイアウトに合わせて要素の特定のインスタンスをオーバーライドしたりできます。くわえて、以下のことが可能です。

  • 基本要素を変更して、すべてのインスタンスに反映させる。
  • インスタンスのサイズを個別に変更する。
  • 入れ子になったコンポーネントをオーバーライドとして入れ替える。
  • ドキュメント間でコンポーネントをリンクして編集する。
  • 以下をオーバーライドする。
    • コンテンツプロパティ(テキストと画像の塗り)
    • アピアランスプロパティ(塗り、境界線、効果、テキストスタイルなど)
    • インスタンス内のオブジェクトのレイアウト(サイズ、配置、レイヤー階層、コンストレイント)
    • インスタンスの構造(要素の追加と削除)

アセットパネルのリスト表示とグリッド表示の両方で、リンクされたコンポーネントを表示できます。 

リンクされたコンポーネントについて詳しくは、XD でのコンポーネントの操作を参照してください。

リンクされたクラウドドキュメントの削除

リンクされたクラウドドキュメントを削除するには、アセットパネルで フィルターボタンをクリックし、リンクされたクラウドドキュメントにマウスポインタ―を合わせます。

リンクされたクラウドドキュメントの削除
リンクされたクラウドドキュメントの削除

リンクされたクラウドドキュメントがアセットブラウザーから削除されると、

  • クラウドドキュメントのリンクされたアセットがアセットパネルから削除されます。
  • リンクされたクラウドドキュメントフィルターがアセットブラウザから削除されます。
  • カンバス上のリンクされたすべてのコンポーネントが通常のグループに変換されます。

XD でソースクラウドドキュメントを削除すると、フォーカスの切り替え時に、リンクされていたすべてのドキュメントにリンクが切れたことが通知されるので、アセットパネルのコンテキストメニューから「再リンク」をクリックしてください。

アセットブラウザーに、再リンク可能なすべてのクラウドドキュメントが表示されます。要素 ID が同じ XD クラウドドキュメントを選択して、リンクが壊れたすべてのアセットが新しいドキュメントに再リンクされるようにします。再リンクされた新しいソースドキュメントがフィルタとして追加されます。

再リンクされた XD クラウドドキュメントに要素 ID がまったくない、またはその一部がある場合は、使用可能なアセットのみがリンクされます。それ以外のもののリンクは壊れたままになります。

リンク不明のリンクされたアセットの再リンク
リンク不明のクラウドドキュメントの再リンク

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー