その他のアプリケーション、例えば Photoshop、Illustrator、After Effects、Sketch からアセットを移行したり、Web ブラウザーから画像をドラッグ、またはクリップボードから Adobe XD に画像を貼り付けます。

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーション、および Sketch などのサードパーティアプリケーションからアセットを読み込むことができます。XD では、これらのアセットをさらに拡張することも、これらのアセットを使用してインタラクティブプロトタイプを作成することもできます。

使用するアプリケーションに応じて、アセットを複数の方法で読み込めます。

注意:

Photoshop ファイルと Illustrator ファイルを XD ファイルに変換する場合、開く機能を使用します。これらのファイルのコンテンツを既存の XD ファイルに追加する場合は、インポート機能を使用します。

Photoshop の操作

Photoshop アセットを XD に読み込むための複数の方法
Photoshop アセットを XD に読み込むための複数の方法

Photoshop からのアセットの読み込み

Photoshop アセットを XD に読み込むには、複数の方法があります。

  • XD で直接 .psd ファイルを開くことができます。次に、他の XD ファイルやワイヤインタラクションと同様に XD でファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。詳しくは、XD で Photoshop ファイルを開くを参照してください。
  • .psd ファイルを XD にインポートすることができます。
  • Photoshop からビットマップコンテンツやベクターコンテンツをコピーして、XD にペーストできます。 
  • Photoshop アセットをライブラリパネルから XD カンバスにドラッグできます。詳しくは、Adobe XD での Creative Cloud ライブラリを参照してください。
  • また、.psd ファイルを OS クリップボードにコピーして、アピアランスをペーストオプションを使用して画像を画像の塗りとして直接貼り付けます。

Photoshop での画像の編集

次の手順に従って、XD からの JPG、PNG、GIF、または BMP 画像を Photoshop で直接編集し、リアルタイムでそれらを更新します。

  1. ダブルクリックしてリピートグリッドまたはマスクから画像を選択し、画像が配置されているレイヤーにアクセスします。

  2. 画像を右クリックして、「Photoshop で編集」を選択します。システムで Photoshop が開いている場合、画像は新しいファイルとして開きます。画像名は、XD の画像レイヤー名と同じ名前が付けられます。アプリケーションがインストールされていない場合、このオプションはグレー表示されます。

    Photoshop での画像の編集
    Photoshop での画像の編集
  3. Photoshop で画像を編集、拡張して、ファイル/保存をクリックします。画像は、統合されたビットマップ画像として XD に自動的に送信されます。

    注意:

    アプリケーションが背景で開いている限り、Photoshop で画像にさらに変更を追加したり、元に戻したりすることができます。

XD で Photoshop ファイルを開く

Photoshop(.psd)ファイルを XD で直接開き、XD ファイルに変換できます。ファイルを開いたら、XD、ワイヤインタラクションでファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。

XD で Photoshop ファイルを開くには、次のいずれかの操作をおこないます。

  • ファイル/開くをクリックします。必要なフォルダーに移動し、.psd ファイルを選択して XD で開きます。
  • Photoshop ファイルを XD アイコンにドラッグして XD でファイルを開きます(Mac のみ)。
  • Photoshop ファイルを右クリックして、コンテキストメニューから Open with(以下で開く)/XD を選択します。

キーボードショートカットの command + O(Mac)または Ctrl + O(Windows)を使用することもできます。PSD ファイルを最近開いた場合は、スタート画面の最近使用したファイルのリストから開くこともできます。

注意:

Photoshop と XD の機能セットは多くの点で異なります。XD では、XD の機能にマッピングすることができる Photoshop のエレメントや効果は取り込まれ、残りはラスタライズされるか、まだ XD ファイルには転送されないかのいずれかです。このバージョンでサポートされるエレメントについては、Photoshop ファイルを XD で開くときにサポートされる機能を参照してください。

XD への Photoshop ファイルの読み込み

Photoshop ファイルを XD に読み込むには、XD で、ファイル読み込みを選択します。読み込まれた Photoshop ファイルにアートボードがある場合、それらのアートボードは XD アートボードの下に配置されます。XD アートボードの下にスペースがない場合、読み込まれたアートボードは使用可能なスペースに配置されます。読み込まれたファイルにアートボードがない場合、そのアセットはカンバスの中央に配置されます。

Photoshop ファイルを XD に読み込むと、次のようになります。

  • Photoshop から読み込まれたスマートオブジェクトは、忠実度が高く編集可能です。
  • Photoshop 画像の調整レイヤーは破棄されません。
  • ファイルは別のドキュメントとして開くのではなく、開いているドキュメント内に配置されます。
  • スマートオブジェクトはビットマップではなく展開されたレイヤーとして読み込まれ、調整レイヤーが保持されます。
  • Photoshop の Creative Cloud ライブラリアセットへのリンクはすべて保持されます。

Photoshop からのビットマップコンテンツのコピー&ペースト

Photoshop からビットマップコンテンツを読み込むには、次の手順を実行します。

選択ツールを使用して対象を選択し、Photoshop からビットマップコンテンツをコピーします。その後、次のいずれかのオプションを選択します。

  • 現在のレイヤーのコンテンツを選択するには、編集/コピーを選択します
  • 選択範囲内にあるすべてのレイヤーのコンテンツを選択するには、編集/結合部分をコピーを選択します。

コピーしたコンテンツを XD にペーストします。

  1. ビットマップまたはテキストレイヤーですべて選択(Command + A または Ctrl + A)します(または、最初にベクターレイヤーまたはグループをスマートオブジェクトに変換します)。

  2. コンテンツをコピーします。

  3. コンテンツを XD にペーストします。

    レイヤーはビットマップとしてペーストされます。

Photoshop からの SVG のコピー&ペースト

Photoshop から SVG をコピー&ペーストするには、Photoshop でシェイプまたはベクターレイヤーを右クリックして、「SVG をコピー」をクリックし、それを XD に貼り付けます。

Illustrator からのアセットの読み込み

XD で Illustrator ファイルを開くか、読み込むことができます。

さらに、Adobe Illustrator からベクターおよびビットマップ画像をコピーして XD にペーストすることで、Illustrator ファイルを開いたときや読み込んだときに同じ忠実性と編集可能性を維持することもできます。Illustrator ファイルは別のドキュメントとして開くのではなく、開いているドキュメント内に配置されます。スマートオブジェクトはビットマップではなく展開されたレイヤーとして読み込まれ、調整レイヤーが保持されます。ただし、Illustrator のアートボードをコピーして XD にペーストすることはできません。

また、ベクターファイルを OS のクリップボードにコピーし、「アピアランスをペースト」オプションを使用して画像を直接画像の塗りとしてペーストすることもできます。

Creative Cloud ライブラリに保存された Adobe Illustrator アセットをライブラリパネルから XD カンバスにドラッグして XD に読み込むこともできます。詳しくは、Adobe XD での Creative Cloud ライブラリを参照してください。

SVG を XD から Illustrator にコピー&ペースト

XD のベクターコンテンツをクリップボードにコピーして、完全に編集可能なレイヤーとして Adobe Illustrator にペーストできるようになりました。

XD から Illustrator にコンテンツをコピーしてペーストするには:

1. XD でシェイプまたはベクターを右クリックし、コンテキストメニューから「コピー」を選択します。

2. Adobe Illustrator から、編集/ペーストを選択して、ベクターコンテンツを貼り付けます。

XD で Illustrator ファイルを開く

IllustratorアセットのXDへの移行
IllustratorアセットのXDへの移行

Illustrator(.ai)ファイルを XD で直接開き、XD ファイルに変換することができます。ファイルを開いたら、XD、ワイヤインタラクションでファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。

XD で Illustrator ファイルを開くには、次の操作をおこないます。

  • XD で、ファイル/開くを選択します。目的のフォルダーに移動し、.aiファイルを選択して、XD で開きます。 キーボードショートカットの command + O(Mac)、または Ctrl + O(Windows)を使用することもできます。
  • XD でファイルを開くために(Mac 上のみ)、Ai ファイルを XD アイコンにドラッグします。
  • Illustrator ファイルを右クリックして、サブメニューから Open with(以下で開く)/XD を選択します。

注意:

XD で Illustrator ファイルを開くときに、すべてのエレメントが完全に忠実に再現されるわけではありません。サポートされるエレメントおよびサポートされないエレメントのリストに関しては、XD で Illustrator を開く際にサポートされるエレメントを参照してください。

Illustrator ファイルの読み込み

Illustrator ファイルを XD に読み込むには、ファイル/インポートを選択します。読み込まれた Illustrator ファイルにアートボードがある場合、それらのアートボードは XD アートボードの下に配置されます。XD アートボードの下にスペースがない場合、読み込まれたアートボードは使用可能なスペースに配置されます。読み込まれたファイルにアートボードがない場合、そのアセットはカンバスの中央に配置されます。読み込まれたファイルにアートボードがない場合、そのアセットはカンバスの中央に配置されます。

Sketch からのアセットの読み込み

Sketch アセットを XD に移行するための複数の方法
Sketch アセットを XD に移行するための複数の方法
  • XD で直接 .sketch ファイルを開くことができます。次に、他の XD ファイルやワイヤインタラクションと同様に XD でファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。詳しくは、XD で Sketch ファイルを開くを参照してください。
  • Sketch からアセットをコピーして XD にペーストすることもできます。詳しくは、Sketch からの選択したアセットの読み込みを参照してください。
  • XD の編集機能を維持したまま、Sketch から XD に直接コピー&ペーストすることもできます。
  • また、.psd ファイルを OS クリップボードにコピーして、アピアランスをペーストオプションを使用して画像を直接画像の塗りとして貼り付けます。

XD で Sketch ファイルを開く

Sketch(.sketch)ファイルを XD で直接開き、XD ファイルに変換できます。ファイルを開いたら、XD、ワイヤインタラクションでファイルを編集し、プロトタイプまたはデザインスペックとして共有することができます。

注意:

Sketch バージョン 43 以降を使用して作成した Sketch ファイルのみを開くことができます。

古いファイルがある場合は、Sketch の最新バージョンを使用してファイルを保存してから、XD でファイルを開きます。

XD で Sketch ファイルを開くには、次のいずれかの操作をおこないます。

  • ファイル/開くをクリックします。必要なフォルダーに移動し、.sketch ファイルを選択して XD で開きます。
  • Sketch ファイルを XD アイコンにドラッグして XD でファイルを開きます(Mac のみ)。
  • Sketch ファイルを右クリックして、コンテキストメニューから Open with(以下で開く)/XD を選択します。

キーボードショートカットの command + O(Mac)または Ctrl + O(Windows)を使用することもできます。

注意:

XD で Sketch ファイルを開く場合、すべてのエレメントが完全に忠実に再現されるわけではありません。サポートされるエレメントとサポートされないエレメントのリストについては、Sketch ファイルを XD で 開くときにサポートされる機能を参照してください。

Sketch からの選択したアセットの読み込み

  1. Sketch で 1 つ以上のレイヤーまたはグループを選択し、「書き出し可能にする」をクリックします。

  2. 形式として SVG を選択し、Sketch から XD にレイヤーをドラッグ&ドロップします。

    コンテンツは編集可能なベクターコンテンツとして XD に挿入されます。

Web ブラウザーからのアセットの読み込み

すべての最新の Web ブラウザーから直接アートボードに画像をドラッグできます。アートボード上のオブジェクトに画像をドラッグすることもできます。この操作をおこなうときは、画像がオブジェクトに収まるように自動的に画像サイズが調整されます。

また、.psd ファイルを OS クリップボードにコピーして、アピアランスをペーストオプションを使用して画像を直接画像の塗りとして貼り付けます。

After Effects へのエクスポート

アセットを After Effect にエクスポートする
アセットを After Effect にエクスポートする

注意:

After Effects への書き出しは、After Effects 2018 および 2019 バージョンでのみサポートされます。古いバージョンがインストールされている場合は、XD では「After Effects への書き出し」オプションが無効化されています。このオプションを有効にするには、Creative Cloud アプリケーションにログインして、After Effects を最新のバージョンに更新します。

After Effects を使用して XD デザインをカスタムアニメーションまたはマイクロインタラクションに変えたい場合は、次のようにします。

  • XD で、After Effects でアニメーション化するレイヤーまたはアートボードを選択します。 
  • ファイル/書き出し/After Effects を選択します。After Effects が装置にインストールされていない場合、このオプションはグレー表示されます。キーボードショートカットの ⌥⌘F(Mac)、または Ctrl + Alt + F(Windows)を使用することもできます。After Effects は起動するか(閉じている場合)、フォアグラウンドに移動します(背景で実行している場合)。
  • 選択したレイヤーまたはアートボードは、After Effects プロジェクト内のネイティブシェイプ、段落スペースを含むテキスト、アセット、内側または外側の線、ネスト化されたコンポジションとして転送されます。同じ After Effects プロジェクトに複数のアセット転送を実行し、段階的に、または複数の XD ファイルからアニメーションを作成することができます。

注意:

XD コンテンツを After Effects に書き出す場合、すべてのエレメントが完全に忠実にサポートされるわけではありません。 サポートされるエレメントとサポートされないエレメントの詳細なリストについては、XD ファイルを After Effects に書き出す際にサポートされるエレメントを参照してください。

他のファイルの読み込み

PNG、JPG、TIFF、GIF または SVG ファイルとして保存されているアセットを読み込むには、次のいずれかの操作を実行します。

  • XD Mac 版では、ファイル/読み込みをクリックし、ファイルを参照して選択します。Windows 版の場合は、ハンバーガーメニューをクリックし、「読み込み」を選択します。
  • Finder または Windows エクスプローラーから XD に画像をドラッグ&ドロップまたはコピー&ペーストします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー