How Adobe XD and Photoshop Changed the Way I Do Screen Design

Change isn’t always easy, especially when you’ve become so accustomed to a specific way of working. But when the world around you is evolving so rapidly, it’s sometimes necessary.

Howard Pinsky.

I started using Adobe Photoshop before I even entered high school, more than 13 years ago. From then it naturally grew to become my application of choice for just about everything: logos, photo retouching, vector work, and ultimately screen design. I loved Photoshop, I was comfortable in Photoshop, it was my tool of choice even though I knew that using another tool like Adobe Illustrator would benefit my workflow. Frankly, that part mattered way less to me than having to introduce something new into my tried-and-true design processes. No wonder my parents tell me I’m stubborn.

My dedication to Photoshop eventually led to the creation of my YouTube channel back in 2007, where I focused on creating educational content on just about every topic I could think of: from retouching, to text effects, and even UI and UX workflows. These videos really showed off how much Photoshop is capable of, but they also further dug me into my single-application hole. Then Project Comet, which would later become Adobe XD, came along and changed everything.

Project Comet changed my perspective on screen design

Adobe MAX 2015. There I was — sitting in the audience, all giddy about the new features that were just announced for Photoshop. Then the next presenter took to the stage — and what they revealed blew me away. Project Comet was Adobe’s foray into the UI/UX design space. Sure, many of their existing applications could be used for screen design, but let’s be real. They weren’t built specifically with screen design in mind.

The presentation demoed the wizardry of repeat grids — where you can take a group of elements and then repeat those elements in a grid format, making a task like list-making a breeze. And then they showed how to drop text and imagery onto the grid to populate it. Finally they showed off a document that contained hundreds of artboards, all zooming along across the large presentation screen above the stage. I saw how silky smooth the performance was, and started to realize how much my current workflows could be improved. I felt my stubborness begin to melt away.

Just a few hours later, I was teaching a session that focused on web and app design and I couldn’t stop thinking about the “little Comet that could.”

Different, but similar

When I first started using Adobe XD for web and screen design, it was certainly different from what I was used to — but, in a way, it was still very familiar. Many of the common tools I used on a daily basis in Photoshop were present; the layers panel functioned as I expected it to, and properties could be adjusted over to the right. This helped alleviate some of my fear of switching to a new application, but what really sealed the deal was XD’s integration with Photoshop that was introduced with one many of XD’s monthly updates.

XD quick start for Photoshop users.

Working hand-in-hand with XD and Photoshop

Now that I’ve finally allowed a new tool to enter my life, I’ve found specific uses for both — but more importantly, I’ve realized that Photoshop and XD are powerful together as complimentary applications.

There are many ways to work in sync between the two programs. I can simply open up one of my .PSD files directly in Adobe XD just like I would open any other document (XD opens Photoshop files with layers fully intact). If you prefer, you can also copy a layer in Photoshop as a bitmap or SVG and paste it into XD that way.

Going back and forth between image editing and layout? Not a problem — you can create a linked workflow by adding Photoshop assets to your CC Libraries and placing them in your artboards. When you edit the image in Photoshop it will automatically update in your XD file.

Opening PSD files in Adobe XD. View the full tutorial.

Let’s not forget about those XD goodies

What makes XD so attractive to a lifelong Photoshop user like myself are all the additional features I get. Tools like repeat grid, responsive resize, and the assets panel have all contributed to my noticeably faster and simpler workflows.

So much so, in fact, that I’ve found myself revisiting older projects that were initially designed in Photoshop. With every single one I’ve found that XD has been able to breathe new life into them.

I also unabashedly look forward to prototyping now. Yes, me — Mr. Stubborn. Whereas I used to find it a chore, it’s now become one of my favorite workflows.

Converting Photoshop designs into interactive prototypes.

As you can see in the above video, prototyping can help link various artboards together with beautiful transitions and overlays, leading to an improved experience for you and your clients. If you want to follow along, watch the other videos and download the project files here.

My advice to aspiring UI/UX designers

Looking back at my journey so far, it’s now clear how many hours I could have saved if I was simply open to adding additional tools into my workflow. Sure, Photoshop gets the job done — but my fear of change absolutely held me back. Whether you’re just getting into the design industry or a seasoned veteran, don’t be afraid to try new things, especially if they can work hand-in-hand with what you’re already familiar with.

To help you with that process, hop on YouTube, HelpX, or various other resources that provide online training. I wish these services existed when I was just getting started!

On joining Adobe

When I finally announced that I was joining Adobe as an XD Evangelist, many were confused. They knew I had been using XD for design projects at work, but with my heavy focus on Photoshop over the years, this was a big change. So why did I do it? A few reasons:

• I believe in the product: Having been using XD since day one of the beta, I’ve been fortunate enough to watch it evolve, month after month, and looking at the progress it’s made just in the last year has me very excited for the future.
• Photoshop is alive and well: A lot of what I do on a daily basis is now done in XD, but there will always be elements of my work that will require Photoshop, and many designers feel the same. This gives me an opportunity to show the community how the two applications can work together to help create incredible projects.
• The team is top-notch: Even before I started the interview process, I started to see how committed the XD team was to the application they’ve been working on for so long. Many of the team members frequent Twitter, talk to designers, and really take feedback to heart. This was absolutely confirmed once I met many of them in person. Their passion and dedication to XD will help take it to incredible places.

Now go — try something new

Hopefully this post has inspired you to jump outside your comfort zone and try something new, and if you need a little extra motivation, check out my XD for Photoshop Users series. Happy designing!

Direct download XD now here.

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