XD/Photoshop production flow nightmare

Report · Nov 29, 2017

I’ve been using XD for a year now – and I love it, it’s such a fast way to get ideas down.

Now I’ve reaching the point where I’m passing over designs and assets to developers.

I’m totally confused.

They want it in Zeplin, which XD doesn't support, but that’s OK, because Photoshop does.
Except, I can’t see how to export layered photoshop documents from XD.
So I start to create a Photoshop document by cutting-and-pasting. I discover that the size of a mobile screen in XD is 50% the size of what it needs to be in Photoshop! An iPhone 6 Plus in XD is 414x736, and in Photoshop its 1242x2205. Why is that? Now everything I’ve done is unusable…?
Cutting and Pasting vectors from XD rasterises them!

Am I doing something wrong or is XD just useless for production? I get I need to switch to Sketch – but I’ve got so much work in XD now, I don’t want that to go to waste.

Report · Nov 29, 2017

Perhaps this is helpful.

https://www.paintcodeapp.com/news/iphone-6-screens-demystified

XD works in device independent units (as described in the link). You can export assets directly from XD a 1, 2, or 3x to deliver the requisite density artwork required (via the Export menu, choose ios).

-C

Report · Nov 29, 2017

Thank you C – I really appreciate the quick answer.

The link is amazing – I’ve been seeking an explanation of screen size and resolution for ages!

I’ve just tried exporting at x3 and it does indeed save it to the size of what Photoshop is expecting. At least that gives me a template to trace over.

Though no idea why XD uses DIU. Exporting x3 does nothing for copying and pasting elements from XD to Photoshop (unless I export all the elements first), especially as it rasterises everything. I’ll be setting up my XD pasteboards to the correct (Photoshop) size in future.

Report · Nov 29, 2017

1. I hadn't heard of Zeplin, but I see it can work with Sketch or Photoshop files. There are feature requests for exporting to each of those.

2. You can't, yet.

3. If you select what you want to export, then in the export dialog choose PNG, iOS, and set the Designed at to 1X, you will get three images for each element. The @3x.png files would match the 6 Plus size in Photoshop.

4. You can export as SVG (each item becomes its own SVG file), that would solve the resolution issue too, you would size them up to 300% in Photoshop.

Report · Nov 29, 2017

Thanks Colin – that’s a really great suggestion of exporting as an SVG – I’m giving it a try now.

I appreciate XD is new, and can’t integrate with every third party software – but not to be able to export to Photoshop is a bit poor.

And I still don’t get the DIU – what am I missing – why wouldn’t I ignore the phone sizes in XD and just set up my own template?

Report · Nov 29, 2017

Yes, you could do that, and when you export for iOS you would set the Designed at to 3X. Then the @3x version will still match Photoshop, and you're get the 1x and 2x versions for other devices.

So long as your elements are vector, or the images you imported were 3x the size of the XD template, you should be able to use the 1x XD template, and have designed at as 1x. The exported files would look the same as it would with your custom 3x template.

Report · Nov 30, 2017

Aha! Got it – thanks. Really helpful.