Bring assets from other applications such as Photoshop, Illustrator, After Effects, Sketch, or even drag images from a web browser or paste image from the clipboard into Adobe XD.

You can bring assets into Adobe XD from other Adobe applications, such as, Photoshop, Illustrator, and from third-party applications such as Sketch. You can enhance these assets further in XD or use them to develop interactive prototypes.

You can bring in assets in multiple ways depending on the application you are using.

Примечание.

If you want to convert Photoshop and Illustrator files into XD files, use the Open feature; if you want to add the content of those files into an existing XD file, use the Import feature.

Bring in assets from Photoshop

You can bring in Photoshop assets into XD in multiple ways.

Multiple ways of bringing Photoshop assets into XD
Multiple ways of bringing Photoshop assets into XD
  • You can open a .psd file directly in XD. You can then edit the file in XD just like any other XD file, wire interactions, and share as prototypes or design specs. For more information, see Open Photoshop files in XD.
  • You can import .psd file into XD.
  • You can copy and paste bitmap and vector content from Photoshop and paste it in XD. 
  • You can drag Photoshop assets from the CC Libraries panel to the XD canvas. For more information, see Creative Cloud Libraries in Adobe XD.
  • You can also copy a .psd file to the OS clipboard and use the Paste Appearance option to paste the image directly as an image fill. 

Open Photoshop files in XD

You can directly open your Photoshop (.psd) files in XD, and convert them into XD files. After you open your files, you can edit them in XD, wire interactions, and share them as prototypes or design specs.

To open a Photoshop file in XD, do one of the following:

  • Click File > Open. Navigate to the required folder, select a .psd file, and open it in XD.
  • Drag the Photoshop file over the XD icon to open the file in XD (on Mac only).
  • Right click the Photoshop file and select Open with > XD from the context menu.

You can also use the Cmd+O (Mac), or Ctrl+O (Windows) keyboard shortcuts. If you have opened a PSD file recently, you can also open it from the Recent Files list on the start screen.

Примечание.

Photoshop and XD have many different feature sets. XD brings in Photoshop elements and effects that can be mapped to XD’s functionality. The rest of the elements are either rasterized or not transferrable yet to the XD file. To learn what elements are supported in this version, see Supported elements when you open Photoshop files in XD.

Import Photoshop files to XD

To import a Photoshop file to XD, on XD, select File > Import. If the imported Photoshop files have artboards, those artboards are placed below XD artboards. If there is a lack of space below the XD artboards, the imported artboards are placed in the available spaces. If the imported file does not have artboards, its assets are placed at the center of the canvas. 

When a Photoshop file is imported to XD:

  • Imported smart objects from Photoshop have high fidelity and are editable.
  • Adjustment layers of a Photoshop image are not discarded.
  • Any links to Creative Cloud library assets from Photoshop are retained.

Copy and paste bitmap content from Photoshop

To bring in bitmap content from Photoshop, perform the following steps:

You can copy bitmap content from Photoshop by making a selection using the marquee tool. Then, select one of the following options:

  • Edit > Copy to select the content on the current layer
  • Edit > Copy Merged to select the content on all the layers within your selection.

Paste the copied content into XD.

  1. Select all (Cmd+A or Ctrl+A) in a bitmap or a text layer (or, first convert a vector layer or group to a Smart Object).

  2. Copy the content.

  3. Paste the content in XD.

    The layer is pasted as a bitmap.

Copy and paste SVG from Photoshop

To copy and paste an SVG from Photoshop, right-click the shape or vector layer in Photoshop, click Copy SVG, and paste it in XD.

Bring in assets from Illustrator

You can open Illustrator files in XD, or import them.

You can also copy vector and bitmap images from Adobe Illustrator and paste them into XD retaining the same fidelity and editability when you open or import Illustrator files. However, you cannot copy and paste an Illustrator artboard to XD.

You can also copy a vector file to the OS clipboard and use the Paste Appearance option to paste the image directly as an image fill. 

You can also bring in Adobe Illustrator assets stored in Creative Cloud Libraries into XD by dragging them from the CC Libraries panel to the XD canvas. For more information, see Creative Cloud Libraries in Adobe XD.

Open Illustrator files in XD

Bringing Illustrator assets into XD
Bringing Illustrator assets into XD

You can directly open your Illustrator (.ai) files in XD and convert them to XD files. After you open your files, you can edit them in XD, wire interactions, and share them as prototypes or design specs.

To open an Illustrator file in XD, do the following:

  • In XD, select File > Open. Navigate to the required folder, select an .ai file, and open in XD. You can also use the Cmd+O (Mac), or Ctrl+O (Windows) keyboard shortcuts.
  • To open the file in XD (on Mac only), drag the Ai file over the XD icon.
  • Right-click the Illustrator file and select Open with > XD from the submenu.

Примечание.

When you open an Illustrator file in XD, not all elements are supported with complete fidelity. For a list of supported and unsupported elements, see Supported elements when you open Illustrator files in XD.

Import Illustrator files

To import an Illustrator file to XD, select File > Import. If the imported Illustrator file has artboards, those artboards are placed below XD artboards. If there is a lack of space below the XD artboards, the imported artboards are placed in the available spaces. If the imported file does not have artboards, its assets are placed at the center of the canvas. If the imported file does not have artboards, its assets are placed at the center of the canvas. 

Bring in assets from Sketch

Multiple ways of bringing Sketch assets into XD
Multiple ways of bringing Sketch assets into XD
  • You can open a .sketch file directly in XD. You can then edit the file in XD just like any other XD file, wire interactions, and share as prototypes or design specs. For more information, see Open Sketch files in XD.
  • You can also copy assets from Sketch and paste it in XD. For more information, see Bring in selected assets from Sketch.
  • You can also copy and paste directly from Sketch into XD, maintaining its editability in XD.
  • You can also copy a Sketch file to the OS clipboard, and use the Paste Appearance option to paste the image directly as an image fill. 

Open Sketch files in XD

You can directly open your Sketch (.sketch) files in XD, and convert them to XD files. After you open your files, you can edit them in XD, wire interactions, and share them as prototypes or design specs.

Примечание.

You can only open Sketch files created using Sketch version 43 or newer versions.

If you have an older file, save the file using the latest version of Sketch, and then open the file in XD.

To open a Sketch file in XD, do one of the following:

  • Click File > Open. Navigate to the required folder, select a .sketch file, and open it in XD.
  • Drag the Sketch file over the XD icon to open the file in XD (on Mac only).
  • Right click the Sketch file and select Open with > XD from the context menu.

You can also use the Cmd+O (Mac), or Ctrl+O (Windows) keyboard shortcuts.

Примечание.

When you open a Sketch file in XD, not all the elements are supported with complete fidelity. For a list of supported and unsupported elements, see Supported elements when you open Sketch files in XD.

Bring in selected assets from Sketch

  1. In Sketch, select one or more layers or groups, and click Make Exportable

  2. Choose SVG as the format, and drag-and-drop the layer from Sketch into XD.

    The content is inserted as an editable vector content in XD.

Bring in assets from web browsers

You can drag images directly from all modern web browsers onto your artboards. You can also drag the images into an object on an artboard - when you do so, the image size is automatically adjusted to fit the object.

You can also copy an image to the OS clipboard, and use the Paste Appearance option to paste the image directly as an image fill. 

Export to After Effects

Exporting assets to After Effects
Exporting assets to After Effects

Примечание.

Export to After Effects is supported only with After Effects CC 2018 and 2019 versions. If you have an older version installed, Export to After Effects option is disabled in XD. To enable this option, log into your Creative Cloud application and update After Effects to the latest version.

If you want to use After Effects to turn your XD designs into custom animations or micro-interactions, do the following:

  • In XD, select the layer or artboard you want to animate in After Effects. 
  • Select File> Export > After Effects. If After Effects is not installed on your machine, this option is grayed out. You can also use the ⌥⌘F (Mac), or Ctrl+Alt+F (Windows) keyboard shortcuts. After Effects launches (if closed) or moves to the foreground (if running in the background).
  • The selected layers or artboards are transferred as native shapes, texts, assets, and nested compositions in your After Effects project. You can perform multiple asset transfers to the same After Effects project and create animations in stages or from multiple XD files.

Примечание.

Import other files

To import assets saved as PNG, JPG, TIFF, GIF, or SVG files, perform one of the following actions:

  • In XD, on Mac, click File > Import, and browse to select the file. On Windows, click the Hamburger menu, and select Import.
  • Drag-and-drop, or copy and paste the image into XD from Finder or from Windows File Explorer.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет