Relume Community Icon

Home

Announcements
Figma Support
General
Showcase
Webflow Support

Powered by Tightknit

Getting Started

Getting Started

Changing Breakpoint Widths in Webflow for Figma Exports

·

How do I change the breakpoint width of the pages that are created? I noticed when I exported to Figma the desktop page was 1920px wide, I dunno what the mobile was. Is it possible to change these widths? I use Webflow for development so I usually start with a 1024px wide frame in Figma.

Changing Breakpoint Widths in Webflow for Figma Exports | Relume Community

5 comments

· Sorted by Oldest

Matt J.
·
Alex Q. my understanding is the export to figma should be 1440 for desktop. Not sure how it would have been 1920. Unfortunately, No way to adjust this at this time - apologies!
Alex Q.
·
Matt J. is there any video on how to make this work with Webflow, since in Webflow 1024 is the base CSS styles and all other breakpoints smaller and larger use that as a base and then have their styles added onto it. You're supposed to start with 1024 and make changes to the other breakpoints. If I start with 1440 then when I go to the other breakpoints I'll have to completely copy all of the CSS because each will be blank slates.
Matt J.
·
Hmm well I would probably start by reading up on the breakpoints in Webflow. https://university.webflow.com/lesson/intro-to-breakpoints?topics=layout-design Was a good refresher for me. According to this desktop is 992 so anything from that point scales up and then you have your tablet and mobile breakpoints from there.
Matt J.
·
Tablet breakpoints start at 991 and go from there.
Alex Q.
·
I know the Webflow breakpoints, but Webflow wants you to start at the desktop breakpoint that defaults to 1024 (the actual default canvas size) I think it does shrink down to 992. But Webflow projects are supposed to be designed starting at that default breakpoint, not 1440. All the CSS is done at the default breakpoint and then moving to larger or smaller breakpoints you're supposed to make changes to the CSS to accommodate those specific breakpoints, and then the changes flow in each direction and you make changes for each. Starting at 1440 puts all the CSS at that breakpoint which makes the 1200 breakpoint and the default one empty.