User Guide Cancel

Work with design assets from Photoshop

  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

Want to take your Photoshop designs to the next level? Learn how to bring in Photoshop artboards and assets into XD to create hi-fidelity prototypes.

Adobe XD gives you the ability to wire up your Photoshop designs and artboards to transform them into interactive apps or prototypes. Whether you are trying to unleash the potential of .psd files or doing a simple copy-paste, the complementary integration between XD and Photoshop helps you to achieve it effortlessly.

1

Things to keep in mind

While Photoshop and XD have complementary set of features, there are still some features that do not have a one-to-one mapping. Before you proceed, let's take a look at the features that do not have direct mapping in Photoshop and XD.

 

  • Some Photoshop elements cannot be rasterized and transfered to your XD design. For information about supported Photoshop elements, see Supported Photshop elements in XD
  • You cannot export XD files as .psd files into Photoshop. However, you can use  File > Open in XD to open Photoshop images that are part of your XD design using the rich photo editing capabilities of Photoshop. 
  • If you have opened your .psd file in XD, you cannot save them back as a .psd file. 

For a a seamless experience when working with XD and Photoshop, we're making improvements to the interoperability workflows. Meanwhile, if you have any suggestions or feedback, do share them on UserVoice.

Access Photoshop designs in XD

When your design is ready in Photoshop, here are some of the ways in which you can move them to XD.

Import or open Photoshop designs
Learn more

Copy and paste assets from Photoshop
Learn more

Use assets from Creative Cloud libraries
Learn more

Prototype imported artboards

After the Photoshop designs are imported into XD, let's see how you can use them to create a prototype.

When you work with Photoshop, you can create XD artboards by opening  Photoshop artboards directly in XD. Artboards in Photoshop are seamlessly imported into XD's artboard format. 

You also go back and forth between the two apps to adjust visual elements on the go.

Looking to enhance your XD designs? Take them to the next level using exclusive features in XD such as Repeat GridsStatesAuto-animateVoice prototyping, and others.

Share and collaborate with XD

Is your prototype ready for sharing?

One of the major advantages of using Adobe XD to design and create interactive prototypes is the ability to share your  designs and prototypes and get feedback from stakeholders.

Your shared designs are optimized with no loss of fidelity, feedback from your stakeholders are available in real-time, and developers can download the shared assets and design specs for coding.

Use the Share mode in XD to share your designs and interactive prototypes with stakeholders and seamlessly collaborate and coedit with them. Versions of your document are automatically saved at regular intervals allowing you to restore changes from a previous version.

Wondering whether the resolution of your prototypes gets impacted after you share them from XD? The answer is No.

Try it yourself

Open the Photoshop file in XD and in Prototype mode, select these options in the Prototype inspector:

  • Trigger: select Tap.  
  • Action: select Transition
  • Destination: select the destination artboard if you have not selected them at the outset.
  • Animation: select Push left.
  • Easing: select an option to create easing effects. For example, select Ease-Out to ease-out your animations from your prototype.
  • Duration: set to 0.2 seconds.

Do download the sample files and try them yourself or watch this video for more information.

Viewing time: 1 minute.

Sample files

 

Frequently asked questions

How can I convert my Photoshop assets to components and use them consistently across projects retaining their naming conventions?

You can use your Photoshop assets to create reusable Components that help you create and maintain repeated elements in different contexts and layouts. You can create a master component to define a reusable element, such as a button, and change any of its properties to customize instances of that element. Changes you make to an individual instance are specific to that element, but changes you make to the master propagates to all the instances. 

 How do I create a color swatch using an image file?

You cannot create or import color swatches from Photoshop to XD. As a work-around, you can drag these colors from the Swatches panel in Photoshop to the Libraries panel, open the CC Libraries in XD, use them on an object, and add the color to the Assets panel.

What's next?

We've got you started with working with design assets from Photoshop. Take a step forward and learn how to create interactive prototypes and share them with designers or stakeholders for feedback.

Have a question or an idea?

community

If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.

Adobe logo

Sign in to your account