Positioning, Sizing and Layout — Framer Fundamentals

in framer understanding how you use layout size and positioning on frames and elements on the canvas is fundamental to building the site of your dreams and we're going to learn this in three steps let's start with layout layout can be really powerful layout allows us to turn frames into Stacks or grids think of it like your flexbox for CSS or your auto layout for figma it works in a similar way let's start by clicking layout in our properties panel now you'll see we've got two options let's start with stack stack allows us to well stack all the elements of our frame in a certain way if we set the directions to Vertical you'll notice that the items sit on top of each other and if we set it to horizontal they'll sit side by side distribute is the placement of your elements within your frame so if your distribute is set to start everything is going to begin at the starting direction of your frame but if we set the direction to say space between this means that all the elements are going to space evenly throughout your frame now alignments allows us to position our elements to the start middle or end of our frame now Gap refers to the spacing between all our elements wrapped within that frame say if we set the gap of the frame to be 50 pixels you'll notice that all the other elements have a space of 50 pixels between each other now padding why it may seem similar is the space between the outline of your frame and the elements inside it think of it as an imaginary border stroke inside your frame as I increase my padding the elements inside my frame move closer together because there's less room for it to move now grid allows us to create well a grid formation with all the elements inside our frame now this is useful if we want to create any sort of card or element that has the same layouts applied no matter how many times we add it and I can customize my grid by changing the number of columns or rows that my grid will contain and of course I can add my Gap or padding just like before let's move on to sizing there are four ways we can size elements on our canvas let's start with let's say I draw a new frame on our canvas by default the dimensions are going to be set to fixed meaning no matter what no matter how much I alter my browser the size of this Frame is always going to stay the same now let's say I have a frame inside another frame and let's call these the parent and childhood frame if we want the sizing of the child frame to be dependent on the parent frame this is where we would use relative styling say for example we want this child frame to take up 50 of the frame that it's in then we would just type 50 into our width and now you see that the sizing has changed to relative and it's also taking up 50 of the container that it's in if I made the parent frame bigger you'll notice that the child frame will still continue to take up 50 percent of the frame and that's because the sizing is relative to the frame that it's in now if we set the sizing to fill this means that an element will only take up as much space as it can it will literally fill what is available now it's also important to note that the fill sizing is only possible with a Stacks layout for example this is really handy if we have a section on our website with some content that has a fixed sizing so it won't change at all but we want to fill the empty space next to it so it is truly responsive and lastly let's talk about fit content let's say I have a frame and in that frame I have some text but the problem is my text is currently overflowing my frame so I want to make it that my frame will automatically fit the size of my text this is where I could use fit content so if I go to my sizing panel and change the width or height to be fit content you'll see that now the frame has automatically resized itself to fit everything within it and if you do this on a frame you'll also notice that it's automatically converted to a stack okay so now let's actually talk about positioning positioning is yet another fundamental of framer to understand imagine you're sitting at a table with five other people and then you get up and you move your chair to another Corner in the room you've changed the position of your own self but has not affected anyone else or to move away from a dining table imagine a hero section of a website and you want to break an element outside of the stack that it's in this is where we can utilize absolute positioning which is where we can affect the position of a specific element without affecting anything else and by default when we draw a new frame onto our page unless it's inside another frame with layout on it'll automatically default to Absolute now relative is the most common type of positioning in fact as soon as you have an element inside a frame with Stacks turned on the positioning of that element will automatically become relative relative means that the positioning of that element is controlled by the frame that it's in so it allows us to play around with a stack or a grid layout and everything will just work let's move on to fixed so let's say I want to create a navbar that no matter what will always be positioned at the very top of my page so as I scroll the positioning of the navbar doesn't change this is where we would use fixed positioning so let's take a navbar element and let's set the positioning to be fixed we also need to set where the element is positioned and we can do that by setting the top to zero pesos and you'll notice here that only the elements that are lit up in blue is controlling the positioning everything else is set to automatic it's also important to note that the only elements on the page level can be set to fixed essentially everything can be fixed to your browser viewport so if you want to create a sidebar navigation framer I would set the fixed positioning to the left this isn't fixing the nav bar to the left of the page but to the left of the viewports so any elements underneath it will be completely disregarded and lastly there's sticky if we set an element on our page too sticky we can set the elements to stick while we scroll for a certain amount of space unlike a fixed state where we're fixing something to our viewport sticky allows us to fix certain elements to a parent frame so let's say I want to take my text and stick it for the duration of my images on the right all I would have to do is to set the position to Sticky and that's it I can also change at what point the sticky State comes active by changing the top positioning and just like that you've already started learning the building blocks of framer of course there's a lot more to explore but something tells me you're already on your way if you're feeling stuck make sure to reach out in the framer community

Channel: Framer

Views: 34,540

Keywords: #framer, web design, website, no code, tool

Id: CsOIIEmaKlc

Length: 7min 36sec (456 seconds)

Published: Thu Sep 21 2023