オンラインイベント「XD Trail 部屋キャンプ」！今回はライブラリパネルを使用した Photoshop & IllustratorとXDの連携がテーマです。
Adobe XD に興味があって、実際に簡単なデザイン作業をする機会が欲しい人を対象に、Photoshop & IllustratorとXDの間でデザインを共有しながら作業を進める手順を全4パートにまとめたワークショップです。
ワークショップの内容
PhotoshopやIlllustratorで作成したデザインアセットをXDから利用するさまざまな方法を学びます。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. XDが扱えるグラフィックデータ】
XDがサポートするPhotoshop／Illustratorとの連携機能の基礎を学びます。
【 2. PSDデータの活用】
Photoshop で作成した画像データをXDで活用する方法を学びます。
【 3. ベクターデータの活用】
Illustrator で作成したベクターグラフィックをXDで活用する方法を学びます。
【 4. CCライブラリを使った連携】
Photoshop/Illlustrator のデータをCCライブラリ経由で活用する方法を学びます。
当日のQ&A
★縦書きのテキストをXDに読み込むとどうなりますか？
縦書きテキストを編集可能な状態で読み込むことはできません。Illustratorの縦書きテキストはすべて１文字ずつパスに変わります。Photoshopの場合は横書きテキストになります。
★XDでテキストの縦書き、パーツの回転はできないのでしょうか？
縦書きテキスト、および1文字ずつの回転には対応していません。一文字分の幅のテキストエリアを作成して縦に文字を並べることはできます。
★グラデーション（線形、放射状、円錐）に互換性はありますか？
互換性はありますが、XDの円錐グラデーションはPhotoshopでは角度となっていることに注意してください。
★塗りにグラデーションのかかった編集可能なテキストをつくることはできますか
テキストの下に塗りをグラデーションにした長方形を配置して、「交差」を使って合成すると、グラデーションのかかった編集可能なテキストをつくることができます。
★PhotoshopのレイヤーマスクはXDに読み込んでも維持されますか？
残念ながら読み込みではレイヤーマスクは維持されません。Photoshop側でレイヤーマスクを適用してして保存したPSDを読み込めば見た目を変えずに持ち込めます。
★XDがサポートしていない（Photoshop, Illustratorの）機能はどこで確認できますか？
以下のページに詳細な情報が記載されています。
★PhotoshopからXDにコピー&ペーストするときの画像サイズ（もしくはデータサイズ）の制限はありますか？
経験上は4K×2枚のスクリーンショットを持ち込んでも問題ありませんでした。XD自体は軽いツールですがファイルサイズが大きいと開くのに時間がかかることと、XDの書き出し機能にはスクリーン向け以外の想定が無いことから、4倍くらいまでのサイズに抑えることがオススメです。
★Photoshopで用意する画像はRetinaディスプレイ対応を意識して（XDのアートボードの）倍のサイズで作成した方が良いとかありますか？
基本は2倍以上のサイズで作成しておくことをお勧めします。XDはPNG書き出しの際に、等倍～最大４倍までの画像を書き出します。拡大された画像は元の画像より劣化するため、書き出す必要のある倍率を意識して判断すると良いでしょう。
★「アピアランスをペースト」によりシェイプの背景に配置した画像の位置や大きさを後から調整することはできますか？
可能です。シェイプをダブルクリックすれば画像の位置や大きさを調整できます。
★IllustratorからXDにコピペしたデータを拡大縮小すると線の大きさはそのままです。XDでは拡大縮小できないのでしょうか？
変形前にパスのアウトライン化をすると拡大できます。パスのアウトラインをしたくない場合は、TransformSessionというプラグインを使用するとイメージ通りにできるかもしれません。
★Illustratorで作成したテキストにアドビフォントのNote Sans CJK JPを使用して、XDにペーストすると「システムにないフォントですと言われます。フォントの連携について教えてください。
現在のIllustratorはフォント情報をフォント名＋ウェイトで記録するため、そのまま持ち込むのは難しいです。文字スタイルを共有して、XDで文字スタイルを設定することはできます。
★XDの「文字の間隔」を使って字詰めしたテキストを、Illustratorにコピー&ペーストすると、どうなりますか？ カーニングの値になっているのでしょうか？
トラッキングに値がそのまま入ります。
★XDに持ち込んで編集したパーツは最終的にXDから書き出すのが正しいでしょうか？PhotoshopやIllustratorから書き出す方が軽く綺麗なデータになる場合もありますか？
XDの書き出し設定はシンプルなので、オプションが豊富なPhotoshopなどから書き出しのほうが軽くきれいなデータになる可能性はあります。XDではカラーマネージメントがサポートされないことも考慮が必要な点です。
★XDで作成したパーツの効率の良い書き出し方法、というのはありますか？
書き出すことを決定しているオブジェクトを選択して「書き出し対象にする」にチェックを入れておくと、書き出し時に選択しなくてもまとめてを書き出せます。
★XDでデザインしたものを、レイヤーを保持したままPhotoshopで扱いたい場面がよくあります。それはできないと認識しておりますが、現在もできないでしょうか？
残念ながら現在もできません。SVGやPDFで書き出してIllustrator経由でPSDファイルに変換するくらいしか方法はありません。
★右クリックの「Photoshopで編集」と、CCライブラリを介した方法は同じでしょうか？
「Photoshopで編集」でPhotoshopと同期されるのはビットマップ画像です。また、一時的なものであるため、ドキュメントを閉じるとPhotoshopの編集状態は維持されません。CCライブラり経由ではPSDデータを共有することができ、Photoshopで編集した状態をそのまま維持できます。継続してPhotoshopで修正したい画像はCCライブラリに登録してから利用するのがオススメです。