How do I export from Adobe XD to Adobe Photoshop?
Before you continue reading, the title is the question I asked myself. The answer doesn't actually require Photoshop so if you absolutely want to use Photoshop then this post is not for you and reading on will just be a waste of your time. If however you are interested in getting specific elements sliced and diced for your website development, there is a way to do it in Adobe XD directly.
While looking for a way to improve the way we design and build websites, I stumbled across Adobe XD the other day. I decided to give it a try and it was incredibly easy to get the hang of - I'm sure there is much more to learn but it didn't take long to work out how to do enough to be able to design a website using it.
With my website design complete, it was time to export it to an Adobe Photoshop .PSD file so that the development team could get started on it. Only problem was, that there was no way to export to .PSD. I thought this was a bit strange so jumped on to Google and found that not only was I not the only one wondering how to do this, but there was no button in XD to perform the task.
Many people are frustrated and are requesting a button and someone also suggested exporting as SVG, opening in Adobe Illustrator then ungrouping the layers, releasing the layers to sequence then export to .PSD from there. I tried this and it didn't give great results so that got the cogs ticking some more...
WHY do I want to export from Adobe XD to Adobe Photoshop?
The answer really was so that the specific image elements could be sliced and diced and made ready to be used with the website development. Adobe XD actually has a way to extract the graphics and it really couldn't be more simple.
Select the artboard you want to export and then ungroup everything - anything that is grouped will be exported as a single image.
Click on the menu in the top left and press Export. Choose PNG as the format, select Export For Web and then choose where you want it to export to. When ready, click export and hey presto, every element in the artboard is turned into an image!
Finally, pick the images you are going to use and run them through an image compressor such as TinyPNG. You then have all the images you need as well as a full PDF of the design (i.e. you can easily export the artboard to PDF from XD) all ready for developing.
The PDF can be opened using Photoshop so there's not really a need for an export to PSD button!