I exported my Figma design to get HTML and CSS files for my web project. The problem is that all the styles use pixel values and the code isn’t responsive at all. There are tons of CSS classes generated automatically.
I tried adding media queries but it’s taking forever because there are so many fixed pixel values to change. I also tested adding a CSS framework but it conflicts with the generated styles.
What’s the best way to handle this situation? Should I rewrite everything from scratch or is there a better method to convert all those px values to responsive units?
Figma’s CSS exports can indeed create challenges for responsive design, and rewriting all the styles is often unnecessary. A practical approach is to use your text editor’s find-and-replace function to change pixel units to rem or em values, ensuring to set your base font-size to 16px for consistency. Incorporating viewport units like vw and vh can also enhance responsiveness. Additionally, utilizing CSS custom properties for breakpoints allows you to maintain the existing structure while making it adaptive. Just be methodical in your changes to avoid overwhelm.
Converting Figma exports to responsive layouts without going insane? Here’s what worked for me after wasting weeks on this stuff. First, figure out what actually needs to be responsive - not everything does. Some elements should stay static. Look at your design and find the natural breakpoints and how components are organized. Figma exports create way too many classes because it treats every single element separately instead of thinking systematically. Don’t convert every pixel value. Start with the big structural stuff - containers, grids, major layout pieces. Make those flexible while keeping decorative things like borders, shadows, and icon sizes in pixels. This way you keep the design looking right while making it responsive. Build a master stylesheet that only overrides the generated CSS for layout properties, then tweak from there.
just use sass to batch convert those px values. write a function that turns pixels into clamp() - way faster than find/replace and you’ll get smooth scaling between breakpoints. figma exports are messy but totally fixable with the right tools.
Had this same problem six months ago. Here’s what worked for me - I took a hybrid approach that saved tons of time. I kept the Figma CSS as my starting point but ripped out all the absolute positioning and fixed widths on the main containers. Then rebuilt the layout with flexbox and CSS Grid while keeping all the good stuff - colors, fonts, spacing - from the original export. You get Figma’s exact design specs without being stuck with a rigid layout. The trick is figuring out what needs to be flexible vs. what can stay fixed. Button padding and font sizes? Those usually work fine with pixels.
I’ve dealt with this nightmare countless times. Skip the manual pixel conversion and SASS functions - automate everything instead.
I built a workflow that grabs Figma’s CSS export and transforms it automatically. It figures out which elements need responsive units vs fixed pixels, converts positioning to flexbox, and creates media queries from the design breakpoints.
Don’t do this manually. Set up rules to convert font sizes to clamp(), widths to percentages or viewport units, and margins/padding to rem. What takes hours manually gets done in 10 minutes.
I use Latenode to run this whole process. It connects to design files, runs conversion scripts, and pushes responsive CSS straight to my dev environment. No more tedious find and replace.
Your workflow: export from Figma → automated conversion → responsive CSS done.