【Adobe XD】作成したデータをPSDデータに書き出す方法

adobexd-convert-psd

AdobeXDで作成したデータをパーツ分けた状態で、フォトショップに持って行きたかったので試してみました。

実際にはXDにPSDの書き出し機能はないので、別ソフトをまたいでのコンバート方法になります。

AdobeXDでのエクスポート

f:id:min0124:20171125230630p:plain

サンプルデータを用意

  • オプションボタン>書き出し>PDFでデータを出力します

イラストレーターでの読み込み

  • 普通にPDSをインポートします(データ名つけてもすべて無くなっています...)

f:id:min0124:20171125230721p:plain

クリッピンググループの中に要素が入っています。

例えばこのままPSD書き出しすると、クリッピンググループは統合された状態で読み込まれます。

f:id:min0124:20171125230855p:plain

イラストレーターでのデータ整理と書き出し

ということで、データ整理します。

まずはクリッピングマスクを一括解除します

  • Ctral+Aで全てを選択

  • オブジェクト > クリッピングマスク > 解除でクリッピングマスクを一括解除

  • あとは結合したい要素を選択してグループ化(終わったら選択しないようにロック)

  • さらに単一のレイヤーが並んでる部分もPSD化すると結合される事があったので、要素一つでもすべてグループ化しておきます。

f:id:min0124:20171125231059p:plain

  • 最後にファイル>書き出し>書き出し形式からPSD出力

フォトショップで読み込み

f:id:min0124:20171125231619p:plain

  • 普通にデータを開きます。

イラレのデータ整理通りのレイヤー階層です。

※ちなみに文字データはもちろん画像化されてしまっています。

まとめ

結局UIパーツの作り込みは別ソフトになるので、AdobeXDにaiとかpsdで書き出しできる機能が欲しい。。。