Rem in Figma: how to see rem values in Dev Mode

You use rem in Figma through Dev Mode: select a layer, choose CSS in the Code section, and switch the unit from px to rem in the settings dropdown. Figma then shows sizes in rem, with 1rem = 16px by default. If your site uses a different root font size, change the base with Set unit scale so the numbers match your CSS.

What rem means before you switch Figma to it

A rem is a CSS length relative to the root element's font size. MDN's guide to CSS values and units says "rem is relative to the font size of the root element" and that the name stands for "root em." The W3C CSS Values spec defines it as "Equal to the computed value of the em unit on the root element."

An em follows the element's own font size, or its parent's when used for font-size, so nested components can compound. A rem always points back to <html>, so 1.5rem means the same thing in a card, a modal or a footer.

Developers ask for rem because of accessibility. WCAG success criterion 1.4.4 says text should resize "up to 200 percent without loss of content or functionality," per the W3C's Understanding Resize Text page. Sizes tied to the root font scale together when that root changes.

How to switch Figma to rem in Dev Mode

Switching to rem in Figma is a setting in the Code section of Dev Mode's Inspect panel. Figma's help article on using code snippets in Dev Mode gives the steps:

Open the file and turn on Dev Mode.
Select any layer on the canvas.
In the Code section, select CSS from the language dropdown.
Open the same dropdown and, under Settings, choose rem as the unit.

Figma's Guide to Dev Mode points to the same spot: to change "the unit of measure for CSS, scroll to the bottom of the dropdown." You can also set a global default, picking a unit "From the Unit dropdown."

After the switch, a text layer with a 24px font size shows font-size: 1.5rem in the snippet. Padding, gaps and widths convert the same way.

How to change the rem base with Set unit scale

The rem base in Figma is set with Set unit scale, and it should match the root font size in your CSS. Figma's help article says "1rem = 16px by default." If your stylesheet sets a different root size, the Dev Mode numbers will be wrong until you change it.

From the same help article:

Select an object on the canvas.
In the Code section of the Inspect panel, click Inspect settings next to the language dropdown.
Choose Set unit scale…
Enter the base in the Unit scale dialog.

People miss this setting. In a Figma forum thread from June 2023, one user asked how to change the "default sizing rem (16)," and another complained that "there's an input missing to define the base rem value." The answer was the same Inspect settings menu.

Can you design in rem in Figma?

No, rem in Figma is a code display setting, not a unit you design with. You still type plain numbers for font size, spacing and frame sizes, and Dev Mode converts them when it writes the CSS.

Variables have the same limit. A Telerik ThemeBuilder feedback post from May 2024 says "Figma doesn't allow storage of rem units in number variables," so they export as unitless pixel values. If you export variables as design tokens, convert them in your build step. The exports are usually JSON; my explainer on what JSON format is and the guide to formatting JSON in VS Code help when you need to read the file.

My take: design in pixels on the 16px default and let Dev Mode do the conversion. Change the unit scale only when your codebase uses another root size. Otherwise you hand developers rem values that drift from the CSS.

Who can see rem values in Figma?

Rem output depends on the code snippets feature, which is not free. Figma's help article lists it for "Professional, Education, Organization, Government, and Enterprise plans" and says it "Requires a Full or Dev seat."

That is the main limitation for small teams. A developer on a free plan or a view-only seat gets no Dev Mode code panel, so no rem values, and converts by hand.

How to convert px to rem without Dev Mode

Converting px to rem by hand means dividing the pixel value by the root font size. With the 16px default from Figma's article:

Figma value (px)	rem
12	0.75rem
14	0.875rem
16	1rem
24	1.5rem
32	2rem

For a whole list of values, paste them into the OnlineViewer Dev px to rem converter. It defaults to a 16px base and runs in the page. If your root size differs, change the base first, as you would with Set unit scale.

If you keep design settings in config files next to your CSS, my comparison of JSON vs YAML for config files covers which format stays tidier.

FAQ

Can I design in rem in Figma?

Not directly. Figma's rem option is a unit setting for the code shown in Dev Mode. You still enter sizes as numbers on the canvas, and number variables can't store rem units.

What is the default rem size in Figma?

Figma's help article says 1rem = 16px by default. You can change it with Set unit scale in the Inspect settings of the Code section.

Do I need a paid plan to see rem in Figma?

Yes. Figma's code snippets feature, where the unit setting lives, requires a Full or Dev seat on a Professional, Education, Organization, Government or Enterprise plan.

How do I convert px to rem by hand?

Divide the pixel value by the root font size. With the 16px default, 24px is 1.5rem and 14px is 0.875rem.

How do I use rem in Figma?