Layout Scale

Scale Layout enhances your Framer workflow by enabling scalable design layouts. Easily create websites that adapt consistently to any device size, without extra steps.

With the Pro version, you can set distinct behaviours for different breakpoints – scale layouts seamlessly on mobile and ultra-wide screens or switch to responsive design for small desktops. This flexibility ensures your site maintains its intended look and feel across all devices.

Streamline your design process and achieve perfect layouts effortlessly.

How to Use Scale Layout

1. Set Up Breakpoints. Create at least the same number of breakpoints in Scale Layout as you have in your Framer project. You can add more breakpoints if needed, but avoid creating fewer to ensure optimal performance.

2. Configure Scaling Behavior. For each breakpoint, you’ll find a field labeled “Scale Base”. This determines the reference width for proportional scaling based on the browser’s width.

   • For example: If you set scaling behaviour for your mobile breakpoint between “min” and “810” and specify a Base of 390, the layout will scale proportionally starting from 390px. Experiment with these values to find the ideal settings for your design.

3. Preview in Browser. After configuring your settings, click “Save Changes” and publish your project. Note: Scale Layout changes won’t appear in Framer’s preview; they can only be viewed in a browser.

Note: “Min.” represents the minimal possible screen size. “Max.” represents the minimal possible screen size.