The Only Figma Tutorial You'll Ever Need.

This is the only tutorial you need to get started with creating your own designs in Figma. My name is Samuel Fabayo and in this video, we'll be designing the Tesla landing page in Figma. Figma is the most used UI design tool in the world. It is used for designing mobile apps, web apps, and websites. It is the main design tool that I've used every year I've worked, including Deliveroo and Mondobank, and it is free for personal use. We'll start by creating a new design file, then we'll go on a quick tour of the interface and import all the assets used on the website. After that, we'll use essential features like frames, auto layout, components, and a simple style guide to design the landing page. Then we create this dry effect on the navbar. We're basically creating a clone of the website. By the end of this video, you'll be able to jump into Figma and start bringing your own design ideas to life. All you need to do is design along with me. Let's get into it. We're going to head to www.figma.com. If you haven't used Figma at all, you have to coming through the Figma signup flow. And that is very, very easy to do. So since I'm already in here, I'm just going to go ahead and create a new design file. Once I create my design file, I come onto my design board and let me just do a quick walkthrough of the entire interface. On the left-hand side here, we have the layers and we have the assets panel. So this is where every element that you put on the huge canvas here is going to display so that you can sort them, arrange them, rename them. Any kind of assets that you've used in your file, any kind of components that you've created would also be added to this asset section. At the top here, we'll have the toolbar. This is the move tool. This is the frame tool, which we're going to talk about later in this video. This is the rectangle tool. This is the pen tool, the type tool, which you're going to use a lot. This is for like other resources that you might want to put in your files. And then this is for To, um, this is your, your hand tool to just really pan things around. And this is for the comments. On the right side here, we have the design and prototype. So this is where you do every kind of editing to your design files. And this is where you create prototypes, basically how you connect screens together to look like an actual real prototype. So first off, let me try and put a frame on this. So I have a frame on this right now. If you notice, when I clicked frame, it showed me a couple of options on the right-hand side here. And these options that are here are basically just different kind of presets, this device sizes that you might want to use for your frame. So if you are designing for a phone, you would pick any kind of phone template that you are designing for here. Could be an iPhone 16 or a 14 or a 15 or a 16 Pro Max. And if you're designing for a tablet, you can do the same thing. If you're designing for a desktop, you can pick different screen sizes as well. In our own case now, since we're designing for a desktop, I'm just going to come here, I'll click Frame again, or I can just hit F, and then I'll pick a screen. I'm going to pick the MacBook Pro 16, so it's going to drop the MacBook Pro 16-inch screen for me. Right now that we have this I'd like us to go back to like the Tesla website to see what we're trying to do exactly. So when you go to Tesla website, what we want to design is the landing page. So when you hit tesla.com, at the time of making this video, this is the website that you see. This is the landing page that you see. So we want to create a clone of this landing page on Figma, which is basically creating this hero section here. And then the next section that has the Cybertruck, the next section that has the Model Y, another section that has Model 3, another section that has Model X. The Model S, and then we're going to stop there. We're not going to be going ahead to the solar panels and solar roofs and the video as well because that's just going to take a lot of time. Then after we are done with that, we are also going to create like this top nav here. I like how this nav just sort of slides out and then how the cars also just animate. So we're going to create that and try to recreate that as well. Uh, if you go back to our Figma, the first thing that I want to do in your project is to make sure that you plan your projects properly, because that's how you can achieve speed with your projects. If you, if you don't plan it properly, then you're probably going to waste too much time designing. And what do you have to do when you plan your projects? You have to look at every element and every component that you have in your projects and try to identify the repeating elements and components in the project so that you can create them once and reuse them again. In this particular case, for example, what we're going to be doing first is that we're going to be creating a simple style guide that is going to have the typography that is used on the website and maybe the colors. There's not a lot of color on the website, so we're definitely going to do typography. So I'm going to come here and I'm going to create another frame. This is going to be a random frame, so I'm not following any kind of particular frame size just because I want to create this for typography majorly. If you look at the website, there are like 6 different typography styles there, so I'll just create this one first. By picking the type tool here, typography tool here, and I'll come here and I can increase the size here to maybe 36. So now that I've increased the size to 36, I can just type Heading 1, um, Heading 2. So I'm basically trying to create a style for all the text styles that we have there. So I'll write Heading 1, Heading 2, Heading 3, and then Body 1, Body 2, and Body 3. If you go back to the website itself, you're going to see why I did this. So this is Heading 1, for example, where we have 299 £299 per month. That's the biggest text size on the website. If you scroll down all the way down here, you're going to see another £299 per month. That is the next biggest size. That is going to be our heading 2. And then this is the 3rd biggest one, this capital letter that says lease starting at £899 per month. So this is going to be our 3rd size. So those are the headings. And then we have the body copies, right? Which is the text inside the button here is going to be our body 1. And then our body 2 would be the text that is used at the tab here. This small text that is used at the tab here and the same text that is used for the sidebar here is a bit smaller than the text that is used on the button. Actually, they might be the same size, but we'll find out all of that later. Then we also have this model 3 size, which is another size that is Um, bigger than the— bigger than body 2. So this is going to be our body 1 actually. So this will be our body 1. The text for the button and the text for the navigation will be our body 2. And then the smallest text on the website is this one, this button that has, um, that is underlined here that has learn, order, um, get started. That's the smallest text size that we have there. So we're going to go back to our Figma and try to create a style for all of these headings. So by eyeballing it, heading 1 is about 56 pixels. So I'll just put in 56 pixels right there. And heading 1 is also like a semi-bold, right? And if you look at it as well, if you look at the way the text is written for heading 1, if I zoom into the actual text on the website, you would see that the spacing in between each of the text is not as much as you have on this actual one here. Very small detail, but it's very important. So I'm going to try to adjust the spacing between each of this as well, and I'll come down here and change this to like a -3 to get that spacing right. So I have my Heading 1 already, and then for Heading 2, it's also semi-bold, but it is about 36, which I think is fine for it already. I'll also come here and Reduce that spacing to like maybe -2. And then for heading 3, which is the one that is in all caps— by the way, I'm using a font called Inter, which should be pre-installed on your Figma. That's the closest font to the font that Tesla is using on their website. So we are good with the font. For heading 3, heading 3 is an all caps letter. And I think heading 3 is about 18. That's 181. I think heading 3 is about 18. And because it is all caps, and if you also look at it, if you also look at Heading 3, which is this one, it doesn't feel like a regular font, maybe like a medium. So when we come here, we'll change that to medium. And then because it's all caps, we already put it in 18. Because it's all caps, we're gonna come here and try to look for all caps. If you come here and click these 3 dots, you're gonna see different case styles here, and this is the one for all uppercase. So our Heading 3 is going to be automatically all uppercase. We also have our Body 1, which looking at the website, this is the Body 1. Body 1 is how this Model 3, Model X are written. I think that is an 18 as well, so I would change that to 18. I'll keep it as medium as well, and then I'll put that up there. And then body 2 is— I think should be 16. Body 2 is the text that we have inside these buttons and also the text that we have in the nav bars at the top here. That is body 2. So I will change that to 16 and also make it, um, I think that's a semi-bold as well. And then body 3, which is the smallest text on the website, I think that is a 14. By the way, I'm just eyeballing these things, just trying to see what it actually looks like. When you're cloning a website, you won't get everything right, but you want to be as close as possible. So this is body 3, and I think body 3 is fine just the way it is. Now we have all of these texts, but we haven't converted them into text style, into reusable text styles yet. That's what we're going to do next. So if I come here and I click this in one, I can come to this side and click these 4 dots beside the text styles that says styles, and I can click this plus to create a style. And my style is going to be called H1. I can add a description, but I don't need to add a description in this case. So I can create style. So I'll have H1 text anytime I need it. I can always use it. The same thing I'm going to do for H2. And same thing I'm going to do for H3. I'll do the same thing for body 1. I'll call that B1. Same thing for body 2. I'll call that B2. And then the same thing for body 3. I'll call it B3. The reason why this is great is you can always edit this later on in the future when you're working on these designs. And what makes it also good is that once you edit it, it's going to apply in any way that you already have the designs set. So we've done our typography styles. If we go back to Tesla website, and we could do the color styles as well, but we don't have a lot of colors on the website. We only have like white, we have a gray We have a light gray here, and then we have a blue and we have a white. So I don't think we should do a color style, but let me just show you how to do a color style if you want to. It is the same thing. I could just pick a rectangle from here, draw a rectangle on the frame here, and choose a color for that rectangle. Let's say I use that Tesla blue there, and I'm trying to eyeball that blue to try to get what that blue actually looks like. Let's say this— let's say this is the blue. So once I do that, I do the same thing. I go ahead and click the 4 dots there, and then I click this plus sign, and I name this Tesla Blue, or I give it a blue code, maybe B100 or something, and then I create the style. So that way, anytime I need that color, I can always find it there, and I can do the same thing for the gray and the white as well. So now that we are done with that, let's come back to our frame that we've created for the MacBook Pro 16 here. The next thing that we're going to do after this is to create the components that is used for the buttons that is used on this website. So we have this white button, um, and then we also have this kind of dark gray buttons. But actually, before we create the buttons, let's Let's bring in this image that is used on the website first of all. So let's design the entire hero section before we create the button. I think that would be more interesting so that we can start getting into like the interesting bits of the tutorial. So we're going to bring in the cards that I used. I've already downloaded all of these cards so that we don't have to start doing all of that on this tutorial. You can grab the link in the description so that you can access the download file and you can use that to design along with me. So I will bring in the car just by going into my downloads and going to the assets. And I'll just drag that in. Very, very easy to import things into Figma if you want to. So I have that in my file already. This is the car that was used on the website. So I'll copy that or I'll cut that. And I'll just make sure that I click this frame. And I'll paste it in the frame. So that way I've filled the frame with the car. But what's happening now is that the car is bigger than the frame. So frame is cropping the car. So what I can do is to resize it at the edge here and make sure that the car is actually showing within the frame. One thing that we can do here to make our designs like pixel perfect, if we want to, is to come here to the side here and use our layout grid. I don't use it as much, but for the sake of this tutorial, let me use it because it's going to help us To really make sure that we align things. The reason I'm saying this is that you don't have to follow one particular way to design. No, don't let anybody tell you that, oh, you have to design with grids, you have to do this, you have to do this. Design in a way that you're comfortable with, and then focus on the outcomes of your design. When you're just starting, it's good to use grids because it helps you to make sure that things are properly aligned, but there are no hard rules to how you approach your design. So I'm going to come here and I'm going to create a grid style. But I don't want to use a grid. I want to use a column grid instead. So I'll just come here and I'll click column. And I can say that I want my margin to be about 96. If I look at the website, the website actually doesn't really have margins. Honestly, there's no point using grid for this website design because It's just pictures with typography and buttons. So we don't really need to use a grid. But if you want to use a grid, this is how you go about it. You create a grid and you do that. So I'm not going to be using a grid anymore. Now I've brought in the car. The next thing I'm going to do now is to put— bring in this text, the £299 per month leasing, and then the 2 buttons that says order Model 3 and order Model Y. So I'll come in now. Since I have my text here already, I can still come in and type that and I can say 299. Actually, I could just copy this and bring that into my design. Once I have that, remember that I already created a text style. So while this is highlighted, I just go to my text styles and I'm going to go and pick H1. So already I have my H1 text here. Easy, right? So the next thing I want to do now is to create these buttons that we have here, order Model 3 and order Model Y. To create the buttons, we're going to use an interesting Figma feature called auto layout. But first of all, let's type out the text in the button first. Order Model 3. We already agreed that the text in the button is, um, B2, which is 16. So that is what we have here. We're gonna click this and we're going to press Shift+A to add auto layout, or we can just decide to do a right-click and add auto layout here. What auto layout does— because you can't see that now, let me give this a background. I can come here and give this a background, a fill. Of white. Because my text is white and my background is white, I can't see the text. So I'll come here and change the text color to a black. And I'm just using— I'm avoiding the black. I'm just using a black color here. Nothing particularly, um, that I've set. I'm just picking a black color from like the color wheel here. Now what makes Auto Layout interesting is that it just allows you to easily type in anything into your components without losing shape of the components. Right. So for example, I can decide to say order model 3 right now, and it just continues to expand like that. And if I do the same thing and bring it down, it just continues to expand. And whatever I write and I keep bringing out, it just continues to expand like that. And this is one of the foundational features of Figma. This is one of the things that make Figma so easy to use. So this is very important for you to learn as well. So now this is the button that I have right here. But if you look at this button here, it's a much wider button. So what I'm going to do is to increase the width of this button. There are 2 ways to increase the width of this button. Either I use the auto layout to add more paddings to it here. Whenever you add auto layout to an element, you have an area here where you can configure your auto layout and you can add spacing on the sides. Equal spacing on the side to say you want to add it to be 60, or at the top to say you want it to be 60. Or if you have multiple elements in auto layout together, you can add spacing in between them. In this particular case, I don't want to use this spacing. I want to use the width here. I want to just increase the width so that I can use the same button over again. So now I can change this width here at the top here to 240. Or I can even make it 280. So now we have our button, it is 280. If you look at this now, it's looking a lot more like this button, but it looks like the space that we have at the top and at the bottom here is more on this than what I have in the actual design. So I'm going to increase the space at the top and at the bottom, at bottom here in this auto layout panel here by adding maybe making this a 12. This is looking more like it. I think I could make this like a 300, honestly. And then once I do that, if you notice as well, we have some round corners at the edges of the button on the website here. So I'm going to do the same thing. I'll add the round corners and I can make it like a 6. So this is where I had round corners. He adds it all around the edges, or I can make it like a 4. Now I think we have our button, but we're going to be reusing this button a couple of times. We're going to use it here. We're also going to use it here. In a, in a blue color. And we're going to have different instances of the button. So this is going to help us use another important Figma feature called components. So how does components work? I can make this button a component, and then I can create different instances of that component. And anytime I want to edit the button, all I need to do is make that edit or make that change on the master component. And once I make the change on the master component, it updates everywhere that that instance actually exists. And it's such a powerful feature. Feature as well. So I'm going to come here and I'm going to right-click and I'm going to come to, um, create component here. Once I make this a component, then this button is already a component here and that is why it has this. So we can rename it, rename it and call it button 1 because there are 2 button styles here. All right, so this is my master component and once I duplicate this, now this then becomes an instance of this master component. So if I make a change to this master component to say order model 3 right now, you can see that that change is reflecting in the instance of the component. So whatever change I make, I can do that. But I can also make sure that I can also edit my instance to not reflect the change of the master component, right? And that's the power of components. Now I have 2 buttons here, so I'll create the other button which says Order Model Y. Right. Once I have that, I now have 2 buttons here and I can join these 2 buttons together again. And I can combine these buttons, these 2 buttons together again into another auto layout. I really like using auto layout because it helps me keep my designs super clean. So now I have an auto layout here and if I want to change the spacing between these 2 buttons, all I need to come and do here is maybe press 24 or press 12, but I just want to keep it at 24, which looks more like what we have on the actual website here. And then we have this at the top as well. So I'm going to do that. I'm going to keep this into their own group or frame. I can frame this as one frame, or I can make that another auto layout. And once I create an auto layout of this, it becomes a frame as well. And the reason why I'm doing this in auto layout is because I just want it to be easy for me to make edit and changes along the line as I'm going. So now I have my buttons, I have my hero section, I have the buttons, and I have the H1 text here. The next thing that we're going to do is that we're going to design the navbar here, the one that has the Tesla logo and the tabs, and this one here. Right now that we have that, first thing I want to do is put this in the center and make sure this is at the center of the frame. If we look at the Tesla logo, we see that there are icons here. So I'm going to download these icons. They are SVG icons. So I can easily just come here and click inspect. And then it shows me the SVG here, the code for the SVG here. And I can simply copy that code and paste it on my Figma file. So this is the Tesla logo that was used. I can do the same thing for each of these icons here as well. All I need to do is press inspect. It takes me to the code and then I copy that and I paste it as well. So this is the question mark icon that was used. The next one is the globe icon here. So I just do that, press inspect. It takes me into the SVG at the top here. The one that has SVG class, that's the one that you're picking. So I press that and I come here and I paste it as well. Just put that at the top here. So those are my 3 icons. But when you look at the website, you see that this navbar is in 2 variants, right? There's a white version of it. And when you click the navbar, when you hover, you see that there's another version of it. There's a white version of it and a dark version of it. So we have to create 2 variants for the navbar. So first of all, let's create the first variant for the navbar. Our navbar is basically the same size as our entire website. So I'm just going to come here and I would pick a frame and then I'll drag that frame across this to sort of get the size of the navbar. And then I have like my navbar here. This is basically the frame for the navbar. But it is currently transparent. I can just fill it with a black or fill it with a— yeah, I can just fill it with a black for now so that I can see whatever I'm putting on it. So I'll come up here and I'll create my navbar just to be sure that the size is good. If you notice, the size of my MacBook Pro screen is 1728. The size of my navbar is 1728. So that's how I check that. So let me move this component to this side since we don't need that for now. Come here, and the Tesla logo is black here. I can easily change it to white because it's SVG, and I can put it in this frame. But if you look at it, it's so big. This Tesla logo is small, so I can just come here and reduce the size. I can divide this by 2 by saying 342 divided by 2. Actually, that didn't work, and the reason it didn't work is because I only adjusted the size across the width. I didn't adjust the size across the height. And the reason why that happened is because I didn't click this so that it adjusts proportionately on the width and on the, and on the height. So I'll click this so that that happens, and I can then say divided by 2. So we have our Tesla logo and it's just looking really small and nice here. And then we have all these other icons that was used as well. We need to change those icons to, to white. If I click all of those icons, you can see here that I have selection colors. This basically picks all the colors that are in everything that I select. And because it is all black, I can just change everything at once here. And it's been changed to white already, but I can't see that because it is on a gray background. But now that I put it here, is on a white background. If I zoom in and I look at this, you'd see that the logos are a lot more— the icons are a lot closer to each other. So I'm going to put these icons in an auto layout as well, right? Once I do that, like I said, I just highlighted the 3 icons and I pressed Shift+A. Once I do that, I can change the spacing between the icons to like 16, which looks more like what we have on the website here. So now that I've changed the spacing to like 16, What I have here now is an icon on this side, and then I have the Tesla logo on the other side. There's one more thing that I need to put, which is the tabs here that says Vehicle Energy Charging Discover Shop. When you hover on this one, it is all white. Vehicle Energy Charging Discover Shop. But once you hover, it is black as well. Like I said, we need to create 2 different variations. Of the navbar. So what I'm going to do now is, first of all, I'll create the white version. And remember, we said that the navbar is— we said that the navbar is the same thing as the button text. So B2 is fine for that, but we're going to make it white. Once we've done that, we can bring this into this. And then we have to do something. We have to create, um, we have to duplicate the navbar. If you want to duplicate, all I just do is click Option and drag, and then hold Shift to make sure that you are dragging on a straight line. If you don't hold Shift, it doesn't drag on a straight line when you click Option. That's on Mac. I think on Windows it is going to be Alt. Click Alt and hold Shift, then drag. Then that way it drags in a straight line. So do this and I do this. Once I do that once, all I need to do is again, you guessed right, put all of this in an auto layout. I can say Shift+A. I can say Shift+A to put that in an auto layout. And the reason I'm putting it in an auto layout is I don't want to keep dragging multiple times. I just want to pick this last one and press Ctrl+D so that it creates the other 2 options for me and put all of the— and make sure that the distance between everything is equal. So I'll come back and I'll look at it. It says Energy Charging Discover Shop. So I change this to Energy. That looks like what we have there. And then when you come back and look at this, it looks like the spacing in between as well is, um, it's smaller than what we have here. I think so. So I can come here since this is, you know, on auto layout. I can come here and change this spacing to maybe 36. It looks— this looks more like it. So now we have our navbar. I can decide to change this to, um, transparent now by turning off this black. Or let me leave it first of all and make sure that everything here is good before I do that. The last thing I want to do is to make sure that everything is in one nice frame. I'm just eyeballing the size that is on the padding here. That is the spacing between the last element for the icons and the spacing between the logo. I'm just eyeballing all of that so I can put all of this into a frame. I could also put it into an auto layout, but let me use a frame because I, I don't really need an auto layout for that. Or maybe I do. It's possible, very, very possible that I do. Very possible that I do. I always like to use auto layouts just to be safe, so I'll use auto layouts for that. And what it has done now is, if you notice, it moved it in such a way that the spacing between here and here I don't think is the same thing. That's the spacing between the Tesla and this middle options, and the spacing between the middle options here and the icons, I'm not sure it's the same. So I'm going to change this to auto. So that I can be sure that the spacing is the same. I think the spacing is the same now, but there's a high possibility that I might not still get the same spacing because this Tesla is taking a lot more space than these icons here. And that means that there might be some kind of disparity when I put it on the actual design. But let's see what happens. So I'll bring in my frame here And I'll put it on the actual design. Or I can just, I can just Ctrl+C the frame or Ctrl+X the frame and paste it inside here. So that means it just sits in the frame. And then the next thing that I would do now is to remove the fill, this black, by clicking this minus. Then it just sits there. Now there's something wrong with this. This in the middle here is not aligning with what we have here. It is not aligning. This is on one side. This is on one side. But if you look at the actual website, it is right there, bang in the middle, right there in the middle. So we need to do something about that. We need to fix that. And the reason for that is because, like I said the other time, this Tesla is taking more space here than we have on this side. So how do we fix that? That feels like a tricky thing to do. We can either do that by eyeballing it and saying, okay, we don't want this spacing here that says auto. What this auto means is that I want the same spacing here and here. That's the same spacing between Tesla and the middle options here. And then here, that is what it means to put this in auto. But because this is longer, than this, it will automatically sway the middle options to one side. So what I'm going to do here is I can eyeball this and not use auto anymore, right? By saying that, um, actually I don't think the best way to do this is to eyeball it. The best way to do this is to look at what the size of this Tesla logo is and make sure I have the same thing on the other side. So this Tesla logo currently is 171. That's the width of this Tesla logo. And then these icons here is 104. So if I increase this to 171, I would have a better chance at making sure that they are centered. You can see now that it is centered. Everything is centered, but not everything actually, because on the side here we have more spacing. On this side than we have on this side. So what we want to do now is to make sure that this is actually staying in the middle of this frame. But from the auto layout, it is staying on the side of the frame here. If you can see, it is aligned left. So within this auto layout frame, we want to align it to the middle. That way we have this on this side and then we have this on this side. In fact, it's even better to align it all the way to the left. So that way it looks a lot better now. So we have our navbar. Remember that this navbar has 2 different states. It has the white state and it has a black state. So let's not forget that. Let's remember that we are going to need the black state of this navbar eventually. So let's keep that for now. So what we're just going to do is come here and create the black state for the navbar. Remember I told you that if you select a frame and you check here, you're going to see the selection colors. That means you're going to see all the colors that has been used within that frame. All the colors that I've used within this frame has been white, FFFFFF. So I'm just gonna go ahead and change that to the black that is already used. So now we already have our black variants. For the, for the navbar. Now let's go ahead to create the other side of the design. The other part of design that we have, the next one is the Cybertruck. We have the Model Y, we have the Model S. Let's keep this Cybertruck for now and let's go to the Model Y. We'll come back to the Cybertruck. So if we go to the Model Y now, all we need to do is first of all expand this frame. I click this frame and I want to expand it because I need, because I need a lot more space. I click because I need a lot more space. So I'm expanding this frame. So I'm expanding this frame all the way now down. So what I'm going to do is I'm going to pick this and I'm going to copy this. Right. Once I copy this, if you look at the website itself and you scroll down to the Model Y, it doesn't feel like it's like taking the entire screen, right? It doesn't feel like it's taking the entire screen. So I don't think it is as big as this particular one. So we can just reduce this frame a bit like this. Again, we're eyeballing. So, so what we'll do now is we just go in here and we'll come to the image side on the right side here, and we change this image. Go to our downloads, um, and then go to our assets and bring in the Model Y. I'm trying to look for the Model Y, and I think that's it. So automatically we have the Model Y there. And what we then have now is, um, what we have next to add is the buttons at the bottom here. So we're gonna add the buttons at the bottom here. We're gonna copy this and we're gonna paste it here, and we're gonna put it in the center. So come down here and drag this button so it's just at the bottom here. But this button, the first one is a blue button that has Order Now, and the next one is a Learn More button. Remember the blue color that we created at the beginning? All we need to do is pick that, and that's our Tesla blue. But now the text is white, so we just go and we'll pick white. This doesn't quite feel like the blue that is used here. It's a completely different kind of blue. So let's try to find a blue that is closer to that. So we can come here and change our Tesla Blue by clicking Edit Style here, and then we'll come here and we'll try to find the actual blue that is used on the website. When I go back, that's not it. Um, let's just try to get a blue that is a bit closer than what we have now currently. Yeah, I think this is more like it. So we have the blue now. And at the top we have the Model Y. So we can pick this text that we have here. You can actually pick this and bring this back here. You can just drag it down. And once, once we've done that, we don't need this button, so we just remove it. And then we type in the Model Y. But we also have another text under it that says $299 per month. Listen again. So we'll come here and we can duplicate this and add that there. I'm going to have to break the link here. When I copied it from the website, there was a link that was attached to it. So what I had to do first was to break the link so that I don't click a link instead when I want to edit. So this, I go ahead now and I can change this to our H2 text, which looks more like what we have here. And then the last text, which is the H3 text, says from. But if you look at it, this text is not underlined. So I'll come here again and change this to our H3 text. Actually, it is supposed to be our B1 text, but it doesn't have the underline. So I'll go here and I'll remove this underline under decoration. I'll come to these 3 dots and I'll remove this underline under decoration by clicking none. And again, it has clicked the link because I did not break the link, so I have to go back and break the link. So I just come here and See that link there? I come to edit and I just hit this button to break the link. So that link is not there anymore. And we don't need this order now button. So I'm just editing that to make sure it's there right in the middle. I might have to move it up just a bit. And if you look at it, actually, yeah, that feels more like— that feels like what we have, but it looks like it's much closer to the top there. Yeah, actually, that's, that's very close to what they have there. So that is for, um, the Model Y. Now let's do the Model 3. You want us to do Cybertruck next? Don't worry, we're gonna do that. Let's leave the best for last. So we'll do the Model 3 next. The reason we're doing that is because it's basically just the same thing. Now we are— so we're just going to be smooth sailing from here. So what we just need to do is take this and then copy this as well. Like I said, I just drag, hold Shift and Alt and Options, and I drag to copy. And then what I do here is, um, this text is Model 3, just change this to Model 3. And then I also keep the same thing, but the price is different. $299.90. All right. So once that is done, I need to change the picture of this as well. So I just go to images. I go to choose image, and then I pick the picture from here. So I have my picture coming and I have that. What is the order mode? Order now and learn more. I didn't change this to order now and learn more. I didn't change the Model Y to order now and learn more. So I'm going to do that. So I'll do the same thing for this. The next one is the Model X and then the Model S. So I'm going to do the Model X next. Similar thing that I did with this. So I might just breeze through the next 2 ones because I'm basically doing the same thing. So One thing is happening here is that this is copying this. So you see, if you notice what happened here is that I'm copying this and the text is not copying alongside it. And that is because this and this are not in the frame. They are there, they're showing that they are there, but they are not actually in the frame. So I can just come here, press X, and then make sure that they are actually in the frame by clicking this and then pasting So now they are in the frame. So if you go to the side now and check this frame, you see that everything is there under the frame right there. So I have that. So I'm just going to breeze through the other 2 ones before I come back and do the Cybertruck. So now I've done that for the Model X, the Model S, the Model 3, the Model Y, and the very first picture on the hero section. I'm just going to make sure that I put all of this in. First of all, I need to remove the underline here because it's not— that's not needed. So just come here and I remove that. And that's the same thing with this one as well. That underline is not needed here. I'll come down here and I'll remove that. In decorations. So once I've done that, I just want to make sure that everything here looks nice and clean. I can put everything into their own frame. So I'll come here and I'll select all of this and I would frame that selection. I'll do the same thing with this, select all of this and frame the selection. So what I basically just did is to make sure that everything is in a frame selection so that I can move everything individually, right? I don't want to be moving the picture and then the text is flying in a different place. And I can also add all of them into one big auto layout. It must be like, oh God, this guy loves auto layouts. But yeah, it just makes your work tidy because now I can delete this and it just adjusts automatically. I can delete this, it adjusts automatically. I can add a new one. So let's add new one for the Cybertruck. The Cybertruck is right after the hero section, so I'm just going to come here and I'll duplicate this one, the Model Y, so that the first Model Y will be my space for the Cybertruck. Auto layout makes it easy for me to duplicate and just move things easily. So I'll come here and I'm going to double-click this and change this image to the image of the Cybertruck. So Cybertruck is in. Once I do that, the Cybertruck has a different logo, not a text. The same way we downloaded the logo for the other Tesla, we could have done that for this. But when I try to do it here, it's downloading an empty state logo for the Cybertruck. I don't know why that is. Maybe they're trying to make this logo discreet, but I was able to find a logo online, so I'll just bring it in. It is also going to be in your downloaded logos. It's also going to be in your downloaded files folder anyway, so you'll be able to find it there. So I'm just going to delete this first. Come into my downloads, go into the assets, and I'll bring in a Cybertruck logo. So I have the logo, it's an SVG, so I'll just bring it at the top here. Make sure you're dragging the logo in only. The reason that is, there's something here that is showing that is respecting the auto layout that I already put here. That's why when I drag the Cybertruck into this place, it is showing this. We don't want that. So I want to just delete what is here so there's— so that there's nothing there. I can leave this because I still need this text. So I can come here and add my Cybertruck logo and change my logo to white. It has a background, um, I don't know how that is, but I should be able to change the logo itself. When I double-click it, I can change that to white. So that's my Cybertruck logo. But when I look at it here, it's a lot smaller and looks a lot nicer, and it is just above like this undulating plane for like the desert here. Those are like the small details that I want to like focus on. So when I come in here, I'm gonna try to achieve the same thing with it. Um, if you look at it, the K is almost like at the bottom here. Um, so I'm gonna do that as well and bring my key all the way down there. Yeah, so that looks, that looks more like what they have there. And I'll make sure that my logo is in the center of the frame. To do that, I'll click the logo and I'll come here and align to center. So that puts it in the center. Now the next thing I'll do is to add this list starting at $899 a month. So I'll just change that to this. Remember, the reason why this is doing this is because it is only staying within the space that is provided for it here. So I can just spread this so that that space expands and I can still put it in the center. Remember, we have our H3, which we haven't used. And that is what we reserved for this particular one, for the Cybertruck. I can put this in its own auto layout so it's easy for me to like make changes or edit or do anything. Honestly, you don't have to be as auto layout focused or centered as I am. I just like it. It's standard practice, but you don't have to be. It isn't. There's nowhere in the rulebook that says that you have to use auto layout for everything. Anyways, I have this in the center now. And my Cybertruck is now here. And it looks like we have the landing page. It looks like we have all the cars on the landing page. We already said that we were not going to work on the solar panels and the solar roofs. So we're going to stop there for the landing page. Now we need to work on this. Smooth transition here at the navbar. That's the next thing that we are doing. Something has happened here. We had our navbar here before, but it disappeared. And I think that what might be happening is that it might be at the bottom since we've put all of this into one huge auto layout. If I click this, it's just one whole frame. So if I right-click that and I put send to back, we should be able to get our navbar back. But we didn't get it back. Why is that? Let's try to see if we can find it here. Yeah, it is here actually. This is our navbar, so let's bring it to front. Actually, I'm very bad at naming my layers. I would encourage you to try to name your layers if you can, but again, there's no hard rule that says that you must name your layers. But if I had named my layers, it would be easier for me to find a navbar. So now I've been able to find it and I've been able to bring it to the front. So I have the navbar now, but I want to create the second version of the navbar, which is this one. That's what we are creating next. If we look at it, we're going to notice that that version is basically the same thing with this version, but it is black. We've done that already. And then it has another frame on it. And that frame is like a white frame that covers half of the cars here. If you notice, it covers the car, um, just up to this point, just covers it at this point here. So I'm going to try to do the same thing as well. We have the car there, we move that up. Let's zoom in a bit so you can see exactly what I'm doing. So we'll take it up so it covers it up to this point. The interesting thing is that when you hover, it just gets blurry a bit. That's an interesting animation. We're going to try to see if we can achieve that. Um, so let's come here and let's create a new— let's work on our navbar on a different frame. This frame can come to the left here since we are not using it actively. We don't need this. We just need our navbar frame. Let's call this secondary nav. Right. First thing we'll do with this is to bring in our navbar that we already created here. We'll put that and stick it all the way to the top there. If we want to create this nice hover effect, it looks like what they've done here is when you hover on this, this shows up. So really what is happening here is that when you hover on this, this is the, this is the one that has the background under it, which we can actually do, something that we should be able to do easily. So all we just need to do is that we come here first, we come under vehicles, we put vehicles into an auto layout, and then we are going to add that background. But if we just put vehicles into an auto layout, something is going to happen. If you just say this is for, for example, if I pick vehicles now and then I say Shift+A and I add an auto layout, nothing happens because I have not added any spacing to the left or to the right. So I've not added any kind of horizontal padding or any kind of vertical padding. So what I'm going to do now is I'm going to add a horizontal padding of 16, which I think is too much, and also it just distorts the whole thing. And the reason why that happened is because if you look at this, this is fixed. This is fixed. So if I say that I want to add a padding of even 5 on the sides, it is going to make sure that the size of this entire vehicle, um, tab does not change. Instead, it's going to try to squeeze the text within it because it is, it is that fixed to So what we want to do is make sure that the width is on hug content. So that way it enables it to take the shape of any text that you put inside it. So if I put it on hug content, for example, and I add padding, it expands it. But what happens again is that it expands it and the other components expand as well. So it means that we're not going to have the same thing. With this. So it means that our navbar is not going to be the same thing because the spacing between Vehicle, Energy Charging, Discover, and Shop on the alternate navbar or the secondary navbar is now different from what we have here. So when we do this hover effect, we are not going to get the same effect. Now I have just realized that if we wanted to achieve this effect, we should have planned for this at the very beginning when we're creating this navbar for this one. We should have planned for it at the very beginning when we're creating the navbar for this one. And remember what I said about components— because we didn't make this navbar a component, now any change we make to this would not reflect here. So we're gonna try to fix our mistake by coming back here, and— or we could fix our mistake on the black one. So we come here And we'll make this, make this entire navbar a component. First of all, that's the first thing we need to do. We need to create a component and make this entire navbar a component. And we call it, um, secondary navbar. Because we already called it secondary nav, let's change it to, let's change this to Draw, right? So now let's try to fix our mistake, or let's try to fix my mistake. When we come here now, what we want to do is make sure that— first of all, I'm going to try to put this under a white background so that I can see exactly what I'm doing, and so you can see as well. What we want to do here is to make sure that We already consider this padding that we have here from the master component. So what we can do here is to add this padding to say, add it, add, make this for the vehicle component. Since it's already in an auto layout, remember to add an auto layout to this vehicle component. Add an 8 to it. But again, because it's fixed, nothing is going to happen. It is fixed. So I can come here and I can change that to all content. So once I do that and change that to all content, I also need to add a padding at the top and at the bottom. I can make that 4. That looks close to what we have here. It feels more like it. But this feels more like maybe like even maybe 6. Yeah, 6 feels too much, so I'll, I'll choose like a 5. But it definitely feels like what we have on the side. Actually, it feels more like 10. So now that I have that, if you look at this, right, you can see that this shop is bleeding out of the frame here, and that is because this is also fixed width. So we are saying that it should be fixed, but the shop is not respecting that because we are saying it is fixed. So we want to change that to hug content so that it is going to stay within that and make sure it stays within that frame. Auto layout can be quite complex. You need to explore it again and again and again to properly understand it. So you need to try different kind of auto layout methods and also try to watch videos on auto layout to understand how to use it. But now we have that for this vehicle component here. We can create the same thing for every other one here. That is Energy, Charging, Discover, Shop. Actually, we are going to create the same thing, not because we want to do any kind of hover effect on Energy, Charging, Discover, and Shop, but because we just want to make sure our designs remain clean. So I'm going to come here and I'm going to duplicate this and make it— so I'm going to do that. So I'm going to change this back to energy. Make sure that it is centered. I don't need to do that actually, because if I make— if I create— make this vehicle a component, I can edit everything that I've done. Charging. Discover, and then Shop. If you've been following, you probably understand why Charging and Discover is broken like that. So the reason why Charging and Discover is broken like this again is because it is fixed. You can see it is fixed. If you click that, it is fixed. That's why it's broken like that. And remember that everything was from vehicle. That's where I copied the original one from. So if you tap on vehicle, it is also fixed. So I'm going to come here and I'm going to change that to hug content. I'm going to come here and I'll change that to hug content. So now it is no longer fixed. So if I go back now and I go back to my navbar, I can still add some spacing in between because this spacing looks like it's a lot. I can come back and add my spacing and make it like a 24 or even a— I think a 24 is, is fine for that. So now this is my new navbar, right? So now I have my element here and now I can easily create the background that you see there for. So I can easily come here and create that slightly gray background. So once I've created that gray background that I have there, I think it has a bit of like rounded corners as well. So I can give it like a rounded corner or like a rounded edge of like 4. And now I have these variants of my navbar. So if I go back here and I look at this, I see that as well. But when I went back to look at it now, it feels like I need to add just a little bit more to, to it. Just a little bit more spacing to it on the side. So once I've done that, I now have my secondary navbar, right? Remember that this is a component already. So I'm going to create what we call a variant of that component. All I need to do is tap there, come to main component, and then add variants. Right now the variant of my component would be this one, the white variant that I have here. I don't need this one anymore because this was the wrong one. So what I'll just do to this variant is I would come here and what I want to do is go to selection colors again and change all my blacks. To white. And then after I change all my blacks to white, there's a gray here that I don't need on this side. So I'm going to come here, come to the gray here, and turn it off or press minus. So I don't have that gray anymore. I also don't need this white background. For both cases, I don't need the white background. So I'm going to come here, I'll copy this I'll paste it here. Of course, it's pasting as white because it is white on white text. So I just have to come here and turn off the fill. So now I have my new navbar. If I want to make any changes to the navbar, I can make it here. It's probably good to make the background of this one black so that it's easy for me to see it. And leave this one as white. If I want to make any changes to my navbar, I can make it here and it automatically reflects here. So if I made a mistake like I did before, I wouldn't have to start creating it again. I can just fix my mistake here. So I'm going to do the same thing. I'm going to copy this one, which is the master component, and I'll put it on our drawer frame. Right. So once I put that on our drawer frame, it means that every time that I want to access this drawer frame, We're going to have the vehicle component here as this particular shape, just the same way we have on the website. So now let's go ahead and add all of these cars. You guess, you already guessed right, everything here looks the same. So we're going to create one component and we are going to update that component. Maybe the only one we won't create a component for is this one that has 2 cars that kind of look smaller. We're going to create one component and we're going to do that. So that means we only get to do our designs once. So what we do now is come here and we can draw a frame here, right? Or just bring up the frame, draw that here. You can fill it as white for now. And what do we have there? We have the first one is a Model S. So we go into our files and we go and grab the Model S, which is this, right? Drag it onto our file there. Just copy that away and then bring it into this frame. But it's so big, so we have to reduce it and we have to make sure that it is within the frame as well. So whenever I want to make sure that something is within the frame, What I just do is I press X and I cut it and I paste it in the frame itself. So now I can be sure that this is right within this frame. And to confirm that, I'll move the frame around just to be sure that the car is in there. But when you look at it, um, this with the size, we need to definitely get it right. So we have the Model S, so we're gonna bring our text And write the Model S. I think the text for the Model S is a B1 text. And then we have Learn and Order. So just come here, duplicate this and write Learn. And then we also duplicate this. And write order. This is going to be underlined like we have here. So we just go to decoration and pick underline. Also, the font size for length and order is the smallest font size. So that's going to be our B3. If you look at it, we can do this. Put this one together, put them in an auto layout. And change the spacing between them to like 24. Actually, I think the spacing between them is much closer than that. I think the spacing between them is more like 16. Make sure that it is in the center, so it's center aligned. And the color as well, it is not a full black color, it is like a gray color. So come here now, and we can come to the color selection here to change the color, or we can change the color individually. I just find color selection to be faster if I know that I'm using the color all through. So this feels more like what we have there. So we add that with the Model S as well, and then we add it as another auto layout, and we put the spacing in between that. Look at that, the spacing is about maybe 12. So we have the spacing in between, and then we have this, um, we have the, the spacing between the car And the Model S as well. It's probably time for us to put this on the actual design itself. We don't need this background, honestly. We just need to put this on the actual design itself and see what it looks like when we do that. And again, we're going to do a lot of eyeballing here. So we have to move the car away from the A. So I'm using this Tesla logo, the A in the Tesla logo, to judge the distance between the A and the car, and then the height as well. Yeah, that's some serious eyeballing job there. That looks like it, but it feels like the car is a bit bigger. But honestly, I won't be bothered by that as much. I should probably have started from the Model X because that gives us some alignments with, um, the top nav here. So I can move this towards the Model X Create Duplicate. Before I do that, all I just need to do is make this a component, create a component out of this. It makes things super easy for me because if I feel like my alignments are off, I can always edit it in the components. So I'm just going to name this quick navbar cards. So I'm going to copy so that I can create an instance of my component, and I'll come here. I need to move this a bit from what I can see there, and then what I can do now is to Yeah, so the Model 3 looks a bit close to it. Do the same thing here, and then I'll do the same thing. How many cars do we have there? We have 4 cars at the top there, so I'll do the same thing there. And then we have the Cybertruck at the bottom here. Yeah, that looks like it. So let's start with the Model X, the white car here, because that's going to give us our alignment because it's right under energy. Already we can see that it feels like we are off because the third car is right under energy, but that's not what we have here. So what I'm going to do is come here, click this, and then change this image to the Um, white car that we have there. So we have that. So let me change all of the cars first. So we have the Model S, we have the Model 3, the Model Y, and then the Cybertruck. So let's do it for the Model 3. Model 3. The Model 3, that's the red car here, and then the Model S. So change that to the Model Y, which is the blue car. And then we have the Cybertruck at the bottom here. So I have everything here. I didn't do— I didn't really do anything much. All I just did was to make changes. I haven't changed the text yet. So this is going to be Model 3. This is going to be Model X, I think. This is— so we have all of that, but if we want to really align it to look like what we have there, definitely it feels like the cars are a lot smaller than I've actually represented here. Because from like the design that we have there, the Model X is right under this energy tab here. That's where the Model X is. So I've moved the Model X right under energy, but if you notice, every other thing is moving to the side here. So all I need to do is just make sure that this is smaller, right? First of all, make the car smaller, and once I do that, the cars will adjust everywhere. See that? So once I do that, the cars are just everywhere. So that means I have smaller cars, and then that means I can adjust the spacing as well. Also feels like this entire frame It's a bit too big for like each car. So I can reduce this frame in the master component. I can reduce this frame in the master component from the side like that. I can make sure that it's in the center of the frame. This car is in the center of the frame. And then this is also in the center of the frame. All I'm doing is making this change on the master component, and that is the power of components. Now that I've done that, I can then come back here and adjust. So make sure that this one is falling right on the energy, just like this is. I can come and put this here. It's falling right on the energy, and the nose is just Also here like this. At this point, it feels like I'm trying to make everything so perfect, so I'm going to stop doing that now. But before I stop doing that, I'm just going to make this a little bit bigger, just a little bit bigger. All right, so now I'm going to stop being a perfectionist. So I'll move this here, which is what we have. If you look at it, yeah, that's— that, that looks very close. And then I'm still gonna move this here, but something still feels off. Like, it feels like the distance is just so different. Maybe my Tesla logo is too big. It's very possible that my Tesla logo is too big and that's why we're having this problem. I guess that's a problem that we're going to have to live with, guys. That's a problem we have to live with. So let's keep going so that we can get to the other parts of what we're trying to do. Because if you look at this shop, it's just right here as well. Yeah, I don't like the fact that this is not giving us what they actually have as perfectly as I wanted to. Trying not to be a perfectionist, but it's hard. Yeah, I think we're getting there. Yeah, I think we're getting there. Yeah, this feels more like it. So I've adjusted all of it now, and then we have the Cybertruck right there. The last one is the 2 cars and then the Help Me Choose option. I think I can use the same component honestly for that. I just need to make sure it's aligned, and let's see if I can use the same component. I think I should be able to because those 2 cars are just like smaller cars. Yeah, they work perfectly. So then I'll just change this to help me choose. Again, remember the reason why this is happening is because from our master component, this size It's not big enough for a long text. So we can increase the size of our master component. And once we do that, that actually works for us. And we'll change this to— remove this now here. Once you remove that, because it's auto layout, that just adjusts automatically. That's the beauty of auto layout. Get started. So that's done. Now the last bit, the last bit in this navbar, the second navbar, is the menu that we have on the side here. So we have Inventory, Used Cars, Demo Drive, Trading, and all of that. So we're going to create that quickly. First off, we have a line here that just sort of divides it. And comes all the way down like that. This line is just a really thin line. I don't think that's— yeah, it's a really thin line. So I'm just gonna eyeball the color right there. And then we have inventory here. So let's just write that out. I'm going to write this just once. And then I'll duplicate the rest and edit it. This looks like, uh, B2, honestly. Probably smaller than B2, but this is fine. So we're gonna create this, put this into an auto— put this into an auto layout, and then that gives us the opportunity to be able to add this and just press Ctrl+D. And then we have all the other ones there. And if you look at it, how many do we have? 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11. And now we have 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11. So we can take out the last 2. You can take out the last 2, and we can have more spacing between this actually. We can still have more space in between it. Yeah, then let's see, 18. So now I'm just gonna breeze through the changes. All good. So we have our drawer navbar. Now that we have that, the next thing we're going to do is to look at how this was actually animated. I think the most interesting part of this website, aside from just scrolling through, is this animation. Because what happens here is that this comes out and then this background blurs, and then the cars don't just show up, the cars actually bounce in. To the frame. So let's see how we can create that magic. This is where we get into another interesting part of Figma, which is where we get to create a prototype. So to create a prototype, we have to think about this in different screens or frames. We have to think about this in different frames. So if you go to the animation, you see that This is one frame where you can obviously see everything that's happening on the website when you scroll. And then when you hover, that's— this is one frame. That is basically the frame that slides out the drawer. But for everything that's happening with the cards and the way they are bouncing out, those are all frames. And those are all different screens that are sort of linked together, connected together. So let's try to see how we can animate that. So I'm going to create— I'm going to duplicate this initial screen here. And then once I duplicate that initial screen, what I want to do is I'm going to add my drawer, copy that and paste that on that screen. Right. So once I do that, I then have the navbar right on that screen. So it just falls right there. Bam. Like that. What I then have here is a very basic prototype that I'm going to create now. If I pick this and I go to prototype and I click interactions, right? And I come to on over and I come to while hovering, right? If you look at it like when you're hovering, you hover on vehicles, that is when this actually comes up. So if I come here now and I click vehicle, all I need to do is come here and connect because I've already clicked prototype. All I need to do is come here and connect vehicle to— so I'm going to connect vehicle to this screen right here. If you look at it, it is connected right there. Or I can decide to choose vehicle and go and create the connection here. So I say you should navigate to MacBook Pro Skin 2, which is basically this screen. I didn't name it, I should have named it properly to get that. But if you notice, it is saying that this should happen on click at the top here. But in the actual interaction, what happens is that you hover on vehicle and then that pops out. So we're going to change that to while hovering, right? So now let's see what that looks in the animation. So if you click that, then that comes out. But what happens, it doesn't feel smooth. It just feels like one really— yeah, it's not exciting at all. So we can go back and try to make this look a bit more exciting, which is what they've done there. It looks like what they did here is this actually comes out while the background remains static. From what we did the entire page comes into the screen. But in this particular one, it is just the, um, drawer that comes into the screen, and then this gets blurred a bit. Let's try to achieve that blur effect first. That's the easiest one. So come here, tap that picture for the, um, hero section, and come to Effects. Click plus under Effects, and then change this drop shadow to Layer Blur, and we can change the blur. If you notice, there's a little bit of blur there, but that's not enough. We can try 10. It looks like it's a 10, or maybe even a 15. That feels more like it. It feels like between 10 and 15, so I'll try like a 13. So we've gotten that blur effect. The next thing you want to do is to see how they actually achieved that, um, effect of, you know, the drawer coming in. So I'll go back here again and then I'll go into my prototype and I'll go and click vehicle and then I'll plug that vehicle to this prototype, to MacBook Pro 16. Right. You need to make sure that it is actually touching the frame of the prototype. Or you just make your change here by clicking the prototype here and then checking this and making sure that it actually touches, it actually points towards MacBook Pro 16. And then I'll change this from on click to on hover. So that's while hovering because that's when that effect comes up. And then I think the effect is a smart animate effect. It is not a move in or push in or slide in or slide out. Effect. It is a smart animate effect. So let's see what that looks like now. So I'm going to come back, I'm just going to come back here and I'm gonna press play. So when I hover now, yeah, it's giving me that effect but not like the way I want it because it's too slow. It is too slow. So I just go back now And come and click this and go to the settings, which is already showing here. And that's because it is on 3,000 milliseconds. So I'm going to change that 3,000 milliseconds to 300 milliseconds, and then we'll try again. Go ahead again and press play. So when we go now Yeah, that feels more like it. That feels more like it. It feels more like what we have there. I think we can just add a little bit of delay. Maybe that will give us what we're looking for. Maybe instead of 1/8, instead of 800, let's make that 1,400. So we have that. Yeah. It feels more like it. Feels more like it. Not perfect, but it feels more like it. But yeah, we're moving on now. We've, we've said that we're going to try not to be perfectionist while we're trying to do this. Now there's one more interesting animation, and that is how these cars actually bounce out. Like if you notice, the cars just sort of come into the frame. It's not like this looks static. This looks static. That one has like cars bouncing into the frame. And like I mentioned before, it basically just means that each car bouncing in means different frames of like the website. So we're gonna create different frames of this website to have that represents all of that animation that we have there. So create this. So I'm just duplicating by clicking Option+Shift and drag. Um, so what I'm trying to do now is to have these 4 cars bounce in. This car comes in first, this car comes in second, this one comes in third, the Model Y comes in fourth, and then the Cybertruck and help me choose kind of comes in together. So I would need to have about 5 frames for that, or maybe even 6. I think I should be fine with 5 frames for that. I think 6 frames is what I would need for that. Actually, 5 frames should be fine. 5 frames should be fine. So I'm going to come over here now. We're going to have— we're going to delete these frames because the very first frame would have just one car coming. The next frame would have 2 cars coming. So we'll delete this one. The 3rd frame would have 3 cars coming. So we'll delete the last 4, the last 3. The 4th frame would have 4 cars coming. So we'll delete the last 2. And then the last 2 cars will come in together. Now what we're going to do is that we're going to use the same prototyping animation to connect all of the screens together. Since we have this one, this is going to bring in this frame which is one car. But we're going to go to prototype and connect this screen to this one. But make sure it is connected. As you can see here, it is connected. And then we'll change this to after delay. So what we are saying is that after a delay of some seconds, move to the next frame. So we can change this to an after delay of maybe 200 milliseconds because the screen itself comes in at about 800 to 1400 milliseconds. So we can change this to an after delay of about 200 milliseconds. They're going to be like really quick in between. And then we can connect— we'll do the same thing for this frame. To this frame. We're going to also connect them together. We're going to also connect this frame and this frame together. Make sure that what you're connecting together is actually the edge of the frame itself. So you have to connect to the actual frame. And sometimes the best way to do it is just to go to Prototype and go to Clicks and then go to Navigate To. And then click the next one, which is going to be MacBook Pro 4. So that makes it easy. So you see that connection there, and we can do the same thing for MacBook Pro 4 as well. We're going to go to interactions, we're going to go to navigate to, and then we're going to say it should navigate to MacBook Pro 5. So it's going to go from 4 to 5, and then we're going to do the same thing for 5 to 6 as well. So we're going to go to interactions, we're going to go to navigate to, and that's going to go from 5 to 6. So 5 to 6 is connected, but remember we need to change this to after delay so that we don't have to click the prototype before it changes to the next one. So we're going to change this to after delay, and then we are also going to use the smart animate, not instant. For it. Um, and we'll change this to— we used 200 for the very first one, so maybe we can make this maybe 240, even faster, maybe 160, right? And then we'll do the same thing for this as well. We're going to change this to Smart Animate. And then we'll now make this a bit faster, a bit slower than what we had before. We had 160 before, so we now have 180 here. And then we come here and we change this as well. Make sure it is set to after delay, which says change to smart animate. And then we change the time as well to we can use the same 200 here. So just make sure that you have everything set to after delay so that your animation can run all through. Animation can be quite tricky and complex, so you need to make sure that everything is fine because it can be difficult to track where things are, where things go wrong. For example, I didn't change this one to after delay, so I'll change that now. So I have this now to after delay as well. And then I have this one to after delay as well. And I have this. So let's play our animation and see what it looks like. I'll be surprised if we get it in the first go, but let's try and see. So we have that there. So click this and then you can see that coming up, but you can see that it's too slow. It's too slow. It's too slow. And it's not giving us like that sort of bouncy vibe. And what is basically happening is that the time delay between each one is just too slow. So when I play the prototype now and I go up here and over here, you see that bouncing out. And then when I pre-prototype, when I pre-prototype and I go up here and over here, and then I come down here, you see that bouncing out. It is not as smooth as this. It is not as smooth as this. I'll be honest. This is like really smooth. And there are just some things that are just so hard to achieve in a Figma prototype. That's why you have other prototyping tools like ProtoPie or Origami that can be used to achieve like Pixel-perfect prototype that actually shows what you're trying to achieve. But this is what we're able to get here. I'd love for the cars to be able to like bounce in more, maybe just a little bit of delay between how the cars actually come in. But this is our website. This is the landing page. This is the Cybertruck. This is the Model Y. This is the Model 3. This is the Model X and this is the Model S. And if you scroll back up, you can hover on it to have like your animation. Come out. I hope with this tutorial you can create your own designs in Figma. Now let me know if you have any questions in the comment section. If you'd like to see this exact same website designed in a different tool called Penpot, then watch this video next and I'll see you there.