Learn Framer in 38 minutes! (Crash Course)

what's good I'm Matt jumper and I'm going to walk you through how to make this landing page in framer and this is going to be a quick exercise in mostly layout but I'm also going to get into using video for the background customizing a contact form using the ticker component and I couldn't help myself from bringing in one animation in the mix for the image you can find the assets I'm using in the description below along with a remix link you can use to duplicate the file to follow along if you get stuck or just play with the end result cool let's get into it okay so I have the design done in figma and before I start to build this out in framer I just want to walk you through how I Envision this layout to behave and kind of the key elements to think about so first off I wanted to make this video um relatively quick so I'm not going to get into the responsive States as in like I have a specific breakpoint for a tablet and for a phone however um I do want to think about the responsiveness of this whole section um both how it goes in and out on just the desktop state but also um vertically responsive because this is a landing page that it's just going to take up 100% of the user's viewport so 100 VH 100% of the screen because of this um we actually have to think about vertical responsiveness as well so in figma I actually built this using like Auto layout so this is actually going to behave relatively similar to how we're going to build it in framer so if I take this um canvas here and actually shk it down um you'll see that the video background is actually the one thing that's changing in size but everything else is staying the same so that's how I want it to behave is that we basically prioritizing um the the actual elements in the page so the navigation the text the email input and the the Ticker on the bottom and the other thing is as far as the resp vertical responsiveness goes is I actually want this email optin to be the same height as whatever this text ends up being so if I were to just drag in this text to increase the height you'll notice that the email option gets bigger and also the um video here gets smaller so that's like the responsiveness of it that's how I want it to behave um and then just to go over a few of the other different elements here we have a um video back background behind the navigation navigation is just a logo and a remix link um and then we have our email optin which will connect to form and then we have our ticker here so this text is going to be just like infinitely scrolling left to right um and then of course the image here in the middle um she's basically sitting on top of all the content except we'll make sure that the text and the email optin is on top of her um but other than that the only thing is I'm sure you saw in the video there's going to be a subtle animation here so we have two assets um basically a silhouette image and a full opacity image so we're just going to basically place them on top of each other and play with a um appear animation just to have the um top image fade in cool okay so now we can get into framer and just start with a blank canvas okay so we have a new framer project here and there's typically a few things that I do when I first set up a file just to kind of set myself up for Success um make it easier for myself as I'm scaling the site um I'm going to cover that in a different video for now I just want to make sure that we're building this as fast as possible so let's start with the desktop frame this is essentially the page that we're building in and you'll notice that the height is to 1,000 pixels and it's fixed which means it's always going to be th000 pixels regardless of how much contents inside regardless of how tall the user's browser is um it's going to be th000 pixels which we don't want we want it to adapt to the content inside of it so um the first step to do this is just add a layout to this um desktop frame so now it's actually a stack um and then next is I want to basically change the height to fit content which you can see that I can't do that yet because there's actually nothing inside so it can't fit anything so um I can just drop in a stack or tap s um and if I draw it in it actually comes with like frames inside which I don't really need I just wanted the stack itself so this stack here um I'll leave it as it is right now but for the desktop stack now I can set the fit content and it's just adapting to the height of this stack inside here okay so the stack now we can use this as the container for the um main area so we can just call this hero and this is also helpful because um if you decide to add content below this hero section you don't have to like redo all this you could just literally put it below because this hero is going to be 100 um VH 100% of the user's viewport so that's the first thing we can do we can set the height instead of a fixed 674 we'll set it to 100 VH and you'll notice that there's a viewport dragable element here and this is basically just to preview while you're editing what that viewport looks like um and if you preview actually I'll add a a fil to this here so you can see it when I preview it if I drag this out you see that it's always just filling the the height so I'll remove that fill and a couple other things we can do we can set the width to fill so now it's taken up the full width and the full height and the Gap is just the spacing between any elements inside which I'm just going to set to zero for now um and now we have our um container so we can drop in our image now we'll go to the folder of assets and we can get get hero.png and just drag it in and I'll put it inside the hero stack here so you'll notice that it went perfectly in the middle here that's because the hero stack is basically dictating the layout so we have a uh alignment top middle bottom and distribute I can change that as well um this image though though because I want to do two things I want to make it take up the full height as well um and I want to put an image behind it and I also want to um make sure that it is on top of all of the content so because of this um I don't want the type to be relative I actually want it to be absolute and now what I've done is I've made it so it's not in the flow of content so I can click and drag it anywhere I want um I can set the viewport to 100 VH and now you'll notice that it's not like perfectly centered I have to manually do this by aligning it this way um and in figma I actually have it placed a bit where it's aligned to the bottom but the top isn't exactly 100 um 100% I have it a bit larger so I can just click and drag this and Visually kind of place it in the same way um so it ends up being I guess we can do 108 um and then now if I were to duplicate this so I can right click and hit duplicate um I can click and drag this and move it around but if I undo it um it's basically just sitting on top of that original image so let's just go to the finder here and grab that other image we can copy it and then we'll click on this fill here for the image I'll click on it and then just hit command B so now it's replacing it so now I have this image sitting directly on top of the one um before if I drag this order here um it'll change what's visible first if you get to the point we're at any um stage where the order isn't really reflecting what you see on the screen you can also set a z index to be higher so this is one and this is also one so if I make this two then that way it's always going to be um above and let's just do a quick rename of the top one to silhouette and then bod one to we just call it full and I noticed that there's actually a black outline here so I think that the um alignments just a bit off so if we just select both of them again and align them Center I think that should fix it sure that these numbers are the same yeah so it's not perfectly centered in the screen right now but once the content's in here we're actually going to move it a bit like left or right to make sure it's visually balanced so right now we just want to make sure that they're both um aligned with each other okay and then now to do the um just a subtle animation of the uh top image kind of fading in we can add an effect so go to effects and do uh up and we'll just do fade in that's what we want and enter so basically this is the um the before effect and the or the before State and then the after state is what we have in the canvas so before the opacity zero that's good um we don't need to change anything else here the transition um we can just play with these numbers a bit so I kind of figured out 120 36 and 4 and5 works so the stiffness and the damp in the mass um basically if you play with these numbers you'll see that this is visually just representing what this uh animation is going to look like so you can play with those numbers as much as you want and get it um however you please but this to me is just a nice kind of easing in effect um and the delay here is basically instead of just doing it right on load we're going to wait half a second before we start this animation okay so next let's just look at how we're going to set up the layout um of the content inside so I actually set up some guides in uh figma and this is just to basically set the outside um the margins or the padding so it's the same thing of the values I have here so the left and the right padding is 64 pixels the bottom padding is actually 32 um and the Gap so the spacing between each element is 64 pixels so we can replicate this in framer but the one thing to consider is that um this uh ticker here is actually not um adhering to the 64 pixels of padding is going full width so let's keep that in mind as we set this up in framer so the first thing is um let's add a new stack to apply that padding because if we put the padding on the hero stack then the ticker inside of it is also going to take in that padding um and we don't want that so let's tap s and make a stack and remove the frames here and we can call this outside padding just so we know the purpose of it and we can set the width and the height to fill and the Gap we said was 64 the padding um we don't want any on the top because this video is just going to the the top of the browser so we can actually isolate the top right bottom left so top is zero right is 64 bottom is going to be 32 that we said and then left is 64 I know you can't see this visually happening because there's nothing inside um but that spacing has been applied okay so now we can drop in um we can start with the video up top so let's go to the insert menu and we can go to media and drop in a video just drag and drop and it's inside this um outside padding stack here um I could set this to fill and fill so it takes up all the available space um but we actually want to set this up a bit differently because we have our navigation that actually wants to sit on top of that um video so if I just make a stack here this will be kind of a placeholder for the navigation right now um you'll notice that it's breaking the layout so first off this is going left and right the direction for the outside padding um I can move this up and down but the video is still um not sitting behind the the stack here which will be the navigation so we want to do the same thing that we did for the um image and make this absolute and just set it to 100% both width and height um when we do this you'll notice that um we change it to relative and change 100% now it's actually taking up the whole screen and it's ignoring all of the padding inside of this uh outside padding stack so what we can do to fix this is we'll take the video we'll take the stack um that will be the navigation we'll make a new stack out of these so now they're inside another stack and this stack here that it's just put inside will make this fill and fill inside this outside padding so now it's actually adhering to the padding that we sent and then now this video is 100% of this stack um so now this stack here and I guess I'll just rename these so it's kind of clear so I'm not just cling everything stack um this will be navigation and this outside one could be uh like navide just so we know the contents inside and you'll notice that the navigation here is still not visible um so if we add a z index here Styles plus Z index and change this to say two now it is showing up um and this is the same as um this image uh but this is lower in the in the canvas so if I actually just make this one uh three it's probably safer okay so you'll notice here when I preview it I didn't apply the Z index to both the images so this is one we'll add this one to make this two and then we'll make um the video we can make it zero and then navigation maybe make it one and then now it's just the order that we want okay so uh for this video we can just finish this off and actually upload the file so we can hit upload choose file and under video we have that um MP4 and then navigation we can delete these two frames inside and we can set this now the width to fill and the height here we have it um hugging so fit um we don't have any stuff inside yet so we can't do that yet I can just tap t and um type hover I guess is the name and it's right now it's centered so it's behind the woman um and then I'll just make a uh I'll just duplicate this command D just so we have a couple elements in here so I can actually set the um the spacing here to distribute right now at Center so if I did start um they'd both be aligned at the start same thing with end space between it basically is anchoring both these elements to the corners so now um you can see both of them are where they need to be so the text here I can just rename this to remix and the navigation stack here we can set the height now to fit and then the nav video stack here we can set the Gap we can just remove it right now and distribute we can move it to end so now it's going to be at the bottom and we can add our own padding here so let's look at figma and this is uh there's no padding here but in the top stack or Auto layout we have 16 so we can just apply that all the way around and as far as the layout goes now this is working um we can just do a bit more styling now on the the text and and I guess adding in the symbol as well so the text here is enter medium 24 uh minus 4% so enter already medium uh we can make it white and 24 pixels the line we said was minus 4% in figma so we can translate this to em it's going to be minus 0.04 and the line height we can just make make it 100% the text here is fragment mono regular 12 8% let's make it white and then fragment mono 12 pixels and we said it was 8% so 0.08 and it was also all uppercase so if you make a text style um so you can reuse the different um text elements you could actually make it uppercase and enforce it but since it's not textile I'll just retype this in all caps and we want to make this a button as well so we can right click here and hit add stack and I'll just remove the Gap we don't need it and the height we said it was 32 pixels of the button and the outside padding is uh 24 pixels so we can set that left and right and then uh let's just make this a component so we'll rename this button and we'll create a component and when we do this now we can actually add a hover state that we have control over so we can hit uh plus hover and um we have this kind of um set up but let's just do the background first so we have a couple things we have a fill at 32% of this gray color and then we have a background blur at 8% so we can do this in uh framer we can do the same thing we'll add a fill we said it was A3 A3 A3 at 32 and then we have a background blur so we just go to style and filter BG blur and we can set it to eight and see how that goes and then we can also add a radius here um to make it a pill shape so we can round at the corners by going to radius and really really any value above the height of this so if it's 32 um if you made this 32 it'll be a pill shape or any number above that um so that's good and then we don't have a uh hover State documented in figma but we can just add a uh we can click on the hover State and we can either like Darkness or increase the opacity maybe both um and just see what that gives us so let's preview this okay and then we have a symbol beside our um logo here so in that folder we can drag in symbol.png and we can just drag it in the layers panel to be beside the hover here and we want to um put these two in a stack because right now this navigation is set to space between so it is uh centering that other element so if I just like keep duplicating this you'll see it's just filling this space between um I just wanted to undo that uh so let's take the symbol and the hover and put it in a stack so I the shortcut there is option command return and we can set the width and the height to fit and then the Gap here we can set to I don't know if it was four pixels 8 pixels and sorry the height of this as well it's going to be 24 and then the Gap here we can set eight and we'll call this logo okay starting to come together um I think the only other thing on this top section with the video and the navigation is we have um some rounded Corners here in figma um so it's 8 pixels uh on the corner so on this nav video stack we can take the radius and bottom right bottom left we can set it to eight and when you preview it you'll notice sometimes this is a bit finicky in framer sometimes the video component doesn't adhere to the corner radius and the stack that it's in even though the Overflow set to Hidden which is um basically should be cropping it in the preview it's or in the canvas it's working fine so let's just add that to the video as well so now this looks better so next we have our title here so I can just click on this and copy it and inside this outside padding um stack here I can just tap t click and paste paste it command V and I'm going to drag it below nav video and you'll notice that it's uh in the center here if I set it the width to fill and the color here is is white we'll set it this to Black and now we can see it so let's just style it um enter regular 44 minus 4 enter regular 44 minus 4 line is 100% yeah okay um so we have this and then we also have our email opt in here so just to get this layout um generally the way that we want it to I'm going to make another stack so I'm going to tap s um just draw it here and then I'm going to now take this uh experience um title and that stack I just Creed which is like the opin placeholder and we'll make this into a stack so now we'll set the direction to left and right and that's the new stack we made um and the width to fill and the height to fit and I'll put the title above this so it comes first um and then now you'll see the way it's behaving is this text is filling all the space and these frames are actually just um we can delete them but the stack itself has a fixed size so we'll make this fill as well um and we'll add a background here copy the value from figma okay and then the height so we have um a fixed height here so you might want to like instinctively like make it a fixed height or make it fit the content inside and set some padding um but what I want to do as I showed you inigma is the height of this box I want it to be matching the height of the content or the title so we can just take this stack and have the height be fill um so layout wise this is good except obviously we don't want uh this space here in the middle um to be taken up by any of those elements so how did we build this in figma um I have fixed sizes here so this is 3 309 call it 310 um this is 380 so what we can do because the figma is like very static based on my building a responsive uh layout um I'm going to change this up a bit in framer and the width is fill which is good but then basically what we can do is we can have a Max width not even be uh fixed size like this would be Max width of say 300 pixels we can do a a value of uh relative spacing so the max width here if we say like 30% um this actually is probably closer to what we want considering that this image is going to scale with size as well and then we can do the same thing to the um stack here so I'm going to call this email optin and this will call it content um sorry so on this stack here um we can do the same thing where we add a Max width and it's relative and we'll make it 30% and right now this content stack is distribute Center so it's just aligning it to the middle we can go space between again and now it's getting closer to what we want and then one other thing you might have noticed is that in framer our um desktop breakpoint here is 12200 um and in figma we're actually designing at 1440 since we don't have break points set up in framer um just the desktop one we can change this to whatever we want without any implications um because it's just the one size if we had tablet and phone break points here this actually would uh change when it breaks to the smaller points but for now um this is just helping us visually um kind of get it closer while we're designing to the figma file so now um that it's bigger here this kind of problem stands out um a bit more to me where this uh the image is might technically be centered and it might not even be centered um but I want to move it over to the left to uh visually Center it so I'm just going to change this number to say like 358 just to shift it over and now visually it's more centered um and then I'm going to uncheck the left anchor here it still anchors from the center um and then that looks good I think next we can just go into the email optin and um we can copy and paste the title and we can always revisit any of the sizing um maybe at the end when we have all the content in here so we can set the width to fill and the text here is inter medium 14 so I think all the texture actually is already set but if you need to set it um 14 120% minus 2 yeah and then uh we can select the stack here and set the padding to 16 okay so next we can do the email form so we can go to the insert menu and go to forms go to input and drop this into that stack and the email optin stack here is left to right so we'll just make this up and down and we can move this text above the input the input we can grab it and set the width to fill and now you'll see for the input component there's a bunch of different options here so the service is basically just the service you want to use to actually store these emails um and you can just drop in the form ID as well as a user group title if you have it um and then success and the redirect are basically what happens after you submit um the layout here left and right are up and down I want to keep it to left and right and the font we can make this uh fragment mono um the weight regular size uh we can make this 12 and letter we'll do minus 2 the input we can change the placeholder text to your email and the color we can leave this at black at 100% And The Fill we can remove it so we'll just set the opacity to zero the padding um believe we can make that eight the radius 4 for the focus State um while the field is in for forkus Focus um we can actually just use the eye dropper and um choose this pink color instead of just using like black just nice way to tie it in um and then the border is um we can set it to one pixel in CCC and then for the button um we can change this to get notified if I could spell it okay the font uh we'll go back to fragment mono size 12 minus 2% and the fill we'll just remove it the text will make it black or sorry for the fill this should actually be a value my bad okay and then the text is black that's fine doc yes so we want it inside and then the width of the button I think 104 is fine um the inset here we can do eight pixels padding we can do eight as well um you'll notice it's a bit cut off here it's a bit cropped um so let's just maybe go back to this input here and the height is set to Auto so the padding I think if we increase this to 12 that helps with the button that looks better okay so now um on this uh stack here as well it's set to um distribute Center and GAP is 10 so there's only a 10 pixel Gap here we actually want it to be um space between so it's pushing the title to the top and the form to the bottom and Visually it's a bit off um color-wise it's not this background it's actually the background of this uh canvas so let's just grab this um hex code and paste it on this desktop stack here so that feels better okay so let's do the ticker now so in figma we have um all this text and circles that are just kind of scrolling across I'm going to start just by copying this um text and pasting it in framer here so I'm going to tap t and just command V here and I'm just doing it outside of the canvas and I'll show you why in a second um copy this as well and then the last element is that Circle which is four pixels in white so to make a circle um super easy just tap F and draw draw it out and then we'll make the height and width 4 4x4 and then the radius we'll just set to four so that's a circle um I'll rename this to Circle and I'm going to drop in the ticker and I'll show you kind of couple nuances you got to consider so if we insert and go to Ticker um we can drag this into the um into the page here and I want it outside of the outside padding because we want it to go full width so we'll put it underneath and the hero here is still set to left and right so we'll just make it go up and down and the ticker um will set the width to fill so it's up takes up the whole space and the height um we can set it to 24 for now um and then padding wise to I think we might have applied the padding to the outside padding here so we can actually remove it from here and apply it to the hero so now it's showing up underne the the ticker here but right now just ignore it it actually ends where this hard purple line is um but basically this component here if you haven't used it before um it's a bit different than what you might be U used to um basically to populate the items inside of this ticker um you'll see here it says children zero items and I can hit add and choose um and it's actually allowing me to choose the items outside of the page here so it's not showing me any of the images that I have any the text that I have any of the stacks that I have inside the page it's all outside the canvas um so I'll choose Circle so that'll be inside here but you'll notice that the text didn't show up here and the other way to actually connect um the item is to click those three dots and click and drag it but again it's not connecting on that text um to connect text you need to make it um in a frame or a stack so let's just grab both of these and hit add stack and we'll take both and make sure the height and the width is set to fit and we'll remove the fill um and then we'll just maybe just name this one and two just so we have notes clear um that it's two different ones I think I accidentally changed the opacity down to 02 by clicking two without renaming it um okay so now we have those elements and on the ticker now um I can click and drag this and it connects and do the same thing for one I can also move these like right here so it's easier after I did the hard part um so now there's two items it didn't connect the first one okay so now I can drag this so it's one Circle two um which is this text here and then I'll add the circle again so now it's repeating in the preview it's only showing you one instance of each one but when when I actually hit the preview button you'll see it's infinitely scrolling so content wise that's good um The Styling I want to change though so the Gap um we can change this to 16 and the padding we can just remove it and the speed we can make this 16% so it's going way too fast um I think that should probably do it I don't think there's too much we actually need to tweak uh actually yeah there's a there's a Fade Out um so under clipping it says fade yes we'll set this to no so it's just a hard Edge um and then just spacing wise um we can add a gap in this hero stack to increase the space between these items so we can just add a gap of 64 and preview this so looks good and responsibly vertically that is exactly how we wanted it to behave um at this point you know the vertical responsiveness is what I want to focus on the horizontal responsiveness as I said before um we're not going to get into the break points I still want to optimize this as much as I can um especially now that we have all the elements in here we can actually look at um maybe some fine tuning just for the desktop state so if I drag this in um couple things I see here one is I want to actually make sure that this email opt in and the text stays above the image at all times um and two I think we can just optimize the width of this email optin I don't think need needs to be so wide and get cut off so early so um we can select this U email optin here and set the max width just to like 22% and just have a bit more of a safe area um and then the content stack because we want both the title and the um email optin to be on top of the image we can just add a z index here and make it say five and again that Z index um the higher the number the higher it's going to show in the order of things if things are stacked on top of each other um because think of the Z index as like x x axis y axis and Zed is the the depth so now um if I already drag this out this looks good on the bigger screens if I drag it in um you know this is still visible doesn't get um broken obviously this text if I were to bring this in and work on the different break points um one I would be changing the layout but two I'd probably uh maybe add background to this text um change the direction of this form to go up and down so the email doesn't get cut off um stuff like that um as far as the fine tuning goes that I think that the responsiveness look good but on this screen when it was really wide um I didn't like how this was uh touching like this so we can tweak this by just adding a Min height here um so we have a Max width we can add a minimum height and whatever this is U basically because that two lines it in like the size of it so at three lines if I just change this height to fixed I can see what it's at right now it's at 132 um let's just say it doesn't go any smaller than this so we'll just make this 132 is the m height so now if I drag this out and that text on the left becomes two lines this doesn't get any shorter okay um I think that's it um last thing like I'm going to connect this button to the remix link um if you wanted to connect this to your own link you can go in this component and hit the um link to and you can make it a link in here or you can make it a variable shoot it up and set it here and add your url whatever page and one last quick thing is we have a video background here and we got to consider that it might take a second to load or it might even fail to load in that case let's just see what this looks like the visibility um we can just turn it off and you can see that it's a white background here um so we're losing the logo and the remix button a bit harder to see so we can just add a just like a mid gray background here um we'll just make this C6 so now if the video doesn't load at least we can see the logo um so yeah we can turn the video back on and now we're done all right we're done um hope you enjoyed that hope you learned a lot if you want to see more stuff um let me know in the comments below and don't forget to like And subscribe and do all that good stuff hope to see you soon

Channel: Flux Academy

Views: 10,820

Keywords:

Id: 8idYI6CF1Ec

Length: 37min 39sec (2259 seconds)

Published: Fri Mar 15 2024