Use Zeplin 🙂

Please see my edit 🙂

YES - I’m surprised this doesn’t have more votes!! Thanks for sharing @Sarina_Katznelson

Does anyone know of a plugin? This is kind of a show stopper for me. The manual process of converting px to rem is error prone and very time consuming.

Does Sketch do this?

Maybe this one?

I’d love to see that on Figma too.

Yes, this recalculating from px to rem takes unnecessary time.

Two potential workarounds:

1. Devs can install Figma-Plugin Hand››over which does the conversion


2. There is an npm-package sass-rem which allows you to write px value and the package will then output rem

Thanks for the shoutout on my plugin Hand››over 😊! I built this for this exact issue, to help my dev team out!

Hi Karl, I’m trying to use your handover plugin, however, it doesn’t seem to work for me (desktop app). What is the expected behaviour? Do I need to enter all numbers in order to get the conversion? When I enter only some of the numbers nothing happens after clicking “Convert” 🤨 Reset button works fine. any advice?

Hey Ania! So the way it works is to only update the values that are present in the current top-most selection (although you can override these by typing in any input field on the plugin if you wish). So if you select a parent frame, only the values for that frame will convert. If you want to see values for a specific child, you need to ensure only that child is highlighted. This is deliberate as it helps avoid confusion in a frame with many elements that could contradict each other.

I’ll be shipping an update that converts on selection change so you don’t need to press any buttons but those values should update automatically.

Edit: I shipped this update.

Let me know if you’re still having issues!

Do you have a solution for if the Devs are not given Edit access? Right now in our process Developers are given view access only to get the values for the file. I believe you need edit access to run plugins on any figma file.

Unfortunately Figma doesn’t offer a way for view-only participants to use plugins so sadly Hand››over just can’t run in that scenario. It’s a real pain but it’s just a limitation of the user permissions.

I’m surprised this is not yet built into Figma. A way to see all measures in REM would be extremely useful for programmers with view permissions. And by all measures I mean also the ones that appear when hovering elements.

Also a way to specify the base font size (defaults to 16px) would be necessary to complete the feature.

Are there any plans to implement something like this in Figma?

In support to the article at Why designers should move from px to rem | by Christine Vallaure | UX Collective (uxdesign.cc)

I would like to suggest that Figma implements 3 simple features:

All of this should be handled by the software. Figma should offer three simple options:

1. “Make pxs behave like rems”

• Figma would still display everything in pixels which is much more friendly but rem values would be shown beside pixel values and the design would behave as if pixels were just a value translation of a native rem engine.

With time, Figma could make this even more flexible by allowing designers to set exclusions/overrides for the rem behaviour, eg.: Fonts, shapes, specific components, images, etc…

2. “Set base rem as 1rem= s16px]”

• The base by default is 16 but the designer can change it without having to reset any pixel value.

3. “Export/show Inspect units as cTICK ] pxs rems with translated value in px/rem as comment”

In the CSS/Inspect view, a pixel value would always be accompanied by its rem translation as a commnet and vice versa.

My goodness, yes, please, yes. I don’t even know where to put all my commas.

But as a developer, I came looking specifically for this feature. I mean, I literally just brought a calculator from home so I wouldn’t be switching windows 100 times a day to calculate REM values for every damn thing.

(This and being able to have designers build and work from a series of tokens for color, spacing, and font size would just make me explode with love for Figma. I’m SURE this is harder than it seems but designers aren’t your only audience here folks, but this would be super big for FE devs…)

While we’re at it, calculate line heights relative to font size too (1.5 for 16 px font, not 24). Give me a settings panel where I can select my preferred units globally

How is this not solved in 2022?

I think it is about time that Figma supported the logic of REM units, being the standard of any browser and thereby prioritizing usability.

I ask for the following functionality:

• Add root size for fonts (acts as 1 rem for font-size or line-height)


• Add root size for spacings/padding (ensures that you increment accordingly to a set root)


• Change font-sizes, padding etc. in REM


• Save it to my text-styles and components


• REM units in inspection for developers

I hope you guys/girls finds this practical for the Figma product in the future and will support it by upvoting.

Also if you have any ideas for bettering this request, please post in comments 👍

Kind regards

wow, really great idea. Could be insane with REM in Figma. 🤯

still waiting for it

Love this idea!! 🙌

Excellent idea, would be really great! Could potentially reduce communication errors, as well as better communicate intent by the designer, as well as increasing the possibility of designers learning more about dev environments and implementation.

Absolutely!!! Same. Thank you @Louie_Morais I was just drafting this almost exact request, and found yours, so +1 infinity.

And triple yes to let designers pick a root font size i.e., base rem on a design file. The app I work on has a root font size set to 14px.

Here’s how I spec for the developers using my design files (time consuming)

Another great article "Back to Basic: Should we use Rem, Em or Pixel?]

hmm… when would Figma support rem? I’m waiting for it!

Me too! 🤞