Highlighted

How to use EM or REM in Adobe XD ?

New Here ,
Nov 20, 2019

Copy link to clipboard

Copied

Hello,

 

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

Thanks

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

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.

Topics

Code

Views

2.6K

Likes

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

How to use EM or REM in Adobe XD ?

New Here ,
Nov 20, 2019

Copy link to clipboard

Copied

Hello,

 

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

Thanks

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

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.

Topics

Code

Views

2.6K

Likes

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
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
New Here ,
Nov 20, 2019

Copy link to clipboard

Copied

So I have to convert the fonts myself?

Thanks for you answer.

Likes

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
Reply
Loading...
Adobe Community Professional ,
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.

Likes

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
Reply
Loading...
New Here ,
Nov 20, 2019

Copy link to clipboard

Copied

Yeah I agree.

 

Thanks for the explanation.

Likes

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
Reply
Loading...
New Here ,
Nov 26, 2019

Copy link to clipboard

Copied

Thanks a lot 

Likes

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
Reply
Loading...
New Here ,
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

Likes

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
Reply
Loading...
Adobe Employee ,
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

Likes

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
Reply
Loading...
Adobe Community Professional ,
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!

Likes

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
Reply
Loading...
New Here ,
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...

Likes

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
Reply
Loading...
New Here ,
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.

Likes

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
Reply
Loading...
New Here ,
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. 

Likes

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
Reply
Loading...