User Guide Cancel

Work with design assets from Photoshop

Search
XD

XD

Open app
  1. Adobe XD User Guide
  2. Introduction
    1. Release updates
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. Color Management
    5. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    6. Workspace basics
    7. Change app language in Adobe XD
    8. Access UI design kits
    9. Accessibility in Adobe XD
    10. Keyboard shortcuts
    11. Tips and tricks
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups
    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
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects
      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 Lottie animations
      1. Work with videos
      2. Create prototypes using videos
      3. Work with Lottie animations
  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
    10. Create hyperlinks
    11. Preview designs and prototypes
  5. Share, export, and review
    1. Share selected artboards
    2. Share designs and prototypes
    3. Set access permissions for links
    4. Work with prototypes
    5. Review prototypes
    6. Work with design specs
    7. Share design specs
    8. Inspect design specs
    9. Navigate design specs
    10. Review and comment design specs
    11. Export design assets
    12. Export and download assets from design specs
    13. Group sharing for enterprise
    14. Back up or transfer XD assets
  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
    3. Coedit documents shared with you
  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. Publish design 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 and Creative Cloud Libraries
      1. Issues with XD cloud documents
      2. Issues with linked components
      3. Issues with libraries and links
    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.

Work with design assets from Photoshop

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

With XD 57, Adobe has improved color management functionality in XD. You get consistent colors when you copy an asset with an sRGB color profile from Photoshop into an XD document with an sRGB color profile. If the XD document has an Unmanaged color profile, you get a message that prompts you to switch the color profile to sRGB.

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 Grids, States, Auto-animate, Voice 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 other designers. Versions of your document are automatically saved at regular intervals allowing you to restore changes from a previous version.

With XD 57, Adobe improved color management functionality in XD, allowing you to provide a consistent color rendition for your stakeholders. To achieve this, switch the document’s color profile to sRGB. If you try to share selected artboards from a document having an unmanaged color profile, you get a message that informs you about a possible color discrepancy that your stakeholders might experience. For more information, see Color Management.

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

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?

Ask the 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

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy