Skip to main content
P
pierresis
Participant
November 20, 2019
Answered

How to use EM or REM in Adobe XD ?

  • November 20, 2019
  • 3 replies
  • 25998 views

Hello,

 

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

Thanks

    This topic has been closed for replies.
    Correct answer julioguzman

    Thanks! You're the best!

    3 replies

    E
    Emmanuel15C3
    Participant
    April 30, 2021

    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

      E
      Eido Studio
      Known Participant
      April 30, 2021

      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

      E
      Emmanuel15C3
      Participant
      June 16, 2021

      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) 

      L
      LaurenBK
      Participant
      March 7, 2020

      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. 

        K
        Community Expert
        Kenneth KawamotoCommunity Expert
        Community Expert
        November 20, 2019

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

        P
        pierresisAuthor
        Participant
        November 20, 2019

        So I have to convert the fonts myself?

        Thanks for you answer.

        LordPachelbel
        LordPachelbel
        Participant
        August 17, 2020

        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.


        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
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices