I want to know how can I use em/rem unit in Adobe XD ?
Texts in XD are in absolute sizes (px) and relative sizes (em etc) are not supported.
So I have to convert the fonts myself?
Thanks for you answer.
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.
Yeah I agree.
Thanks for the explanation.
Thanks a lot
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
And it would be even better if XD could
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.
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...
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!
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.
Hmmm, will check out Sympli 🙂
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:)
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.
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.
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
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.
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)
ans the third nunber that you see "(4)" is just the 1/4 from the rem value (just needed for tailwindcss)