Figma Masterclass 2023 | Figma Tutorial for Beginners

oh first video back 2023 it smells like it's going to be a good year so with that being said let's kick start this year with a smashing tutorial helping you go from zero to hero in figma in a couple of minutes maybe not a couple of minutes but let's see what we can do so in this tutorial we are going to learn how to design this beautiful tesla.com website from scratch with a Twist and the twist is we're going to be utilizing figma's most powerful features and best practices so you'll learn how to utilize Auto layout components component properties utilizing Styles and even maybe build a very basic design system so with that in mind let's dive into this website let's break down exactly what we are going to be designing and then let's jump straight into figma and start designing foreign by the way if you do want to take on my figma masterclass with over 4 800 students that have claimed to have landed jobs increased their rates and even landed more freelance clients make sure to check out my figma master class where we cover everything in detailed with more Advanced Techniques and also additional templates and resources that you can utilize today to streamline your process so make sure to check the link in the description to learn more about my figma mass class and with that said back to the video so over here you can see the tesla.com website we have a logo we've got some navigational items with a nice interaction as you hover over each menu item we've got some text a beautiful image or photo of the model Y and we've got some nice uh buttons down below now if I scroll once on the mouse you'll see that it automatically slides me to the next section and the title and also the background image changes accordingly so if I scroll once again it goes to the model S and then once again the model X so with that in mind this is what we're going to be designing in figma and we'll probably eyeball some of the sizing for the text and the titles and whatnot just to keep the tutorial a little bit simpler but we are going to be really focusing on utilizing figures our most powerful features and best practices to recreate this and at the end we'll also learn how to prototype it to recreate this animation or interaction so with that in mind let's pop over into figma and as you can see if you do want to follow along I have left a link to this exact file so you can actually follow along and follow the exact steps that I'm taking now to kick start this project to keep it simple I've actually broken up uh there are four different sections so before we even start designing we are going to go to tesla.com website and we're going to grab all the images that we need and we're going to pop them into this assets frame and then we're going to go ahead and grab all the colors that the tesla.com website is using and apply them to these squares so we can turn them into color styles so they are reusable throughout all our designs which means that we don't need to remember the exact hex code of every color these styles are going to be reusable which means when we click on any element we can click on this four dot icon over here and we will be able to select all the colors saved to our library immediately so it allows us to streamline our workflow then I'm also going to go ahead and Define some of the textiles that we see on the tesla.com website so similar to the colors whenever we are resizing some text we can simply select whatever textile we want so whether it's a heading a menu link a simple link or just a paragraph text then on the right hand side we'll learn how to create some very basic components within figma so we can re-utilize them throughout all our designs and keep them all consistent [Music] so with that being said I'm going to move over to the assets frame and we're going to do this one step at a time I'm going to go ahead and uh to the tesla.com website the first thing I want to do is actually grab the logo over on the tesla.com website right click on the logo click inspect and make sure you're using Google Chrome because this allows you to access their their uh debugger now as you can see when you right click on the actual uh logo as you can see it like like this it will select the SVG HTML tag which means once this is selected we can hit command C on our keyboard we can pop back over into figma and we can simply select the assets frame hit command V or control V on a Windows device and it will paste the SVG now the first thing that you've probably learned here is that you can actually copy and paste svgs directly into figma now something if you didn't notice if I reduce the size of this what happened is that when we pasted this SVG it pasted the original final size that is saved on the browser or saved on the web however when it's utilized in the actual design it's actually half the size as you can see this is doubled the size of this logo so what we can do to resize this logo by 50 perfectly we can go ahead to the right hand panel and we can see that the width is 342 and the height is 35. now if we were to divide three four two by two so we reduce it by half you notice that it will reduce just the width so if I hit command z i can undo I can click on this link icon which constrains the proportions of this element then if I go to 342 divided by 2 Enter that will resize the logo perfectly vertically and horizontally so that resizes then if I go back to the website I can right click on this background image this photo of of the model y hit inspect and you'll notice that it doesn't actually go and grab the image tag because when developers are building websites and web pages there are actually lots of invisible elements on a page that you don't actually see but it actually helps create these web pages as you can see when I'm hovering on this entire element you can see that it highlights it on the actual website but if I hover off it it's actually invisible so to find the actual image that we want we can go ahead and hit command F on our keyboard and with the in the search field opened we can type in IMG which is short for the image tag we can then go and hit enter on our keyboard until it actually finds the Right image tag that we need now as you can see once I hit enter once it's actually gone ahead and found this image right so it's selected this image and if I hover over the link it's the actual image I want so I can go ahead and right click and then I can go whoops right click and go open a new tab and that will open up the link I can right click on this image and hit copy image go back into figma and with the assets frame selected I can hit command V and I can just simply resize the image by holding down shift and option on a Mac and and it will resize the image constraining the proportions and also aligning it to the center so as you can see that is resizing it perfect so now I've got the logo and I've also got the background image now the next thing I want to do is actually go ahead and find all the colors that we need from the website so going back into the website I'm going to go back to the tesla.com website I am first going to right click on the word model and hit inspect now immediately on the right hand side you can see let me just bring this across you can see that the way that they've coded up their Styles I won't go too into too much detail but they are using variables so the color that I'm actually looking for is this one so TDS color primary so if I select that it takes me down to the variables and I can see that this color of model Y is actually 171 a20 so I'm going to copy that go back into figma and I'm going to select this our rectangle by holding down command and selecting or you can simply select these rectangles but I have a habit of holding down command because it helps me directly select whatever element I am clicking even if this element is nested inside lots of different groups and whatnot I can hold down command and select it directly over on the right hand side under fill I'm going to change D9 D9 D9 to the hex code 171 a20 and that utilizes the dark gray that they've utilized now this second color that I'm going to grab is the bottom primary and the button secondary for these two squares so going back to the website I'm going to find this button I'm going to right click on the button and hit inspect so this should take me to the button itself now if you notice that it's selected the span custom order that's the text what we want to do is actually find the button so if we go if you hover the element above it this is the actual button itself as you can see on the left hand side it's highlighted the entire button so it's called the a tag now over here on the right hand side if we if you scroll all the way to the top of your Styles you can see that the but the primary button the background color is actually an RGB color and they've used 23 26 32 and the opacity is 80 that is represented by 0.8 so what we can do is just remember RGB which is 23 26 32 I'm gonna go back into figma I'm going to go to fill click on this color under hsl change hsl to RGB and it's going to quickly pop back in it's 23 26 32. so 23 36 and oh sorry 26 and 32. so 26 and 32 whoops 32 and the opacity is 80 okay so I can hit enter and as you can see we now have the exact color that they're using for this button and if I if you see that it has a bit of transparency because it's 80 now I'm going to do the same thing for the secondary button so I'm going to right click on the secondary button hit inspect and I'm going to grab the a tag that's wrapping the text and they're using 24 or 244 244244 and it's 65 percent so represented by 0.65 so I'm going to pop back over into figma select the button secondary under fill I'm going to change this to RGB and it was two four four two four four two four four two four four and it was 65 done so as you can see we now have the three colors that the tesla.com website is using practically for all their elements now I'm going to close the debugger and just take a look at everything and it's looking pretty good so now two now as you can see this rectangle is used utilizing a fill which means that every single time we want to grab this color let's say we have some text let's say it's got title we can't actually go and reuse this color straight away because let's just go into the fill we haven't saved it as a color style so every time we want to utilize this gray we'll have to remember the hex code so the shortcut is to actually since we've already applied the color to this rectangle under the four circles we can click this icon we're going to click the plus icon and we can maybe call this dark gray that's the name of the color so create style and now if I click on this text under fill I can actually go ahead and use dark gray and it will automatically utilize that so if ever in the future I actually want to edit the color of dark gray by selecting dark gray right click on the circle hit edit style under here I can change this to whatever color and you'll notice that anything utilize Rising dark gray will change the color so it helps you streamline your process so I'm going to go back and just undo all that I'm going to do the same from the button primering so we've already got the the style and the fill the four dots hit the plus icon and I'll just type in color for the bottom primary and then this will be the color for button secondary all right so I've practically got all the images I've got the colors are now reusable throughout my project I can now move over to the right hand side and we want to make sure that we are starting to grab the the Styles now obviously I'm not going to be utilizing the exact same font and we'll probably just try eyeball the font sizes just to keep this pretty simple but the heading I would say that's probably around 48 pixels let's just see that 48 yeah it looks close enough then we have the text which is the links and the any paragraph text I think that's probably around 16 pixels so I will change everything to 16 maybe just keep it to semi bold and we'll also make sure that the color is actually going to be dark gray okay so not black just dark gray so everything is systemized now here we have a link that has an underline as well so for the link this link I'm going to go under the three dots and I'm going to under decoration add an underline to that just so we can utilize that text style wherever we want so now that we've got our topography set up once again similar to the colors we can turn these into text Styles so whenever we put out put down some text we can reutilize these Styles without having to manually do them so holding down command I'm going to select the heading title right away and then I'm going to change the heading to the dark gray and make sure it's maybe I change it to bold 48 looks pretty good and then under the four circles I can hit the plus and I can call this maybe heading text all right so now I'm going to hold down command and directly select menu link and under the same setting I'm going to call this menu link and really quickly I just want to show you something because I've wrapped these uh the text inside an auto layout component as you can see if I click on link it actually selects topography first and I'll have to click again to get to link and that is why I have the habit of holding down commands because I can directly select anything no matter what it has been nested within so that's just a quick shortcut now for link I'm going to do the same thing this will be link and then fold the paragraph text I will simply do the same thing and call this paragraph text so really quickly let's review what we've done right now we've gone ahead and grabbed all the images and placed them over here we've grabbed the colors so if we ever want to apply these colors to any elements we can do them very quickly and we also have saved it as a reusable color style so if I ever decide to change it a color it will change it everywhere else I've also done the same thing for our topography so wherever there's a heading I can now simply choose heading I can also change it to like a link style or a paragraph style and that would change the font size and all the styles that comes with it and then the last thing we want to do is actually go ahead and grab all the UI elements so popping back over into the tesla.com website really the only UI element that we need are these buttons so I'm going to show you guys how to design and create responsive buttons from scratch so popping over by into figma I'm going to hit t on my keyboard and I can type in button for now and I might just choose the style of paragraph now the terrible and the incorrect way of creating a button in figma is to utilize a rectangle and then placing your button text on top of it why is this incorrect because even if we group this inside a group so hitting command G grouping them together if I ever decide to stretch it out or make this button larger you can see that it doesn't really respond correctly so in figma there is a better way what we can do is we can hit t on our keyboard put some text down type in maybe button we can make sure that we are utilizing the paragraph text we can also make sure the fill is going to be maybe the dark gray for now or yep actually we'll make it white for custom order so we have to go ahead and create a new color so go back over to here select your button secondary hit command D to duplicate hold down shift and click to drag it over to the side we can detach this rectangle from but the button secondary color we can change the field to White and then we can go ahead under the four circles hit plus and we can type white and that created white as a style so if we go back over to the button we can select the text we can change the dark gray to White and then what we can do is we can hit shift a shift a is go is going to become your best friend because shift a allows you to turn any element and wrap it inside something called the auto layout so what Auto layout allows you to do is as you can see on the right hand side you get access to these really useful features which means that you can align or anything inside an auto layout to the left to the right into the center and then you can also add any horizontal padding to the left and right for example if we change to 16 you can see that it actually increases the width of the button we can also change the top and bottom to 12 to increase the height and then you can also add a fill so under the style you can go ahead and select the button primary and you can see that it actually fills it up so if I now add more padding to the sides for example 20 you can see that it's quite systematic which means that if I ever decide to add or change the tag so button primary the actual buttons not scaling out and it does what you actually want it to do now from here we can actually go ahead and select the auto layout we can call this button slash primary because it's the primary button we can give it a border radius of 4 pixels over here on the right hand side and you've practically created your very first button now I'm going to double click into the bottom primary or if you select the auto layout and you hit enter it will automatically Nest you down to the text I'm going to go ahead and just make sure that this is selected as white perfect now there is one thing I noticed that the white isn't at coming through as white itself mainly because I might have forgotten that this white if I hit edit style it's actually at 65 percent so we actually want to change that to 100 and then if I go back over to the button it's exactly what we want so if we take a look at the tesla.com website it's looking pretty good pretty similar so now we want to go ahead and create this secondary button which is a white a white background with dark gray text so going back over to figma I'm going to select this button I'm going to hit command D which is to duplicate holding down shift and now I can drag this down and it will keep it aligned right underneath the button now I'm going to change this to button secondary and what I can do is I can select this button change the button primary color to our this color over here but in secondary and then hitting enter on my keyboard Nest down to the buttons up button secondary and change the text color to dark gray so now we have button primary and button secondary looking good and I'm just going to quickly rename the layers so button secondary over here now over here we've got our buttons they're working well but just like our text Styles and our colors I want to make sure that I can re-utilize this button everywhere in my designs without having to manually create it once again so what we need to do is we can actually go ahead and select both our buttons over here underneath this component icon click the arrow and we can go ahead and create a component set now what this does is that it wraps the buttons around this blue dotted line which means that all the elements inside are now part of the same component set which means if I hit shift I which is the shortcut to open up all my components plugins a widget going over to components I can actually type in button and you'll see that this button now shows up and if I drag this over to my workspace this is actually now a reusable component that I can utilize throughout all my designs and you can tell by this icon on the left hand side so any main component that you create will have four little squares any instances of this component which means any uses of this component will have this a diamond that is outlined which means if I ever decide to change the primary button let's say say we change the corner radius to zero you'll see that it automatically changes the corner radius for all buttons being utilized throughout the project so it's a very seamless way of recreating reusable elements throughout your designs to save you time from having to manually recreate things alright so if I click on this uh component set over here you can see that on the right hand side we do have some properties so you can see that the first property is defined by property one we can actually rename this to the type of button because if we change this to type you can see that the type of button the values are primary and secondary and these are defined by what we've done over here we've named this button which was button slash primary and the second button was button slash secondary so with the slash we told figma that these two elements are both buttons and the first value is primary and and the second one was secondary so by telling figma that we can now create components to find these properties based over here which means that if we ever utilize a drop down this button over on the right hand side under type we can change primary to secondary back to primary and pretty much reutilize this button wherever we want throughout the project so we've gone ahead and prepared our entire project so very quickly walking you through the preparation stage you learned how to actually inspect a live website to grab their assets you'll learn how to utilize figma's color palette system so you can create reasonable colors throughout your designs you also learn how to create reasonable type styles for your project and then you also learn how to create a very quick component for your button and you also learn how to create a responsive button utilizing Auto layout so now that we've got all our elements ready it's actually time to start designing it [Music] I'm going to go ahead and zoom out on my canvas um and I'm going to hit F on my keyboard and this will open up all these different uh predefined templates that you can start with so whenever we're designing we want to make sure that we are designing within a frame so I'm going to select the MacBook Pro 16 inch you can utilize whichever a frame or starting point you want but I'm going to be utilizing the MacBook Pro 16 inch now the first thing I'm going to do is I'm going to go ahead and select the background image hit command C select this Frame and I'm going to hit command V and put this image down now I can also move it to the corner holding down shift I can expand and just grow the image to wherever I want as you can see should look something like that now I'm going to quickly zoom in so I'm going to change the 50 in the top right corner to 100 or maybe 80 so you can sort of see the entire viewport then I'm going to start to build out the actual header so I'm going to go and grab the Tesla logo I'm going to copy it I'm going to paste it down and I'm going to make sure I rename the frame to logo and I'm also going to rename the background image to maybe just background for now then we want to make sure we are creating the navigation so if I pop back over to this um design we want to make sure we have uh Model S 3 XY solar roof solar panels and then we also have three links on the right hand side as well so by hitting t on my keyboard I can put some text down and I can type in Model S and remember we want to make sure that we change the paragraph text to the menu link and the fill is going to be the dark gray okay then with this in mind I'm going to hit command D to duplicate and drag this across and change this to model 3 and then we can hit command D drag this across model X and then command d uh drag this across model y now this I intentionally did incorrectly or in a process where it's more inefficient so a lot of designers when they're utilizing figma they don't utilize Auto layout enough because as you can see this is perfectly fine for someone who's just utilizing figma for the first time but as you were spending more and more time designing uh interfaces you want to make sure that you're using features that will help you streamline the process so if I for example if I ever wanted to reorder these links I would have to manually go ahead and bring three over then select the S and then manually bring this over and then if I notice that the spacing in between each link is incorrect so there's 26 pixels between three a model 3 and Model S by holding down option I can sort of uh measure how far elements are from each other clicking Model S to model X there's 22 pixels so you can see it's already inefficient to have to manually order things and making sure things are aligned so what you can do is you can actually go ahead and select all these links and hit shift a which is turning wrapping all these elements inside Auto layout which you learned for utilizing to create the button but the powerful thing with this is that with auto layout you can actually go ahead and align all the elements inside vertically and also horizontally you can also increase the spacing in between all the elements inside systematically so if I change this to 24 you can see that all the spacing is 24 and you don't need to manually adjust things and then you've also learned that you can increase the spacing on the left and right and also on the top and bottom right so if we do that and we treat it like a button we can add a maybe a fill to it just so you can see you can see that it's a big box with a lot of spacing on the top and bottom so it's extremely useful when when you're trying to keep things aligned and you want to keep things organized so over here we also want to make sure that the direction is horizontal space between is 24 and we also want to Center all our elements inside now if I go ahead and select any of the items inside by holding down by just hitting a left or right on the keyboard I can actually go ahead and reorder it so I can actually move if you notice the model X I can move it to the front I can move it all the way to the back and I can reposition it however I want that is the power of Auto layout it's extremely useful and you'll learn how to use and the more you use it the more powerful you start to realize it actually is so I can go ahead and just select model y hit command D twice to duplicate these links and I can change this to solar roof and solar panels alright so rename this Auto out to menu and collapse that and what I can do is I can go ahead and hit command D duplicate the menu holding down shift bring this these menus to the side and I can maybe delete I only need three more links I can delete these ones and I can rename them to shop account and menu so shop double click account and double click on Model X menu okay and then I can just bring this over to the right hand side so now we are actually going ahead and recreating the headline it looks pretty accurate now if we want to get even more accurate with our designs we can actually go ahead and apply a grid layout to our entire system so if we select the artboard or the frame that wraps all our designs under layout grid we can hit the plus icon we can change this grid uh to a column we can change the count from 5 to 12 we can change whoops 5 to 12 we can change the margin to 40 and we can keep the gutter as 20. so what this does is it adds 40 pixels margins on the left and right and it's making it 20 pixels between each column just like that and if we close it this grid layout can be utilized to help us keep uh consistency in our designs that's looking pretty good now there is also one other way that we can actually manage our head arm so right now as you can see we have two Auto layout components and the logo floating in midair what we can actually do is highlight them all and hit shift a once again and that will actually go ahead and wrap all the elements inside within another Auto layout so if I go ahead and rename this to header now if I go ahead and select a logo and hit right on my keyboard I can now automatically and systematically reorganize everything by just simply moving them around with without having to manually click and drag and try to align things up perfectly so I can do this all systematically as you can see right now the header is only wrapping this R section what I actually want to do is I actually want to under Auto layout change the spacing from 364 to zero and that will make sure that there is no spacing in between these elements but under the three dots under spacing mode under packed I want to change it from path to space between and this will automatically create space between the three elements that we see inside this Auto layout and space them evenly across the entire canvas so if I change it to space between and then click on the header and drag this all the way out to the sides just like that you can see it will automatically keep this evenly spaced and to align it to the grid instead of actually manually doing that I can add remember 40 pixels to the left and right because the grid layout has 40 pixels and it will automatically Nest it inside the layouts perfectly then top and bottom I can add 20 pixels of padding and as you can see if I move this all the way to the Chart it's going to be exactly what we did but it's systematic there is nothing manual that we need to do to adjust the spacing or keep things evenly balanced Here's the final trick if I want to resize this Frame to make it responsive as you can see right now all the elements inside don't respond to the frame itself so because this header right now is systematic all we need to do is under constraints we can change left to left and right which means this will this Frame or this Auto layout will constrain itself to the left and right of the parent frame this means if I go ahead and resize it this header is going to now be responsive just like that because remember this Auto layout is constraining itself to the left and the right so the left of this canvas and the right of this canvas and that is how we can recreate this responsive header just like that so within just the header itself you've learned how to utilize Auto layout to create a dynamic header that you can quickly change and align things systematically you have systematically added spacing on the left and right without manually doing it you've systematically added 20 pixels top and bottom with here so you don't have to manually manually do it and you can now make sure that everything inside your auto layout is aligned in the center so if you were able to create a larger header or stretch it out it's always going to be positioned to the center because if I change it to the bottom if I extend this it will always stick to the bottom as well as you can see once you start to utilize Auto layout a little bit more you'll start to understand that it has some very powerful features that allow you to create things really systematically so the second part is now to create the model y title with the schedule a demo a demo drive so over here I'm going to hit t on my keyboard I'm going to collapse the header and click down on the canvas and I'm going to type in Model S remember Under menu link we want to change the menu link to heading change move that to the center you can also utilize the alignment tools over here and then the second thing I'm going to do is Click command D drag this down and the text link is schedule a demo drive so I'm going to double click schedule a demo drive and I'm going to change the heading to a link as you can see we already applied the underline to the textile previously so if we re-utilize this our text style it's going to work perfectly okay so that's looking pretty good we actually might want to turn this into a into a different type of style so I'm going to go back to my link clicking on my command directly click on the link under link under the textile hit the edit icon and I'm going to change this to light right and if I go back to my design it's going to look a little bit more accurate and it looks just like that looking pretty good all right so that looks good and then I want to add in these two buttons so clicking on my frame I'm going to hit shift I to open up my shortcut for my components select a button drop the button down and I'm going to bring it down here and we can do a button for custom order and then view inventory so double click onto the button custom order and then I can hit select the button command D to duplicate holding down shift drag that across and it's going to be view inventory whoops we're going to change it to a secondary button first so select the custom order button under button type secondary and we're going to double click onto that and we're going to change the text to view inventory alright so it's looking pretty good what we want to do is if we want to go ahead and create um larger buttons we can simply just select them both and just drag them out to whatever with we want maybe we want to align it to the grid layout just for this example and we might even want to center it just like that and we've got our design is looking pretty good but there are a few things that we do need to do that we can actually make this a little bit more streamlined so as you can see these two buttons right now are floating on their own I normally like to wrap them in Auto layout so hitting shift a wrapping it and giving it a parent frame called CTA and then maybe for the spacing to keep a consistent and systematic I can actually go ahead and change and change it to maybe 24 pixels okay so I can maybe or even maybe 20 pixels just so I can align it to the gutters just like that and same for the heading so I can select the model S holding down shift select the link as well hit shift a and I might rename this to heading and make sure the the direction is uh vertical and we can change the spacing in between to maybe 12 pixels cool and we can align it this way so normally with all the measurements and spacing I do like to use measure increments of 4 pixels so pretty much that is everything we need to do to make this responsive now there is just a few more things that we need to do to make this uh view entirely responsive so if I go ahead and select this Frame and I resize it you can see that the header does what we want but the image and the title and these buttons don't entirely uh sit perfectly in the responsive view so what we need to do is go back to the original View make sure we have Model S now what I want to do is make sure that the heading is selected under constraints just like before we want to Center this and for the ctas we also want to under constraints we also want to keep this either left and right or just keep it centered and for the image itself holding on command and directly selecting the background image I want to make sure that the horizontal we maybe keep it scaled or even centered either one works so now if we go ahead and select the frame and we reduce it it's going to keep everything centered perfectly for our design alright so it's looking pretty good so now if I want to go ahead and turn off the grid layouts just to preview my designs I can select the art the frame under the layout grid I can hit this I icon or you can do command G to turn it on and off just like that and it's looking pretty good like I'm pretty happy with this now if we want we can also select the frame and we're going to hit play icon and if we pre preview this you can see that this design is practically exactly what we are looking for and it looks pretty similar to the Tesla design now there are a few small things when it comes to prototyping [Music] as you can see if we go back to the website this header tends to stick to the top so if I'm scrolling it's sticking to the top so we can actually achieve that if I go back to the design and I select the header on the right hand side under constraints I can fix position when scrolling so if I go back to this design and I scroll you can see that the header also sits at the top just like the tesla.com website now the final thing I want to do is actually create that interaction so if you remember if we go back over to this website if I scroll it tends to slide me to the next section and it changes the text either title and also changes the background image so to recreate this it's actually pretty simple so if I go back over to figma I just need to go ahead and change a few little things what I need to do is select the CTA holding down shift select the head The Heading and also the background image I need to wrap this in a frame and just bear with me so holding down option command and G it wraps it all in a frame or you can also go to object and frame selection okay so this will wrap it in the frame and I'll explain to you why so I'm going to hold down command first and make sure I drag this top border all the way down to the top and then this bottom border all the way down to the bottom part of this canvas and then I'm going to select clip content the reason why I want to do that is because this image previously or even as you can see right now spans all the way to the top and if I don't clip so if I don't clip this selection if I go ahead and extend this artboard you can see that the image actually extends so with this Frame selected I can go clip content and it actually Clips anything that sits outside of the frame and then I'm going to call this section and we might just call this section dash s for Model S okay so section dash s and it's clipped and it's looking pretty good and then I'll just resize this Frame to its original size so if you remember if you go back to this website this first section fits and spans the entire horizontal section and also the vertical once I scroll this Model S section fills the entire viewport model X fills entire viewport so to recreate this um effect all we need to do is head back into figma we need to know what is the existing height of this Frame which is 117 all we need to do is go so times two right so that will double the frame we select section s we hit command D to duplicate it we bring it down right holding down shift it will always snap to the edges just like that and it'll keep it aligned to your drag we can rename this Model S to three and if we go back to the website I'm just going to quickly grab any image and just find the image tag find any images just like this one I'll grab this open this up whoops let me just quickly open this up in the new tab grab this image I can hold and down command directly select this background image hit command V paste this image down and then as you can see we now have the first section and the second section what I need to do now is I need to go and select the outside the parent frame holding down command hide the second section make sure this Frame is still selected hit command D duplicates this entire design uncollapse it then I need to go ahead and rename that new section that we recreated so section s we need to change it to three okay so we now have S up at the top three down below and it's hidden select the MacBook Pro 16 inch dash one or we can even rename that to home page duplicate that by holding down command D then what we need to do is uncollapse it select s and section three move it all the way up by holding down shift and dragging it until three takes up the entire viewport all right it's looking pretty good so all we need to do now is select the first home page make sure we are on Prototype click on the plus icon click and drag over to the next one we want to make sure on a click we want to animate with smart animate we also want to make sure we can choose maybe ease in and out and then over maybe 600 milliseconds select the second state or the end State hover on the plus icon click and drag bring that over on click smart animate is in and out we can play around with these um easing options over 600 milliseconds close that and then with the plus icon hit the plus this will load up the product uh the present presentation mode all we need to do now is Click once it slides us down to the next section if we click once again it brings us back to the original state and if you notice the actual header is also following us because we've also fixed it to its position so hopefully you learned a lot in terms of how you can utilize figma to its full potential but I did miss out on one key update that figma made just last year so if you do want to learn more about figma's component properties which is the latest feature make sure to check out my dedicated video on that and I'll leave a link over here or here right the end of the video so if you did like this video make sure to give this a like subscribe for the Die Hard fans and I will see you in another video very soon [Music]

Channel: Mizko

Views: 173,527

Keywords: figma 2023, figma tutorials, beginner tutorials for figma

Id: XiqitRY3swo

Length: 44min 18sec (2658 seconds)

Published: Mon Feb 13 2023