Participant

Answered

Which unit does Adobe XD use for pixel sizing?

Forum|Forum|9 years ago
April 14, 2016
24 replies
214207 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

N

Neha25472183ndjj

Participant

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).

Got this solution from ApexDesigns professioanls ( Tyler )

T

tomášk98459817

Participant

So basically I have to multiply every measurement in Xd design by 0.75 to get 1:1 representation of the design in my browser. That's absolutely ridiculous. Even more so when there is a way to change the measurement units in the developer view. Why won't it make the conversions automatically for the entire document? What's the point of changing the unit when the values stay the same?

I think the workaround for font sizes could be using base font 7.5 px and then using rem with values from xd design devided by 10. So if your Xd design says 15px, use 1.5 rem. This should give you accurate size to what is it in Xd.

But what should I do with any other measurement? Do it on the calculator? Seriously?

Pythia

Participating Frequently

The fonts sizes are shown as "pt" when saving character styles.

However, when exporting prototypes with design specs turned on for developers, the fonts display in "px".

If you hold down Command/Ctrl/Shift/4, you can measure the font in the browser prototype to confirm that it is actually an acturate pixel measurement.

Not sure why Adobe would display "pt" under character styles.

I've been going with pixels for any design documentation.

C

Clint22220588v5so

Participant

For anyone who comes across this rather confusing thread in the future and are looking for an easy conversion to CSS all you need to do is multiply the font sizes by 0.75. So 56pt in XD would be 42px in CSS.

Quick explanation: The Adobe XD pt measurement is 1 / 72dpi. The CSS px measurement is 1 / 96dpi. Despite one being called 'pixel' and another being called 'point', they are both based off a the same physical measurement and therefore scale in the exact same manner. A CSS pixel is not a phyiscal device pixel; in fact it functions like a point measurement.

CSS is structured in such a way that you shouldn't be worrying about DPI.

D

dmanigo

Participating Frequently

I wonder the same thing I have come to the conclusion that this is the most unanswered question on earth lol. Why is this even something that people should have to ask? ALL of the Adobe Platforms interact with one another in some way...so why create one with an ENTIRELY DIFFERENT SET UP?! I'm not converting nothing...that's dumb...one job and you did it terribly.

F

Fringe27

Participant

Can't believe it's Nov. 2021, five years since this issue was first raised and Adobe has released numerous bug fixes and major updates but has not addressed this issue yet! Seriously baffled! Any XD admins here care to explain?

K

K219177355onw

Participant

Apparently they just don't care. Looking what direction they are trygin to push this issue (Windows sizing, zooming etc) it is clear to me they have no idea themselfs why is it like that and how to fix it. More important for them is changing free features into payed options instead of fixing real problems. There is literally no point to fight with them and it is time to change the soft.

A

abbys98699843

Participant

It is seriously bizarre that Adobe hasn't fixed this pixel/rem situation. Figma has it covered already. I'd like to keep using XD because I already know all the keyboard shortcuts and own a subscription. But unless there is a plugin available soon...I'm going to have to switch. Even adjusting the pt sizing on my end still leaves me with a clunky beta design from a developer. And I'm the one left looking bad...

A

austinw40710865

Participant

Anyone else having an issue with font sizing when sharing prototypes in developer mode? The character styles panel defaults to pts but when I select px from the dropdown to convert them over for our developer it doesn't make the conversion. All it does it change the suffix without changing the number.

HARSHIKA_VERMA

Community Manager

Hi Austin,

We are sorry for the delay in response. We had a similar discussion happened in past here: https://community.adobe.com/t5/adobe-xd/which-unit-does-adobe-xd-use-for-pixel-sizing/m-p/8228778 and https://community.adobe.com/t5/adobe-xd/which-unit-does-adobe-xd-use-for-pixel-sizing/m-p/10534752

Please go through the community post which might help you.

Let us know if you need further assistance from us.

We would be happy to help.

Thanks,

Harshika

D

defaultvzokstmsd8g8

Participant

Is this something that is ever going to be fixed or is the only solution to switch to Figma or Sketch? Wondering if I should wait for a fix or just find another app to use. Thanks.

A

axel.bonniot

Participant

Hello,

I would like to know because it is not indicated on XD.

What are the Adobe XD units of measurement for :
- the distance between two elements
- the typeface (pt / px etc.?)
- the space between the letters
- line spacing

I wonder why it is so complicated to get access to this information, which I think is essential.

Thank you in advance for any answers and explanations.

Rishabh_Tiwari

Community Manager

Hi there,

Thanks for reaching out. I found a similar discussion on Adobe XD community which you can refer to here: https://community.adobe.com/t5/adobe-xd/which-unit-does-adobe-xd-use-for-pixel-sizing/m-p/8228778#M129

Feel free to reach out if you need any further assistance.

Regards

Rishabh

GermaVinsmoke

Participant

I tried one calculation which is based on the 1 inch. You can find the detailed explanation in this stackoverflow answer - https://stackoverflow.com/a/64061047/8437974 . I hope this will solve all kinds of problem.

R

Raj5C34

Participant

Guys, I seem to have found a solution, to some extent, that works for me. I was having this problem where I'd create a design in a 1920x1080 canvas and when I'd give the measurements (font sizing, spacing, line-height etc) to a developer, it would show a WAY bigger size. See my problem was with the canvas I was using.

If you use a bigger canvas, you have to increase the size of everything inside it in order to make up for the high resolution. But when you export said settings in a canvas of a smaller size everything will look bigger.

A simple solution for this (and I'm saying this again, that worked for me) was to match the resolutions. So if you've designed the document in 1920x1080, tell the front end dev to do the same, or vice versa depending on who's willing to do the work.