Adobe XD TOOLS WEB DESIGN

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

悩んでる人

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

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

その手順について

  • 都内のデザイン制作会社に勤務している現役デザイナー
  • グラフィックデザイン歴約17年
  • Webデザイン歴は約12年


の私が解説します。

本記事の内容

  • 結論:リンク配置はできる。ポイントはCCライブラリにファイルを保存すること。
  • CCライブラリとは?
  • CCライブラリへのファイル登録方法
  • PSDファイルを修正する際の注意点
  • まとめ:効率的なファイルの配置・管理方法

結論:リンク配置はできる。ポイントはCCライブラリにファイルを保存すること。

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

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

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

CCライブラリとは?

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

CCライブラリへのファイル登録方法

PhotoshopからCCライブラリへの登録方法

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

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

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

IllustratorからCCライブラリへの登録方法

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

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

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

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

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

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

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

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

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

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

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

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

PSDファイルを修正する際の注意点

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

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

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

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

まとめ:効率的なファイルの配置・管理方法

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

今回は以上です。

-Adobe XD, TOOLS, WEB DESIGN

Copyright© Kurilog(クリログ) , 2020 All Rights Reserved.