Harnessing the Power of Photoshop and Illustrator with Adobe XD

Whether you’re slicing bread or carving a piece of meat, the right knife for the task makes it easier and safer. Design is no different. The design process has evolved over the last couple of years, and has influenced the roles and responsibilities of a designer. The mediums for which we design have bifurcated and exploded. Design is neither static nor does it happen in isolation.

Knives are sharpened regularly to prevent them from going blunt. Software is regularly updated to keep it relevant and running smooth. But a chef never uses the same knife for every task. A chef’s kitchen is equipped with multiple knives which serve different tasks like pairing, slicing, carving, and boning.

Adobe Creative Cloud is the designer’s kitchen. Every application is a different tool optimized for a different task. Be it print, web, screen, video, or audio — Creative Cloud has an app that’s optimized for each of those mediums.

Adobe XD was built with a similar goal in mind — a dedicated platform to design and prototype experiences. On the other hand, Photoshop and Illustrator were never built for screen design. Those tools have a long legacy of core workflows they’ve catered to, and continue to evolve in their own respective ways. Photoshop has always and will continue to be the application for photos, image editing and art. Illustrator will continue to be the destination for everything vector.

Adobe XD, our dedicated platform to design and prototype experiences, along with Photoshop and Illustrator are indispensable tools for a UX designer. Very often we need to edit images in Photoshop or tweak vector artwork in Illustrator. We find ourselves hopping between different applications to get the job done in the most efficient way. Below I outline a couple different ways in which you can work and move content between these different applications and XD.

At left, a Photoshop document. At right, the same Photoshop document in Adobe XD.

1. Open a Photoshop document in XD

Designers have relied on Photoshop for many years to fulfill their screen design needs. We understand the challenges of adopting and migrating to a new tool and not having access to the previous several years’ worth of work. With the most recent update, you can open up PSD documents in Adobe XD with every artboard and layer intact and editable. This allows you to pick up from a PSD and leverage XD’s unique capabilities like prototyping and sharing.

• Tip: Reuse any UI kit or template designed for Photoshop in Adobe XD. Since XD doesn’t support every Photoshop feature, there are certain areas of the design that are imported as raster images. You can read more about supported elements here.

Copying multiple layers from Ps into XD

2. Copying layers from a Photoshop document into XD

You don’t always need to bring over the entire document into Adobe XD. Sometimes, all you need is a bunch of layers from Photoshop. The quickest way to bring in a layer from Photoshop to XD is by using copy/paste. You can either copy as a bitmap or copy as SVG from Photoshop. In XD, it’s a simple paste operation to bring in those layers.

• Tip: This process is efficient if you don’t need a round trip workflow that involves editing layers in Photoshop and updating them in XD. If you need a linked workflow, refer to the CC Library section below.

Editing linked Ps Graphics using CC Libraries

3. Working with linked Photoshop graphics in XD

If you need to edit bitmaps and reuse them in your prototypes, Creative Cloud Libraries is the most efficient way to manage the round trip workflow. Add the bitmap to a CC library in Photoshop. Using the CC library window (command-shift-L), you can place the bitmap as a linked graphic in XD. You can now continue to edit those bitmaps in Photoshop while they seamlessly update in XD.

• Tip: Using CC Libraries allows you to place a graphic as linked or unlinked (alt drag). If you need to unlink a graphic at some point, click on the link badge or use the context menu to unlink it. Unlinking will prevent the graphic from updating with any changes._
  _

Copying vector artwork from Ai into XD

4. Copying layers from an Illustrator document into XD

You don’t always need to bring over the entire document from Illustrator, either. Sometimes all you need is a bunch of layers. The quickest way to bring objects from Illustrator into XD is using copy-paste. You can copy as SVG from Illustrator and paste in XD. Since XD is a vector-based drawing tool, you can continue to edit the paths of the object.

• Tip: This process is efficient if you don’t need a round-trip workflow that involves editing layers in Illustrator and then updating them in XD. If you need a linked workflow, refer to the CC Library section below.

Editing linked Ai Graphics using CC Libraries

5. Working with linked Illustrator graphics in XD

If you need to edit vector artwork and reuse it in your prototypes, Creative Cloud Libraries is the most efficient way to manage the round trip workflow. Add the vector object to a CC library in Illustrator. Using the CC library window (command-shift-L), you can place the vector object as a linked graphic in XD.

• Tip: Using CC Libraries allows you to place a graphic as linked or unlinked (alt drag). If you need to unlink a graphic at any point, click on the link badge or use the context menu to unlink it. Unlinking will prevent the graphic from updating with any changes._
  _

Leveraging CC Libraries for styles

6. Bringing in colors and character styles from Photoshop and Illustrator

Illustrator and Photoshop have been used to create style guides for several projects. Using CC Libraries, you can save colors and character styles from your brand documents or sticker sheets. Using the CC Library window in XD, you can reuse these colors and character styles.

At left, a Sketch document. At right, the same Sketch document in Adobe XD.

7. Opening a Sketch Document in XD

With the March update, you can now open Sketch documents with Adobe XD. This allows you to seamlessly migrate your previous work from Sketch into XD. If your document contains symbols, we automatically populate those symbols in the Assets panel in XD.

• Tip: More information on the supported elements from Sketch to XD.

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