yo my name is Benjamin and in this video I'll show you how to make a website in framer completely from scratch we'll be making this website together starting from a blank canvas and you'll be able to follow along and achieve the same result so we'll start with a brand new project and we'll first take a look at the framer interface so here we are in the framer project let's take a quick look at the framer interface at the top here we have what we call our toolbar on the far left we have our main menu with all sorts of actions next to that we have the insert panel where you can insert Pages sections menus and all sorts of elements then we have our layout tools and we'll be using a few of these the text tool the CMS or content management system and then the quick actions menu on the left here we have three panels that you can tab between Pages layers and assets the page panel is open by default and here you'll find an overview of all pages within your site and this is also where you can create new pages or rename existing ones so let's switch to the layers tab here we can see we also get a page switcher so we can quickly see which page we're on and then below we'll get an overview of all layers that are present on this page including all of our breakpoints and currently we only have a single layer and that is the desktop breakpoint and finally we have our assets panel here where you can find all comp components Styles and code files included within your project now in the center here we can click to rename and move our projects so I'll rename my project to animator and you can see that reflected in the project tab as well and then on the right hand side we have the localization feature here the settings that you can click to toggle the preview that you can click to toggle here you can invite people to your project to collaborate and of course the publish button now on the right hand side we have our property panel and this is contextual meaning it changes based on your selection so if I click here on the canvas outside of the page you can see the property panel is gone and then if I reselect my deskt stop breakpoint we get our properties finally here at the bottom we have our canvas tools here you can switch between dark and light mode here we have all sorts of Zoom actions with very useful keyboard shortcuts we have commenting the pen tool and then the selection tool so that's it for the basic UI of framer let's talk about how you can navigate the canvas next if you click on the little hand icon here at the bottom you'll activate the pan tool allowing you to pan around the canvas and you could then click back on the cursor icon here to switch back to the selection tool but this is quite slow to do while actually working and so the first shortcut I recommend that you memorize is the space bar if you hold space it will actually temporarily activate the pen tool for you allowing you to click and drag to move around the canvas while holding the spacebar key and when you release it will automatically switch back to the selection tool the final ingredient you need to properly navigate around the canvas is zooming so like I mentioned you can find all sorts of useful zooming shortcuts here the ones I personally use the most are the Z shortcut so holding Z you can click and drag to zoom to a specific part and finally the command plus and command minus ones to quickly zoom in and out and that is on Mac OS you'll find the windows ones in the same menu and so throughout this video you'll find me using a combination of these short cuts to quickly move around framer holding space to quickly pan command plus and minus to zoom or Z click and dragging to zoom into a specific part now that you're equipped to navigate the canvas let's move on to the layout section where we'll start designing our site to follow along make sure that you have the layers panel open here on the left hand side and I will zoom in a bit using command plus and then holding the space bar I will pan a little bit revealing the top half of our page and I'll activate the text tool which you can also do by hitting T and then I'll click onto our page and I'll start typing our heading I'll name our page animator and we get all sorts of unique properties that we could customize for text layers in the right hand side we can also scroll this panel so let's customize our first properties I'll Center the text layer using this alignment shortcut and then I'll set the top value of the position property to a perfect 200 pixels and this little dotted line indicates that this layer is only pinned to the top of our page next let's customize some text Styles starting with the font I'll open the font picker and I'll search for Satoshi a type face by font share there we go and let's change the weight to bold and then maybe the size to something like 20 pixels and I can use the little arrows here in this control to increment or decrement the value all right well there we go we have our first text layer now there are a few ways we can add a subline I can right click on it and hit duplicate to add a cop of this layer and we can use this as the basis of our subline or and let me quickly delete this one we can select the text tool again and this time we can click and drag to create a text box and then you can release your mouse which will add the empty text layer where the first text layer we made was autosized this one because we clicked and dragged has a fixed width and a fixed height so feel free to write your own tagline or you can copy what I'm writing here we're designing a fictional teaser page for a tool called animator which is based on a real component that we have for framer I'm happy with this supp line so let's change some of these Styles I'll set the font weight to medium the size to 18 I'll make sure a line is set to Center and then we can tweak the color a little bit as well either by dragging here in the color well or by typing a hex value directly in this input so I'll type 888 and then I'll hit enter and that will set it to the full gray color that I would like to use all right so I'll scroll back up here and let's fix this empty space below our supp line by setting height to fit content so now the contents influence and dictate the height of this layer we can also see this layer accidentally got left pinned so I'll use the same alignment shortcut here to center it and there we go we have our heading and our sub line and we could use the arrow keys on the keyboard to move this around as well and I can even hold shift while doing so so shift arrow down and shift Arrow up to move it in increments of 10 pixels using these arrow keys is a nice way to position your layers in a more controlled way now let's add our button you can trigger the frame tool by hitting f as you can see this makes the frame tool active so let me quickly deactivate it or you can manually select it here via the layout menu with it active I can click and drop drag to draw a new frame onto our page and this will serve as the base of our button I can move it to the center here and it gets a blue fill by default now we want to add a text label onto our button so we know to select the text tool and I can click onto the frame and start typing and this will actually Nest the text layer within our frame so I can drag it to center it I'll set the color of the text to White then I'll select the frame and set the fill to a darker blue color and I'll go ahead and type 05f and hit enter to set it to the specific hacks value and then we can tweak the the radius here of our button something between 10 and 15 I think works well here and I want to spend a little bit of time talking about this automatic nesting that framer does as it really helps if you understand how this works so I can click and drag this text layer anywhere even outside of our web page and if you inspect the layer tree you'll see that the hierarchy or the grouping automatically changes the key thing to remember here is that framer will try to automatically Nest layers for you it will try to do this when you draw layers on top of each other or move them around and it's designed to help you out really so that you can spend less time manually grouping layers and more time designing now let's make this button a bit more future proof for example let me double click on this text layer to make it editable and if we wanted to add something else to this label like the framer Twitter handle you can see that the frame or the button itself doesn't really adapt to the change in content so really we want to achieve two things one we want to make sure that the frame automatically adapts to the content and two we want to control the padding to ensure it's always even we can achieve this by using stacks and there are two stack presets in the layout menu rows and columns but we can also convert our frame into a stack by heading over to the layout panel in the property panel if we click to expand it it reveals all sorts of new layout properties allowing us to more easily control the contents within and we can control properties like alignment and switch between Start Center and end and I'll set it back to Center and there are two ways to make this button Auto sizing we can set the width and height to fit content in the sizing properties here or so let me quickly undo this we we can right click on our button here and select fit content so that's another useful shortcut to remember shift a and that does both of them in one go so now we can just add some padding and now we have a much better setup for our button where if we change the contents of the text layer the button adapts automatically we don't have to worry about centering or padding or alignments being off the stack does everything for us I'll double click to rename this to button let me remove that extra content again and we could even customize the padding further if we click on this little icon I can separately control the top right bottom and left padding values so we can add a bit more horizontal padding so let's finalize the button I'll set the size to 16 pixels and the weight to Boldt and let me drag it up a little bit as well and there we go okay not too bad not too bad I think what's missing here is a little icon and to do this we can actually use an icon font this allows us to use the exact same icon so you can follow along so I'll hit T to activate the text tool I'll click here and I'll type out the word gesture and you might also notice we can't see anything and that is because framer is applying the last used color which is the color of our button to this text layer as well luckily this is an easy fix we'll simply set the color to Black for now so now we can drag it around a bit there we go and I'll head over to the font and I'll search for material symbols and I'll select material symbols rounded and this converts our little string here the word gesture to the matching material icon and now we can tweak all sorts of properties like we're used to like the size the weight and and the color as well so I'll set these size to 32 pixels and I think the font weight to medium yeah that's looking good so we can maybe position it a bit better and there we go and I think I also want to make this one blue but instead of us having to manually keep these colors in sync it would be nice if we could reuse the same color anywhere and we can by turning it into a color style so I'll select the button again open up the fill property and then if you look here we can create a new color style at the bottom of that little pop out we have to give it a name I'll call this one accent and then I'll hit create and this adds it to the style list here but if we switch to the assets panel you can also see and find the color style there now let's go back to our icon open up the color property and now we can simply select the accent color style now before we move on maybe we want to make some final tweaks like use a slightly larger size for the icon like 36 pixels and maybe a tiny bit of negative letter spacing for our little heading and there we go while holding Z I can click once to zoom in and we just designed the biggest part of our website together in under 20 minutes so that was it for the layout Basics and next let's add a video to our teaser page to use the same video that I'll be using you can head over to bit. Le slf framer Das video which in turn should redirect you to m.f framer static.com SL Benjamin slan animator MP4 that should look like this if you navigate to that link you should end up directly at this video and from here you can copy this URL onto your clipboard as we'll be pasting it in our video in just a little bit with the link copied let's go back to framer and we want to add this to our page so I will open up the insert menu navigate to Media and here we have a bunch of video components I want to grab the standard one so I can drag and drop this directly onto the page here if you have the assets panel open you can see the video is now showing up here as well it looks like we just published an update so let me pull that in as well if you don't see the update button no worries it just means you already have the latest version and then I will reset size this video to 800x 680 and then we can move it upwards a bit but you can see it doesn't really fit our standard page height so what do we do well I can click and drag to select everything in our header here and move that up to make some room but it still barely fits so really we need to increase the page height so I will select the up page here and then I can simply resize it on the canvas I'll set it to 12200 here to make some more room for our content and maybe I'll move the video down a bit now so we still have the video URL copied so now it's time to paste this in the URL property here and I will do just that hit enter and then we have our new video we have a bunch more properties we can customize most of the default properties here are exactly what we need but I'll go ahead and customize the radius by setting it to 30 and hey things are starting to come together right it's cool to see I'll zoom in a bit move this video up and now is a great time to preview our page so click on the little play icon here and you can see that our video is correctly autop playing which is the default setting and it should also loop around by default as well so this is the little teaser video of the animator here and the colors of the video match quite nicely with our accent color style as well with our video in place it's time to make our site responsive so let me open the preview again to show you two new things since we made our page a bit taller we can now scroll within this preview to see the entirety of our page and we have these little resize handles that we can use to resize the page and validate how responsive our site is and I'll click here to toggle back out of the preview I'll also make sure I have the layers panel open to help make our site responsive we can add break points I'll click on the plus here with the desktop page selected and I'll click on tablet then I'll do it again to add a phone breako as well and now we have three breakpoints we started out with our desktop breakpoint on the left here and we added tablet and phone and break points are also useful to quickly see if your site is responsive or not and how it might look like on different devices without having to open the preview for example we can clearly see here that the video doesn't scale down just yet the desktop breakpoint here is the primary breakpoint and this means all other breakpoints will inherit changes from this breakpoint if I were to move around our title notice how the same changes are applied to the tablet and phone breakpoints so these break points are variations of a single page at different size es and all of them will inherit changes from the primary breakpoint the real magic of breakpoints is that you can apply overrides if I move the same text layer here on the tablet breakpoint notice how this is only applied to the tablet breakpoint so we have created an override and you can even validate this by opening up the preview and resizing the moment I hit the tablet break point range the text will jump to the top left now this is an override I do not want so I'll undo this so you might be inclined to fix this video by resizing it in the break points and you can but for core layout issues like these it's often much easier to fix them in the primary breakpoint using layout and sizing and this allows us to avoid unnecessary overrides Within These break points so let's start making some fixes I want to make sure our video always maintains its current aspect ratio even when it resizes so I'll select it in our desktop breakpoint and then we can head over to the size properties and hit this little lock icon and this makes sure the current width to height ratio is always maintained but we don't see anything just yet that is because we need need to add a Max width property and by setting this to 100% we tell framer the maximum width is 800 pixels but anything below that you can scale down relatively so you can see it's scaling down nicely now in our break points while maintaining its aspect ratio so our video is in place but we don't have any nice padding plus our entire header here is still very manually positioned and we already know there's a smarter way to align and distribute elements just like we did within our button here and that is by using stack layout options well there's good news we can also use these same layout options on entire pages and breakpoints so let's select the primary breakpoint and expand the layout property this converts our entire page to a stack based layout where we can control the elements within by adjusting some of the properties here like padding which is already working much better for our little video and we can use the Gap property to add some spacing in between elements we can also further tweak our padding by adding some more to the top and bottom of the page and this is working out well for the video but it is kind of pulling apart our header the one that we started with so I like the spacing here and I also kind of like it here but we want to be able to control the spacing in between so I'll hold shift and click on all of these layers in the layer panel then I'll right click on the canvas and I'll select add stack and this simply adds a wrapping stack around our selection allowing us to control these same properties but just for this little group of layers but it's getting a fixed size which we don't really want but we know how to fix this we can rightclick and select fit content to set both the width and the height to Auto and now we can just keep playing around with gap until we like the spacing of our elements so maybe I'll set it to something like 15 or 20 I think I'll keep 20 for now and then I can double click here to rename it I'll call this one header so while holding shift I will select both of these text layers and I'll right click and add another stack and this should give us ultimate control over the spacing within our header I'll select that new stack and I'll go to no not this one I'll select fit content yeah there we go and even with the default gap of 10 this is looking much better so now would be a great time to open the preview again and take a look at how our site is scaling down now we can see that our video is properly responsive but the radius here on the video is a little big on mobile or on the phone breakpoint this is a perfect example of something we can fix within a breakpoint I'll simply go to the phone breakpoint I'll select our video and I'll set radius to something like 20 now let's go back to the preview and resize our page again and that is looking much better on the phone breakpoint now I'll hit escape to go back to the canvas which is another way to close the preview and let's rename this one to text and we're almost there I'll select the desktop breakpoint again and we're still using a fixed height here so let's try setting this one to fit content as well which makes this setup a bit more futureproof for for example if I now duplicate the video here notice how all break points now adapt automatically nothing will get clipped so let's quickly delete this extra video now this also allows us to further control the break points so maybe we want the video to sit kind of flush at the end of our page which we can do by overriding the bottom padding of the the tablet and phone breakpoints and we have a much better setup now in place for our teaser page the final layout tweak here I want to make is setting the Gap to a higher value I'll set it to 80 so it matches the top and bottom padding and again make sure you're doing this on the desktop breakpoint so all break points will have this Gap updated and maybe we can give this a final preview just to make sure these recent layout changes are working correctly together so I'll go ahead and open it and give this a resize and yeah things are looking good next let's talk about positioning and now we can add a navigation top bar to this stack based layout so all layers on our page are now nicely distributed by the stack layout but what happens now when we want to add new elements to our page like a navigation bar let's give this a shot and see what happens I'll head over to the layout menu in the toolbar and I'll select the frame tool and then let's draw a rough outline of a top bar right here on top of our page it becomes a part of the existing flow of the page so we could sort it around for example but it respects the padding of the desktop page which isn't ideal for a navigation so I'll head over to the position property open up the drop-down and let's set this to fixed instead of relative and you can see we get some more controls now this is because it's taken out of the flow of the stack and we can now put it anywhere relative to the entire page I can click on the right and left pins here to pin it to these sides and I want these values to all be zero and that should stretch it out to the entire page and if we now give this a preview you can see it's properly overlapping the rest of the content and it's a fixed element meaning it stays in place when we scroll let's add some text I'll grab the text tool I'll click into this Frame and I'll type index which could be the name of the parent company behind animator for example and then let's give ourselves a head start by right clicking on animator and hitting copy style and then right clicking on the new index title and hitting paste style so now we get the same sizing and the same font and we can tweak from here let's select the frame again head over to the fill property and set the color to white let's also enable the layout options there we go now everything will be distributed now I'll reselect the text layer I'll set the font size here to 16 so a little smaller and then let's right click and hit duplicate here we can start adding some links I'll name this one Twitter and you can click anywhere to exit the edit mode once you're done typing I'll use command D to duplicate I'll label this one GitHub and I'll do it again and name that one contact while holding shift I'll select all of these links and I'll tweak some of the properties I'll set the color to 888 I'll reset the letter spacing to zero and the font weight I'll set to medium then select the stack add 20 pixels of padding and set height to fit content and now I can show you a fun trick to separate these instead of grouping the links I'll draw a new frame right on top of this top bar stack I'll just sort it in between the title and these links and I'll set both the width and height to fill and fill means it will try to fill and occupy the available space so we have just designed a little spacer and I'll give both our navigation and this spacer a name as well finally let's select the spacer head over to the fill property and hit the little X to delete it and this will make it transparent and you know the drill by now let's give this a very quick preview just to see how everything is holding up not too bad not too bad let me close that and now we can add some actual links to our links so I'll select Twitter and I'll click on the link property here and I'll just type in twitter.com and then hit enter and it turns blue because the default link style is blue so let me zoom in a bit here and we can customize this link style but before we do I want to show you that this also shows up now in the assets panel so we have three assets our video our link and our accent color so we can go back to the link Styles here and hit edit let's open the default color and set it to 888 Al remove the underlines from the decoration property I'll make the hover color to 22 and we don't really have a current color but I'll set it to 222 just to be future proof the current color is useful for when you have links to sub pages but we only have a single page here and then let's click on trans position add and click into it and set the time to 0.2 and this will add a nice eased transition to the hover state so we're done with our link style let's select the second link I'll add a link and point it to github.com and then the contact one we can point to mil to and then type in any email address and again make sure you hit enter when you're done typing to confirm there we go so we have added links to all of these items in our navigation I'll Zoom back out and let's give this a preview and now all of these links have nice little hover States I'll hit escape to close out of the preview again and I think I want to grab our navigation and increase the Gap to 15 and that is looking good so we're getting very close in the next section let's talk a little bit about components and how we can use them to add a playful animation so I think it could be fun to cycle between different icons here in our header and we can do this by using components so with this icon which really is a text layer selected I'll hit command K to open up the actions menu but you can also find that in the the toolbar here and then let's click on create component and you can give this any name you would like I'm going to Simply call it icon and you might also get this welcome model pointing you towards a dedicated video covering everything you need to know about components the basic gist is this components are reusable elements often used for things like navigations and buttons and these components can have different variant that can be either static or interactive you can use component variants to animate between different states like an accordion that expands and collapses on click and you can also use them for Creative reusable elements like this little cycle animation will be designing so let me zoom in a bit here and this is the component canvas we have our first variant which is really just the icon we started with and if I scroll down in the property panel you can see that the content property has a variable assigned to it framer does this automatically for any component that has just a single text layer because it assumes you're designing something like a button where you want the label to be editable from anywhere and you don't want the contents of the label baked into the component however we don't need this variable here so I'll first unassign it here here in the property panel then I'll open up the variable model right click and delete it we don't need any variables here I'll click on the canvas to dismiss this again let's select the variant here and we can click here to add a new variant and I'll actually hit it two more times creating a total of four variants now we also have a primary variant here which is the first variant and it works exactly like breakpoints do when it comes to inheritance so we can go into the text layers of each of these variants and change the content property here I'll type draw instead of gesture and then hit enter on the third variant I'll type shape underscore line and then hit enter and on the final variant I'll type animation and then hit enter and we now have four unique material icons now let's add some interactions so we can cycle between these select variant one and hold this little interaction connector and click and drag the arrow onto variant 2 and if you release the mouse you'll now see an interaction pop over where we can add a new interaction I'll set it to appear and I'll add a delay of5 seconds so wherever this component appears after5 seconds it will switch to variant 2 and we can click anywhere on the canvas to confirm this interaction and the rest is pretty simple we'll just do the same thing from variant 2 to three then we'll do the same thing from variant 3 to variant 4 and finally we'll do the same thing from four all the way back to variant one and thus creating a loop now let's go back to the homepage and give this a preview and there we go just like that we have created a fun looping animation using a component now that we have everything in place I think I think it's time to add some final design tweaks starting with our typography I'll select animator and let's try using a different type face here I'll open up the font picker and I'll search for instrument and I'll go ahead and select instrument serif and then let's use a much bigger font size something like 32 pixels maybe I'm thinking even bigger maybe 56 and then I'll double click into the text layer here I'll select the first two letters and I'll set those to italic and I'll do the same for these two letters and also the final R just to add a little bit of character to our header and let's also increase the negative letter spacing by just a bit and we can tweak the Gap as well this is really what makes framer so fun you can spend endless hours just tweaking small stuff like this until it's something that we really enjoy I think I'll bump the font size again to 60 pixels and then maybe we want to give this header stack a final bump in gap from 20 to30 and maybe add a little bit of a drop shadow to the button I'll go over to the shadow property set y to four and blur to 8 and then set the color to 05f and apply an alpha of maybe 30% so it's transparent but if you zoom in just a little bit you'll notice it gets clipped by the header stack and that is because it has overflow set to Hidden so to fix that here we can simply set this one to visible now let me Zoom back out I still think the spacing here isn't perfect and it might be the height of the icon or the line height of the head heading so I am noticing the height of this icon is actually 43 and we can resite it here to reset that back to 36 that's already looking a little bit better something else we might want to do is simplify our links on the phone breakpoint perhaps reduce it to just a single link item like contact so I'm selecting these and then hitting delete and if you inspect in the layer panel here what this is doing is really just setting these layers to visible no to make sure they do not render when we publish our site but you don't have to go into the property panel to flip that switch you can just select layers and hit delete all right so the phone breako is looking better maybe we can add a little bit more padding to the top on the phone break point here and yeah next let's talk effects and how we can add subtle appear animations to our [Music] site if we open up the preview and hit the reload button a few times you'll see that everything loads instantly however for our teaser page it might be fun to add some appear animations let's start with our icon I'll select it click on effect in the property panel and here we can add all sorts of different effects I'll click on appear and then we'll click on the enter effect here to customize the properties so we're customizing how this icon animates into view whenever it appears I can temporarily bump the opacity so it's visible on the canvas I'll set the Y offset to 10 pixels so you can see it is pushed downwards a bit initially and then we can click on transition to customize the spring curve a little bit I'll set damping to 35 then I'll go back and let's reset opacity to zero and that is our effect so I'll close open up the preview and hit reload and we can see our effect is working now we can go back to the effect I think I do want it a bit faster again so I'll edit the transition and reset damping to 30 if we now right click on the appear label we can hit copy select the animator layer go to effect and rightclick and then we get the option to paste this effect we can also do this by right clicking directly on the canvas going to paste and selecting paste effects and finally let's also add this to our [Music] button in the same way so now we have added effects to all of these layers I'll click on animator and I'll open up the effect I'll go to the transition property and here we can start by adding a delay of .1 seconds I'll keep this pop out open and I'll select the other layer so the subline and then I can instantly set the delay 2.2 and the button 2.3 now all that's left is our video this one we want to give a unique animation so I'll select it add a new appear effect and I'll set the scale to something like .95 and the delay 2.4 seconds and now if we give this a preview and we reload a bunch of times we can see we have this pretty cool staggered animation where our header fades in from the bottom and the video gently scals into view now it's time for the final section of this tutorial let's get our site [Music] published so back in our framer project here we can simply head over to the publish button and click it and now we have a website framer has picked a generated URL and clicking it will open the site in your default browser let's refresh again to check out our animations and I'm actually noticing the text is getting cut off here so let's go back back to framer and quickly fix it the stack containing our text layers has overflow set to Hidden so simply setting it to overflow visible will fix the animations from being clipped and all we have to do now is go to publish and hit update and we're done let's go back to the browser and I'll hit refresh and that's looking much better perhaps we'll do it one more time and there we go it looks like we also forgot to add a link here so let's go back to framer and quickly fix it I'll select the button go to the link property and I'll point it to [Music] twitter.com/randymckown and now we have correctly added a link here as well just like we did earlier for these ones in our navigation the speed of publishing and this rapid iteration we're able to do is really part of what makes framer so fun to work with we can change the feel of our teaser page just by playing around with a few different properties like changing the color of our title or the sizing properties of our our video small changes can have a big impact and framer is the perfect canvas for play and exploration and I would encourage you to do the same try different styles different effects and just have fun playing around in framer if you've made it this far thank you so much for watching and I hope it was helpful and that you had fun making your first site in framer if you'd like to learn more you can go to framer more tutorials and if you ever get stuck you should join framer do community where you can ask questions get support and follow our latest updates if you followed this tutorial I would love to see your result please feel free to tag me on Twitter @ Benjamin Nathan that's it for this video thank you so much again for watching and I hope to see you in the next one