Creative Connection

March 13, 2018 /UX/UI Design /

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 is the perfect time to start, as this month’s XD release provides an easy-to-use, intuitive ability to wire up your PS designs and transform them into the interactive app and web prototypes. Its intuitive interface makes working in both apps a powerful, effective workflow that also includes options to share your designs and quickly collect feedback.

With help from Senior Creative Cloud Evangelist Paul Trani, we are proud to present a few simple steps to getting your Photoshop files into Adobe XD and making the most of a multi-app workflow. Read on for what you need to know to take your Photoshop designs to the next level.

Getting Started:  Bring Your PSD Files into Adobe XD

  1. If you don’t have Adobe XD installed, download it now
  2. Start a new design, and click on File > Open. Locate your. PSD file and click Open
  3. Adobe XD will import your Photoshop file in high fidelity, automatically bringing in layers, effects, groups, and masks. This higher fidelity importing allows you to manipulate the .PSD in Adobe XD and use it for backgrounds, icons, etc.  Here is a list of supported features when you open a Photoshop file in XD.
  4. Use Adobe XD’s tools to design your app or website. Switch to prototype mode, and then link screens to create a fully interactive prototype
  5. Watch your Photoshop designs come alive as a fully-interactive app and website prototypes

 

“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,” said Trani.

Copy and Paste Your Photoshop Designs into Adobe XD

For an even quicker way to bring your Photoshop designs into Adobe XD, simply copy and paste your work into the app. The copy and paste workflow allows you to 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:

  1. Using the Marquee tool in Photoshop, select the content you’d like to copy over to XD
  2. 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
  3. 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

One of the easiest ways to work across Photoshop and XD, is to import your Photoshop designs into a Creative Cloud Library, and use that same library to access your designs in Adobe XD. Not only can you easily reuse your Photoshop assets on your app and website prototypes in XD, but you can also edit those assets in Photoshop and have those changes automatically update in Adobe XD. Here are the steps to importing your Photoshop assets to your Creative Cloud Library and accessing them in Adobe XD:

  1. Select the content you’d like to import in Photoshop. On the right side of your screen, under Libraries, click the + button. Make sure graphic is selected before clicking add
  2. In Adobe XD, click File > Open CC Libraries. Click and drag your Photoshop asset onto your Adobe XD project
  3. 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 that 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 art boards it makes life pretty easy,” said Trani.

Learn more about Creative Cloud Libraries in XD

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,” said Trani.

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 yourself with your own designs.

Get Easy Feedback on Your Photoshop 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. There, 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,” said Trani.

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

All The Resources You Need to Succeed with Adobe XD

There are many advantages to working in Photoshop and Adobe XD.Using both tools in tandem makes it easy to efficiently create stunning designs that turn into impressive, interactive web and app prototypes. Here are a few more resources to help you start using Adobe XD:

“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,” said Paul Trani.

**

Free Icon Kits

We’ve released 3 exclusive & free icon kits designed by famous designers Anton & Irene, Büro Destruct and Lance Wyman. Read the blog and download the kits for free.

Take Part in our #IconContestXD & Win a Trip to Adobe MAX in Los Angeles

Adobe has launched a unique design contest around Adobe XD: We want you to take one of three exclusive and free icon kits and make a Creative City app prototype to help fellow creatives experience your city through your eyes. All the info you need to take part in the contest can be found on our blog – better hurry the contest closes on March 15! adobe.ly/2Hyf7fh

For UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

UX/UI Design

Join the discussion