Home > User Experience > 4 Ways to Convert XD Files to Photoshop PSD | by Dean Schmid | Mar, 2021

4 Ways to Convert XD Files to Photoshop PSD | by Dean Schmid | Mar, 2021

4 Ways to Convert XD Files to Photoshop PSD | by Dean Schmid | Mar, 2021


Adobe XD to Photoshop PSD conversion

Yesterday, I shared some Adobe XD design files with a client. His reply was not what I expected.

“Love the design, but can you send this again in Photoshop?”

Uuuuuuuuuummmmmmmmmmmmmmm…maybe? 🤔

Truth is, I didn’t know how to convert an XD file to PSD or if it was even was possible.

So I Googled it and turns out it’s not easy. Photoshop and XD are both Adobe products, but the XD to PSD conversion isn’t supported.

There has to be a way.

I’ve now tried the four methods that exist for converting XD Files to PSD and written this post. If you have questions, here you will find answers.

Photoshop is Still Super Relevant for UX and UI Design

I find it weird that it’s hard to convert Adobe XD files into Photoshop because there are so many UX and UI designers still working on it exclusively. True, Photoshop’s popularity is declining. Designers continue to flock to shiny new tools like Figma and XD, but Photoshop is established and breaking people’s habits takes time.

I don’t understand how Adobe hasn’t anticipated this behaviour and made it easy to convert from XD to PSD. They must know that people are using Photoshop as a UX tool because in 2015 they added artboards to Photoshop. I digress.

In this article, I’ll go through all of them in this order.

  • SVG
  • SVG + Illustrator
  • XD2Sketch
  • Photopea

How to Convert XD files to Photoshop via SVG

Rating 1/5 ⭐

Converting XD to Photoshop via SVG is visually accurate but there is one big reason you don’t want to do it.

Export an SVG from XD and try to open it in Photoshop, and your entire design is flattened into a single layer. Another problem with SVG exporting is you’ll lose all pixel-based images.

Your jpegs and pngs aren’t going to survive the trip into maths and back.

If all you want to do is display a picture of your design in Photoshop converting XD to Photoshop via SVG is a viable option, just be aware that editing this design file in the future will prove very difficult. I didn’t do this, because I didn’t want to give my client a single layer design file.

How to convert XD files to Photoshop via SVG

Step 1

Click here to export your XD canvas as an SVG.

Step 2

Export the whole canvas

Step 3

Open the SVG file in Photoshop. Depending on what application you have set to open SVGs by default, the icon may look like a web browser or a code editor.

I’ve set Photoshop as my default application for SVG files.

Step 4

Importing the SVG files into Photoshop at high resolutions takes ages. If you’re short on time, or just testing out the results, lower the resolution.

Here is the output. Just like we expected, there’s only a single layer.

If you send this, the client can’t do anything with the design without remaking it from scratch. I don’t consider this a solution.

Pros of SVG

Cons of SVG

  • Output is a single layer
  • Dead-end for all components.
  • Resizing issues
  • Loss of pixel-based graphics
  • It takes a very long time to rasterize images at high resolutions
  • Not a viable solution

Converting an XD file to PSD via SVG and Adobe Illustrator

Rating 2/5 ⭐⭐

This method which for lack of a better name we’ll call the SVG Illustrator conversion is a dirty hack. Your SVGs take a trip through Illustrator, but the advantage of this method is it outputs a Photoshop file with LAYERS.

Yes, it will destroy your layer structure and flattens most of your shapes, but it isn’t completely flat. There are still layers, and I guess it’s theoretically possible to edit this back into a useable design document.

I’m just worried that it might be quicker to throw it in the bin and start again.

Step 1

Export your XD canvas as an SVG.

Step 2

Open the SVG file in Adobe Illustrator. Notice how you’ve retained your layers as clip groups? For some reason, Photoshop can’t do this, which is why we’re using Illustrator.

Step 3

Export the file from illustrator as a PSD document

Step 4

Make sure you click Write Layers in the Photoshop export options. It doesn’t take a long time to export at a high resolution 300 ppi is fine. You also want to preserve Text Editability and Maximum Editability.

Step 5

Finally, you open the converted PSD file in Photoshop and there you have it.

You’ll need to invest some serious time into tidying up this design. It really decimates your layer structure and flatters most shapes.

These freebie design files are simpler and fared a lot better than my real design files.

The conversion is okay. It’s better than going straight into Photoshop but not by much.

Pros

Cons

  • Practically unusable — merges and flattens layers.
  • You need to have Illustrator
  • Doesn’t convert artboards

___________________________________________________________________

___________________________________________________________________

In the end, I had to spend money to convert my XD files to Photoshop.

I was reluctant to get out my wallet still believing an Adobe to Adobe conversion should be a simple task.

As the hours dragged on I realised I just wanted it done.

I found two “paid solutions”, and I’ve tried both of them.

For the sake of this high effort medium post, I’ll demo them to you, so you walk away from this article with a full sense of how to convert XD to Photoshop.

How to Convert Adobe XD to PSD with Photopea

Rating 2/5 ⭐⭐

Photopea is an online tool that’s capable of all kinds of conversion.

XD to PSD is just one of many options.

I’ve used Photopea before and thought it was free but turns out it’s not. There’s a free time window. The first 15 minutes in every two hours.

I only needed to wait 28 minutes, so I set an alarm and did something else.

Step 1

Go to Photopea.com and open their editor.

Step 2

Click

file menu open and open your XD file.

I didn’t want to use my real design files for the medium article, so I used free files I found at https://freebiesui.com/xd-freebies/.

Step 3

Save the file as a PSD to your computer.

umm what

The Result

Photopea converted my XD files to Photoshop files, but the output wasn’t very good. I lost a lot of graphics and symbols and some of my border radiuses were removed.

Some artboards it converted perfectly, others not so much, and I’d estimate there are 2 to 3 hours of rework needed to get the conversion looking like my original XD document.

There are empty squares everywhere called tap targets leftover from the prototyping that was in my XD file.

Pros

  • It’s free
  • Great folder hierarchy and layer names

Cons

  • The resolution was also too low
  • Alignments were off
  • Primitive elements like simple coloured squares were just missing
  • Time-consuming rework required to bring design files up to scratch

XD2Sketch

Rating 4/5 ⭐⭐⭐⭐

XD2Sketch was an accurate and fast conversion, but it’s crazy expensive.

It spat out a PSD file that’s was “close” to ready and just needed some minor rework before I could send it off.

Full disclosure, I now use this tool on a semi-regular basis, so yeah I’m a little biased, but it’s earned my bias.

Here’s How you use XD2Sketch to Convert XD to PSD

Step 0

We’ll convert the same design files that we did with Photopea. This is what our files look like in Adobe XD.

Step 1

Go to this page https://xd2sketch.com/converter/xd-to-psd.

Or if you go via the home page, just make sure you’ve got the Adobe XD to PSD option selected like you can see in this screen.

Adobe XD to PSD

Step 2

Upload your XD file to XD2Sketch.

Upload your XD file to XD2Sketch

Step 3

Pay money. It ain’t cheap.

Pay for XD2Sketch

Done and dusted. Let’s take a look at how our Photoshop files turned out.

The finished XD2Sketch Document

The conversion is pretty good. All our artboards were copied across to PSD, and as you can see folders and layers are employed by Photoshop to neatly separate each of my styles.

I can make small changes to the strokes and modify all styles with a few clicks, and the developers can quickly get styles out of the layers.

Pros

  • Converted the names and structures of my components
  • Preserved components and artboards
  • 20 minutes rework tops before it’s ready to send
  • Saves a lot of time over rasterizing SVGs into Photoshop — which takes ages

Cons

In Conclusion

This was an interesting learning experience and XD2Sketch is the best tool for the job.

I often use it to save time on big projects. If you have simpler design files and don’t want to pay money try the illustrator method or Photopea.

Thanks for reading.

I hope this article was useful. I wrote it because there’s not much quality info on this topic and I wish it existed when I was looking for solutions. Good luck!



Source link