Adobe XDにPSDやAIファイルを配置する方法と注意点

悩んでる人

Adobe XDに「読み込み」した、PSDやAIの元ファイルを修正したのに変更が反映されない。
PhotoshopやIllustratorのように、リンクとして配置できないの？

と言う疑問を解消します。

その手順について

の私が解説します。

本記事の内容

ファイルメニューから「読み込み」をしたり、ファインダーからファイルをドラッグ&ドロップをしてはいけません。

リンク配置したいファイルは、一旦『CCライブラリ』に登録し、XDの『CCライブラリパネル』からファイルをドラッグしてオブジェクトを配置しましょう。

こうすることで、元のCCライブラリ上のファイルを修正すれば、変更がXDにもすぐに反映されるようになります。

画像・色・テキストスタイルなど、デザインする過程で使いまわしたい要素（アセット）や、複数のデバイスで共有したい要素を、クラウドスペースに保存しておける機能です。

登録したいファイルを開きます。

「ウィンドウ」メニューから「CCライブラリ」を選択します。

ウィンドウ上部にあるファイル名の部分を、CCライブラリパネルにドラッグ&ドロップします。

タイトルをIllustratorで作成する前提で説明します。

ファイを開き「ウィンドウ」メニューから「CCライブラリ」を選択します。

対象のオブジェクトを選択して、CCライブラリパネルの左下にある「＋」マークをクリック。

「グラフィック」を選択して登録しましょう。

【注意】
ここで「テキスト」を選ばないようにしましょう。理由は「テキスト」ではレイヤーを持たせられないためです。

【ポイント】
「なぜレイヤーを持たせる必要があるのか？」

それは、非アウトラインのAIデータをXDに配置すると表示が崩れるため、アウトラインレイヤーを作り、非アウトラインレイヤーは非表示の状態で保存しておきたいからです。

その手順は以下の通りです。

【手順】
１：アウトライン前のデータをCCライグラリに登録

２：CCライブラリパネルから該当ファイルを開く

３：ベースのレイヤーを複製し、アウトラインを作成

４：非アウトラインのレイヤーは非表示にして保存。
以上です。

配置したPSDファイルを修正する手順に若干「クセ」があります。（慣れの問題かもしれませんが）

PSDを修正する場合は、必ず「CCライブラリパネル内のファイルをダブルクリック」してPhotoshopで開きましょう。

アートボードに配置したファイルを「右クリック＞Photoshopで編集」はNGです！
この手順だと、レイヤー情報がいなくなるんです。

ファイルが多くなってくると、ライブラリでPSDを探すのが大変なので、この方法で元ファイルを修正できると非常に便利なのですが、本記事執筆時点ではできないので、今後のアップデートに期待したいです。

XDにPSDやAIファイルを配置する場合は、CCライブラリに保存し、リンクとして配置するようにしましょう。
こうすれば、元ファイルの変更がすぐにXDに反映されるので、「読み込み」で画像をレイアウトするよりも断然修正しやすく、数段効率アップできますよ。

今回は以上です。