Work with external assets

  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    5. Workspace basics
    6. Change app language in Adobe XD
    7. Access UI design kits
    8. Accessibility in Adobe XD
    9. Keyboard shortcuts
    10. Tips and tricks
    11. Changes to XD Starter Plan
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids in XD
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups in XD
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components in Adobe XD
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects in XD
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lotties
      1. Work with videos in XD
      2. Work with Lottie animations in XD
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links in Adobe XD
    10. Preview designs and prototypes
    11. Create prototypes with videos in XD
  5. Share and export
    1. Share selected artboards
    2. Share designs and prototypes
    3. Work with prototypes in XD
    4. Coedit documents shared with you
    5. Create shareable links
    6. Review prototypes
    7. Work with design specs
    8. Share design specs
    9. Inspect design specs
    10. Navigate design specs
    11. Review and comment design specs
    12. Export design assets
    13. Export and download assets from design specs
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Share prototype from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents
      1. Issues with XD cloud documents
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

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 also import supported videos and Lottie files.

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.

Work with Photoshop

You can use any of these methods to bring in Photoshop assets into XD:

  • 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.
  • Import .psd file into XD.
  • Copy and paste bitmap and vector content from Photoshop and paste it in XD. 
  • Drag Photoshop assets from the Libraries panel to the XD canvas. For more information, see Creative Cloud Libraries in Adobe XD.
  • Copy a .psd file to the OS clipboard and use the Paste Appearance option to paste the image directly as an image fill. 

For more information, see Work with design assets from Photoshop.

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. Illustrator files are placed within the open document rather than opening them as a separate document. Smart objects are imported as expanded layers instead of bitmaps, and adjustment layers are retained. 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 Libraries panel to the XD canvas. For more information, see Creative Cloud Libraries in Adobe XD.

Copy and paste SVG into Illustrator from XD

You can now copy XD vector content to the clipboard and then paste it as fully editable layers into Adobe Illustrator.

To copy and paste any content from XD to Illustrator:

1. Right-click the shape or vector layer in XD and select Copy from the contextual menu.

2. From Adobe Illustrator, select Edit > Paste to paste the vector content.

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. 
  • You can convert Sketch content to XD design systems. For more information, see Convert Sketch libraries.

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 the layer from Sketch into XD.

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

Convert Sketch libraries to XD design systems

You can now move your Sketch content into XD and continue working on your design systems. Not only are the Sketch symbols and elements converted to XD components, but you can also use them as linked assets.

  1. Open the design system in XD..  
  2. From the Assets panel, click Link Assets. If there are existing assets in the Assets panel, click the plus icon (+) .
  3. In the Link Assets window, select Convert Sketch Library, and select a Sketch file from the file picker. XD converts the source Sketch document and automatically saves it as a cloud document and links the color, character styles and components to your XD document. 
  4. If you have multiple Sketch libraries that you have to work with, click the plus icon in the Assets panel and re-import another Sketch library. 

Sketch libraries and components

Use these guidelines to work with components in XD:

  1. Drag the converted components into the artboard. 
  2. To edit a source component, click a component instance, right-click and select Edit Master in Source Document
  3. To edit an asset, select the asset from the Assets panel.
  4. Once the changes are applied, switch to your working document.
  5. Click Update to accept the changes. 

For more information, see Work with components in XD.

Learn more

Watch this animated illustration to learn more about converting Sketch libraries to XD design systems.

Viewing time: 30 seconds.

1

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 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 that includes paragraph spacing, assets, inside and outside strokes 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.

When you export XD content to After Effects, not all the elements are supported with complete fidelity. For a list of supported and unsupported elements, see Supported features when you export XD files to After Effects

Import other files

To import assets such as PNG, JPG, TIFF, GIF, SVG, supported videos, or Lottie 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 the file into XD from Finder or from Windows File Explorer. You can also copy and paste an image file.

 To learn about supported videos in XD, see Work with videos in XD.

Adobe logo

Sign in to your account