AdobeXDをAIやPSDデータに変換してみよう。

AdobeXDのデザインデータをIllustratorやPhotoshopで取り扱えるようにレイヤー分けされた状態でAIやPSDファイル化の手順でござる。

 

なぜわざわざXDのデータを変換するのか?

たしかにXDはワイヤーやフラットデザイン制作にはとても向いているのですが、データ管理やアプリ同志の互換性が閉鎖的で、何よりXDの起動に時間がかかったり、頻繁に更新が必要になるため実務ベースでみると編集用のデータとしては互換性が低く、扱いにやや手間がかかる系だからです。

というのは建前で、単なる好奇心です。なんでXDデータがすんなりAIなど保存できないのか?PDFやSVGではできるのに。

 

 

1.AdobeXDデータファイルを開く

2.変換したいオブジェクト(ページデザイン)を選択。

3.メニューから書き出しを選択

4.書き出し対象を選択
すべてのアートボードを選択して、PDFで書き出しを選択。複数ページのオブジェクトが分離されている場合は、複数のPDFファイルを選択

5.書き出したPDFをIllustratorで開き、AIファイルで保存
これでレイヤー分けされたAIデザインデータが保存します

6.AIファイルのメニューから書き出し、PSDファイル形式で保存、オプションのレイヤーを保持のチェックを確認して保存。

7.PhotoshopからPSDファイルを開きレイヤーが分離されていることを確認

 

以上が、XDデータのAI形式やPSDファイル形式への変換保存です。

 

注意点はPDFファイルに書き出す場合は埋め込み型で保存して、いったんIllustratorで保存しなおす必要があります。
テキストはすべてアウトライン化されてしまうので、テキストの抽出はXDデータからコピーペーストした方ががいいでしょう。

PDFをPhotoshopで開くと、一枚のビットマップイメージ化されてしまうのでAIファイル化が必須ですが、LPなどの長いデザインはメモリの関係でアンチエイリアスが保持できない状態になるので、1枚画像としてPDFから読み込み、XDからテキストデータやAIからアウトラインデータをコピーしてPSD化していくようになるのでPSD化するメリットはないかもしれません。

 

レイヤー名は自動で生成されてしまうので、再度構成しなおす必要がありますが、レイヤーはすべて変更されるのでAdobe系のソフトでの連携が取りやすくなりデータ管理は楽になりますが、よほどの必要性がない限りXDデータをAI化したりするメリットは少ないかもしれません。

 

PSDを中心にAIでも編集が必要なデータ類の場合は、使いなれたアプリのほうが制作工数をプレスしやすいでしょうが、デザインからベクトルデータ、ビットマップなどの取り扱いを含めてXDはかなり洗礼されている印象です。
ただ、はやりずっと更新されればいいのですが、開発などがストップしてしまった場合は将来的に使用できなくなるので、その点のみを除けば、広告や事業系のデザインから設計までXDだけで集約していくことは可能です。

かといって、IllustratorやPhotoshopはそれぞれの取り扱いフォーマットではまだまだ突出しているので、用途に応じて制作アプリを選択していったほうがいいかもしれません。
ただAdobeXDは現状は基本機能版は月額費用が0円から使えるので、Webデザインや印刷デザインを始めるためにあらためてIllustratorやPhotoshopを高額契約しなくても済む点が、これからDTPやWeb系のデザインを始める人にとっては敷居はかなり低くなっています。

自動車のギアチェンジがミッションからオートマに変わるぐらいのインパクトがあります。

 

結果、AdobeXDがPhotoshopやIllustratorと互換性が低いと感じられるのは、おそらく反既存Adobeデザインツールの開発部が発足して、おなじアドビ社でも敵対競合する部署が開発設計しているのではないかと想像してしまいました。