What is the workflow in Figma for using rem values in CSS?

Question

I am new to web development and would like to understand the following workflow:

1. I design a website in Figma along with font styles in pixels (can't use em or rem in Figma)
2. In order to have a responsive website I want to write the CSS code with rem units

Do I now manually convert all the px units into rem units based on the base font size in the paragraph tag? how is the math done here?

Answer 1

If you are looking for a quick way to compute the conversion between px and rems given a base size, you can find lots of converters online, e.g. https://www.ninjaunits.com/converters/pixels/pixels-rem/

In general, try to take advantage of a preprocessor such as sass, which allows you to declare variables making your stylesheets easier to change. For example:

$font-size-base:              1.125rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                $font-size-base * 2 !default;
$font-size-md:                $font-size-base * 1.5 !default;
$font-size-sm:                $font-size-base * 0.8 !default;

Hope this helps.