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

Show previous replies

C

claudia carvalho

Participating Frequently

É ridiculo, se passaram 3 anos e ainda não corrigiram esse problema que afeta todo o fluxo e bom andamento do trabalho. Deveriam ter corrigido esse bug logo quando foi apontado. Isso é primordial. Pagamos por esse serviço!

Até hoje não vi uma resposta exata. E a Adobe só fala que está verificando o status do problema. Ainda(??!!!!).

Sinto ter que deixá-los, por que há outras coisas boas. Mas há também outros erros primários, como o caso dos componentes, onde o desenvolvedor não consegue inspecionar os vários estados, somente o padrão. Já abri uma discussão sobre isso e até agora nada resolvido. Não sei por que fazem tanta festa quando lançam um novo recurso, se ele não serve.

S

ssy.chuns

Participant

The answer to this question cannot be correct, as it contains two logically conflicting statements:
- "the same unit of measure as a CSS pixel"
- "equal to 1 physical pixel on a 72 dpi monitor"

However, a CSS pixel is the equal to 1 physical pixel on a 96 dpi monitor, NOT a 72 dpi monitor. So which one is it? The current answer makes no sense.

Peter Villevoye

Community Expert

The term "pixel" is highly ambiguous, as you can read in my several answers in this thread. According to CSS, they indeed seem to settle the debate on 1/96th of an inch. So on a 96 dpi monitor, a pixel is indeed the very physical pixel. And that's also the size at which Microsoft tends to chime in. Google however doesn't, and they adhere to a totally different idea for Android: their "density pixel" (dp) has a size at a grade, ranging from 120 to a whopping 640 pixels per inch.

So any answer which tries to fixate or even indicate the size of a "pixel", is making no sense, as long as huge and crucial stakeholders are using different ideas and standards...

Johnklungers

Participant

i always recalculate px to % in css for my responsive design so I would like the possibility to set % instead of px

Peter Villevoye

Community Expert

Then you would need to set a base value somewhere like a rem. Otherwise it's left up to the browser's default to declare the base font size and derive the size in its percentage (which isn't such a bad thing, if you'd be a puritan or brutalist designer...)

Ray10co

Participant

The problem stems from the fact that the desktop mockups don't display at 100%. Only the mobile mockups do. When yourself (the designer), the client, the programer look at the mockups you don't see them as 100%. Using a design of 1920px margins with 1450px inner window, there are additional margins. Looking on my 1450px laptop screen, I still see the 1920px margins with an additional bumber on the edges of the mockup. Even with the fullscreen toggle on my 1920 x 1080 monitor, the inner container is ~1260px instead of 1450px. XD desktop should have the option to view the designs on different screen options. ie. Have it responsive. If I am on my 1920px desktop screen I should see my margins. When on my 1450px screen I shouldn't.

A

amandaw92518929

Participant

If that answer is correct—that XD uses pixel measurement for font sizes, then why do fonts show up in the assets panel in points?

C

claudia carvalho

Participating Frequently

Essa medida pode ser alterada no painel de ativos, porém não muda nada. Ao trocar a unidade, o valor permanece sempre o mesmo. Não entendi qual a função disso.

Essa questão de tamanhos de fontes visualzadas de forma diferente no XD e na web, quando projetadas com o mesmo valor, me parece ainda não ter sido resolvido pela Adobe. Talvez a resposta do Ray10co abaixo tenha sentido.

NitinPrajapati

Participating Frequently

Its not availabe to me. Like there always comes a '+' button to add more. There is nothing to change the unit.

Peter Villevoye

Community Expert

While looking for some discussions I came across this lengthy and long-standing thread. My 2 cents: keep in mind that large parties who contribute to the inner workings of various web engines (like Apple, Google, and Microsoft) are still debating on how to work with font sizes. They just can't agree on a standard, its unit, and not even its name and acronym. These modern kingdoms are just as stubborn as the ancient ones, whose kings commanded to let their very physical foot be the unit for their reign and realm (with monks, publishers, and units following suit). Resulting in metrical and typographical confusion all over mediaeval Europe...

As a designer, we should stick to the point for font size (equaling the old 72 dpi pixel). And leave it up to the front-enders to settle on a standard and tweak everything to whatever is necessary to get it right with and in their frameworks. And apart from that, there are still the users who can set some size and zoom default for a browser, and overrule whatever the designer and developer came up with. So always leave plenty room for margin, for text to dependently differentiate in size.

elysas97428042

Participant

Hello,

I encountered the same issue, the fonts appears much bigger while it looks good on xd. Apparently the font size on XD is not pixels (in points maybe?). Do you know how to get the specs in pixels?

L

Lively_view5D95

Participant

Pixel please

K

karanpreet.chawla

Participating Frequently

So here's my pain-point and I tried looking on the web but there's no solution to this.

When the design is created in Adobe XD, MacBook Pro - Retina (2018), the prototype on the web browser shows the design absolutely perfect. However, when the developer uses the same font size assigned to the content, the font size just goes super large.

Upon inspecting this further and doing some groundwork, I found out that Adobe XD has fonts set in points instead of pixels. However, that does not match pixels on the actual web.

For. e.g. 23pt font size pm XD prototype on a browser looks different to the coded 23px font size on the actual site - please see attached.

Please help.

Ares Hovhannesyan

Community Expert

Please review

Font size conversion

A chart of font sizes stated in points, pixels, ems, percent and keywords. px to pt, pt to em conversion

Font Size Conversion chart: px to pt, px to em

23px

17.25pt

1.4375em

143.75%

Sample

K

karanpreet.chawla

Participating Frequently

Thanks Ares,

I have used this method and still facing the same issue as Adobe XD exports fonts in CSS and it looks completely different. Unfortunately, this option is not right either in this scenario