REM and "font-size" for Inspect

Share an idea
1

Our developers spend a lot of time in Figma Inspect, having to convert everything from pixels to REM. Implementing a way to specify the document’s “font-size,” or the equivalent of 1 REM and being able to turn on REM measurements in inspect would save so much time and make our design to development handoff easier.

edit: Yes, we could use Zeplin but we are an enterprise team with many projects - why pay for yet another subscription if Figma could implement this one thing?

123 Likes
2

Use Zeplin :slight_smile:

2 Likes
3

Please see my edit :slight_smile:

5 Likes
4

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

3 Likes
5

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?

5 Likes
6

Maybe this one?

7

I’d love to see that on Figma too.

3 Likes
8

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
6 Likes
9

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

8 Likes
10

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” :face_with_raised_eyebrow: Reset button works fine. any advice?

11

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!

1 Like
12

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.

1 Like
13

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.

14

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?

3 Likes
15

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…

  1. “Set base rem as 1rem= [16px]”
  • The base by default is 16 but the designer can change it without having to reset any pixel value.
  1. “Export/show Inspect units as [TICK ] 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.

18 Likes
16

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…)

3 Likes
17

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

4 Likes
18

How is this not solved in 2022?

9 Likes
19

still waiting for it

1 Like
20

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 :+1:

Kind regards

19 Likes