Skip to main content
C
casperbiemans
New Participant
November 11, 2016
Answered

Understanding XD artboard sizes

  • November 11, 2016
  • 1 reply
  • 52367 views

I am currently designing an application for iOS within Photoshop, but wanna try the new Adobe XD. However, I am having some trouble with understanding the artboard sizes and dimensions.

Currently I have designed my application within Photoshop on a canvas size of 750x1134 pixels (iPhone 6 resolution).

When starting a new project within XD, I have a artboard size of 375x667. iPhone 6 renders on 750x1134 pixels.

When I added an image to the artboard and try to export that screen, I select PNG - iOS that will generate @1x, @15739213, @11199216. But I don't understand the selection box of "Designed at". What should I choose? Because 750x1134 pixels is different from 375x667. If I copy/paste an icon from my PSD to XD it will be to big for the artboard, because of it's smaller size. If I shrink it down so it will fit for that 375x667 resolution in points (if I am correct) then I am designing for 375x667 right? Not for an iPhone 6 pixel resolution?

Hope someone can help me out of this hard-theory of resolutions.

Thank you in advance.

Casper

    This topic has been closed for replies.
    Correct answer elainecc

    Hi, casperbiemans

    Great question! Before I get into it, here's a really quick guide on exporting:

    Learn how to export production-ready assets from Adobe Experience Design as PNG, SVG, and PDF files.

    To answer your question, however: iOS has a concept of a virtual point. I found this great explanation of the difference between pixels and points here: http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/  It's a great read, and I think really valuable for understanding what I'm going to say next.

    When XD outputs for iOS, it's going to output at 1x, 2x, and 3x resolutions. The 1x will be for your older screen sizes, 2x will be for up to iPhone 5s, and 3x will be for your newer, higher resolution screens. The actual size it outputs, though, is dependent on how you designed. If you design with the default artboards we have (which are, if you notice, half the size of what you're used to), you can leave your export settings to "designed at 1x," and it will export at 1 virtual point = 1px (aka 1x), 1 virtual point = 2px (aka 2x), and 1 virtual point = 3px (aka 3x).

    However, if you duplicate the artboard size you're used to in Photoshop, you should select "designed at 2x" in the export panel in XD. This will output 1 virtual point = 1/2 px (aka 1x), 1 virtual point = 1px (aka 2x), and 1 virtual point = 1.5x (aka 3x). You'll get the same exact pixel size in your output in both cases, but in the latter, your artboards in XD are much larger.

    Hopefully it all makes more sense to you now! Let me know if you have additional questions and I can try to answer.

    Thanks,

    -Elaine

    1 reply

    elainecc
    Community Manager
    elaineccCommunity ManagerCorrect answer
    Community Manager
    November 12, 2016

    Hi, casperbiemans

    Great question! Before I get into it, here's a really quick guide on exporting:

    Learn how to export production-ready assets from Adobe Experience Design as PNG, SVG, and PDF files.

    To answer your question, however: iOS has a concept of a virtual point. I found this great explanation of the difference between pixels and points here: http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/  It's a great read, and I think really valuable for understanding what I'm going to say next.

    When XD outputs for iOS, it's going to output at 1x, 2x, and 3x resolutions. The 1x will be for your older screen sizes, 2x will be for up to iPhone 5s, and 3x will be for your newer, higher resolution screens. The actual size it outputs, though, is dependent on how you designed. If you design with the default artboards we have (which are, if you notice, half the size of what you're used to), you can leave your export settings to "designed at 1x," and it will export at 1 virtual point = 1px (aka 1x), 1 virtual point = 2px (aka 2x), and 1 virtual point = 3px (aka 3x).

    However, if you duplicate the artboard size you're used to in Photoshop, you should select "designed at 2x" in the export panel in XD. This will output 1 virtual point = 1/2 px (aka 1x), 1 virtual point = 1px (aka 2x), and 1 virtual point = 1.5x (aka 3x). You'll get the same exact pixel size in your output in both cases, but in the latter, your artboards in XD are much larger.

    Hopefully it all makes more sense to you now! Let me know if you have additional questions and I can try to answer.

    Thanks,

    -Elaine

      R
      Renan Luna
      New Participant
      July 23, 2018

      I got confused as well.

      So there is an error on XD home screen. It says that iPhone size is 375x667 px (it is on pixels).

      Or I am still confused.

      T
      Thomas Dearie
      Known Participant
      September 14, 2018

      I believe XD is  listing the "1x" pixel dimensions, which is only half of the actual iPhone 8 pixel dimensions.

      Then, for the iPhone 8, graphics would export at 2x to bring it up to the physical resolution.

      The 375x667 is really just a dimensional ratio for that device - not an actual resolution.

      Its confusing, and a bit of the tail wagging the dog.

      Don't get me wrong - I have a lot of optimism for XD.

      But these kinds of issues are the inevitable realities of a conceptual and communications tool being built in a world that's mostly about production and technical execution. We're all interested in math - but the equations we need and use most are different. 

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices