I’m just starting out with web development and I have a question about my design to code workflow.
Here’s what I’m doing:
Creating my website designs in Figma where all typography is measured in pixels (since Figma doesn’t support rem or em units)
When I code the CSS, I want to use rem units to make my site responsive
I’m confused about the conversion process. Do I need to calculate each pixel value from Figma into rem manually? What’s the formula for this conversion and how does the root font size factor into the calculation? Any tips on streamlining this process would be helpful.
I skip converting everything from Figma and set up a modular scale system instead. Start with your base font size (16px usually) and create a small set of rem values: 0.75rem, 1rem, 1.25rem, 1.5rem, 2rem, etc. When I’m coding the design, I just match Figma’s pixel values to the nearest rem from my scale rather than doing exact conversions. Keeps typography consistent and cuts down on decision fatigue. Same thing for spacing - I use increments like 0.5rem, 1rem, 1.5rem, 2rem. The design stays true to what was intended but it’s way easier to maintain. I always document the scale in comments so other devs get the system.
Most browsers default to 16px for the root font size, but I learned the hard way to set it myself with html { font-size: 16px; }. Different browsers and user settings can mess with consistency otherwise. For converting, I use CSS custom properties. I’ll set --base-font-size: 16 at the root, then use calc() like font-size: calc(24px / var(--base-font-size) * 1rem) while building. Makes it super easy to tweak the base size later. One thing that tripped me up at first - rem units scale with the root element, not the parent like em units. This actually makes rem way more predictable for responsive design since you can just change the root font size and everything scales together.
yea, just divide the px by 16 for rem, like 32px becomes 2rem. u can also use plugins or extensions that convert it directly when copying from Figma, super handy! helps a lot with the workflow.
The math gets tedious fast if you’re doing it manually for every element. I set up a Sass function early on: @function rem($px) { @return #{$px / 16}rem; } so I could just write font-size: rem(24) instead of calculating each time. Here’s what took me forever to figure out - you don’t need perfect conversion. I started rounding to quarters like 1.25rem or 1.5rem instead of exact decimals like 1.375rem. Code stays cleaner and honestly the visual difference is nothing. For borders and small spacing, I stick with pixels since you want those crisp regardless of font scaling.
Converting pixels to rem one by one? Yeah, that screams automation. I hit this same wall with design handoffs.
Sure, the math’s easy (divide by 16), but doing it hundreds of times? I built a workflow that handles it automatically.
I use Latenode to create a pipeline that grabs Figma design tokens and outputs CSS variables in rem. Set it to watch for new designs, extract pixels, convert them, and generate your CSS file.
Best part? You can add logic for breakpoints and scaling. It’ll automatically create mobile, tablet, and desktop rem values from one Figma design.
Once it’s running, just export your specs and get clean rem-based CSS. No calculator, no manual work. Better than Sass functions since it’s done before you even code.
Honestly just use a browser extension like px to rem converter, saves so much time. I tried doing the math manually at first but kept screwing up the decimal places and it was driving me nuts.