Work with design assets from Photoshop

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-logoen

Logg på kontoen din