Framer Update, Layout & Design

Framer Sites: Min Max and Aspect Update

3:29

15K views

Dec 8, 2021

About this lesson

A quick overview of two new features we’ve added to Framer Sites Beta: Aspect Ratio locking and Min and Max sizing—allowing you to design fully responsive web pages with ease. Request access to the Framer Sites Beta over at https://www.framer.com/sites/

0:00yo i'm benjamin in this video i would 0:03love to show you two new features we're 0:04adding to framer sites 0:06aspect ratio locking for all of your 0:08content and minimum and maximum sizing 0:11options 0:12before we dive in let's have a look at 0:14how you would set up a responsive web 0:16page today 0:18so here we have one of our get started 0:20pages 0:21it's quite content heavy and has a few 0:24paragraphs a few assets 0:27and if we go ahead and preview this and 0:29then resize 0:32you'll see that at certain breakpoints 0:34the assets essentially jump to a new 0:37fixed width 0:39now this means that when viewed on 0:42specific devices your content might not 0:45render ideally 0:47now this setup was needed because prior 0:49to these new features 0:51you could not preserve the aspect ratio 0:54of an image in a stack nor could you 0:56define the minimum and maximum sizes 0:59now let's have a look at how we can set 1:01this up in a much cleaner way with these 1:04new features 1:05i can actually go ahead and delete this 1:07breakpoint 1:08[Music]1:11and i can select an asset like this one 1:14and i can now lock the aspect ratio of 1:17any frame any image 1:19even if it's in a stack 1:22so i can click the lock 1:24and then i can set the width to 100 1:27[Music]1:29hit enter 1:30and now the height value will be 1:32automatically calculated too to preserve 1:34the aspect ratio 1:36and now let's move on to min and max 1:38sizing 1:39below width and height you'll find a new 1:41property control and it gives us the max 1:45width min width as well as the max 1:47height and min height properties 1:50they're all on set by default 1:53so here let's say we want maybe a 1:561000 pixels 1:58maximum width so for the first time ever 2:02in framer you can now say i want this 2:05image to have a 2:06width of hundred percent 2:09an automatically calculated height 2:12and a maximum width of a thousand pixels 2:16and if we now preview 2:18this 2:19[Music]2:22you'll see that the image doesn't scale 2:25any further than 1000 pixels and as soon 2:28as it hits that point 2:29[Music]2:31it resizes proportionally 2:33[Music]2:35and now we could do the same for our 2:37text so i can select this parent stack 2:43set width to 100 2:46and then maybe actually we want this to 2:49be 2:51a little bit less white 2:56and let's preview that 3:00[Music]3:04and there we go 3:07so this allows you to rely a bit less on 3:09break points while also enabling you to 3:12design even more flexible layouts in 3:15framer 3:16so that's a quick look at the new aspect 3:18ratio and minimum and maximum sizing 3:21options 3:22thank you for watching and stay tuned 3:24for more updates

TeachesMin & Max Sizing Sizing

Also coversBreakpoints Frames Responsive Design Stacks

Watch on YouTube ↗

‹ Framer Sites: 3D Effects

Framer Update: Flow Effect in Layout Templates ›