• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

How to use EM or REM in Adobe XD ?

Community Beginner ,
Nov 20, 2019 Nov 20, 2019

Copy link to clipboard

Copied

Hello,

 

I want to know how can I use em/rem unit in Adobe XD ?

Thanks

Views

21.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Expert , Nov 20, 2019 Nov 20, 2019

Dealing with font sizes and other measurement aspects like units and relative sizes, is typically something a front-end developer needs to take care of in the production phase. You're just visually designing stuff here in XD. Of course, it's your task to keep any sizing differences in mind, when desigining and defining areas for text, which should be able to gracefully increase and decrease in size, according to a user's preference.

Votes

Translate

Translate
New Here , Jun 01, 2023 Jun 01, 2023

Thanks! You're the best!

Votes

Translate

Translate
Community Expert ,
Nov 20, 2019 Nov 20, 2019

Copy link to clipboard

Copied

Texts in XD are in absolute sizes (px) and relative sizes (em etc) are not supported.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 20, 2019 Nov 20, 2019

Copy link to clipboard

Copied

So I have to convert the fonts myself?

Thanks for you answer.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 20, 2019 Nov 20, 2019

Copy link to clipboard

Copied

Dealing with font sizes and other measurement aspects like units and relative sizes, is typically something a front-end developer needs to take care of in the production phase. You're just visually designing stuff here in XD. Of course, it's your task to keep any sizing differences in mind, when desigining and defining areas for text, which should be able to gracefully increase and decrease in size, according to a user's preference.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 20, 2019 Nov 20, 2019

Copy link to clipboard

Copied

Yeah I agree.

 

Thanks for the explanation.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 26, 2019 Nov 26, 2019

Copy link to clipboard

Copied

Thanks a lot 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

XD provides CSS for everything in the layout which saves developers a lot of time, so by not supporting relative units, a lot of tedious unit conversions still have to be done manually. In this respect using XD is no better than still using Photoshop for web design.

So why aren't relative unis supported in XD in the first place? Yes, I know that by definition the word "relative" means they don't have absolute values, but in practice every browser's default font size is 16px, and many websites have reset stylesheets that override this to set 1rem = 10px.

 

In my opinion XD should at a minimum

  • allow designers to use rem in their designs
  • use 16px as the base value for 1rem
  • convert values between px and rem using that base value
  • allow designers to set a different base value
  • allow developers to view and export values in rem units

 

And it would be even better if XD could

  • handle unitless decimal numbers for line height values, e.g. "1.33"
  • handle ex and ch values which are computed from the font metrics
  • handle em and % units using 16px as the base value, just like rem
  • cascade em and % unit values correctly through the design, which I grant is probably a non-trivial task in a design program that has no concept of a DOM

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out and sharing the feedback. I will share this with the Engineering team and you can do that too by posting a request here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests

 

This is the best way of communicating with the Engineering and Product Management teams regarding issues and suggestions so they can be implemented in future releases. 

 

Regards

Rishabh

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

@Rishabh_Tiwari

Thanks for the response. I found and voted for a similar feature request in that system and added a comment to it: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13649706-em-values...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

@LordPachelbel

I get what you're saying. These features would be great, but Xd's output is not html/css code. Sure, it can generate code for most elements, based on some values, but it doesn't work within that enviroment, like for example Webflow does. The prototypes are just static images, animated independently for some interactions.

 

If you dig deep enough, you will see that what you're asking isn't that simple, and the relationship between elements is not following the html/css logic. Maybe it should have been, but Xd is trying to fulfill both the roles of a design and a prototyping tool. Right now, none of the tools work well in both of these fields. They are either good as design tools, or good for prototyping, but not both.

 

Right now there are more essential things missing from Xd, like proper component state & instance management, which is actually important in the context of UX design.

 

If a design is consistent, it shouldn't have too many font sizes and the calculations that need to be made aren't that many or that complicated.

 

All the best!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 19, 2020 Aug 19, 2020

Copy link to clipboard

Copied

@Spas K.

Thanks for the additional perspective on things. My primary role is as a developer, so I don't usually use XD for design or prototyping.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 17, 2020 Nov 17, 2020

Copy link to clipboard

Copied

How come Sympli which is a puglin XD offers to user, manage to sympli give the conversion of px to em.

What one needs isn't "em" whilst designing, but one need's XD to give that option possible when sharing the designs for the developpers.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Nov 17, 2020 Nov 17, 2020

Copy link to clipboard

Copied

Hmmm, will check out Sympli 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 10, 2020 Oct 10, 2020

Copy link to clipboard

Copied

Agreed. Saying the front-end developer will deal with it, neglects the helpfulness of providing sizes that are immediately applicable at the development stage. It is no good specifying text at 20/28 (size/line-height), then finding that the developer has used 1.3em line-height and then figuring out how to get you both on the same page! Noting the comment below to leave feedback:)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 16, 2021 Jun 16, 2021

Copy link to clipboard

Copied

I actually disagree. I'm a developer and a designer so I'm almost always thinking about what units should be used. For example, I'd love to us ems in buttons so that they maintain the same ratio, no matter the font-size. Or use percentages to calculate grids. Or use vh to set the height of a hero image. Right now I just do the math and make a note for the devs... which sucks. I'd love to have at least percents and em/rems.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 16, 2021 Jun 16, 2021

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out and sharing the feedback. Let me assure you, I'll share your feedback with the team and you can do that too by upvoting this request https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13649706-em-values... or posting a new request.

 

This is the best way of sharing your feedback and suggestions with the Engineering team.

 

Regards

Rishabh

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 07, 2022 Mar 07, 2022

Copy link to clipboard

Copied

Dealing with font sizes and other measurement aspects like units and relative sizes, is typically something a front-end developer needs to take care of in the production phase. You're just visually designing stuff here in XD.

By @Peter Villevoye


This is quite out of touch. Typography scales are a core part of modern web design - You don't just wing it in the design stage then hope that the developer can sort out the same scaling.

Genuinely shocked that neither XD nor Figma offer this natively.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 02, 2022 Jan 02, 2022

Copy link to clipboard

Copied

I see this is a conversation that started almost 3 years ago, but I think it is worth putting a little bit more attention to it. 

 

It is really important to start including em/rem support in tools like Xd, Figma, Sketch simply because a technical hand-off has become really difficult. I am the lead UX/UI designer and Accessibility designer for a larger consultancy firm. Tools like Xd are saving tons of time, but handling responsiveness in a way a user should by WCAG guidelines is an essential UX concept. Keep in mind, the User Experience has a lot to do with Accessibility as well, as a lot of UI developers need a guiding hand. 

 

UI devs understand the part how their implementation should be WCAG complient, but most of them do still not know how to understand how a design should work when implemented. We are talking about the visual responsiveness when a user increases of decreases the screen size.

 

In my experiences it is a rare thing that I work with a UI developer that knows to convert every size to rem sizes. They love tools like Xd, Figma and Sketch as they think they can simply export the CSS and they are done with it. And that is not the case.

 

Sure, you would say that a UI dev should know how to implement this - but reality is that they do not. Or do not have the time or budget to figure this out. And the pressure on the UX team to do UX reviews quadruples at least in our larger projects.

I think producers of tools like these should take the responsibility to allow the em/rem implementation to work. Accessibility is not a 'nice-to-have'. Since 2017 the ADA has made it a federal requirement if your audience might need the implementation - and we are talking really steep fines if you are tried.

 

I do want to give a shout out to UI devs who understand this issue, and take the time to do the conversions. They are there, but they are a unicorn. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 02, 2022 Jan 02, 2022

Copy link to clipboard

Copied

It should be very easy to implement rem for Adobe (but not em obviously). I'd create a "Root font size" entry in the Artboard property panel (default to 16px). Then 1rem would be an alias for 16px (or any user defined value) henceforth - a very simple maths.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 04, 2022 Feb 04, 2022

Copy link to clipboard

Copied

Yes. This. Just provide me a preference where I can select how I want certain things measured in units. For fonts I could select pixels, rems, points, etc. Give me a way to set the base for rems since that sometimes changes. XD and other programs already do the math. I can perform addition, subtraction, multiplication within fields now. Why can't I so such with a base rem setting? Make it so! Please.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 07, 2020 Mar 07, 2020

Copy link to clipboard

Copied

I exported my XD files to Zeplin and used the "zeplin pixel to rem" chrome extension. I haven't tried this with our front end devs yet, but it may be a solve. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 30, 2021 Apr 30, 2021

Copy link to clipboard

Copied

Hi, recently I have encountered the same problem when designing with adobexd, and since I have not seen any solution, I have created this small pluggin that helps me transform PX to REM and also gives me the conversion that tailwind uses to save in its configuration.

If it works for anyone, please give me your opinion, it is likely that I will update it

 

https://chrome.google.com/webstore/detail/adobe-xd-rem-fix/dppocgklbdkbfneadpfbodohoopacpdf?hl=es

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 30, 2021 Apr 30, 2021

Copy link to clipboard

Copied

Always nice when someone attempts a fix. To clarify, this is an extension for Chrome? That is, it gives you conversion in Chrome once you've created a design/development link in XD, rather than it allowing you to input REM in XD? So, it would help a developer convert static sizes most, but is perhaps less straightforward the designer specifying them as it would require specifying static sizes, then checking in browser, then correcting if required, or recording to communicate with the developer. Not a bad thing, but just clarifying how you intend it to work.

 

Cheers,

 

Andy

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 16, 2021 Jun 16, 2021

Copy link to clipboard

Copied

Sorry, Didn't see the reply.

 

Yes, it's a chrome extension, and only work when you are in the link generated by adobeXD. and what it does it add extra info (like rem conversion) right to the pixel size info.

 

for example, if you read "16px", then with the plugin you will read "16px  1rem (4)"

 

Always transform with this base (16px/1rem)

(32px/2rem)

(4px/0.25rem), etc

 

ans the third nunber that you see "(4)" is just the 1/4 from the rem value (just needed for tailwindcss) 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 01, 2023 Jun 01, 2023

Copy link to clipboard

Copied

LATEST

Thanks! You're the best!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines