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

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

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

注意:

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

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

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

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

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 Libraries アセットへのリンクはすべて保持されます。

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 のアートボードをコピーして XD にペーストすることはできません。

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

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

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

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

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

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

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

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

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

また、.psdファイルをOSクリップボードにコピーして、外観の貼り付けオプションを使用して画像を直接イメージの塗りつぶしとして貼り付けます。

After Effects へのエクスポート

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

注意:

After Effects への書き出しは、After Effects CC 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ファイルからアニメーションを作成することができます。

注意:

他のファイルの読み込み

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 の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー