Webサイトやアプリのデザインカンプを、Photoshopで作成している方はたくさんいらっしゃると思います。そのデザインデータを直接XDに読み込んで、画面遷移つきのインタラクティブなプロトタイプをすばやく作成することができます。Step3では、PhotoshopとXDの優れた連携機能について解説します。
必要な情報
Step3. Photoshopのデザインからプロトタイプをすばやく作成
PSDファイルを直接XDで開き、リピートグリッドを使ってデザインをカスタマイズしたり、画面遷移を設定したりして、インタラクティブなプロトタイプを作成します。作業に入る前に、練習用のサンプルファイルをこちらからダウンロードしておきましょう。
PhotoshopのデザインデータをXDに変換する利点
- レイヤー、効果、マスクなどを保持したまま、ファイルサイズを大幅に軽量化。サクサクと軽快に操作できます。
- リピートグリッドやシンボルなどの機能を使用することで、面倒な繰り返し作業や更新作業を大幅に効率化できます。
- インタラクティブなプロトタイプを作成し、デザインの見え方だけでなく、画面遷移などのフローや動作も確認できます。
- XDモバイルアプリを使って、実際のモバイルデバイスの画面上でデザインと動作を確認できます。
- デザインとプロトタイプをオンラインで手軽に共有できるため、迅速にフィードバックを得ることができます。
- デザインスペックの自動書き出し機能により、デザインの仕様を開発者にわかりやすく伝えることができます。
Step3では、PhotoshopとXDの優れた連携機能についてご紹介しました。このように、これまでPhotoshopでデザインカンプを作成していた方なら、簡単にXDを使い始めることができます。軽快な操作でインタラクティブなプロトタイプを作成し、クライアントやチームメンバーとのコミュニケーション向上にお役立てください。
