Tesla Website Design in Figma: Step-by-Step Tutorial (Real Time) | Figma Landing Page Tutorial 2026

Hi, in this video we're going to recreate Tesla Model 3 website in Figma starting just from this to this step by step without editing just a pure design. So starting from the beginning I think we can choose the model 3 performance because it have the best graphic uh our MacBook screen. We can change the size a little bit. make a frame inside this and we can fast this design here. Okay, I think it's it's okay. So, we're going to start with the navbar. Uh, as you can see, we have the white text in navbar. So, we need to change our logo. It's going to be easy. We need to create rectangle. Uh do a mask. And right now we have our logo in almost every color we want. We want this in white. Also we have five links and icons. So let's get started with links. Of course we want to going to work on outer layout. can be semi bold, something like 14. And as you can see, we have three icons. So, the easiest way to find those icons going to be go there uh look for globe. And I think this one is it's really great. Uh so, we can take this set. So as you can see we have icon set aar icons. We go there a icons and we have really great matching set. We can import as a frame. So as you can see it's important here. Uh also we have question mark and user. So okay we have question mark but I can't find user so we need to go in different set Okay. I think this one going to be great. Okay. And we have all of them. So, right now, make a group of them. Let's make this like that. change color. Okay. Copy them. Add them here. As you can see, we need to uh make auto layout here. I'm going to be 64. Or maybe this one. Get this out the layout. And let's change some positions. and shop. Okay, let's make this way. Also increase the the padding maybe to to this one. Okay, as you can see, probably they using something like medium, not semi ball. So, we're going to change this. Yeah, I think that's that's great. But as you can see, the middle of that navbar, it's not exactly in the middle. So the easiest way uh easiest way to to do this is look here we have uh 104 pixels of this one. So we can take this logo make a frame of this maybe without layout and we can go for also 104 pixels and we have exactly the the middle point of the navbar is exactly on the middle. Okay, the next step it's really easy. We need to create a heading. That was a model 3 performance. Can just copy all the textes. Copy this text here. Okay. And as you can see, probably the font of that is something like 64 maybe. Yeah, I think this one going to be great. And we have two buttons under this. So, let's copy this. Change this font for maybe 16. Let's add some padding. Um, we can go for eight and 16. I think uh the border is going to be four. Something like that. Um, let's take the colors. So, that's the easiest way to take colors by copying them. And as you can see, our button is not exactly like Tesla made this button. So, we can change the text. And I think this here should be something like that. And it's too much. Maybe 200 or something like that. Okay. I think we are really close right now to this one. And in this one we can uh just make this and okay change text. And as you can see we have two frames. So right now all we need to do is fill like this and add some padding from top and also inside this. Uh we need to add some padding. Maybe something like that. Okay, it's it's pretty close to this in my opinion. Right now we have two two buttons. So let's create them. go there. We can go for this one, I think. Let's check. Yeah, they have a little bit of border radius. And when we have that let's make component to go like this. Okay. So we have to add extra frame because without this there will be more clicking inside. So let's change the size of this. Okay, you can add them here. Maybe we can change it a bit. So go for 24. Maybe something like that. And as you can see, they are not exactly white. So we can copy them make auto layout change them in this way go like that. Okay. And add some padding from the top also from the bottom. I think they are exactly at the middle of this. So there are two ways to to do this. First one is take this and trying to uh match exactly with the padding. But the second one is we can go for position absolute and when we have that and we are inside this frame. If we click this, we have exactly middle position of of the frame. And also we can change uh the opacity of that flame frame to something like 80. I think that's going to be really similar to what I added there. And at the end, we have three small dots. You can add them there. And right now we have when we have something like that we can go for fill and add our buttons there fill in this way also. And we can go all white and change the opacity of those for six. And right now we have top section of that website. Of course, we can try to do some improvements for our practicing is is enough. The next section is mid model 3. So, we can copy the heading and things there. So, can delete also this. So, let's put this here. those that's text there and when we are here we can uh frame for this section. So let's get started there with the content like that. Let's go copy this couple times. As you can see, we have this. And the last one is this. And as you can see, we need to work a little bit at those textes. So when you have that, this can be this. Let's go with this to this. And okay, we have something like that. Let's add some padding. Also they made uh different color there. So we also should follow that. Maybe you can copy this section and just take exactly this color. And after that we have something like that. So how to make this? Uh first of all, we can copy this to stop uh jumping between those uh those tabs and let's get started. So we have a frame with the graphic, but we going to back to this in a few seconds. We have text and our plus icon. But yeah, we can look for a plus icon like this. I think this one going to be great. So, we can import this and Okay, looking at this side, we can go for Yeah, I think 8 pixel is going to be great. Add some uh auto layout. And this frame there like this. Okay. And we can go like that. Convenience. Um you can change a little bit size of this. I think this more like 40 40 fill. I know you can you can see I'm doing something but okay as you can see we have drop down and we have shadow something like this but this one is more more in the corner than we have this. So that's going to be maybe something like that. So from this way also and they made something like this and okay right now we can copy this element few times. We have this. Okay we have safety. Safety going to be easy, but that's going to be that's going to take longer. Okay, this is enough. Right now, we have we have to copy those uh images. So, we can go there. You can find those images pretty easy. And the last one. Okay. And when we have that, we can copy them. Go there. Select this. And we have, as you can see, we need the white text here. So, I'm going to change this. That was the second one. And the third one. Okay, we have that. We don't need to uh care about the about this element. Maybe in the future when we're going to make a animation of this, but right now we need three of them. As you can see, we also have dots here. So, we need to make them. But I think it's going to be better to make them in next step. So, we paste this here, maybe there to to have a great position of that. And as you can see um we want to have our uh content in different position. So we can do something like that. Also we can increase the height of this frame to something like this. And we have some problems. For example, it's problem with the size of our cards. So, we need to change this. Can change make this like this. And oh, too much. Maybe something like that. That's going to be great. Also, as you can see, the padding there on the left side, it's not perfect. So, there are a few ways to to improve this. For example, we can go for something like that and add some paddings. I think that's the best option right there. But as you can see, there is problem right now with this text. But we can go for this fill the content also. So we need to care about. Okay. So like that. And we almost there. Just increase padding here. Maybe more. No. Something like that. Maybe a little bit less. Right now also we have add those dots. So let's create one of them. Put this here. Uh, change the size to 16. Make some copies of them. Okay. Something like that. Fill the content in the middle. Okay. Right. Now, go there. Okay. And we can change the color of all of them. But make few of them with lower opacity. And change this to this and frame there to decrease the the padding. And yeah, we have second section of this website and we can go to the another one explore model 3. So we can copy this easily but maybe only add uh some paddings there globally to 64. I know Tesla use really small padding there, but I prefer when we have more space in our website. So, I decided to to add some padding to this. After that, we can go explore model 3. As you can see, we have new element there with tabs. So, let's create that. We can use this text So let's delete this and okay to make this the best way going to be put those text is here free premium premium and okay we have something like this okay and the easiest way to make this is recreate this white button and add the a little bit border to other elements. So we going to care about the perform we can delete this because it's not important right now. So looking at those elements, we need to have a I'm going to do something like this and change the background color a little bit. And okay, here we can go for a few pixels of padding. I think it going to be great in this situation. And right now we are working. Maybe add some padding also and change the font to to this. Okay, I think we in a great position to to copy this. And we're going to take the color of this here, the color of those elements there. As you can see, we also probably have two two big phones right now, but maybe in a maybe that's going to change. Change this a little bit. Okay. And when we have this performance, we can go for 16, maybe 12 to 24 or something like that. But you're going to see that we're going to change this. Let's make exactly uh same padding for those elements. Maybe even bigger 32 or 48. But probably all of them have the same size as you can see. So we can go for this performance size to either of them or go just for 200. Okay, it's it's okay. And right now can make this position absolute. And as you can see we have two big padding here. So change this for maybe four or even I don't know where. Okay. It's interesting. Okay, there we have seven like that. Okay. And we can go there by four. Four. And let's go for eight. And as you can see here, we have a really small shadow. So, let's add that. Okay. It can be it's going to be a really small difference, but at the end you're going to see that maybe it's not the best idea to to delay this right now. Okay, I'll add a little bit more padding. Okay, we have this element. I think it's really great right now. And right now we can copy this element. And we can see how huge this image is. It's it's enough for for for us. Uh and to copy this as a background, we need to add a color and do something like that. Okay. Okay. We have something like that. And as you can see we need to make this section. So that also going to be easy. So let's copy this model 3. Also we need few more text as well. But let's cop this model free performance. It's great that we use inter because as you can see this font almost have everything and we are really able to to make great copy of that without looking for other fonts. So when you are when you're starting I think in is a really great font but also if you are junior mid or senior designer I think in is also a great choice. And right now we need those numbers here. So let's make one of them. So this is HP I think. And then take the big power and to make this like this. I think we can go for oh maybe more than 24. So like went like this maybe 16 but in that way and okay we can go for something like that. Yeah that's okay. Oh, sorry. We have the speak power 16. I think it's a Yeah, that's the normal font. So, switch to medium. Maybe regular. I think medium going to be great. Make padding like this or maybe less. Okay, it's enough. I think we can go maybe 14 pixels to have that effect. Okay. Right now the color we can copy exactly color from there. Okay. Let's copy this. Okay. You can make a line like this here. Just change the color of this line to something like this. Okay. We have something like that. And as you can see the padding there is really huge even bigger than there. So the best way to do this going to be I don't know 400 maybe. Yeah I think that's going to be great. Uh but as you can see we have problem there because it's too big for for this padding. But we going to change something maybe this to make like this. And I think we can go for for something like that. Check the position. It's okay. Maybe even four. Let's copy this element there. Okay. Go like this. Out. Okay. It's It's too small right now, but that's not the problem. We can change to something like that. Oh, okay. That's going to be enough. Let's make a out. Add some padding at the bottom. And as you can see, we have another another section. We can add like this one. I think the still we have too much padding there. So change this to four. Yeah, I think it's it's it's enough 60. And the last one, the top speed. Okay. I think it's it's great. The next one going to be the video. So that's going to be really really easy. I'm going to go into this video and copy video frame. And as you can see, we have also a button here. So the easiest way to make this going to be create the frame. Paste there this frame from the video. Let's move the size of this like that. I think it's really close to the border. So, we can go for something like this. Minus, I don't know, 96. I think that's going to be great. Yeah, I think it's okay. Then we have this button. So, we need to have the play button. I think this one going to be great. Copy as a frame. We need to add this button there. Uh we can make auto layout, but it's going to be great to copy this. Yeah, as you can see, sometimes auto layout uh destroys everything. And okay, let's make this button visible. something like that. Uh I think the size of this going to be like that. We can add some to make position of this there. Yeah. And also this one. Okay. Here we have almost what we want, but we need to change the color of that button. And also, as you can see, the height of this video is higher. So, let's make this 800 something like that. Okay. Also, under video, we have this section. So we need to add this also. Let's copy this element times. Copy the text. And let's change size of it to this one. Like that. Let's make frame with this. Change the padding also. You can change padding there to to something like that. Change the content position to this. And maybe something like that. Need to work a little bit about on this text because it's not semi bold. It's more like medium also with this color. Yeah. But there are bigger gap between those. Yeah. Maybe something like that. Okay. But right now I think we need to change this a little bit for for more like that. And I think this section is is okay. You can check because uh this text is well it's not pixel perfect as you can see but almost in the the same line. Okay. And as you can see, other elements are really easy to to make because this is almost everything because this is almost that but with bigger padding as you can see. So all we need to do is copy this and also increase the height of this frame. And here we have padding like that. So we can go for this one. Also delete this padding and make padding for that whole section like that. And when we have that, we also need to take this video. So let's copy this frame. That's there. That's there. Let's add the Let's add this text here. So, as you can see, it's really easy. We can copy this element second time. Take this image, pass there, paste there. We can now delete this button because this image not a video. Take this copy there and also copy this. And as you can see we are almost in the middle of the website. The next section is copy paste of this one. So, as you can see, when we have a great beginning and when we make some maybe not the components, but some parts of this website, we can really easy add the next part of of content without a lot of work as a designer because doing this part because doing this section is just copy this, pay this, paste this there. Delete that icon and copy text. And we have have this really easy. But as you can see right now uh there is really small padding in our case but Tesla have a huge padding there. So you should follow that and add this. Okay, something like that. Also, as you can see, they use bigger padding there. So let's add 64 to those elements. And we have more more space. We can also add some space here. Okay, when we have that, we can go to the next part. That also going to be easy because as you can see, this thing is just the smaller version of this. So, um we can copy that and make exactly this. So we can copy this image, paste this image there. In this case, we should um delay this frame and just work on a image or on rectangle with image because that will be easier. So we're going to make this copy this. Okay, we can we can delete that. And let's make something like this. As you can see, we can uh maybe not delay the sping, but okay, change this way. And I think it's like 17 or I mean 700 on 7 maybe 500 oh something like that maybe even more like 800. We can see the the text is smaller there. So we should change this to to something like that. But this text is the same. And as you can see, uh Tesla have a better lane height than we have because we use the auto. But in other videos, we're going to work on this. And right now when you have this element we need to copy make them in this way. And as you remember we can go for something like that. We can make another frame. Ctrl A. Fill this and add some padding. So that's going to be exactly in the same column as we have this text. So in our case that's going to be 128. Add some padding on top on the bottom. Even more maybe like like this. Yeah, that's that will be great. As you can see the padding there is also smaller on Tesla website. something like maybe maybe this. And the image is a little bit higher. Okay, like that. And we can copy this text and this image. Okay, as you can see, we have almost same layout. Maybe there there are some small changes because uh I think they have more wider this one something like that. So that's going to be yeah almost exactly the same. Okay, we can also add the the button there. So, as you can see, we can copy element that we have or maybe just take this one. We can paste this here. Make this as a absolute element and take this 64 pixels from from border. Okay. Okay. When we scroll, as you can see, uh Tesla use the same design as we did on the top of our website because this section is copy of this one in design. So, we're going to make this uh and as you can see that's uh I don't know 15 time that we reach our limit in pixel. So the better way going to be this and add some padding at the bottom. So we are not going to facing this problem anymore. We can copy those text premium interior. I'm not going to copy every text because it's not necessary. We can just copy images and that's going to be enough in this case. So as you can see copy this paste there paste there the second image also. No maybe you can copy headings. Maybe this one. When we scroll down, we have another same component with the video. So, let's make copy of this. Move this to the bottom. And as you can see, the hardest part of this right now is just to get exactly a frame from this video. So, so as you can see in design, it's really important to have great foundation of of what you do because when you look at this website, it's look really premium, really professional. But when we trying to recreate this, you can see they only have few or they have three or four sections and they copy them, copy them, copy them and this stills looks great because the the core of section is is really great. So it's really important to have attention to the to detail. Okay, we copy this frame. Paste there. Okay. Oh, sorry. You can copy the You can copy the heading. And finally, we find something new. this section. So, that's going to be a little quiz for you. Which section of those we can use to recreate this? I give you couple seconds. And yeah, this one uh probably you think it's not the same, but I'm going to show it's really close to this. So, let's copy this. We can delete this one. Uh, let's add some colors to this here. Okay. Make this like this. Something like that. Also, we need the icon. This one is pretty close. Maybe I can go for something better. Uh, yeah, this one is really close. Okay. And when we have this icon, you can paste this here. Okay. Change the size of it to 48. In my opinion, that's not enough. That should be something like 64 or maybe something like this. Okay. Add some textes. Okay. There is a problem, but we're going to fix this. One second. Okay. And as you can see, we have almost this element by copying this. And the problem is we can delete this one frame. Make those elements like this. Copy them. Make all of them on field. Uh, add some padding. Maybe not from the top. Oh, sorry. Maybe not from the top. Not like this. And yeah, I think the font that we use is too big. So, that should be something like that. And okay, as you can see, we have the same padding to icon like and the same padding to text and the icon. So, we need to change this for something like that. It's going to be too big. Okay, this one is I think great. can copy this text and this one. Okay, we need those icons. So, let's go for camera. Um, oh, I lost this. I think this one is really solid for this. And the third one is okay. Just a Okay, this one is it's it's really great. Okay. And we have icons. Let's change them. Yeah. And as you can see, it's really important to use same set of icons. I know it's sometimes really hard, but right now you can see this one uh the first one and the third one are really similar, but this uh front-facing cameras is terrible. Uh I mean the the icon. So we need to we have two ways for this because as you can see the the the problem is that the stroke of the A and the steering wheel is bigger than the camera. So we can try to improve this by own like this. It's not perfect. I'm not happy with the idea of how we make this. Maybe change this a little bit. Something like that. Uh it's not perfect, but for our use is enough. Okay. And right now we can change also this padding to something like that. Okay. And as you can see, we made the whole website of the Tesla Model 3 in Figma in 1 hour. Of course, we have some details here and and the footer, but it's not that important in my opinion. But we made the whole website in Figma just from scratch. Tell me what next website we should build. Thank you for watching.