Responsive HTML and CSS from Figma Design

Please search for existing topics before posting! Press :mag: at the upper right to search.Hello everyone,

I’ve created three different frames in Figma for Desktop, Tablet, and Mobile. I want to export the design as HTML and CSS. Currently, I’m facing an issue where the HTML isn’t responsive. With a plugin like Anima, it’s possible to select different frames from Figma for three viewports. However, I can no longer export projects in Anima because the free plan only allows 5 exports, and their paid packages are too expensive for me.

I can only export the three frames individually. Is there a way in Figma itself to set the viewports in the design and then export all three viewports into a single HTML and CSS file?

3 Likes

@mkaragoez Off the top of my head, I don’t believe there’s an alternative in Figma directly – the actions you want may rely on community plugins. Perhaps there’s another community member that has some guidance.

3 Likes

You can try pxCode and pxCode plugin.

By importing Figma into pxCode, you can reconstruct the ideal HTML structure based on the original visual design within pxCode. The WYSIWYG (What You See Is What You Get) feature of pxCode enables users to easily adjust through media queries to achieve a complete responsive design, thereby seamlessly transitioning the design from a desktop version to a mobile version.

3 Likes