NB: While we are waiting for the plugin update, please use this link to purchase the license: https://framer-plugin-store.lemonsqueezy.com/buy/58ca163f-de5f-4f08-8cbc-d1fedf5dc38e
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
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.
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.
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.