このワークショップの開催後、Adobe XDにアセット管理の新機能が追加されたため、最新バージョンでは使い方に違いがあります。このワークショップの内容を学びたい方は、2021年9月1日に開催された同タイトルのワークショップのアーカイブをご覧ください。
ワークショップの内容
PhotoshopやIlllustratorで作成したデザインアセットをXDから利用するさまざまな方法を紹介します。
（詳細は、動画再生エリアの右側に表示されるタイムラインを参照してください）
【 1. XD で活用できるデータ】
XD がサポートしている画像ファイル形式とその扱い方を学習します。
【 2. Photoshop で作成したデザインカンプをXDで活用】
Photoshopで作成したデザインをXDで開き、編集します。
【 3. Illustratorで作成したグラフィックをXDで活用】
Illustratorとの連携を中心に、ベクターデータの扱い方を紹介します。
【 4. その他の連携機能／アセットパネルの管理】
XD内の画像をPhotoshopで編集する機能と、アセットパネルの使い方を紹介します。
当日のQ&A
★縦書きのテキストをXDで表現する方法はありますか？
3つの手段が利用できます。
- PhotoshopやIllustratorで縦書きテキストを作りCCライブラリのグラフィックで持ちこむ（Photoshopだとラスターになります）
- XDのエリア内テキストが縦に見える程度に領域を狭くする
- XDのリピートグリッドを縦に伸ばし、改行を1文字ごとに入れたテキストファイルをドロップする。アートボードのレスポンシブサイズ変更を有効にしておく
★CCライブラリのライブラリが案件ごとに増えています。どうするのがよいでしょうか？
XD以外のCCライブラリが使えるアプリケーションか、Bridgeが使える契約でしたら、案件が落ち着いた時点でCCライブラリをファイル書き出しするのはどうでしょうか？そうすれば案件データとして一緒に保存できますし、そのファイルを読み込めばライブラリを復活させることができるます。
★XDで作ったデータをフォトショやイラレで引き継いで編集することは可能ですか？
完全な状態で引き継ぐことは難しいです。PDFファイルとして書き出してそれを開いていただくことで持ち出せないことはないですが、開発に向いた使いやすいファイルとは言えません。
★AIファイルとSVGファイルでは、どちらがXDで利用するのに適していますか？
どちらが一方的に有利というのはないのですが、見た目の維持を優先したい場合はSVGが、編集が前提の場合はIllustratorがオススメです。
★Illustratorは古いバージョンでも問題ありませんか（例えばCSなど）？
CS6など古いバージョンは対応してないとのことでした。対応してないバージョンのIllustratorの場合はSVGで書き出せるかお試しください。
★Photoshopで設定したグラデーションは全てXDで利用できますか
XDに存在しないグラデーションを編集可能な状態で持ち込むことはできません。線形と円形以外のグラデーションを編集可能なまま持ち込みたい場合はCCライブラリにグラフィックとして登録して、編集時はCCライブラリ上で編集を選んでください。
★レイヤーマスクはXDに読み込んでも保持されますか
保持されるとは言えません。Photoshopのレイヤーマスクはチャンネルの機能を利用したグレースケールのマスクなので、実質マスクの機能を果たしません。レイヤーマスクにグラデーションなどの白と黒以外の色がかかってない場合は正常に反映されます。（パスに変換されればよい）
★PhotoshopやIllustratorで作成したカラースウォッチをXDで利用できますか
スウォッチを直接XDに持ち込む手段がないのでできません。必要な場合はカラーとしてCCライブラリに登録しておくのがオススメです。
★IllustratorのシンボルをXDのコンポーネントに変換できますか？
変換できません。複製利用をしたい場合はCCライブラリのグラフィックとして登録して持ち込むことができます。
★CCライブラリを他者と共有する機能はありますか
Adobe IDで招待する方法と、URLを共有する方法があります。どちらもCCライブラリのパネルの右肩の…をクリックして出るメニューで、Adobe IDで招待したい場合は、「ユーザーを招待」を、一般公開されますがURLで共有したい場合はリンクを取得をクリックします。
★アセットが増えてくると探すのが大変です。良い方法はありますか？
アセットはテキスト検索が可能なので名前を付けている場合には検索するとよいです。名前も共通の分類接頭辞をつけるなど整理前提でつけておくのがオススメです。色は HEXでも検索が可能です。
検索以外の方法では、アセットを置く場所をカンバスに作って（多くの場合アートボードを専用にして）おき、種類ごとにおいて見やすくしたり、オブジェクトを選択して「アセットを表示」することで探すことができます。
★アセットの名前の付け方で注意すべきことはありますか？
共有時にファイルを書き出したり、CSSの変数を渡したい場合は英数字と記号でつけておくとよいです。検索を考えた場合には、種類ごとに接頭辞をつけます。ボタンだったら button- や、btn- といった具合です。Sketchの経験者が多い場合には、 Header/titleのように区切って名前を付けておくとルールが浸透しやすくオススメです。
★XDとPhotoshopでは色が違って見えるのですが、気のせいでしょうか？それとも何か設定がありますか？
XDにはカラーマネージメントシステムがないため気のせいではないです。
★XD内で画像を右クリックしてphotoshopで編集したpsdデータはどこかに保存されているのでしょうか？
XDドキュメントを閉じるまでは、Photoshopが一時的に保存しておいてくれます。XDドキュメントを閉じるとPSDデータは破棄されるのであとからの発見はできません。破棄される前にCCライブラリに登録して、それを元の画像と置き換えると編集可能なデータを保持できます。
★フォント指定の際、デバイス毎のシステムフォントを指定する方法はありますか？
あればよいのですが残念ながらできません。源ノ角ゴシック JPを指定することでとりあえず対応できます。