Layout & Design

Styling Frames in Framer (Fundamentals Lesson 16)

Joseph

10:48

28K views

Jan 29, 2025

About this lesson

Frames, whether visible or invisible, are the backbone of our layouts — but when when we apply some style properties, Frames also become a key player in visual design.

In today’s lesson, we’re looking at the style properties of Frames — and how powerful they are in shaping the appearance of our sites.

Learn more about image fills: https://youtu.be/0Dtzf-EBEoQ

https://www.youtube.com/watch?v=rH5iIutBTwg&t=0s Intro

https://www.youtube.com/watch?v=rH5iIutBTwg&t=18s Starting with a card frame and styles panel overview

https://www.youtube.com/watch?v=rH5iIutBTwg&t=60s Adding and customizing fills

https://www.youtube.com/watch?v=rH5iIutBTwg&t=149s Adding and customizing borders

https://www.youtube.com/watch?v=rH5iIutBTwg&t=236s Adjusting corner radius

https://www.youtube.com/watch?v=rH5iIutBTwg&t=272s Adding and customizing shadows

https://www.youtube.com/watch?v=rH5iIutBTwg&t=398s Adjusting opacity vs visibility

https://www.youtube.com/watch?v=rH5iIutBTwg&t=494s Understanding overflow settings

https://www.youtube.com/watch?v=rH5iIutBTwg&t=597s Using scroll overflow

https://www.youtube.com/watch?v=rH5iIutBTwg&t=657s Exploring advanced style properties

https://www.youtube.com/watch?v=rH5iIutBTwg&t=618s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00frames whether visible or invisible are 0:03the backbone of our layouts but when we 0:05apply some style properties frames also 0:07become a key player in visual design in 0:10today's lesson we're looking at the 0:12style properties of frames and how 0:14powerful they are in shaping the 0:16appearance of our 0:18[Music]0:20sites for this lesson we probably could 0:22start with a completely blank empty 0:24frame but there are some visual 0:26properties that interact with the 0:28content inside of a frame so we're 0:30instead going to start with this card 0:33that is a frame an invisible frame has 0:35no visual properties applied to it 0:36whatsoever and that frame has some 0:38content inside some text boxes and some 0:41icons and a button so with this parent 0:43frame selected we're going to come down 0:46on the properties panel a bit all the 0:47way down to Styles now there are a bunch 0:50of properties here in the style section 0:52I'm not going to go through them in the 0:53order that they appear I'm going to go 0:55through them in a slightly different 0:56order that I think makes a little more 0:58sense for this lesson I'm going to start 1:00with Phill because right now like I said 1:02there are no visual properties applied 1:04to this card whatsoever and the card is 1:07essentially invisible so a fill is a 1:09pretty good place to start I'll click 1:11here to add a fill and we get our Color 1:13Picker where we can choose at the very 1:16top between a solid fill a gradient fill 1:19a radial gradient fill a conic gradient 1:22fill which goes around kind of like a 1:24pin wheel and then last we have the 1:27image fill now I'm not going to dig too 1:29far into image fills because in a 1:30previous lesson we unpacked images and 1:32image fills and how all that stuff works 1:34so instead I'll put a link in the 1:36description so you can refer back to 1:37that lesson if you just so happen to 1:39miss it but one thing I do want to point 1:41out here is no matter what kind of fill 1:43you're using you'll notice it is behind 1:46the content within the frame if you look 1:48at the layer list it might look like the 1:50card is above its children in the 1:52stacking order but that's not really 1:54what's going on the parent is sort of 1:57wrapped around its children and what 1:59that means is the fill goes behind 2:02everything and you'll see in a moment 2:03the Border actually goes in front of 2:05everything and the content is sandwiched 2:07in between cool so with that out of the 2:09way I'm just going to go back to a 2:11regular solid fill and I'm going to 2:13leave it on white I think that's just 2:15fine so that is the gist of fills and 2:19since fills are an optional property 2:21just as easily as I clicked to add the 2:24fill there's also a little X icon over 2:26here where I can click to remove the 2:28fill altogether in the same goes for 2:30borders and shadows they're optional we 2:32start without them we can add them we 2:34can remove them so let's do that for a 2:36border I'm going to click to add a 2:38border by default we get a black border 2:40here and we have a width value that we 2:42can play with to make the Border thicker 2:44or thinner we do also have the option of 2:47switching between editing the border for 2:50all of the sides or splitting them apart 2:52and editing the border for individual 2:54sides the top right bottom and left if 2:57we play with these values here you can 2:59see that increasing one does not affect 3:01the others whatsoever but if I switch 3:03back to this mode we're back to that 3:04single field where we control all four 3:07borders at the same time and like I 3:09mentioned before the border is on top of 3:11everything so where the Border 3:13intersects with content within its frame 3:15it's actually going to cover that 3:17content up you also may have noticed 3:19that borders are positioned inside the 3:21frame so by making the Border larger 3:23you're not making the frame larger it's 3:25not going to protrude outside the frame 3:27rather than being Center aligned or 3:28outside aligned they're inside aligned 3:30always then last we can change the style 3:33of the frame between solid dashed dotted 3:36or a double line I'm going to leave this 3:38on solid and the very last thing I want 3:40to point out is the opacity of the 3:43Border if we want to reduce the opacity 3:45of the Border we actually go into the 3:47color and we reduce the alpha of the 3:49color so if you're looking for opacity 3:51and you're wondering where that property 3:52is that is mixed in with the Color 3:55Picker here now that we've got a border 3:57applied and it's really easy to see 3:59those hard pointy Corners I want to show 4:01you how to round those Corners if you 4:03want to that is the radius property so 4:06by increasing the radius it's by default 4:08going to increase the corner radius of 4:11all four corners at the same time but 4:13again just like the Border we can choose 4:15to split those values apart and we can 4:17say you know make the top right more or 4:20less round make the bottom right more or 4:22less round etc etc and we can take full 4:25control over the roundness of each 4:27Corner independently cool now that we've 4:29got a fill and a border and we played 4:30with the corner radius I'm thinking it 4:32would be a natural time to go over 4:34Shadows so when we click to add a shadow 4:37the first thing I want to point out is 4:38there's another add button under Shadows 4:40you can actually add more than one 4:42Shadow to a frame you can stack them up 4:44if you want to or you can combine an 4:46inside Shadow with an outside shadow so 4:48more on that right now if we head over 4:50to the dialogue that appears we do get 4:52to choose between an outside or inside 4:56Shadow by default we have an outside 4:58shadow it's kind of hard to see now but 5:00if I increase the Y Dimension which is 5:02going to move it up and down now you can 5:04see it sticking out the bottom the Y 5:07Dimension can also be a negative number 5:08the x or y can be a negative number to 5:11control its offset from the center then 5:13using the blur property we can make the 5:15shadow a bit softer and the spread 5:17property will allow us to increase or 5:20decrease the size of the Shadow to make 5:22it look like the shadow is coming from 5:23maybe a small light source that's 5:25projecting super far outward or from a 5:27larger light source that's kind of 5:28wrapping around the 5:30but if you want an even more realistic 5:32Shadow rather than using the typical box 5:34Shadow which is basically just the shape 5:36of your layer blurred behind itself we 5:39have the option of adding a realistic 5:42Shadow instead now what a realistic 5:44Shadow is going to do is automatically 5:46stack several Shadows that give us a 5:49more convincing effect if I bring the 5:52diffusion all the way up and I bring the 5:55focus all the way up you can see that 5:57there are actual Several Hard Shadows 5:59here that that are stacked on top of one 6:00another by adjusting the diffusion we 6:03adjust how quickly those Shadows Fall 6:05Off and by adjusting the focus we can 6:08make them more or less blurry so with 6:11the diffusion and focus and kind of a 6:12happy middle ground we do end up with a 6:14shadow that's quite a bit more realistic 6:16than a single typical box Shadow and if 6:19you're not getting the subtlety that you 6:21want from playing with the diffusion and 6:23focus you may just want to reduce the 6:24opacity of the whole thing that again 6:27just like a border is going to be within 6:29the Color Picker so here I can dial the 6:32opacity up or down get myself kind of a 6:34more subtle result here speaking of 6:37opacity we've also got an opacity slider 6:40for this whole frame and you'll notice 6:42that when you bring the opacity down it 6:44brings down the opacity of the visual 6:46properties of this Frame and all of its 6:49children because they're all kind of 6:50bundled together they're all behaving as 6:52one unit it's a container it's like a 6:55group it all comes down in opacity 6:57together but there's also a property 6:58here called visible and some folks get 7:01visibility and opacity a little bit 7:04mixed up so let's clarify that if I 7:06bring opacity all the way down to zero 7:09yes this is no longer visible but it's 7:12not the same as setting visibility to 7:14none cuz you'll notice that there's 7:16still a frame that appears on my canvas 7:18and when I Mouse over these things these 7:19things are still here visible makes them 7:23disappear from the canvas it's like 7:25they're not there and one of the ways in 7:27which that can impact your design is if 7:30for example I have several of these 7:32cards let me duplicate this card real 7:34quick with command D and uh I'm actually 7:37going to select both of these and I'm 7:39going to wrap them in a stack I'm going 7:41to press option command return on my Mac 7:44and I'm going to make this a horizontal 7:45stack so now I have two of these cards 7:47next to each other and just for good 7:49measure I'm going to duplicate again so 7:50we've got a stack of three cards now if 7:53I select any one of these and I reduce 7:56its opacity down to zero the lay out is 7:59preserved the card's still there it's 8:01just visually transparent anywhere in 8:02the middle it's translucent all the way 8:04up it's opaque but if I switch the 8:06visibility to no now the card disappears 8:09and the layout acts as though that card 8:11never existed in the first place so 8:13that's important when you're working 8:15with Stacks grids anything with relative 8:17layers when you switch the visibility of 8:19something from yes to no it removes it 8:22from the document flow it removes it 8:24from the flow of the stack and 8:26everything else behaves as though that 8:28object doesn't exist 8:30so that's the big difference between 8:31visibility and opacity right there the 8:34last property we haven't talked about 8:35here is Overflow which by default is set 8:38to Hidden and if I click away you can 8:40see that those Shadows that I created 8:41earlier are now cut off what happened 8:45well that frame that I wrapped around 8:46these cards to turn them into a stack 8:48has the Overflow set to Hidden which 8:51means anything that goes beyond the 8:53boundary of that frame is going to get 8:55clipped off so all we need to do is with 8:58that parent frame SEL Ed just come down 9:00here and switch the Overflow from hidden 9:03to visible and now child elements can 9:05protrude beyond the boundaries of that 9:08parent frame now the third option for 9:10overflow is scroll and I'm not going to 9:13apply that to this Frame here instead 9:15I'm going to grab the frame within this 9:17card that has all these bullet points in 9:19it and I'm going to switch the height 9:21from fit to fixed so that it can't get 9:23taller when I add more content to it now 9:26I'm going to grab one of these bullet 9:27points I'm going to duplicate it just so 9:29that I can have more stuff in there than 9:32fits now with the parent frame selected 9:35that's containing those items I'm going 9:37to scroll down here and I'm going to 9:39switch the Overflow here from visible to 9:42scroll and scroll is going to clip the 9:44content kind of like hidden does but if 9:46we go and preview this this is now a 9:49scrollable container so whatever the 9:51difference is between the size of the 9:52frame itself and the content within the 9:54frame become scrollable that simple one 9:57last thing I want to point out is that 9:59in addition to the default set of 10:00properties that shows up here there is a 10:02plus sign where you can access some more 10:04advanced properties so we have blending 10:06modes in here we can decide whether or 10:08not an image is draggable we can add all 10:11these great filters we can add a mask 10:13there's a lot of cool stuff going on in 10:15here so be sure to check these items out 10:17too and that's it now you know how the 10:20default style properties of a frame can 10:22shape these otherwise inconspicuous 10:24rectangles into core visual design 10:27elements and you know where to find even 10:29more more advanced visual properties 10:30like blending modes filters and masks 10:34that's it for this one I'll see you in 10:35the next one

TeachesFrames

Also coversGrids Links Sizing Stacks Transitions & Easing

Watch on YouTube ↗

‹ 10 Framer Shortcuts to Supercharge your Productivity

Framer Update: CMS Galleries ›