Learn Framer in 20 Minutes (Crash Course)

there's lots of hype about framer at the moment people are building some really cool stuff so today I want to give you an introduction to framers so that you can get started for free we're going to build this cool Burger website in about 20 minutes let's dive right into it we're building this burger website that I have here on figma we're not going to build the whole thing just the first few sections and if you want to try this along and build the whole thing duplicate the figma file below this video now before I get started I want to mention that framer does have a plug-in to import your figma design with one click and you can do that and it's going to save you time but in this tutorial I want to teach you the basics and the fundamentals so you understand how frame will work so that you can actually customize and build whatever you want and not just copy paste and not sure how to handle it once it's there so let's build this from scratch first thing I want to do is I'll bring in the background color so I'm going to pick the page for the home page I'm going to go here into the Styles and I'm going to paste it then but also here from the shared caller I'm going to add this in and I'm going to call this dark gray just just so that I have this because I'm going to be reusing the colors and this will make my work more efficient now the next thing I want to do is bring in this menu here now framer already has these kind of components so I can go here into navigation and I have a dark one here and I can just drag it now the good thing about this is this will make it already responsive with a hamburger menu on mobile and this will save me a bunch of time now you can see that when I'm clicking on this it's purple if I go here you get this icon which tells you that this is a component now if you're familiar with figma or webflow you already know that components are elements that you want to reuse again and again over multiple pages so this makes sense in in a navigation element and often double click it if I'm going to double click it I'm going to go into the components and now you can see that I can edit it separately from the home page so this is the master and I can edit it from here and it will change all of the different elements that are reusing this and you can also see here that it's already set up for the tablet and the mobile when it's clicking and and so it's already set up for me so let's go ahead and edit this so basically what I want to do is I'm going to select this one change the background color to the color that I already have let's go ahead and change change the fonts so I'm going to select all the fonts that I have here framer about contact and even in the button sign up and let's go here into the fonts and basically not select a style but just bow Bowie one this is a Google font that we're using here so this is nice it's already set up for these ones I actually want them to be um capital letters so I'm going to go here into the text Styles and transform them into uppercase this is great for the button as well we're going to dive into buttons a little bit more down the line where we're going to talk about them as components but for now I'm just going to select this and set the transform for uppercase as well so basically now we have them maybe we want to change the color of the the style of the these to this beige color so let's take this badge color my God now I'm gonna have to give this a name and I don't know how to spell Bash so um let's call this brownie or something like this I don't know brownie brownie all right so I've got this color and for the button the button is actually purple so let's do this let's remove the round corners that we have on this button so selecting the button here it has round corners where is the round corners where are they Gap wrap radius eight I'm going to change that to zero all right so the corner radius is back and the color is this purpley which we're gonna add another as another color purple and basically we're done we have the navigation done we can of course change how it looks on mobile but actually everything looks pretty nice right now and I'm back to the home page we've got our navigation now we've got the text okay first before we're talking about the text let's talk about layout and how we're going to set up the layout in general here so the concept that framer have created they're calling it stacks and if you're familiar with figma auto layout or with webflows flexbox it's exactly the same actually when it's going to be turned into code they are actually using flexbox so if you're familiar with that that is a great concept and if you're not basically let me show you how this works basically it's it has an element that either Stacks element one on top of another or one next to each other so let's bring in rows because basically that's that's what we have here right we have a few few rows actually we can see this as one row second row and third rows right so we have here let's say frame number one frame number two let's copy and paste this so that just so that you can see uh that we have here that we have as you can see one two three elements here so these are going to be our sections right and you can see that they're stacked one on top of another they have a gap which is the space between them and the reason this is useful is that you can see we can change the direction of the stack so now we can take columns and turn them into you know just rows and this helps to make things um easier when we're turning this into a responsive and it just helps to make the layout more consistent and easier to yeah to lay out stuff so the first fact I'll actually let's give this names for clarity so this is going to be hero text the first frame hero text and the second one is going to be the hero image and then the third thing is going to be this let's call this uh hero info whatever hero info so these are the three sections that we have here uh let's just make sure that this Frame here is actually all the way from end to end we can also go here into size and set it as a hundred percent and this is going to make it you know uh responsive when the screen size changes which is great okay so now basically for this text I can just put in a text element from here however I want this to animate in a very cool way now here's a nice thing about framer they have this Supply which is kind of like ready-made components which you can just paste into your project and they have this really nice thing that's called motion text which allows you to animate text nicely so let me copy that and actually use that instead of just a normal text element so I'm coming in into the hero text and I'm pasting after I've copied it from the supply thing and now you can see that we have this hello world thing now just for Let's test this out let's play this around and you'll be able to see this hello world thing is animating word by word right hello World um and we can from the settings panel we can go here and see here's the text that's animating and it's animating by letter we can do by word or by line let's actually bring in our actual text and put it in here now we can go here and also change the the fonts and stuff and we we will do that in a second but what I want to show you is right now it's kind of like a design software where you can just place it whatever you want that's not what we want in a web we want it to always be either a line somewhere or centered so to make sure that this text is always aligned the way that we want it to be aligned I'm going to go here into the hero text which is the frame in the web design we're calling it wrapper because it wraps it contains everything that is inside of it and I'm going to turn this into a stack as well right I'm going to go here into the layout add a layout and basically now this is a stack now it's it doesn't really matter because I have just one element if it's stacked horizontally or vertically but I just want to make sure that it's centered and aligned Center so now you can see I can't move this thing around it's always going to jump into the center which is exactly what I want now for this motion text I don't know why it's so small actually let's go ahead and set this up to maybe 90 of the width so that it's quite like this let's also go and change the font for this so from inter we can use this Bowery forgot the name of this font Bowery one uh we can use something bigger like I don't know 70 or maybe even 75 here we can make sure that this is something like one and what is the color the color is the normal color that we have here this brownie also we don't need the background color that we already originally have for these frames so for a hero text I'm just going to go ahead and remove the fill and this looks quite well actually maybe we just want this this is three lines so maybe we want to make this a little bit bigger so let's go ahead and make this yeah something like this looks pretty good all right now let's play this around you can see that it's already animating pretty cool right so this this was easy and very nice now let's change this to animate by line I think this will be more appropriate so now we have this really nice intro animation for the text that's great all right for the hero image let's go ahead and bring in this hamburger image so right inside of it I have my image right here I'm just going to drag it in inside and we need to basically do the same thing that we have done previously where is the the burgers I'm going to put it inside of this hero why can't I see it oh for some reason it's really down here below which I'm not sure why maybe I dragged it below okay but again I want this to always be centered just like we had here so let me go here into the hero image and turn that into a layout that's going to stack it in the center I also do not need the background image here and I want this image to be as big as I can so let's turn it into a hundred percent width maybe 90 right something like this okay so this looks good also maybe if I try to resize these elements a little bit I wonder if I can get them to yeah go a little bit on top of it which is pretty nice all right okay so we've got the image here actually let's animate the image as well the the burgers as well right because now we have the burgers and the text is animating so let's do that the text is animating and then the burgers come on top this is really easy to do I'm going to select the burger image and I'm gonna add here an effect and this effect Let's do an appear effect and let's do yeah when it appears scale in um let's try scale in or scale in button I don't even know what that means but let's let's test it out let's play it around let's reload this and you can see that yeah it is appearing now same way but maybe let's try to delay this a little bit right so we're in the effect we can uh maybe just go ahead and see the spring and delay it by half a second so that first the text will show up and then the burgers will show up let's see how that looks alright so that's better right text is showing Burger is showing looks pretty good all right the next section that we have is we have this burger yellow uh not yellow greenish section with some text here let me grab the green color so here for this one actually it's a good idea to have this uh to have this fill color but let's just change it to this green and let's call it green and also this section probably needs a corner radius because we can see here that there's some corn radius so let's go here I'm just going to play this by eye something like this and uh what else this this thing has right so it has a little bit of spacing I think we should probably go here into all of these rows and add a tiny bit of Gap maybe between these elements or maybe this for this Hero Burger uh maybe we can add a little bit of padding from the top just to push it so on the layout front you can see that we have padding here I'm going to just add padding from the bottom so this is bottom yeah I can push it around like this a little bit and let's just space things out so that's more yeah nicely and for this hero thing maybe let's set the size to maybe just 90 percent something just like this all right so now that we have this Frame this Frame you can already see that it has two columns inside of it what that basically means is that we're going to turn that into a layout that stack things one next to another right so let's add some frames inside let's add a layout frame in here and let's copy and paste that so we have two frames here let's make sure that the frames are actually trying to fill in as much of the space that they have so that we have here like split screen so now we have the layout of this section actually that we can go ahead and add a little bit of padding just to make sure that there it's spaced nicely which is what we need here and we can add a little bit of space between these elements all right so we've got the element now we just need to add the content so for this one we can add text so let's add the text Burgers a ball of above all Burgers let's add this in here and of course we want to First style it now in this case it's good idea to use these styles that are already here so that we can reuse them H1 was probably this and we didn't use this because we used the component but this one let's use an H2 and make sure that it's the font that we want um the size that we want maybe it's like 35 or 40 something like that um actually that was a size sorry um what else do we have here I want to make sure that it's aligned and I want to make sure that it's not too big as it is right now right so I'm going to add a maximum maximum width of a hundred percent right so that it's not too big and for this Frame how do we align stuff we add a layout and we make sure that it's yeah it's centered maybe to the top so now we have this nice thing it's not all caps so we can go into the text uh style and we can change that to uppercase so this is nice probably maybe I need it to be bigger right so the text should be bigger that would be easy to change just the size and we don't need the background of this Frame that we have here so I'm going to remove the fill color and basically going to do the same thing for this element actually you know what it's probably going to be easier to just duplicate this row that we already have here and this just change from the H2 to a paragraph which we can of course also edit the font [Music] um edit the font maybe select a dark dark gray this is actually not the font that I want here so here we do need something like inter and add some kind of Allure ipsum font that we can use maybe bigger a little bit bigger I guess let's make it a little bit bigger and maybe I'm kind of like a semi-bold thing all right the last thing that I want to add is this button here and use this as a way to introduce buttons as components so let's bring in a button I can search here for a button component and just bring it in here now I want to turn this thing into a component and why because a button as you can see on this website we're using it here and here we're reusing this element but at different variance right sometimes we change the in the the color or the hover situation so we want to be able to reuse this and maintain the same stop so I'm going to click right click create a component um yeah let's call this button and now we can go ahead and style this in this case The Styling that we want is for this variant uh for the main variant is let's do the brownie thing for the text inside I'm going to use um the the brown the bowlery font we're going to make it dark so we basically uh stylus whatever we want we don't want a radius color I don't want a radius Corner maybe I want a little bit more padding from the sides so left and right I'm going to add a little bit more padding here on the layout panel so that's going to give a little bit more spacing here now here's what I really wanted to show you I also actually want to add a border so I'm going to add a black border and also going to add a shadow because we have this kind of like a drop shadow harsh drop shadow here so let's go ahead and do that not blurry we don't want any any blur to this so zero blur a little bit of spread one spread and then maybe like four and four all right so we've got the button but now I want to design what happens when people hover on top of it and I do that by adding another variant which is the over one so in this case what I want to happen is let's say I want the uh the background to change to maybe purple and I want the the shadow to kind of like go back inside so it looks like I've actually clicked it so let's go into the Shadow and change the distance to zero and zero all right so now let's see how that looks so basically you can see here that I have the button let's play this around and I have this button which is animating on the hover State now the next step would be to turn all of this into responsive and add the other sections but that's beyond the scope of this video so let's conclude it let me know if you're interested to learning more about framer and if you want to learn about I hear a lot of discussion about what's the difference between framer and webflow which one of them should I check I made a video on the topic so you want to check it out here I'll see you in the next video peace out foreign [Music]

Channel: Flux Academy

Views: 194,835

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: P5H7zs0RsUM

Length: 19min 38sec (1178 seconds)

Published: Tue Mar 28 2023