Learn Framer for Beginners in 2024 | Framer Tutorial

the other week I settled into my new office and found some time to dig into the highly acclaimed no code Web building tool framer I've always been a little skeptical when it came to new tools coming out onto the market because I felt like a lot of their claims generally are too good to be true but after spending a couple of hours building a responsive and interactive site I saw a clear value proposition framer has uniquely simplified the way people can build beautiful but more important ly complex websites for example you can make any element

interactive by just assigning an effect to it like making an image draggable that's pretty cool and there's no tinkering around with an animation timeline now another example is that I personally love adding little details to my sites so they feel a little bit more personalized and interactive but normally it takes a lot of time Googling for code Snippets or spending hours designing and coding them up but framer has built an extensive library of com drag and drop components that include dates countdowns Maps patterns graphical elements and more that you can pop directly into your website

the build process was also surprisingly simpler than expected there are a few small details that I personally had to get used to but something that framer does quite well is that they found a beautiful balance that makes designing and building an entire website feel quite natural normally we design and then we have to go and build the website but that's not longer true as when you're designing in framer you are actually building the site live as well so when you have your responsive views side by side you can see all the changes happening at the

same time and then once you're happy you can hit publish and your site is live in seconds so in this video I want to help you learn framer for the very first time so we're going to cover the framer ecosystem and then we'll dive deep into a practical overview of framer's features and then I'll share how I believe framer differs from other tools so you know when to be using framer so let's dive [Music] in so the moment you head over to fram.com this is what you see an absolute Masterpiece if you ask me now

surprisingly the fram.com website which is a pretty complex website on its own is actually built in frameo as well so I think this is the perfect example to help you understand what framer is able to achieve now there's a few different areas that I want to bring a little bit more Focus to because I know the framer ecosystem can be quite overwhelming because there are so many different aspects to it now if you're new to framer I think the best place to take a look at first is under resources you can head over to templates

now as a beginner to framer you sort of want to understand what is the limitations what can this product actually achieve so the template section is a great resource for you to see what you can actually achieve but more importantly actually be able to find inspiration for you to create your very own websites as well as you can see over in this section we have lots of different paid templates that the framer team and also lots of other creators have created that they sell on this platform and it might also be a place where you

might want to spend some time in creating templates later down the track if you want to build some side income now under resources we also have the academy which I think frame and Benjamin specifically has done a phenomenal job in creating a ton of different detailed and well produced tutorials for you to understand how to utilize framer through video tutorials so if you're learning how to create layouts utilizing their scroll feature creating different effects utilizing their CMS and all that great stuff you can find all the resources over here now there's another area that I

want to bring Focus to and introduce you to is their community so under Community clicking on the link over here this will take you to the framewor community and I believe it's built on Circle which we can see in the bottom left corner and it's a great place to be where you can ask questions meet other designers meet other frame developers and they've also got some resources to help you get started as well so if that's something that you're into you should definitely check out their Community now another great place for you to find inspiration

is also under their Gallery so if you click on gallery this will take you to pretty much a place where the framer team have found all the beautiful and great websites that people have built with the framer tool and this is a place where you can find inspiration once again now they've also got some honorable mentions that they've nominated for some of the candidates but I think as a designer and as someone that's looking to join the framer platform it's always great to find beautiful inspiration great websites that you can use as a reference to

help guide you in building your very own website oh and by the way if you are interested in launching a new website with framer I have secured you a pretty sweet deal you can get 3 months off their entire annual plan so if you are interested check out the link in the description there's a coupon code and with that said back to the video now once you've gone ahead and created an account and logged in you will be landed into a dashboard that looks something similar to this in the top you have your header where

if you click on the drop down it will give you access to some of the standard navigational items including your workspaces that you're part of you can also change into night mode or dark mode and obviously you can sign out as well then on the right hand side you can also create new projects and also invite new members to your workspace in the left side menu you have your standard navigation items including Account Details settings finding updates from framer and also accessing the community which I won't dive into as I think these are self-explain explanatory

but underneath you also have your projects Now by default it will be selecting all which will bubble up all the different projects that you are currently working on or you have available in your workspace but you can also create different folders to help you keep all the projects uh structured and organized so if you are managing lots of different freelance projects you might want to create a new folder for a specific project or you might want to bundle them all up inside a freelance project folder now I've got an example over here which is under

designers ship and you can see in here I've gone ahead and actually created a very simple portfolio template where I've actually utilized quite a few different framer tools and features to build and in this tutorial we're going to go ahead and build something very close to this and if I go ahead and preview this for you you can see that we've got some basic animations we've got some responsiveness and if we break this down you can see that it all looks pretty good so we're going to go ahead and Kickstart the tutorial so if you

want to follow along feel free to create your very own project file and we'll get started all right so hopefully you have gone ahead and created an account and logged in the first thing we want to do is make sure you have a folder set up and we're going to go ahead and click new project now before we Kickstart the tutorial I just want to give you a quick overview of the different sections of this canvas so you have a better idea of where to find specific things in the top menu in the header we

have your standard dropdown and if you click on the framer icon it will give you access to a lot of different actions we won't dive into detail of each one because I think they're quite self-explanatory we'll focus more on some of the key features that you'll be utilizing to create the responsive template next to that we also have a main CTA which is to insert and as you can see if you click on that it will actually open up a menu which allows you to select lots of different elements and components and features that you

can insert into your website this is a key value proposition that I believe framer has done very well which is they've gone ahead and created a ton of different page templates sections navigational items and also menus as basic items that you can insert into your page directly so simply click oops sorry just clicking add page that will automatically add the entire page to your canvas so you can utilize this as a starting point for your project now if we go ahead and hover over sections you can see that we can go ahead and also click

and drag and pop a section down into a page template and it will automatically snap into the board you can also go ahead and select a navigational item click drag and pop that down into your page and as you can see you can start to build beautiful but also a complex website pretty quickly now if we go ahead and click on insert you can see you also have access to different menus we have access to a CMS which is short for Content management system which we will be utilizing in the tutorial to manage some of

our content but what I love is the element section so as I have been building websites for many many years there are lots of little details and creative elements that I do want to add to my very own project but one it takes time to design and second more importantly I will have to either code up the JavaScript or find a code snipper online to be able to add it to my website what frame has done is they've actually gone ahead and thought about what are some of those most common elements creative elements that we

can design and build for the user so they can simply drag and drop and use instantly on their project so if you needed a countdown this is automatically done if I preview it you can see that this will automatically countdown for you and you have all the settings that you need on the right hand side to adjust it so this is what I love about framer they've made it really simple to actually integrate interactive elements and dynamic elements that you normally would use with a click of a button so they've also got lots of media

assets you've got forms icons interactive components social elements and utilities such as tools that you can embed into your website for example if you have a gumroad shop if you wanted to integrate your product hunt product that you might have submitted to product hunt and you wanted to feature on your website you've got the upo component over here you've also can add a Buton to your website to copy any text to your clipboard all these little graphical elements and components generally would take time to design and build and they've done that all for you so

if we go ahead and take a look at the next item we have layout so we have frame so if you have ever utilized a platform like figma for example a frame is really just a frame of items that you can populate and put inside the next three are referred to as Stacks in framer which is very similar to Auto layout and if you're a developer it's very similar to the concept of CSS flexbox and also CSS grid so if I go ahead and click on rows and draw rows you can see that we have

two items inside this stack if I go to Pages click on layers you can see the layers we have a stack and we have two frames inside if I click on the stack and head over to the right hand side under the layout you can see that we have a stack we can change that to a grid as well and we can change the direction how we want to distribute the content inside alignments create a larger gap for example you can see that that's changed to 60 pixels and we can also adjust the padding so

once again if you've utilized a tool like figma you will probably be familiar with Stacks it's the same as Auto layout then we also have text so you can go ahead and click on text add any text to your project pretty self-explanatory we also have a CMS which we'll be utilizing in this tutorial and you also have access to Quick actions over over here on the top right corner we also have localization so if you are turning your project into a different language or you want to translate your whole website into a different language they

have an entire feature that you can do so there you've also got your website uh settings where you can manage the titles page uh descriptions and all that good stuff you can also preview your prototype and you can publish your project in the top right corner now on the left hand side we have three menus Pages layers and assets pages is quite self-explanatory this entire canvas is currently showing the homepage so if we wanted to create another page simply click on the plus and we might call this about and you can see that it creates

an entirely new Canvas OR area or workspace for the about page and you'll understand why this is extremely useful a little bit later on in the tutorial but if you're smart enough you probably noticed in the homepage it automatically helps you manage and create responsive views very quickly and automatically but we'll dive into that a little bit later you can see that if you click over to layers you can see that all the different pages are broken down by the layers if I select one of the views you can see that desktop stack has been

selected and we can see all the different layers within as you can see right there and before I move on you can actually change between the different pages as well so you can change between between about and also home now in the assets column we also have a place where you can manage all your components all your different styles and any code overrides that you might have for your project on the right hand side generally these are the settings for your elements your components and also your pages so if I have a component selected for

example this entire stack so if I open up layers you can see that the whole header section is selected over on the right hand side we have access to settings such as positioning the size the layout we can add effects overlays custom curses Styles and all that good stuff now I know this can be very overwhelming but we'll be kickstarting the tutorial and we will be designing and rebuilding that template that you saw previously from scratch so with that in mind let's get started okay so let's jump ahead and get started with this project if

you remember we had a header and then we also had a hero section that gave the viewer an explanation of what this website is about so by selecting the desktop stack you can click on the menu up here or you can click on the canvas over here we're going to hit insert in the top left corner we're going to go to navigation and the first thing we're going to do is drag and drop a header into the canvas over here two shortcuts that I love using which is holding down space a bar on your keyboard

and clicking and dragging to navigate the canvas and holding down command or control on the windows and hitting plus to zoom in the first thing we wanted to do is edit the header making sure that the header has the right links that we want so by double clicking into this component this will take us into framer view of managing different components as you can see in the top left corner we have home and now we are nested inside the navigation here we can go ahead and change the content of the component so we might call

this about and then we might also add a link for case studies for example and we might also have a link for contacting us now we can go ahead and delete the other links by selecting by clicking on the link hitting delete on our keyboard clicking on the last one and hitting delete on our keyboard let's say we also want to go ahead and utilize one of the creative elements that framer has created and we want to personalize our portfolio or our website by maybe just showcasing today's date just to make it feel a little

bit more Dynamic so we can go ahead and click on insert we can go down to creative and we might click drag and pop the uh time or sorry the date into the header perfect so if we go ahead and click on this and maybe preview it you can see that this has already added an interactive or dynamic compon component to our component looking pretty good so we'll hit back or escape on our keyboard to exit that view now as you can see when we are building a website you probably would have realized you cannot

simply Place elements wherever you want freely we generally have to follow a bit of of a structured approach and if you are familiar with figma or any sort of no code building tools you do need to utilize some of the semantics so even if you're a beginner to framer feel free to follow along and I want you to go ahead and select the stack that is containing the links and for us to move this time over to the right hand side we are just simply going to go under size under width instead of fitting the

content which means that this bounding box fits the content so it's literally fitting or wrapping around the content we going to make it fill the container we're going to push it and you can see that this element the links stack is filling up the container all the way where it cannot fill it up anymore because there is an element on the right hand side which is now touching the edge of the containing box that's perfect then under layout under the stack under distribute we're going to change center to start which means that we are going

to align the content inside to the start of this bounding box and you can see we've pretty much got this header perfect you can see that we need to add a bit of spacing on the right hand side so very simple we're going to to select the header and under layout we will add some padding right on the right hand side so by heading over to padding clicking on this icon on the right hand side to adjust the spacing for each side individually I'm going to change the padding on the right hand side to 20

and that's looking pretty good so we're going to go ahead and select the top menu under phone selecting the top and we're just going to reset the padding to Zer pixels just to realign the elements inside and you can see that what we have added to the header for the desktop menu over here has automatically been placed into the responsive views for here in the mobile menu so all we need to do is if we don't want to showcase the time for mobile because we feel like it's irrelevant it's more of a detail that we'd

like to add just for the desktop view we can select this hit delete on our keyboard and it doesn't actually delete it but it will hide the component over here as you can see it's grayed out so if we head back to our home you can see that we've got a dynamic header that would have taken maybe an hour maybe 30 minutes to find the right code snippet to create a countdown but it's all been done in a couple of seconds so you can see that we have our links and we also have the time

over here so we're going to head back now something to also note that if you want to go ahead and customize This Time by double clicking into your component and selecting the component itself generally all the settings can be found in the right panel on the right hand side if you go all the way down to the Styles and also on the countdown settings you can see that here you can actually configure the date the style the font and the colors so feel free to play around and maybe you might want to make it consistent

with the text over on the left hand side you can always have a play around with this as well so heading over back to home we now want to go ahead and create a hero section that will have an image on the right hand side and also some text on the left just to let the viewer know what this website is all about so heading over to insert we can head over to sections feel free to play around with any of these but if you want to follow along let's go ahead and maybe pick one

that looks a little bit nicer I like the third one pop it in and it looks pretty good but let's say we don't actually like how the square or this image is flushed all the way to the right hand side and we want to add our very own images to this website I want to show you how to do this and how to maybe even customize this component so you can start to learn how framer actually works but let's go ahead imagine this is our very own portfolio feel free to go ahead and double click

into the title and you can feel free to add a little heading over here I might just say yo my name my name is mizco and I'm a product designer something simple like that we might also want to add a little description so feel free to double click onto the description era and I might say welcome to my portfolio where you can learn more about my work I might double click onto the CTA and I might say view case studies as my primary core to action double click onto my secondary CTA might be get in

touch all right right so I've got my textt looking pretty good and hopefully you've got your title as well You' got your description and you've got your CT ready but now we want to go ahead and replace this image so you can see that on the layers menu we have our image selected which is a stack and if we want to go ahead and add an image we can head over to the right hand side settings under Styles under fill we want to click this icon and we can actually go ahead and apply a color

we can select this icon over here apply gradient select this image uh this icon over here apply a radial gradient we going also add a different type of gradient over here an angular gradient I believe it's called and then we can also add an image so I'm going to go ahead and click choose image and I already have an image that I have saved to my desktop I will double click on that and you can see that this will automatically populate or replace that default image with my gradient underneath you can see we have some

additional settings such as what the resolution should be how you want to actually fit this image inside this box so do you want it to feel do you want it to fit or stretch you'll also have your alignment and you can also add some old text so let's say I actually want a little bit more of my gradient over here to be showing because my image actually extends more to the left hand side I might be able to click on this drop down and change it to left now you can also change it to top

left if your image is a lot higher but because my image doesn't go any higher it's actually just on the left hand side I can set it to left and it shows a little bit more of that corner and that's looking beautiful but what if we're thinking I actually want this square or this image to have some breathing room on the top and on the right hand side we also want to make the corners a little bit curved so it looks similar to our buttons so the styles are more consistent well we can go ahead

and select our image or the right hand side generally all our settings are always going to be on the right hand side under Styles under radius we might change the radius from 0 to 40 and voila now it's looking a little bit more consistent with our content and our styles for our buttons now what if we want to go ahead and add that spacing so there's a bit of breathing room on the top and on the right so this if we think about it we can go to our layers panel we can go ahead and

select the stack called two columns text image which was the one that we clicked and dragged over into our canvas we can go ahead and head over to layout and we can make sure that the padding actually has the right amount of padding that we want to add on the top and on the right hand side so we can either go ahead and add a 40 pixel padding to the entire box as you can see top and it will go over to the left hand side the right hand side and also the bottom as you

can see with the hover States or we can actually go ahead and go zero click on the icon to uh set individual padding for top left right and bottom and simply just say we want 40 on the top 40 on the right hand side zero on the bottom and zero on the left so you can still achieve the same thing just depending on how you want to structure it but just for Simplicity sake I might just go 40 for the more cool so that's actually looking pretty good now let's say we want to go add

a new section now we want to go ahead and add a section down here where we can feature some of our favorite clients but instead of having to go to insert and steal a little section that was pre-made by framer why don't we exercise our own skills and build it from scratch so what I want us to do is Click out from the insert menu I want us to do this ourselves so what we can do is I want you to hit F on your keyboard which will automatically select the frame I want you to

Simply whoops let me just go ahead and select that I want you to click drag and just create a box and you can put down your frame generally when you put down a frame in framer it will automatically populate it with a fill of this nice turquoise color and what I want to do is I want to first on the layer side double click onto the layer name and replace this and name this as featured clients so let's just quickly refer to what we are actually going to be creating for the client section so I'm

going to head over to my previous uh build and you can see that I'm currently presenting my featured clients in four boxes but the little trick here is that I don't want to have to replace this logo or these logos manually across my website if I have five or six pages and I'm utilizing these logos I don't want to do it manually so instead the way that I've done this is I've actually gone ahead under CMS I've actually created a new collection called clients and in each client you can see that we have the business

name and also their logo as you can see over here freelancer High pages and also spaceship so with that in mind let's go ahead I'm going to go back to our previous design I'm going to show you how to use utilize the CMS feature to create your very own mini database so you're going to become a bit of a developer over here and we're going to automatically pull through those logos from our mini database so that in mind let's go ahead and click on CMS let's go ahead under collections in the top left corner hit

the plus icon and we're going to call this clients now you can always create different types of collections there might be ones for clients there might be ones for case studies but really this acts as a mini database where you can store content and centralize it so you can dynamically pull this information through onto any page so you don't have to manually update them throughout the website you can do it all in one place so once you've created your collection for clients we want to hover on this three dots we want to go and click

on edit Fields now we want to go ahead and change rename the title one to business name that's looking good we then also want to just right click and hit remove on the content one and we want to go up to the plus corner and we want to find image select that and we're going to name this as logo feel free to add a description you can also set this as required as yes or no it really depends on what you want but let's say we want every client that's being added to must have a

logo we can select yes and that's looking pretty good so since your fields are set up we can click out of it we can then then go to new item we can go to business name and let's say I'm going to add freelancer I can click on the logo choose image I've got my Logos over here so freelancer logo I can then add change the resolution I can add the alt text and change the focal point but for now I might just leave it as that and then I can also hit save in the top

right corner that's looking pretty good all right so I've gone ahead and added four clients and all clients have have their very own logo so I'm going to go ahead and hit back or you can hit escape to close the view and now what I'm going to do is I'm going to select the featured clients section I'm going to go hit insert collection list and I'm going to pop down the client collection list into this Frame click and drag now you can see that here it looks a little bit broken but don't worry we're going

to fix this I'm just going to quickly align this section to the the left side so now that we've dragged that in we want to make sure that your collection list is actually sitting inside your desktop stack so by just clicking and dragging making sure it's selected we can bring that in and you can see that it should be sitting inside now for now maybe we will just remove the feature client's wrapper for now which is going to select it and delete it just so this is a little bit easier for you to follow we

are going to go ahead and as you can see right now this Canvas OR this stack the list on on the right hand side you can see it's with 600 pixels and it's fixed we actually want to fill this entire space with this component so under size change fixed to fill and you can see that right now it's taking up all the space that it can now to be consistent with our previous section we want to make sure that the spacing is also on the on the top and on the right and on the left

hand side it's also the same so we can scroll down the on the right hand panel changing padding from 0 to 40 and you can see that things are starting to line up remember we have four clients and our goal is if we go back to the previous design we want to create then we go to layers we actually want to go ahead and create our grid with the different type of Stack which is a grid type of layout okay as you can see the layout is not a stack anymore it's actually a grid because

we are creating a grid of contents so heading back over to my previous design we are going to change wh let me just rename collection list to clients we are going to change the client to layout over to grid we can keep the columns to two cuz it's looking pretty good we can always adjust the gap which is as you can see the gap between the items inside but for now I'll keep it at 40 and we can also keep the padding to 40 as well selecting the stack inside this collection you can see see

that this stack is wrapping the logo and also the name but what we want to do is we want to actually add a background color to this box and we want to Stack the elements inside vertically and not horizontally so whilst selecting the stack we can head over to the right hand side under layout we can change the direction to Vertical we can distribute from the start or we can change it to the center we can also make sure everything is aligned to the center and then we can also adjust the Gap so we can

always adjust the Gap based on how much space we want between the logo and also the text so for now we'll maybe keep it to 20 and scroll further down we'll find Styles we can add a fill so under fill select the icon and we can also just quickly pick whatever color we feel like suits so I might just go with something very simple like F5 F5 F5 now remember we also want to make sure our Corner radius is consistent with the overall style for our website so under Styles under radius change 0 to 40

and it's looking pretty bubbly it's looking pretty good now you can see that the text and the content inside is really touching the edges of the box so to add a bit of space under the stack head over to layout under padding we can change this to 20 and you can see that it's starting to look pretty good now you're wondering so how do we go ahead and align the text into to the center as you can see when you select the text so if you just simply hover and select the text right now there

are many different ways in doing this but the most simplest one is under text under a line just simply move it to the center and it's looking pretty good so let's go ahead and now take a look at the logos the logos seem to be cut off a little bit so what we want to do is we first want to select the logo over on the layers panel we just want to double click on that name and just give it some proper semantics so we're going to rename this to logo then on the right hand

side you can see that the width is 150 and the height is also 150 this is just default Behavior so what we want to do is override that so on the width we want to actually make it fill the container right so it's always going to take up as much space as it can then what we want to do is Under The Fill we want to change the fill of the actual logo to just fitting the container we don't want to stretch the logo too large we simply just want it to fit so that will

automatically set that to fit and that's looking pretty good now as you can see maybe we want to adjust a bit of spacing in between here have a think about it where what would you do to reduce that space so the text is a little bit closer to the logo all right so if you thought of selecting the stack heading to layout where the Gap is changing the Gap to from 20 to zero and there we have it so now we've actually started to build out a very simple template so what I want you to

do is go ahead and select the Blue menu and for the height of this stack this entire desktop canvas for the height instead of fixed I want you to change it to fit content so it's going to fit all the content inside and wrap around it perfectly and once we preview this you can see that this is now going to show you the entire view of your project now once we hit back I also want us to change one thing which is under styles we want to make sure that the Overflow is not set to

Hidden but always set to visible so this is always going to make sure that if there is any content that is going to overflow this canvas it will actually be visible and not hidden the last thing we need to do for this entire section is making sure that in this around this client's section we want to add a title above it but also wrap it inside its own section so hitting t on our keyboard dropping text down on the page or a simpler way is to actually go clicking on your heading hit command C to

copy it or control Z on a Windows device selecting your desktop stack hit command V click and drag it up above your client's and then you can add a new title so this might be our featured clients now we also want to make sure that this is also centered in the middle so very quickly we can head over to the right hand side align the text to the center and it's looking pretty good now generally what I like to do is I don't like things floating on their own so for me I would personally click

on featured the heading holding down command or control on the Windows device selecting clients making sure that they're both selected right click and we want to add a stack so this will wrap both of the contents inside a stack we might call this featured clients as an entire section and from here we can go ahead and adjust the gap between those elements and we can also adjust the padding for this element as well so if we want to add a bit of space between here we can select top add maybe uh 40 pixels and you

can see that it looks pretty good so as you can see this is entire component is dynamically pulling information out from your CMS so as long as you update your CMS and keep that up updated these components will always be pulling through that information so now that we completed our main template in framer creating a responsive view is actually really simple and as I mentioned before designing and building a live website in framer is not just two processes it all happens in the same interface since we've already created this view selecting the desktop we can

go ahead and select breakpoint and we can add a new breakpoint for tablet and as you can see for tablet it looks a little bit broken but it's actually very simple for us to adjust because what happens is tablet is currently taking the behaviors of the desktop view and anything that we change on the desktop view will be applied to the tablet view for example if I decide to change the title for my desktop homepage deleting yo will actually update yo on the tablet view so it actually reflects it and it makes it so much

easier to adjust what we want to do is to fix our tablet View and make sure it's all working beautifully we can go ahead and select the actual let me just go ahead and close my layers select the two columns text image stack that is wrapping the content and instead of Direction being horizontal we want to set it to Vertical so straight away you can see that vertically it's going to align our information once again for our featured clients we might want to select the featured clients you can see that the entire box is sitting

out side of the canvas so under width we can go ahead and change fixed to fill content and that's automatically going to readjust the box so it fits the content and we might just want to go ahead and change the client's settings which is the grid to maybe the Gap to just being 20 pixels so it reduces the space in between so it looks pretty good now let's go ahead and zoom out we can always adjust our settings over here making reducing the space but for now you sort of understand how this is all working

so from the tablet view because the mobile view as we append it is going to pick up the behaviors of the tablet view it should look a little less broken than the tablet one so clicking on the plus hit phone you can see that yes everything generally looks pretty good let's go ahead and just adjust some of the settings over here so selecting under phone let me just collapse that under phone let's go ahead and select the two columns Tex image which wraps everything we might actually want to go ahead and reduce the padding to

maybe 20 just so it's a little bit less Gap and we're using the real estate better we notice that something is broken over here double click into the stack double click again into the content and you can see the content is actually sitting outside of the parent container so under width generally we just have to change fixed to fill that's going automatically going to line that up we can take a look at this image maybe we don't want it to be so high what we can do is we can just simply drag and resize it

so it's bit more of a simple view we're going to take a look at our feature clients this is looking pretty good but maybe we want to stack them one on top of each other so we don't have two columns so we can go ahead and select our clients head over to the grid reduce the columns from two to one it's looking pretty good we're getting pretty close and then you can see that it's a little bit broken don't sweat it we're going to head over to featured clients under size under height we're going to

change it from fixed cuz currently it's fixed to this height and we're going to change it to fit content and that will automatically fit the bounding box to the content itself now for mobile we might realize we want to make the text a little bit smaller so by selecting the text we're going to go to the settings menu head out to text we might want to change the size to maybe 38 and we might want to change the title over here also to 38 just so it seems a little bit better and we also want

to reduce the spacing on the top and bottom for this entire section because we feel like the image is a little bit too far from the content what we can do is select the entire stack as you can see over here under the two columns text image select the stack change the height to fit content and that would actually bring it all together and we we then might want to manually add maybe 20 pixels to the top 20 pixel to the bottom or maybe 40 pixels to the bottom and that is looking pretty good so

let's go ahead and preview everything that we've done head over to your desktop view hit the Prototype buttton you can expand you can also contract you can see that everything is looking pretty good and it's all quite responsive as well now the last part is to add some of those interactions how do we actually make some of our items just fade in and how do we make it look beautiful so framer has made it really simple for us to do this now that we know that we want maybe let me go ahead and just preview

what we've done in the other project we just want to fade the title The text the ctas and the image one after another generally when you were creating these types of animations there is a lot of tinkering around on other platforms but if I hit escape and go back to my project FR has made it very simple so simply select the first item that you want to add an effect to head over to the settings panel under effects hit plus and what we want to do is actually just make it appear so you want to

hit the plus and the first thing we need to think about is when do we want this effect to execute or to happen and we want it to happen once this element appears on the page so under appear select that we actually want this item to maybe slide in bottom so we want to make it slide in from the bottom okay so select that we can also customize the actual effect and under enter select effect this module pops up at the bottom so just want to grab that we actually want to go ahead and hit

transition customize the spring and we actually want to change the stiffness to maybe around 80 so if you notice this is a much more gradual animation previously I think it was 400 I believe it was and if you notice notice it's a very jarring animation so we'll keep it to 80 for now and that should be pretty good so we can click out of that we can go preview and we can see that yep it's looking pretty good it actually just fades in so now let's go ahead and create the effects for the other ones

but this is a very simple way so I'm going to select the title once again for this effect since it has already been created we can actually right click and copy this effect select the text right click under paste we can actually paste the style we going actually paste the effect itself and you can see that it automatically will append it to it then we can go ahead select the button right click paste paste effect click the second button right click paste paste effect select the image right click under paste paste effect and let's go

ahead and preview this now you can see that it does slide in our content but it all happens at the same time so how we stagger the animation hit escape on our keyboard we can actually jump into the second item click on our effect click on our effect again and in the effects menu select the transition which is the custom uh animations that we've set and we need to give it a little bit of a delay so we're going to give this a 0.2 of a second of a delay then close that click on the

button click on your effect head into your effect click in into spring and you can change this to 0.4 so every element is going to have a delay by 0.2 now before you go ahead and close the transition model what I've also noticed that there is a very quick way to adjusting all the settings so because we've already got the transition model opened you can select the get in touch button and it will automatically bring you to this button's settings over here so previously view case studies was 0.4 we're going to change this one to

0.6 because it's the button that needs a 0.2 delay and then we're going to select the image and change the delay to 0.8 hit enter so now if we go and hit play on our project everything fades in and everything is also responsive as well so hopefully that gives you a much clearer idea of how to get started in framer now once again if you enjoy this video make sure to gently smash that like button CU it really does help out the channel Subs subsribe for the DAR hard fans and if you want to learn

more make sure to check out this video