Photoshop のデザインをレベルアップさせましょう。Photoshop のアートボードとアセットを XD に読み込み、忠実度の高いプロトタイプを作成する方法について説明します。

Adobe XD では、Photoshop のデザインとアートボードを接続してインタラクティブアプリケーションまたはプロトタイプに変形することができます。.psd ファイルを活用する場合や、単にコピー&ペーストを行う場合でも、XD と Photoshop 間の補完的な統合で簡単に操作できます。

1

注意事項

Photoshop と XD は補完的な機能セットを備えていますが、一部の機能は依然として 1 対 1 にマッピングしません。続行する前に、Photoshop と XD で直接マッピングしない機能について見てみましょう

 
  • 一部の Photoshop のエレメントはラスタライズして XD デザインに転送することができません。サポートされる Photoshop のエレメントについて詳しくは、XD でサポートされる Photshop のエレメントを参照してください。
  • .psd ファイルとして XD ファイルを Photoshop に書き出すことはできません。ただし、XD でファイル/開くにより、Photoshop の多彩な写真編集機能を使用した、XD デザインに含まれる Photoshop 画像を開くことができます使用できます。
  • XD で PSD ファイルを開いた場合は、再度 .psd ファイルとして保存することはできません。
     

XD と Photoshop の操作時のシームレスなエクスペリエンスのために、相互運用性のワークフローについて改善が加えられています。それまでの間、ご意見またはご提案をお持ちの方は、UserVoice でお知らせください。

XD での Photoshop デザインの利用

Photoshop でデザインの準備が完了した後、XD に移動する場合、次のような方法があります。

Photoshop のデザインの読み込みまたは起動
詳細
Photoshop からのアセットのコピー&ペースト
詳細
Creative Cloud ライブラリからのアセットの使用
詳細

読み込んだアートボードのプロトタイプ

Photoshop のデザインを XD に読み込んだ後、こうしたデザインを使用してプロトタイプを作成する方法は次のとおりです。

Photoshop では、Photoshop のアートボードを XD で直接開いて、XD のアートボードを作成できます。Photoshop のアートボードは XD のアートボード形式にシームレスに読み込むことができます。

また外出時にも、2 つのアプリケーションの間で行き来して、視覚要素をどこからでも調整できます。

XD のデザイン向上をお望みですか?リピートグリッドステート自動アニメーション音声プロトタイプなど、XD の独自機能を使用して、レベルアップできます。

XD による共有と共同作業

プロトタイプを共有しましょう。

インタラクティブなプロトタイプをデザインし、作成するために Adobe XD を使用する主な利点の 1 つは、デザインとプロトタイプを共有し、関係者からフィードバックが得られることです。

共有されたデザインは、忠実度が失われることがなく、最適化されており、関係者からのフィードバックはリアルタイムで参照できます。デベロッパーは、共有されたアセットとデザインスペックをコーディングのためにダウンロードできます。

XD で共有モードを使用することで、デザインおよびインタラクティブプロトタイプを関係者と共有し、シームレスに共同作業共同編集を行うことができます。ドキュメントの各バージョンが一定間隔で自動的に保存され、以前のバージョンからの変更を元に戻すことができます。

XD からファイルを共有した後、プロトタイプの解像度が影響を受けるかどうかご懸念をお持ちですか?そうしたご懸念は必要ありません。

この機能を試す

XD およびプロトタイプモードで Photoshop ファイルを開き、プロパティインスペクターで以下のオプションを選択します。

  • トリガー:「タップ」を選択します。
  • アクション:「トランジション」を選択します。
  • 移動先:最初に選択しなかった場合は、移動先のアートボードを選択します。
  • アニメーション:「左にプッシュ」を選択します。
  • イージング:イージング効果の作成オプションを選択します。たとえば、アニメーションをプロトタイプからイーズイン / アウトする場合は、「イーズイン / アウト」を選択します。
  • デュレーション:0.2 秒に設定します。

サンプルファイルをダウンロードして実際に試すか、このビデオで詳細をご覧ください。

視聴時間:1 分

サンプルファイル

 


よくある質問

Photoshop のアセットをコンポーネントに変換し、名前付け規則を維持しながら、プロジェクト全体で一貫して使用することはできますか?

Photoshop のアセットにより、異なるコンテキストとレイアウトで繰り返し要素を作成、維持するのに役立つ再利用可能なコンポーネントを簡単に作成できます。ボタンなど、再利用可能な要素を定義するためのマスターコンポーネントを作成し、そのプロパティを変更することで要素のインスタンスをカスタマイズできます。個々のインスタンスに加えた変更はその要素に固有ですが、マスターに加えた変更はプロパティがカスタマイズされていないすべてのインスタンスに反映されます。

画像ファイルを使用してカラースウォッチを作成する方法を教えてください。

Photoshop から XD にカラースウォッチの作成または読み込みを行うことはできません。回避策として、Photoshop のスウォッチパネルからライブラリパネルにこうしたカラーをドラッグし、XD で CC ライブラリを開いて、オブジェクトでそのカラーを使用して、アセットパネルにカラーを追加します。

次のステップ

これで、Photoshop で作成したデザインアセットを使用することができました。さらに一歩踏み込んで、インタラクティブプロトタイプを作成する方法や、フィードバックを得るためにデザイナーや関係者と共有する方法についてご確認ください。

ご質問または共有するアイデアがある場合

community

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティフォーラムにぜひご参加ください。皆様からのご意見や作品をお待ちしております。