Skip to main content
Participant
April 14, 2016
Answered

Which unit does Adobe XD use for pixel sizing?

  • April 14, 2016
  • 24 replies
  • 214208 views

Hello,

is Adobe XD using dp, px, pt? I can´t find this information in the gui.

Is there a option to change between units now?

This topic has been closed for replies.
Correct answer Bear Travis

Hello there,

The pttopx converter you linked is using the conversion of number of pixels = number of points * (pixels per inch / points per inch), where the pixels per inch (or DPI) can change, and 72 is the typical number of points per inch. This whole problem of converting design units to a physical size is tricky, and so, at least for now, XD kind of sidesteps it.

It's easiest to think of XD as unit-less, kind of like a vector graphic, and focus instead on the relationships between elements. Let's say you design an iPhone 6/7 artboard at 375x667 units, and it uses type with a 10 unit font size. That relationship is the same, no matter what physical size your design is scaled to. You could rasterize your design to an image where each unit maps to 1, 2, 3, or even more physical pixels. And this mapping happens quite frequently, when you render to the screen, or export a bitmap image, or preview the design on your phone. On MacOS/iOS this abstract "unit" is called a Point (see Points vs Pixels​​, and PaintCode's Ultimate Guide to iPhone Resolutions), which typically matches up with the 1/72 inch definition above (for example, when printing), but not always (displaying on a monitor). So in the above design, since you are designing with the mapping of 1 XD unit to 1 iOS point, the artboard dimensions you can give to a developer are 375x667 points, and the font size would be 10 points. The key here is that you will need to always think about what that final mapping is, from an abstract XD unit to the final development one, be it pixels, points, or something else.

Down the road, we're hoping we can more thoroughly investigate the problem of design to display unit conversion, but this is how the application currently works.

Hope that helps,

-Bear

24 replies

Known Participant
October 25, 2018

OK so i still have a problem disigning for Android screens.  And what i researched, i came to this conclusion. Please tell me if i am thinking ok or not.

For many devices with many DPI the best way is to start a design with the width of 160dp

so selecting and XD android mobile 360x640 , resize it to 160x proportion.  And from there 1dp = 1 font size and so on. Andeverything should be 1:1

from there we can use the font scaling dependin on DPI so:

so if i start 1:1 160 dpi,  and design for a 480 screen later on, i'll do 3x the font size, and everything should be ok?

also i was so angry hearing that windows font scaling affects the XD app, that was like , WTF.

Participant
May 30, 2022

How can i resize every artboard to 160x proportion?

rishabha58995343
Participating Frequently
July 12, 2018

em's would be a pretty useful unit I guess

Participant
August 24, 2017

iOS only uses points and it is not true that pixles to points is 1:1, it grows as the number gets bigger. Here is an example of a converter to demonstrate, http://pttopx.com/

Convert PT to PX - Points to Pixels Converter & Calculator

PT          PX

1.33       1

13.33     10    

26.66     20

66.66     50

This becomes a huge issue for translating font sizes and dimensions to my iOS developers. For an Xd artboard of iPhone 6/7 is at 375x667 PIXELS, however iOS specs list it as 375x667 in POINTS. There is no conversion what so ever, but uses the same number.

Bear Travis
Adobe Employee
Bear TravisCorrect answer
Adobe Employee
August 24, 2017

Hello there,

The pttopx converter you linked is using the conversion of number of pixels = number of points * (pixels per inch / points per inch), where the pixels per inch (or DPI) can change, and 72 is the typical number of points per inch. This whole problem of converting design units to a physical size is tricky, and so, at least for now, XD kind of sidesteps it.

It's easiest to think of XD as unit-less, kind of like a vector graphic, and focus instead on the relationships between elements. Let's say you design an iPhone 6/7 artboard at 375x667 units, and it uses type with a 10 unit font size. That relationship is the same, no matter what physical size your design is scaled to. You could rasterize your design to an image where each unit maps to 1, 2, 3, or even more physical pixels. And this mapping happens quite frequently, when you render to the screen, or export a bitmap image, or preview the design on your phone. On MacOS/iOS this abstract "unit" is called a Point (see Points vs Pixels​​, and PaintCode's Ultimate Guide to iPhone Resolutions), which typically matches up with the 1/72 inch definition above (for example, when printing), but not always (displaying on a monitor). So in the above design, since you are designing with the mapping of 1 XD unit to 1 iOS point, the artboard dimensions you can give to a developer are 375x667 points, and the font size would be 10 points. The key here is that you will need to always think about what that final mapping is, from an abstract XD unit to the final development one, be it pixels, points, or something else.

Down the road, we're hoping we can more thoroughly investigate the problem of design to display unit conversion, but this is how the application currently works.

Hope that helps,

-Bear

Adobe Employee
August 24, 2017

In addition to Bear's answer it's useful to note that on iOS 1pt in a native app is equal to 1px in CSS, and on Android 1dp in a native app is equal to 1px in CSS. So if you have an image and display it at 100x200pt on iOS, 100x200dp on Android, and 100x200px on a web page, they will appear at the same size on the same device.

(Also note that CSS has its own pt unit, which is 1.333 (96/72) times larger than a px, however this is different from an iOS pt.)

Adobe Employee
April 14, 2016

Hi!

XD currently uses a virtual pixel for most of its measurements (including font size), which should be the same unit of measure as a CSS pixel, or most measurements in iOS. It's roughly equal to 1 physical pixel on a 72 dpi monitor (and, incidentally, a point).

I'm afraid there's no option to change the unit currently. Which units would you find useful?

sero_MMAuthor
Participant
April 15, 2016

Hello,

I work on iOS and Android Applications.
For Android our developer wants to have the font sizes communicate in pixel, but based on a 160 dpi view which is the base size for Android.
But I even make the test:
Saved a view from XD as PNG. Opened it in Photoshop as a 72 dpi view. And checked the size of the fonts. Its the same I use in XD.

Cool.
Thank you for your help.