Adding Breakpoints

To add breakpoints to your page, select it and then click the Breakpoint button in the top-right corner of your selection. This suggests two breakpoints based on your Desktop size: Tablet (810 pixels wide) and Phone (390 pixels wide). You can create an infinite amount of breakpoints, and resize them at any time.

With your breakpoints set-up, you can start customizing your layouts to be more mobile friendly. In our example, we’re using a Navigation component that already has a Phone variant set-up. Since the names of the Variants match with the names of the Breakpoints, we automatically switch to these variants upon adding new breakpoints.

The Desktop breakpoint can be considered your "primary" breakpoint. If you draw a Frame onto the Desktop breakpoint, it will automatically be added to the other smaller breakpoints too. After all, while these are presented side-by-side, they are really variations of the same page, not separate pages. Changes made on the Desktop breakpoint are inherited by other breakpoints, but you can also override any property on the smaller breakpoints, like switching the Variant of a component or changing the layout, style, and more.

Inheritance

The first breakpoint (most left one) is considered the main breakpoint. You'll see that the others start out as a copy and replicate the main changes so that you don't have to do everything n times. Per breakpoint you can then apply overrides for specific elements to change the layout and size so the content fits.

Sizing Details

While a breakpoint has a single width on the canvas, it ultimately needs a range to be visible in, requiring two numbers. These exact numbers are dependent on the other breakpoints on the canvas and can seem unintuitive at first (reversed) but working with them, you'll quickly find out why the are made this way. You can find the exact ranges on the top of every breakpoint (notice 1199 on the Tablet breakpoint). The key is to remember "and up". So if you make a 1200px wide breakpoint that's 1200px "and up" (until it reaches a next breakpoint).

Desktop - vs Mobile First

By default, Framer starts with the Desktop breakpoint, but you can simply resize it to a mobile breakpoint (and rename it to avoid confusion). From there you can add the larger breakpoints, creating a mobile first setup. This actually has some advantages, but we found out from our users that the majority starts from Desktop.

Technology

Breakpoints compile to optimized media queries under the hood, so that they only modify css and never your page hierarchy, avoiding jumps in layout after page loading.