[AdobeMAX2020] PhotoshopとAdobe XDを組み合わせてクリエイティブを加速する！

なんでもできるPhotoShop

・リッチなグラフィック表現
・グラフィックを作りながらレイアウトもできる
・豊富なアセット（画像）の書き出し

一方で
・動作が重い
・見た目の変化がわかりやすく見せにくい
・レスポンシブデザインに対応させにくい
→　スクリーンの専用デザインアプリではない

XD/PhotoShop/Illustratorを組み合わせて使おう！

PhotoShopで作ったデータをXDで引き継ぐ

注意点
・縦書きやレイヤーマスクなど一部表現できない部分もある
・カラープロファイルの埋め込みができないので、PS側で処理しておく
・スマホサイズについては変倍がかかっていることに注意

どんな時に使うの？
・下層ページを作る
・更新用のデータを作る（過去資産の活用）
・別のサイズのページを作る

ポイント
・デザインスタイルとデザインのアートボードを用意しておく
　→　デザインスタイルを先にまとめておくことで、ローカルアセットとして登録管理しやすくなる
・コンポーネントを使うとデータの使い回しもしやすくなる

参考

Adobe XDでウェブデザインを加速する！

[連載] Adobe XDでウェブデザインを加速する！ | Adobe Blog