Adobe Xd Workflow
Let’s also create a basic circle shape in Adobe Xd and export it at different scale factors.
Although Adobe Xd’s export interface is a bit different than Sketch, notice that they both default to @1x assets. You can change this by toggling between the available scale factors.
Note: As of this publication you have to manually export each scale factor.
Working with Photoshop was the most confusing for me because it asks up front what the resolution should be. In addition, Photoshop works with raster images, which do not scale up properly when exporting for different scale factors.
So when working with Photoshop you must remember two things.
First, in a standard-resolution screen 1 point (1pt) is the equivalent of 1 pixel (1px), which means we will have approximately 72 points in 1 inch or (72px in 1in). All of your designs should remain at 72 resolution within Photoshop, which will be the equivalent for standard-resolution devices or @1x.
Second, to design for high-resolution devices multiply your width × height by your scale factor and leave your resolution at 72.
For example, if you want to design a 100px × 100px asset for both @1x and @2x you will need to create a Photoshop file at 200px × 200px to avoid pixelation.
And that’s it!
By now you should have a better understanding about device resolution and pixel density. You should also have an understanding of how the different scale factors map to Apple devices. And lastly, you should be able to produce the proper design assets for any device at any scale factor, whether you are using Sketch, Adobe Xd or Photoshop.