5 people found this helpful
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?
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.
Thank you for your help.
SO are you saying that the system XD uses is the same as point when on a 72dpi screen?
I would use PT, like Sketch does, due to diverse pixel densities across devices. My monitor, for example, is 96 dpi. So, for a 20px font to render the same size as a 20pt font I have to increase the font size to 27px. But say, another person were viewing my design with a 72 dpi screen then the 27px text with would be much larger than I intended. It would render as the equivalent size of a 27pt font.
So, this becomes a huge issue in a work space where the design may be viewed or created on multiple screens with differing pixel densities.
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/
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.
1 person found this helpful
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,
2 people found this helpful
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.)
thanks for the info.
Ok this is super confusing. Anyway to just answer this...If I'm handing off designs to the developer do I need to make any conversions I designed at 375x667 and used the spec export (beta). In looking at the specs no matter what you choose px, pt, dp they are all the same. I have been given a conversion of px=dp*(dpi/160). So if designing for multiple phone screens (iOS/android) do I need to do any conversion or trust that if my text is 60 (XD unitless) away from the side that I don't have to do a conversion??
Ok this is super confusing. Any way can this be answer straight out...If I'm handing off designs to the developer do I need to make any conversions I designed at 375x667 and used the spec export (beta). In looking at the specs no matter what you choose px, pt, dp they are all the same. I have been given a conversion of px=dp*(dpi/160). So if designing for multiple phone screens (iOS/android) do I need to do any conversion or trust that if my text is 60 (XD unitless) away from the side that I don't have to do a conversion??
1 person found this helpful
You will not need to do any conversion, as long the developer is working in `pt` on iOS, `dp` on Android, and `px` in CSS. This is why the units don't change in design specs
If the developer is using any other unit, such as native `px` on iOS or Android, then they will need to make the conversion, however this conversion depends on the pixel density of the device the application is running on. The formula you have above is correct for Android (see Supporting Multiple Screens | Android Developers ) however it is up to your developer to make this calculation based on the current device's pixel density. If you, as the designer, make this calculation in advance then the measurements will be incorrect when the application is viewed on, for example, a mdpi then an xxhdpi device.
I hope this helps!
em's would be a pretty useful unit I guess
This doesn't work, however, for the line-height and letter-spacing. If I want to translate it into CSS I have to divide type size by 1000 and then multiply whatever number is in the letter-spacing box. The same calculation doesn't work for line-height and I have no idea how to change this.
Please advise. It's holding up projects and super confusing
XD uses milli-ems (1/1000 of font size) for character spacing, and line spacing uses the same units as font size. For CSS conversion, this typically means:
CSS letter spacing = (XD line spacing / 1000)em
CSS line height = XD line spacing (using the same units as the CSS font size)
You should note that line spacing is not exactly the same as line height. Line spacing is a baseline to baseline measurement, where line height creates a box that positions inline elements. Often, there may be a small vertical adjustment of the entire text element when moving between the two. There is a pretty in-depth look at what CSS line-height means over at iamvdo.