Everything A Photoshop User Needs to Get Started in Adobe XD

If you’re a Photoshop user who hasn’t tried Adobe XD yet, now’s a great time. Not only does Adobe XD give you the extraordinary ability to wire up your Photoshop designs and transform them into an interactive app and web prototypes, but its intuitive design makes working in both apps a simple, effective workflow that also includes powerful options to share your designs and get feedback. Here are a few simple steps to getting your Photoshop files into Adobe XD, with the help of Senior Creative Cloud Evangelist Paul Trani, and a few key tips to making the most of a multi-app workflow that can take your designs to the next level.

Getting started: Import your PSD Files into Adobe XD

If you don’t have Adobe XD installed, download it now.
Start a new design, and click on File > Open. Locate your .PSD file and click Open.
Adobe XD will import your Photoshop file, complete with all layers, effects, groups, and masks in full fidelity, allowing you to manipulate the .PSD in Adobe XD and use it for backgrounds, icons, etc.
Use Adobe XD’s tools to start designing your app or website. Switch to prototype mode and begin linking screens up to create a fully interactive prototype.
Watch your Photoshop designs come alive as a fully-interactive app and website prototypes.

https://youtu.be/R51yf9MwHnU

“It’s as simple as basically opening up that PSD right in XD and jumping in. Once you have your Photoshop asset in XD, take it to prototype, hook up some screens together. From there all the layers are individual layers, so everything comes in directly, nice and neat,” says Paul.

Copy and paste your Photoshop designs into Adobe XD

If you’re working in Photoshop and want to bring your design into Adobe XD even more quickly, you can simply copy and paste your work into the app. This means you can bring over individual layers of a Photoshop image, or your whole design as a single image with all layers merged together. Here are the steps to copy and pasting your Photoshop design into Adobe XD:

Using the Marquee tool in Photoshop, select the content you’d like to copy over to XD.
Click on Edit > Copy in Photoshop to copy content in the current layer, or select Edit > Copy Merged to copy all content, on all layers, within your selected area.
Open Adobe XD, and click Edit > Paste to paste your copied layer or full design into XD as a bitmap.

Import Photoshop assets into Adobe XD using Creative Cloud Libraries

The best way to work, according to Paul, is to import your Photoshop designs into your Creative Cloud Library, and use that same library to access your assets in Adobe XD. Not only does this mean you can easily use your Photoshop assets on your app and website prototypes in XD, but also you can re-edit those assets in Photoshop and have them change automatically in Adobe XD. Here are the steps to importing your Photoshop assets to your Creative Cloud Library and accessing them in Adobe XD:

Select the content you’d like to import in Photoshop. On the right side of your screen, under Libraries, click the + button. Make sure the graphic is selected and click add.
In Adobe XD, click File > Open CC Libraries. Click and drag your Photoshop asset onto your Adobe XD project.
You are now working with a linked asset. Any changes you make in Photoshop to that asset will be reflected automatically in Adobe XD.

“The reason I would use Creative Cloud Libraries is because it’s a link. So I can go to my library, right-click select, edit it in Photoshop to tweak the background, and then I can jump back into XD after I’ve tweaked it. It’s a live right connection and if you have 15 different artboards it makes life pretty easy,” says Paul.

Use Repeat Grid to quickly create multi-screen experiences with your Photoshop assets

If you work in Photoshop a lot, you likely spend a lot of time making small adjustments to multiple visual elements. Once you bring those assets into Adobe XD, you will be able to use the powerful Repeat Grid feature to save time. With Repeat Grid, you essentially create a group of objects, which can include your Photoshop design. Changes made to one artboard will automatically be applied to all of the others.

“When it comes to creating a new design, having little icons or buttons, using tools like Repeat Grid are really straightforward. If I have to have a screen that has five different items, and all kind of need to be the same across artboards, it’s a lot of copying and pasting in Photoshop. In XD it’s really easy to create consistent experiences across many artboards using your Photoshop assets,” says Paul.

For a detailed tutorial on how to use Repeat Grid in Adobe XD, check out our blog post Exploring Repeat Grid in Adobe XD, and then give it a try for yourself with your own designs.

A major advantage of using Adobe XD to design and create interactive prototypes is the ability to easily share your creations via links and get feedback. This can be effective for gathering feedback on your Photoshop designs, too.

To get started sharing an interactive prototype, after you’ve created it and linked your artboards together, click on the sharing button in the upper-right corner of Adobe XD and click Publish Prototype. From there, you can click Create Public Link to generate a URL that you can share with others. Anyone you share the link with can leave comments and highlight specific aspects of a design.

“If I have that link and want to give feedback on a Photoshop design, I can pin comments to certain parts of what was once in Photoshop, in the Adobe XD prototype. The client can say ‘hey, make this green,’ and actually pin that comment to the upper left where they need to make something green. All of that is being tracked and then you can resolve it as the designer (especially if those assets are linked), you can easily just jump back into Photoshop and update that link later,” says Paul.

This can also be a great tool for working with developers, as they can access sizing info on all elements from the link.

All the resources you need to succeed with Adobe XD

There are many advantages to working in Photoshop and Adobe XD, but the best way to effectively create stunning designs that turn into impressive interactive web and app prototypes is to use both tools in tandem. Here are a few more resources to help you start using Adobe XD:

A Weekend with Adobe XD: Everything You Need to Design a Mobile App — A comprehensive guide, laying out some of our best tutorials, with everything you need to put those Photoshop assets to work and start designing, prototyping, and sharing today.
Five FREE UI Kits for Adobe XD Created by Top UX Designers — When you’re ready to start punching up your designs with new UI kits, these resources, made by top UX designers, will help you nail that specific look or function you’re going for with your app or website prototype.

“I think XD is easy enough for any Photoshop user to pick it up. The tools are really straightforward. If you know Photoshop, you know XD,” says Paul.