Figma Web Design - Build Like A Developer, Generate Code With AI

1. Introduction: Hello and welcome to this class on Figma Web Design for web developers. I'm Christopher Dodd. I'm a freelance web developer and top teacher here on skillshare.com, covering all things, web development and online freelancing. In today's class, we're going to approach Figma not as traditional designers do, but from a web developers perspective. If you're a developer who wants to learn design, but also cares about clean structure, responsiveness, and being able to generate usable code, this class is for you. We'll cover the basics of working with Figma how to set up responsive layouts using auto-layout components, and proper layer naming. Then we'll take it a step further, using AI powered tools like Locofy and Cursor to turn our designs directly into code. By the end of this class, you'll not only feel comfortable creating designs Figma, but you'll also have a workflow that bridges the gap between design and development, making you a more efficient and versatile web developer. So if you're ready to learn how to build designs like a developer Figma, click on to the next video, and I'll see you on the inside. 2. Demonstration: Alright, so here I have the web version of the program Figma. Figma is a program you can run on your computer, or you can run it directly in your browser. I'm currently on Google Chrome, and this is the web version. But later in the class, we are going to download the desktop program because we're going to use the MCP server. In the next video, I'll show you the basics of FGMA and take you through the program a little bit better. First up, I want to start the class with a demonstration, which demonstrates the premise of this whole class. Okay? So right here, we have a design for ecommerce website. It's called Dog Box. I found this through a job posting on Upwork. So as you can see here, it's some sort of dog subscription box. Looks pretty cool. We have a look at the Figma file. Even if you haven't used Figma before, I want you to click onto this frame or watch me click onto this frame and then have a look over here at the layers panel. Here you can see a whole bunch of groups with random numbers after them. And then inside these groups, we have other groups with random numbers under it, and we have different frames, vectors, all sorts of stuff. It's a giant mess, okay? Now, of designers will set up their designs like this because visually it looks great. And as long as it looks visually great and they can showcase that design to people, it doesn't necessarily need to be set up so that it makes sense looking at it in the layers panel. But the reason why we're going to do it differently in this class is twofold. Number one, we can't actually resize this as we would an actual webpage, as you can see here, some of it is kind of responsive, but not really. I really breaks down as we're expanding and contracting the not such a huge deal because this is a design program. It's not actually a web development program. The bigger reason why I'm proposing we set up our Figma files differently is so that we can auto generate our code using AI more accurately and reliably. So just to give you a little bit more look at this design here, as you can see, if I just click anywhere in this section, we've got a giant group that extends outside the frame. We've got another group that extends outside the frame here. This one seems to have pretty good nesting. Like, what I mean by that is the items that are visually inside the group are actually nested within the layer. Is a good idea, as you can see here. But there's no labeling and there's no use or very little use of auto layout. Okay? So now let me show you the converse. Let me show you the refracted version that I created. It's not exactly the same, but it's actually set up with proper labeling of the sections. It's broken down into its individual sections that stack on top of each other. If auto layout used everywhere, it makes sense. So here you can see the header right here inside the header, we have the left side of the header, the menu of the header, and the right side, and then we have the different things nested within there. And what you can also see is this icon here, which indicates auto layout. Now, I won't get into auto layout and all the different things about Figma. That's the topic of the class that we'll get into. But as you can see here, this has a lot more structure in the layers than, let's say, over here, the original design. And if I resize any of these sections, you'll see that it ends up being a lot more responsive because it's using auto layout, which is essentially equivalent to Flexbox in CSS. Although there is an option over here for grid, which is almost like the equivalent to grid. Now, as previously mentioned, the refracted version, if I set up all the layers to use a proper responsive container structure using components, which we'll learn a little bit later. So elements that are duplicated multiple times, those are essentially components. If I nest properly and I use auto layout, then we should get a much better result from AI tools like, as you can see over here, Locifi. Okay? So I've noticed we get very inconsistent results every time we run through Locifi. So I'm going to show you a different solution later in the class that I think works better. But for now, let's have a look at the results of an earlier test I ran using Locifi. So if we switch over to this graphic here, you can see the results of a previous test I did with this dog box design. So if we go over and have a look at the original design, obviously, this looks great. That's the original design. It looks great with infigma. I just copied and pasted the look straight into this graphic. Then I created a AI generated web page of this design Figma using Locifi and this is the result I got. So as you can see, it really starts to break down on the cards. You can see here that it just messed that up completely and the cards here as well. And certain parts it got okay, but yeah, not the best result. I refactored the webpage, and then I ran it through Loci fi AI. I got a much better result, especially on the cards. Obviously, this one's not perfect Eva, but in terms of the output HTML that I got, it was much better. And as long as we've got solid HTML to work with, making little updates in CSS is not too bad. But if the AI program gets the HTML completely wrong, that basically creates a project that I have to refactor completely anyway, so I might as well have not used AI to begin. This is the inspiration for the class, presenting a way of creating our Figma designs like a web developer with proper structure so that it's responsive, easier to navigate within the FIGmA program itself, and more translatable into actual code using AI code generators like Locifi AI, which we'll see a little later in the class. For now, let's take a step back and look at the basics of how to actually use FIGma. 3. Figma Basics: Alright, so now you can see we're back inside Figma, but we have a completely blank design. It doesn't even have a name yet. So let's click on Untitled and give it a name, let's say, test design, whatever you want to call it. And without going into the extreme detail of everything Figma, I just want to cover the absolute basics here. It's actually a pretty simple program. Once you get ahead around a few key features, and for the more advanced features, there are plenty of other tutorials online. It's easy to pick up those advanced skills a little later. But basically, what we've got here is we've got our Figma fiile here, and we can create multiple pages right here. We can't see a difference, but if I was to draw a rectangle on page one, switch over to page two. We can't see that rectangle anywhere, even if we zoomed out to 50% or zoomed in, you'll see it's on a different page. Okay pretty self explanatory, but typically web designers don't separate out web pages onto different pages within Figma. They typically put it all on the one page here so that it can see, I guess, design consistency across multiple pages. So instead to design a page, what designers typically do is start with a frame. So if I click this button down here for frame can see here that we already have some predefined frames for desktop if we're looking to do desktop. So let's do desktop. I'm going to just click desktop here, and it'll give us a 14 40 by 1024 frame. That is the standard frame that Figma has decided for us on desktop. And then you'll typically see a mobile frame next to it. So if we go over to phone, and the typical size I see most often is 390, you can put a 390 screen over here. So then you can design your mobile layout here and your desktop layout here. Okay, so I'm going to get rid of the mobile frame. We don't really need that fine. Let's just focus on the one frame. The frame is the parent of everything. Actually, that's not necessarily true. We can create a section, and that's just something that allows us to basically group together certain frames. But again, if I use that example of creating a frame for the iPhone design here, we could maybe say that this is the homepage, put the description of what page it is as the section, and then we can have our different frames here based on screen width of that page, okay? Maybe I just leave that in there. So then what else do we have to work with? So we've got shapes down here that we can add, if we want to add in certain shapes, I guess, we can draw those shapes. So these are good design tools if you are a bit of a graphic designer and you want to create icons and stuff. Obviously, our website is probably going to have text. So we could put in some text here. So over on the right, you can see, we've got a whole bunch of settings, and if I scroll down, we can see typography. So I'm going to boost up the font size of this text, and then I'm going to type in, I don't know. Let's just say heading, right? Now, a designer will typically just put that in the middle by using these guiding lines, as you can see here. And because we've got a fixed canvas right here, we can attest that this is always going to be in the middle. We could bring in some images. Typically, you might see a background image banner on a website, so let's bring in an image. As you can see here, I've got a folder here that we're going to use a little bit later. We're going to set it up the way I recommend you. But for now, let's just throw in the image and we'll place it and just click drag it, you know, ourselves to fill up the container space. Basically how it works with the visual ordering is that the hero image is going to be shown above the heading because it's above the heading in the layers panel. So we just need to swap these around and you'll see the heading comes through. We might want to change the color of that heading, obviously, because it's sitting on a bit of a dark background, so we could click here, give that a white background, make it bigger. Again, position that, make sure it's in the position there. Let's just type in something a bit more realistic. The leading sportswear. You can see here when we're not using flexed layouts, we're having to resize this and decide where we want our line breaks. I'm going to set the alignment so that's in the middle, and let's just put it like that. Again, we're going to do this design properly later. I'm just showing you the absolute basics. We can bring in an image, we can bring in text. And, of course, I'm going to use heavy use of auto-layout in this course. But as I mentioned before, most designers don't use a ton of it. There's one area that they use it a lot, and that is for buttons. And so I'll use the button to demonstrate. So we'll type in button here. And if we wanted to give this button a background color, we might be tempted to put a rectangle here. Now, obviously, we got to change the vertical positioning here, and then we've got to make it sit in the middle. Okay? There we go. Now, to make this look like more of a button, we can give this more of a corner radius, r. But the problem with this is if we change the button text like this, you'll see that these are two different elements that are not linked, and it goes outside the bounds of this rectangle. So then we'd have to you know, resize this again and then position it like that. Alright? So most designers I find use auto-layout with buttons. This concept applies anywhere within your Figma design, but for some reason, it's only really used on buttons. And so instead of putting this rectangle here as a separate element, what we can do is we can add auto-layout to. We can add auto-layout. In a few different ways, we can right click on it and click Add auto-layout. Or we can use this keyboard shortcut. I like to use the keyboard shortcut, so I'm going to press Shift A, and now if we look over here, it's going to be nested within this frame. So I'm going to rename this frame button because I like to use proper naming. And then if we click on that auto-layout, that is parent to the text, I can add a fill to this auto-layout. So we'll go down here and make it, let's say, red. Okay. Now, because this is an auto-layout element, if I make the button text bigger, you'll see the box expands to cover the background. Then, of course, I can add that quarter radius again. What did I have five pixels, and I can increase the padding right here as well. So that's not a really realistic color. Let me change that color to let's do, maybe like a gray here. Alright? And then this text, if I want to actually change the text, I need to click into the text itself, and then let's make it 36. And then what I can do is grab the auto laid out button element here, and then I could position it here, right? For the mobile design, I can do something similar. I can bring in hero image for mobile, and then I can just manually drag. Here, obviously, the dimensions don't line up. So what I could do is I could double click on this and set this to crop. Then I can just crop to the boundaries of my mobile design, which I'll do right now. And then let's just copy and paste this text over here. Obviously, my nesting is out of whack here. I've got the text and the image sitting over the frame, not actually in it. So we can actually get away with that Figma. Obviously, I'm not recommending that in this class, but Figma allows you to visually get the result you're looking for without really organizing your project too well. So what I'm going to do is I'm going to just bring that to the top and then nest by dragging it in like this, the text and the image, okay? So it's at least nested within there. If I want to change the text to be a bit smaller, put it there. Then I can bring over a copy of my button. I can hold down Option on Mac. Not sure what it is on Windows, and then I can click to bring a version of that over. But obviously, the text size for the mobile version way too big, so we're going to reduce that down to 12. Actually, I think we need minimum 16 here. Okay. Okay. So like I said, pretty simple program. Obviously, there's some advanced features, but you can just click and drag things wherever you want them on the page. The basics with Figma aren't that hard to grasp, in my opinion. The bigger skill is to actually figure out the right fonts to use, the right font sizes, the right images. It's not the design tool itself that's complicated, but design in itself, okay? So this tool, Figma it simplifies it as much as possible, and that's why this tool has become the most popular web design tool in the market today. We can just continue to lay out our projects like this, but as I showed you, not responsive at all. So if we really want this to be organized for ease of use, but more importantly, make it translatable to the web, we're going to need to take a little bit more of a structured approach. And that's what we're going to get into in the next video. 4. Build like a developer - Part 1: Responsive Structure: All right, so just to recap where we're at so far, we started off with a demonstration of how web designs typically come through in this structure of random groups, unlabeled, not much use of auto-layout. And I showed you the alternative, which is to structure our sections as if we would a webpage with proper naming and a lot of use of auto-layout. Then I showed you the basics of Figma, and we just threw together a real basic hero section on an e commerce site. I specialize in ecommerce, so basically every website I create is an ecommerce one. So I'm going to keep with this example, and let's actually build the way I showed you in this first example with the refactored version, okay? So we're going to start off the exact same way. We're going to create a section. This section is optional. But I'm going to create a section and I'm going to call the section homepage. Okay. And then I'm going to put my two frames in there. So I'm going to do a frame for desktop. As you can see here, I can select from these pre determined whips and heights. And obviously, our section is not big enough to accommodate this desktop design. So I'll click and drag that over, and then I will put in a mobile design as well. Don't like 430. I'm going to go with 390, so I'll go here. And I'll just rename these frames. This one will be desktop, and this one will be mobile. Okay. So here you can see, both visually and in our Layers panel over here, we've got a pretty organized project so far. Let's make sure that it stays organized as we build out this design. As I demonstrated in the first video, the way I'm going to create my designs in Figma is based around how websites are actually built in the real world, and they are built with responsive containers. To take a step out of Figma for a second and take a look at a very basic example on the web or just a page of HTML and CSS I created just before this video, you can see here that I've got a responsive container. Obviously, the colors and everything aren't ideal, but just to show you the boundaries of our different containers, if I was to press Option Command I and use that to resize my screen, can see here that on a wider screen size, there is equal margin on left and right of this container. And then if we get down to smaller screen sizes, that space shrinks until the container is taking up the whole screen. And if I go down to smaller screen sizes, these boxes will break onto new lines because they're flexed, and they're using flex box. So typically in web development, we have containers that have Max whips and we have flex elements within them. So that's what I'm going to be focusing on when I'm creating my figma design. And as I mentioned earlier, we can create a similar thing to CSS Flexbox using auto-layout. And we can also within any element or frame define a Max with. So if I go over here to layout on my desktop layout here, I can actually click onto this button to turn this whole frame into auto-layout. And now I have all these options that are very similar to CSS Flex. So you can see the flex direction. You can see the alignment here. You can see the gap, which is the exact same in CSS. You can also see these Chevrons appear on WIP and height. So I can click on these Chevrons and I can add a mi whip and a Max whip, and I can also choose the frame hug the contents. This doesn't make sense, in this instance. You typically use hug on height. But what you can do is if I create another frame and I put it inside of desktop here, and then I also make this frame an auto-layout frame. I can click back on this Chevron and you can see I can click to fill the container, which means that the WIP will fill the available space of its parent, which is this desktop frame, okay? If I add another frame here, it's going to put them side by side, and that's because here I've set the flex direction or it's not called flex direction in Figma, but the flow, as it's known in Figma auto-layout is still on horizontal. So for the page itself, I want to set that to vertical, and then you can see we can layer sections down the page. And if I was to just duplicate by pressing Command D to create a third frame, you can see that that just stacks on top of the other one, and if I create another one, you'll see here that it goes off the dimensions of our frame here, what I want to do is I want to go over here to heights and change that to hug contents. So now our desktop design is going to be as big as the content within it. So if I delete that last frame, you'll see that now it removes that extra space, okay? So the structure I'm going to use is we've got our overall page here, and then we've got nested within it, sections, okay? So I'm going to call this section. Let's delete the other one, and then we'll duplicate this out once we have built out our structure. I want my section to extend the full whip, so as you can see here, to fill the container. Now I want to put in my page whip container inside. So in this one, it's pretty tight because I'm recording this class on a smaller window whip. So this container is 1,000 pixels wide, which is pretty tight. Typically, you would have a container that's at least 1,200. Let's put in another frame here inside, and I'm going to call this container, right? Then within this container, what we can do is set this to auto-layout, as well. You'll see I'll be setting almost everything to auto-layout. And then I'm going to set this to fill the container. So now it's going to fill, let's zoom in a little bit, the available space. I'm also going to then click on the Chevron again and add a Max Width. So I'm going to set that to 1,200. All right. But now you can see our container is off to the left. So you just want to go up to the section and update the alignment to be center. So we'll do that and then come back to our container, and you can see that our container is now in the middle. I can actually make this a different color to demonstrate this a little bit better for you guys. So I'll make the section red and the container blue. Obviously, we're not going to keep this, but just to really showcase this and you can also see here the padding. So there's a little bit of red coming above and below the blue section, and there's some white peering through on the section. We want to be very intentional with the padding. We don't want the padding to just be the default. So on the page itself, the desktop layout, I'm going to remove the padding on either side. The idea is to have the section extend the full width and the page to be a whole bunch of sections stacked on top of each other, so we don't want any padding around the page itself. And then if I go down to section, I don't want any padding on top and bottom, so I'm going to remove that. And so now what I should be able to see is if I resize my frame, we can see a similar effect to what we had in our HTML. As you can see, if I get to a wider screen size like 1,500, my content, which will be contained in my container, still 1,200 pixels, right? But if I get down lower than 1,200 or close to it, you can see that the container is now as big as the frame itself minus the padding of the section, okay? So we do want some padding either side, and we want to standardize this, too. So I'm going to show you something that you should be using in web development that you can also use in Figma, and that is variables. I'm going to click off of my frame here and you can see over here variables. All right. So I click on this to create a new variable, and we're going to input some measurements here, so we're going to select number. And as you can see, we can arrange our variables into different collections. The standard name for our first collection is collection one. So I'm going to rename this to sizing. We can also create another collection later for colors. Anything else we can think of that we can store within a variable. And I'm going to create a variable for page With or container Whip, whatever you want to call it, and let's dial in our container width of 1,200. Now closing this down, once I go back to my container here, I can go back to the Max WIP. Click on this, click on the Chevron next to the Max Whip and click Apply variable. Now you can see I can select Page Whip. And now, if I at any other point in time, go back and change my variable, let's say, change it to 1,000. See that that comes across to anywhere where we're using that value. So it keeps hiding it, but you can see here now the value is 1,000. So right now, we're only using it in one place, which means that this is redundant at this stage. But once we start to build a lot of containers, this is quite handy because it gives us the ability to change the container later on. So, for instance, just to give you a demonstration to drill that home, if we were to create another section with another container, obviously, we want these container sizes to be consistent. I went in here and changed it once for this particular container, and I did, how do I turn off the Let me just remove it, add a new one, and I set this to 1,000. Now you've got an inconsistent container width. Instead, what you'd want to do is keep that container width consistent and change it up here, and now it's affecting all the containers on the page. Okay. So let's double check. We still got our container width here, and also our container padding is another variable that we might want to change later. So I'm going to go down to here, create another number one page padding, let's call it, and maybe let's make it 16 pixels. Okay? So then I'm going to go down to here, and on our sections, let's set the left and right padding to page padding. Okay? So we'll do that on this section. Actually, we won't create a second section until we y dialed in on this one. And so now, once again, if I resize this, you'll see that we just have 16 pixels of padding on both sides until we get to those wider screen sizes where the container caps out at 1,200, and we actually get more margin. Okay? I used the word margin then, which it's important to note in web development, we have padding and margin. But in Figma, we just have padding. So if you're used to having both margins and padding, it makes it a little bit trickier to translate that into Figma world. But essentially, how we get around that is if we want to set a margin on, say, this container, we would add it as padding to the parent container. Okay? That's the best way around it. Okay, so I'm going to set the page width back to 14 40 pixels. We've already proven that the container is responsive. And then inside the container, we will put whatever content we want within that container. So I'm going to give this a different fill. Again, let's just do yellow, and maybe for the hero section, at least, this is going to be text in the middle that we don't want to extend the full width of the container. So we can call this container inner. Maybe it has a max width of 800. We want it to fill the available space. It all depends on what we're doing within this container, okay? So what I'm going to do is I'm going to save this structure. I'm obviously going to remove the colors. So I'll head over to the section here. Use this minus button here to remove the red, go into the container, remove the blue, and then the container inner, and remove the yellow. Gonna rename this inner, and this will essentially be our structure for building our web page. So obviously this is very different to what we did in the last video where we just threw stuff on the page, and we saw a visual result straightaway. With this approach, we're taking a bigger focus on structure and making sure that our project is set up with auto-layout before we add any elements. And speaking of which, let's actually use this structure and put in some real elements starting in the next video. 5. Build like a developer - Part 2: Website Header: Alright, so now that we've talked about how we're going to build our responsive overall structure for our project, let's now build our first section. So what I'm going to do is I'm going to save this. I'm going to turn it off, but I'm going to save it so that we can reference this and duplicate it for all of our sections. And then I'm going to hit Command D to duplicate it, and I'm going to turn on the second one. And I'm going to name this section d. So what we're going to do in this project, we're going to create four sections, a header, a hero, a featured collection section, and a footer. Again, this is a typical ecommerce example because I predominantly work with web developing ecommerce sites. So that's why I'm doing more of an ecommerce example. And what I like to do is for the inner section here, I like to call it header inner. I like to recycle the name of the section. Obviously, there's some flexibility on how you name it. It's up to you. And so, basically, this is going to be our header. So I'm going to get rid of that max WIP. And I'm going to once again make this an auto layout frame. And every time we create an auto layout frame, you'll see it adds automatic padding to the top and bottom left and right. Over in our container, we've already got some automatic padding, so we might not need that, but let's just leave that in for now. We might need to modify that in future. And what I'm going to do is I'm going to bring in the first element that's going to go inside this header in. That is our fake logo. So I'm going to bring in logo black trims, and I can just click and drag that right into our container here. And obviously, this logo is way too big. I'm going to dial it into 113, which is going to make it much smaller. And there you go. We've got our logo in. The logo is on the left side of our header. Now I'm going to create the right side. So our right side is going to have a couple of elements. It's going to have a icon for account, an icon for CRT, and the flag of the current market. So on an ecommerce site, you might click the CRT icon to open up the side card. You might click the Account button to open up your account page, and you might click your country's flag, your current market to change to a different market. For the icons, these are going to be in the form of SVGs, so I don't have them saved to my computer. What I do have is access to a library, so I can open that up in another tab right here. This one is called U icons by flat icon. As you can see, the license allows you to use the content for commercial and personal projects, so we can totally use the icons here for our purposes creating our fake little design here. The start page. We're going to change over here to this page, and I should be able to if these are labeled correctly, look for accounts. Maybe user. Okay, here we go. So let's have a look. That's user ad, user remove. We just want standard user. Okay, hit Command C to copy this, paste it over to here. It's probably not going to paste it in the right place, but that's all good. We can grab it in the layers panel and bring it in to our header inner. See here that once we bring it in, it's going to sit right next to our logo here. And if I try and click and drag to reposition it, it's not going to budge because we are using auto layout. This is quite different to the previous example where you're just absolutely positioning elements on the page. That doesn't translate well to the web, but this does, and that's the big difference. So using autoayout, what we're going to do instead of clicking and dragging things into position, we're going to update our auto layout settings, which as previously mentioned, is like our CSS Flexbox settings, okay? So over here, what we're going to do is I'm going to click Aline center and then I'm going to click again to essentially get the equivalent of justify content space between. So now you can see that we have our logo on one side and our icon on the other. Now I also wanted a cart icon. So let me look up cart. Alright. This one is the generic shopping cart. So I'm going to hit Command C, or of course, I can just right click and click Copy and then paste it in over here. Again, not going to be the right position. Let's drag it into header inner. Now you can see that we're getting both of these icons, but they're not grouped together over on the right, right? So that should be expected. We have our flexed section here with essentially justified content space between. So what we need to do is we need to group these icons together, and I'm going to do that in, you guessed it an auto layout frame. So I'm going to hit Shift A to turn that into an auto layout frame, and then I'm going to rename this to head write or header icons up to you. I'm going to set the WIP to hug contents. And as you can see over here, it's given us a WIP based on visually how these two appeared previously. So what I'm going to do is I'm going to go over to WIP and use hug contents, which is essentially like fit content Max WIP in CSS. But now you can see that it's in order to maintain the spacing between them, set a giant gap. So we want to remove that or actually, we want to not remove it completely, but set a much smaller gap. So maybe ten, let me zoom in a little bit, have a look. Okay, so let's say maybe 16 pixels between them, okay? So now we have our logo on the left and our icons on the right. The last thing I wanted to add is the flag. I'm going to bring in the Australian flag here, which is going to indicate our market selector. And if we compare the size of this flag to our icons here, these are 24. So in order to make them the same, I'm going to change the height here to 24, and we just want to make sure that the aspect ratio is locked so that the icon doesn't stretch. And then we're going to move that into header right over here. Need tonest that a little bit more, and there you can see, we've got a set of three icons there, and we can increase the gap between them like this, or we can mess with these parameters in any which way we want to update the space between them, essentially the visual look of our right section. Okay. Now, in between our logo and our icons on the right, I want a menu in the middle. So what I'm going to do is I can do this. To ways I can create the text first and then group them together into an auto layout, or I can create the auto layout first. Let's go with the ladder. So I'm going to throw in a frame here and I'm going to call this header menu. And I'm going to set this to auto layout straightaway without any content inside it. I'm going to set the whips to hug the content. Yeah, everything to hug, so it's going to fit the content within it. And then I'm going to take my text tool here, write my first menu item here, and I'm just going to have two links in our menu. Very simple. Men's, click out of that. Hit Command D to duplicate that and change that to women's. As you can see, they're stacked on top of each other, so we need to change our flow in our auto layout over here to horizontal. If that's what we want, the gap between them is going to be ten. We can change the alignment. It doesn't really make any sense at the moment, given that everything is set to hug. We've got some padding on left and right. Maybe we keep that. I don't want the padding on top and bottom because we've already got that in our container. Then if we zoom out here, you can see we've got our menu items centered in the middle, okay? So like I showed you in the previous video, because we've got our responsive structure here, if I resize this now, you'll see that this is responsive as if it was a real web projector, right? And that's more than what can be said for most web designs that will land on your lap because the designers, like I said before, typically just use absolute positioning. Okay. What I want to do here as well, because obviously this is going to break down once we get to, you know, pretty low screen sizes, but this is the desktop design. We don't actually want to showcase what it looks like at 4:16 on our desktop frame here. We want to showcase that on mobile. So what I'm actually going to do is set a Mnwidth on the overall frame itself, and I'm going to set this to 769. Anything less than 769, and you're looking at tablet and mobile, okay? So now you'll see that I can't resize it to less than 769. So I'm going to set my page back to 14 40, and I'm going to take care of one more thing before we move on to the next section, and that is to create some new variables around fonts, okay? So as you can see here, when we created this text right here, it just set it up with the standard font Inter. That's just the default. It's taken on the default font size, and everything is, of course, default. Things like brand colors and brand fonts, we would typically want to put into a variable. So I'm going to click out of my frame here and set up our fonts. So here you can see we've got a collection of sizing. I'm going to create a new collection and call this fonts, and I'm going to create two fonts. This is going to be a string, and the first one is going to be heading font, second one another string, it's going to be body font. I'm happy with the body font of Inter for now, which is what we had, so I'm going to put Inter there. But when we create our headings, I want a different font. I want the font of Oswald. So we'll create our first heading in the next section, but we have got some text already in our header section, so I want to go down here, and instead of Inter, I'm going to click here to link a variable I'm going to put in the body font. So it's not going to change anything because body font is already inter. But if we were to change the body font later, as I showed you before with the sizing, it's going to flow through to all the areas of our design. And while we're here, I might as well dial in our brand colors. So I'll create a new collection, and I'll call this colors and then hit Create, and you can see we're going to use our third type of variable, and that's color. So if you're wondering how I came up with this color palette, I'm pretty sure I just asked hachPT to generate me a color palette based on this false brand. That's also how I generated the logo and the images that you're seeing here all through AI. AI is great when you're wanting to produce something generic for demonstration purposes. So I'm going to call my first color core black, and the names for these also were created by Chat GBT, as well. So I give open eye credit for these names as well. Next one, pure white, which as the name suggests, will just be pure white. Next one will be charcoal, next one graphite. Won't end up using all these colors, to be honest, but they were given to me by Chat GBT, so I'll just throw them in here. Next one was ash gray. Again, if you're following along, guys, you don't have to put in all the same colour variables here, just demonstrating how we can use color variables, silver, some color called smoke white. And finally, the super cool sounding steel blue, which doesn't look too much like a blue, but looks pretty cool. Okay. So now that we've got our color variables dialed in, let's just go over here and make sure our font uses the variable instead of an arbitary value right here. So I'm going to click on the fill, and over here, we don't have that same button that we saw before for the other areas where we add the variable. Instead, we have to click over to libraries here, and then you can see our colors here. So we're going to set the menu items to Core black. And as I keep mentioning throughout this class, if we change core black leader at the variable level, it's going to flow through to wherever core black is used throughout our design. Alright, so that's our first section done, our header section. As you can see, it's responsive all the way from 769, which is going to be our break point all the way up to 14 40 and beyond. So it's set up correctly. It's looking nice with a simple design. Now let's create our next section in the next video. 6. Build like a developer - Part 3: Hero Section: In the last video, we created our first section, our header section, and now if we create a new section, I'm going to duplicate from our little template here and then turn it on, drag it up here. You'll see that it extends the height of the frame. That's because if we have a look at the frame, you can see we have auto-layout turned on and you can see the height is set to hug contents. So it's going to be as tall as it needs to be for the content within. Which is consistent with how the web actually works, a web page will be as long as it needs to be to contain all the content within it. Of course, there are some exceptions where the user experience is more horizontal scrolling, but that's very uncommon. Most of the time, when we're browsing the web, we are vertical scrolling, and our screen and browser whip is determining our variable with. So like anything that mimics how the web actually works, I like this approach. And now what I'm going to do is rename this section to hero, okay? Not familiar with a hero section, is basically what we created before, just like a banner with a background image. That's typically what a hero section is. I'm not sure what the actual definition is, but it's something that sits above the fold. So towards the top of the page, basically, the first big section that you see on a page. And if you remember back earlier in the class in the Figma basics lesson, I brought in our image for the hero background. So I'll bring that in again, how I did it before. So I opened it up in Finder, and I just clicked and dragged it right in. And now you can see it sits within the container. That's not what we want. Maybe we drag it up here, but that's not exactly what we want, Eva. In fact, there is a much better way to do this, and that is to not use an image at all. Set the image within the fill. Now, because I want a full width image that goes across the whole section, I'm going to select the section. Then I'm going to go down to fill, click this plus button to add fill, and what you may not have realized is in addition to adding a color fill, we can also add an image fill. I'm going to click Upload from computer, and then I'm going to select that hero image again. Now you can see that we have that hero image extending the full width of the section. The full height, but the height is currently restricted to 120. Setting this to fill here is essentially like background image cover in CSS or object fit cover, and then setting this to fit is essentially like object fit contain. But obviously, we don't want it to contain here. We want it to fill. There's obviously the option to crop, which we saw earlier. But much better to have it fill. And as you can see here, this section is just too short. We want to make sure that we can see enough of the image. So I'm going to give this section a minimum height. So I'm going to click over on the Chevron, click Add minimum height, and let's add 750 pixels. Now, there's a limitation within Figma that we do have in CSS, and that is we can choose the anchor point of where the image comes from. So we can set it to come from the top or the bottom or the left or the right. Doesn't seem to be that option within BIGma not sure why the image should show up here, but as you can see, no option here to do that. So that might be a modification that we'll just have to do in CSS once we export this into code. For now, I'm just going to make it a minimum height so that we can clearly see both models. I might reduce this height down later once we export to code, but there you can see with a minimum height of 900, we're getting to see both models, okay? Now we've got our container here, and it's looking like it's taking on the same height as our previous section. So I'm just going to change that. I'm going to set the height to fill container on both of these. And now, if I was to, for instance, write some text in here, let's just say heading. That's very small, so I'm going to go over here. Actually, first of all, I'm going to set the heading font to our heading font that we set before of Oswald. And then I obviously need to make this way bigger so we can see it heading like such. And then, right now, because this frame is not auto laid out, I can click and drag this heading wherever I want. This is the same absolute positioning that we had before. We don't want this, so I'm going to go into the inner hit Shift A to turn that into auto-layout. And you can see by default, it just goes in the bang metal, okay? Obviously, we can choose our alignment. And if we were to click align top left and remove this padding that Figma has inserted in order to maintain that position, you can see that our heading lines up nicely with the logo here, okay? So that's what we're going to want for the rest of the page. But for this particular hero section, we want the content to be dead in the middle. So what I'm going to do is return that to here. And then what I'm going to do is select the text, duplicate that, and you'll see that it's going to go to the right. So I'm going to change the flex direction or in auto-layout, it's called the flow direction, I guess. I'm going to change that to vertical, and then I'm going to change the second piece of text to body, and then I'm going to change the heading font over to body font. That didn't work, let me select that again, and then let's dial that down. Okay? So that's going to sit in the dead center because we've got our alignment settings set up as such. And there's going to be a ten pixel gap between the heading and the body text. The best copywriter, so I asked ChahPT to come up with a better heading than this. So I'm going to put it in here, redefine your axis. And obviously, or at least, obviously, to me, the text looks better with all caps. And then the second piece of copy for the body, performance driven apparel for those who move with purpose, minimalist design, maximum impact. That's a bit small, and I want it to be aligned in the middle. So I'm going to change the alignment to middle. I'm not sure if the variable for the font applied, so I'm going to make sure it's the body font, and I'm going to increase that with, okay? As you can see, as I increase it bigger and bigger, it overlaps the container. And also, even at this size, when it doesn't overlap the container, it's still a little bit too wide. So what I'm going to do is I'm going to go into this inner container here and force some line breaks with a max whiff on this container. So I'm going to add a max whiff of let's experiment with some 600. As you can see, this is clipping. So we want to change this to have a width of fill container. And then you can see we've got some line breaks. So let's play around with the font size and the container size to get this looking a bit better. I think that's probably a better balance right there. This situation, it's nice to have it in the middle, but I kind of want it to sit in this available space just above it. So I'm going to hack this a little bit to get it in position. I can use the alignment here to set it at the vertical top, but it's too close to the header. Ideally, I'd want it somewhere in between. In HTML and CSS, I can add a specific percentage to get it sitting somewhere here, but we don't have access to that Figma. So what I'm going to do is I'm going to add some vertical padding to nudge it into position. Let's start with 50, work our way up from there, 100, 150. Let's do 165. Kind of like it there, but the text is a little bit close to the lady's face there. So I'm just going to bring in the container a little bit, find the max width here, make it 550. Okay. Maybe that line break is in the actual text itself. There we go. Alright, so the line break was in the actual text itself. So yeah, if we make that container, 550 pixels max and we play around with the padding, we can get it in a pretty good position. Now, to test this, to see if it's still responsive, I'm going to click on the desktop frame, and I'm going to resize this. So as you can see, our image fills the available space, and our heading in text stays in the middle. Perfect. But there's one other thing I want to do here, and that's to put in a button, a CTA button. So, of course, I showed you a button in the Figma basics. We're going to use, once again, auto-layout for it. So we can just click into our design here, and then we're going to call the button Shop Now. I'm going to click out of the text tool. Otherwise, it's going to add an actual A. I'll hit Shift A, and now auto-layout has been added. I'll call this button. Let's go down and give this some fill, and let's use one of our color variables. So maybe I'll make this smoke white, and then inside the button in the actual text, I'm going to change the fill of that to something that is in contrast to that. So maybe graphite. Let's zoom in now, have a look at that. Obviously, we need some more padding, so I'm going to add some padding on the left and right, some padding on the top and bottom. Some border radius, which is called corner radius here in Figma. Let's start with ten, okay? Actually, I don't mind ten. I think ten's okay, like that. And to finish this off, I'm not a big fan of the space difference. So as you can see, it looks like there's more space in between the heading and the body text, compared to the body text and the button. Let's have a look at why that is. Let's go to our heading layer here and you'll see that the box is kind of bigger than the actual text itself. You might want to go down to line height, set that equal to the text size, so 60, and that changes that. And now you can see that everything is kind of more equal. So that almost fixes that. I'm going to do the same thing over here for the body text, although between the lines, it kind of needs that line height. So I'm going to reverse that change. And let's just increase the gap here. So let's say 20 pixels. Okay. Now what we could do if we wanted different gaps between these, we could group the text together, add auto-layout to that, maybe call this the hero text if we wanted to, and then give some padding to the bottom. We can actually click down here, and that will allow us to separate out the left and right padding and the top and bottom padding, and we can dial in some extra padding to separate out the button from the text. So maybe I'll only use five pixels here. Actually, I've just set that on the wrong place. So maybe I only use ten or five pixels here, and that's looking quite nice. Okay, so again, resizing our design all the way from 769 to beyond 14 40. Obviously, we lose the models faces here. And actually, let me just put desktop above mobile so we can have it showing over. But with CSS, we can easily fix that by changing the background image positioning. Okay, so I'm going to set this back to 14 40. Before we move on to the next video, what I'm going to do is show you components. In order to hold my components, I'm just going to create another section over here. I'll call this elements. You can call it whatever you want. You don't even have to use a section. Most people don't even use a section, and I'm going to grab this button here and I'm going to drag it over to elements. Now, why have I moved it out of here and I've put it over here is because I want to define our overall button style that we're going to use throughout our design. Any changes we make to this centralized button style, pull through to all of our buttons. Now, that's not to say we can't make specific changes to individual buttons, like if we put it here and then maybe it's on a white background, we need to invert the colors. We can do that. We can also create two versions of the master button, but to have a core centralized button style, what we can do is create what's called a component. So we can do that by right clicking on the element and we can click Create Component. Now you can see that it turns purple. This icon here indicates that it's now a component. Now, if I was to click and drag, sorry, option click and drag a button from the component over to here, what I get is an instance of that component. And you can see here it says instance, and we have the hollowed out diamond here rather than the four squares diamond over here. And as you can see, it says component. So you can see here that we now have an instance of our button component. We can, of course, still change the text, and that's not going to change the original component. But if I change the original component to text over here, you'll see that that actually pulls through to the instances. So at the instance level, we can make customizations, or at the component level, we can make customizations, but those will flow through to all instances of that component. All right? So I think components are a very good idea, and we're going to use them throughout this class. And you'll see in the next video when we build a featured collection section of multiple product cards, we're going to want to use the same card over and over again, and that's a perfect use case for components. 7. Build like a developer - Part 4: Featured Collection Section: Alright, so in the last video, we built out our hero section. Now, let's work on the next section, which is going to be a featured collection section, which is very common in E commerce. So as we're building an ecommerce website, it makes sense to put a featured collection section. So I'm going to duplicate that section template that we had and turn that on, and then I'm going to call this featured collection. The main complexity of this featured collection is going to be some card components that I'm going to throw inside. Okay. So first of all, we're going to want a heading here. So I'm going to give this the heading of, let's just say featured sorry, that's very small. I'll zoom in a little bit, but we're going to make it bigger. Featured collection. The uppercase is much better, and we're going to change the font to our heading font right here of Oswald, maybe increase it to bold. That looks a little bit nicer. Then I'm going to make it way bigger, so I'm going to make it 60 pixels. Okay. So as you can see, we're able to move it around with our Cursor. That must mean that we're not currently inside an auto-layout frame. So I'm going to hit the frame inner and press Shift A to turn that into auto-layout. And as you can see here with our alignment, it's going to be in the middle. So I'm going to move that over to the left. And as you can see, it's maintained that padding, so we just want to remove that padding, and then we should see that this title lines up with the rest of our containers. Next one I'm going to do is work on the card component. I'm actually going to go over here to my elements here and let's create it separately, turn it into a component, and then we can copy some instances of that component over to our section here. I'm going to click down here to create a frame, and I want to make this frame about 280 pixels wide. And then the height is going to be hug once we add the elements inside it. So I'm going to call this our product card. And the true children in our product card is going to be the product card image and then all the details. Okay? So for the image, I don't actually have a whole bunch of product images to put in here. So I'm going to put in a placeholder, and for that, I'm just going to use a rectangle. I kind of like the color for this placeholder rectangle, and then I'm going to size this so that it's equal to the full width of the product card, and for the height, maybe 320. Actually, I'll just dial it in over here. 320. And then for the WIP, I want it to fill container. But for that, we're going to need some auto-layout. So I'm going to go to the product card, hit auto-layout on that, go back over to our rectangle, set that to fill container, and then I'm going to extend the product card. Here you can see the alignment is off. It's setting it to the center. So we're going to move it up there, and then we're going to put in another frame here for our details. Just need to click back on the product card and change the alignment to vertical, and then put this to the bottom. Okay? This frame is going to fill the container, and the heights will hug the content, but there's no content in it yet. So let's start putting that in. We're going to want to put in the product title. As you can see, it's saved our font size from before. Maybe I dow that down to 24, and then I write product. Let's do capitals again, product title, right? And right now, this is not inside an auto-layout frame. So we're going to go up here and add auto-layout to the frame. And now you can see there's going to be some alignment to our product title. We're going to rename the frame product card details, and I want to put this product title over to the left, remove these padding numbers for now. And as you can see up here, there's also some gap I'll remove that for now, as well, and we can dial that in a little later without Figma deciding that for us. And what I'm going to do is I'm going to hit the product title, and I'm going to hit Shift A again, to create another frame, and this is going to be our product card details or actually, I'll just call it product card left. Because I'm going to put in some other text here. We'll put in another piece of text, and we want these to be lining up vertically. So I'm going to change the flow to vertical. I'm starting to speed up a bit now because we've already discussed a lot of auto-layout already. And then this one is not going to be our heading font. It's going to be our body font, and I'm going to just call this variant title. We don't want this to be bold. In fact, maybe we want it to be light, okay? And then the text size is way too big. I'm going to make it like 14. Okay. Alignment is in the middle. So you just need to move that to the left. Actually, even when it does that, it's still in the middle, and that's because we have to select our alignment over here and then hit Command D to duplicate one more time, and this is going to be our price. So I'm going to set this to maybe $10 with the trailing zeros. And for this, I want it to be bold and maybe a bit bigger. I'm going to put a frame over on the right side, and within this frame, I'm going to set the number of reviews. So I'm just going to call this frame product card right. And for displaying the number of reviews, I'm going to use a star icon. So I'm going to go back over to our U icons by flat icon library of icons here and look for star. That's the star we're looking for. Well, let me see what's this one. I want the rounded one. So I'm going to copy that, paste it inside this frame, and then a piece of text within this frame also for the amount of star. So let's say 4.5. Okay. I'm going to re order these, and then I'm going to add auto-layout to product card, right. And then I'm going to click up to the product card details and update our alignment here, I'm going to set this to space in between. That's the term in CSS Flex, but basically, I've just double clicked here to give it auto spacing, and then back over here on product card right. I'm going to set the height to fill container. I'm going to remove the top and bottom padding that makes it sit in the middle, and then I'm going to set the alignment. Actually, that hasn't fixed it for us. We want it to sit up in the top right. So maybe we need to click here. There we go. Need to click again to get the automatic gap. And then we go over to product card over here. We actually want this to be in this auto-layout, aligned together. Maybe five pixels gap instead. And now you can see that this is a little off with this. Let's go down and change the line height to 24. And now you should start to see everything line up quite nice. Okay? Now with all the padding basically removed, I'm going to dial in my own padding to my liking. So obviously, I'm going to want some gap between these sections. So 20 is probably too much. Let's do ten. And then for the product card details, I need some space on either side. Let's dial in maybe 12. That's nice. Lets it breathe. Then I'm going to go over to the product card component itself, go into height, click Hug content, so it's no bigger than the content within it. And then we can see here that there needs to be some padding on the bottom of product card details. So instead of having a gap here, we could remove that gap, and then on the details, give it some top and bottom padding, like such. And actually, now I'm quite happy with my product card. Alright, so we can leave this placeholder here like that or we can change the fill to our actual product image. I only have one product image. So I'm going to go over here and bring in an example. So here we can see product image. And as you can see, it's kind of cropping on the top of her head. So there's a few options we could set it to fit, which is not a great option because now we've got this white space on eva side. If we still wanted it to fill and just anchor from the top, we can do that in our CSS later. Can't do it in Figma, unfortunately. But in this case, I'm just going to crop. So I'm going to just line up the image like that, and maybe the product is just this sports bra here. It doesn't involve the bottom piece, in which case, this would work fine. Okay? So we could say, instead of product title, sports bra. Okay? We can leave that in there, or we can get rid of the image, or we could go back to the placeholder, if I just control Z out of that. But here we can see our properly structured product card setup. Okay. So then what I'm going to do is I'm going to right click on this product card, and I'm going to click Create component. Now we can create instances of this product card, and any changes we make to this centralized component are going to flow through to each instance, just like with buttons. Okay? So what I'm going to do is I'm going to go back to our section over here. I'm going to rename this actually featured collection inner. And then I'm going to create a new frame inside it. Obviously, we don't want it to go to the right of the heading. We want it to go underneath, so I'm going to change my flow here. This is going to be our list of product cards. Okay. And then what I can do is make this extend to fill the whole container, and then I can start to option drag one of these into my product cards like such. Actually, it's come off to the side, but then I can nest it within my product cards here. And then once again, as we've seen throughout, I'm going to add auto-layout to that, and now you can see that we have our product card perfectly in the center. What I'm going to do is duplicate out these product cards. Let's do four of them, I think. And you can see that Figma has put in some left and right padding. Let's get rid of that. We obviously want some gap between all of these. I might increase that gap to 15. And as you can see here on our product cards, the contents is fit to hug, which is good. That means it's going to be as big as the cards within it, and our WIP is going to fill the container. Perfect. Now, as you can see with our title up here, the line height is bigger than the height of the actual text. So we're going to make this 60 so that it takes up only the space for the text. And in this case, we're going to need some margin between this text and the product cards. So we can either add auto-layout to this text right here, and then in the auto-layout frame, we can add some bottom padding or we can just use gap on the inner section. Okay? So I think I'm just going to do that and just boost the gap. Actually, we already have some gap here, but let's create some more of it, maybe 30 pixels of gap. All right. So if we look at our container here, there's some padding on top and bottom, which shouldn't exist. And also, these sections don't seem to line up perfectly. So let's find out why that is. Seems to be a little bit of a gap here. Let's go to our parent frame here, desktop frame, and you can see there is a gap set on there. So we just want to remove that. And now you can see that the top of the section and the bottom of the section is flush against the section. Now, obviously, we want to create some space here, but I want to create this as a variable because if we create another section like this with text and some imagery, we are going to want to keep that section padding consistent. I'm going to do is I'm going to click off of our frame here, go into variables, go over to our sizing collection, and I'm going to create a new number variable for section padding. And with modes, we can actually change this to be different based on mobile or desktop. But only if you're on the dev seat, which we'll cover a little bit later. So let's go with 75 pixels. Alright? And then what I'm going to do is go over to my featured collection and then add that right here to our section padding. Okay, let's extend the section down so that you can see that's looking pretty nice. Alright, so how is it going to go with responsiveness? So as you can see here, this could possibly be an overflow container. So it could actually look like that, and then the user could scroll left and right, or we could set it up so that the product cards wrap. So here's the button over here for rap, and then let's see what happens if we dial down. You can see they start to wrap, but we might want them to stretch a little bit as well. I'm happy for them, in this case, to just be an overflow container situation. And if we want something different, we can easily fix that within our HTML NCSS. Okay. So putting this back to 14 40, the original whip. In this lesson, we mostly covered how to build this single component. But you can see we've got multiple instances here of this single component. And if I go back and change one of these placeholders in an actual instance to that image. So if I go over to where is the fill, there it is, and I go upload from computer, put the product image in there. Let's crop it once again to get it in the right position. Like such. Actually, I've cropped the top off a little bit, so let me move that back. To touch, okay? That looks pretty good. As you can see, that's not going to change any of our other instances. But if I was to go over here and change the price here on the actual component to 20, and then we look over here, you'll see that all of our instances now pull 20. Okay? I'll just control Z, put that back to ten, and then I'll remove this particular product image here because I don't have the others to populate the other slots. Need to put back that D 9d9d9 fill. Okay. So in the next video, we're going to do the final section, which is the footer section, and then we'll get on with migrating this desktop design into our smaller 390 screen width for mobile. 8. Build like a developer - Part 5: Website Footer: Alright, so now on to the final section of our build here, and that is the footer. So once again, I'm going to duplicate this section template and turn it on, then rename the section to footer. And this footer is going to have a separate background color to indicate that it's a footer. So I'm just going to add that in now. I'm going to use one of our color variables in our color scheme. I'm going to use silver. Okay. That looks pretty nice. Rename inner to footer inner and so that this section has consistent padding as the last section and any other sections we create in future, I'm going to go up to the section, and I'm going to add our top and bottom padding of section padding. Okay? Great. Now inside our footer inner, we can add in what we want here. So I'm going to bring in the logo again, obviously, way too big, so I'm going to dial this down to 113, same as the header, and for some reason, it's off to the side here. Our footer inner isn't on auto layout yet, so I'm going to set that and then it brings back our logo. Okay. Then what I'm going to do, it's going to be a pretty simple footer because it's a pretty simple website as you can see, I'm going to have a set of menus over to the right. So for that, we can start at the bottom or work our way up or we can start at the top and work our way down. So I'm going to start at the top. I'm going to add in another frame here. This one's going to be footer menus. Then I'm going to go up to my footer inner, and I'm going to change the flow to horizontal and set the gap here to automatic. Then over in my footer menus, which is going to be pushed over to the right, another frame for a single footer menu. So I'm going to call this one footer menu and turn these to Auto Layout. And then within FDA Menu, I'm going to add in some text. So this is going to be the heading of our FDA menu. So I'm going to put it in as shop. I like it bold. Instead of using Inter, even though it's the same font, I'm going to use the variable that allows us to change it later if we so choose. And then I'm going to hit Command D to duplicate that out and switch that to a less bold font, and we're not going to use capitals here, and I'm going to put women's Command D again and men's. So there we have it, our first menu. We can change the gap here between items, but I'm happy with ten. And now what we can do because we've already set up everything within auto layouts is I can click on the footer menu, duplicate that out, and then we get another menu to the right. Okay? So this is going to be our help menu, first one, FAQ, second link delivery information. And as you can see, because we've flex laid this out, everything's going to move into position automatically. Next one is going to be make a return. If you're wondering where I came up with these, I just basically took inspiration from other websites, other e commerce websites that sell similar products and just copied some of their links. Okay? So here you can see we've got a bit of an issue. This is set to a line in the middle. We don't want that, so let's change the alignment. There we go, so that our headings are lined up. Then we will create one more menu over here by duplicating and I will call this legal. This is going to be our policies and terms and conditions, privacy, policy, terms and conditions, and then we just remove that one. Alright. So there we have it. Our menus are going to expand to fill the content, but I don't like how some are much larger than the others. So I'm going to take the width of this one, which is 172, and I'm just going to make all of these minimum width 172. So I'm going to add in here 172, and on the other one over here, minimum width 172. And so these will be at least as big as the help menu. Okay? So there you can see, we've got a nice little footer here. And because we used auto layout for everything, let me just take the boundaries of our frame here, resize it, and you'll see that it works from 769, which was the minimum, all the way up to really large screen sizes. There you can see our footer works. I'm just going to extend our section to cover that. And one more thing that I forgot from the last video is that we have got our product card components set to Auto loud. So we didn't actually test the responsiveness of this. You can see here. Yep, if we make it extra wide, it's very unlikely to be that wide, so we don't really have to worry, although maybe we want to set a maximum on it, maybe 450, any more than 450, and it's starting to look just weird. We would not want it to be any more than that. We won't be able to resize it bigger than that. And then, obviously, if we go down here to below, what is it like 250, then we're getting some overlap with the star rating. So we want to make this a minimum width of 250 as well, and then you can see we can't really break this card design with the minimum width and the maximum width and auto layout applied. Now that our desktop view is looking good and it's responsive, let's now move on to mobile in the next video. And hopefully we can migrate all of these over to mobile in a single lesson. So I'll catch you in the next one. 9. Build like a developer - Part 6: Mobile Frame: This hopefully final video in this section on building out our design like a developer, we're going to translate this design to mobile. Now, of course, on the web, we don't have two different frames. What we have is a breakpoint. And unfortunately, it's virtually impossible to get this frame working all the way down to, let's say, 320 pixels up to 768. Okay? So we're still going to need a mobile frame. And for the mobile frame, I'm going to do the same as we've done here. I don't want this mobile frame to extend bigger than 768 because then we want to go into our desktop design. So I'm going to set a Max WIP, but I've first got to turn this into a flex layout. So I'll just shift A to do that. And then I will set the M WIP to I think the smallest phone out there is like 320. We're not going to support phones lower than 320, and we'll give it a max WIP as well of 768 as we discussed. Alright, so, I actually set the actual with, not the min and max values. So what was it? It was 32768. So we've got both of those there. So here you can see how mobile design should work all the way from 320 up to 768, okay? But I'm going to put that back to 390. That's the canvas size I usually like to work. And let's first bring across our header. Okay? So what I'm going to do is click on header, click Command C to copy, go over to our mobile frame over here and hit paste, and you can see here. We've got some overall padding on the frame, so we want to get rid of that. Alright. We don't really need containers on mobile, but let's keep them because that will probably make it easier for the AI to understand. And we want the logo, first of all, to be smaller. Let's dial in, like, maybe something half that 75 pixels. Looks like we've got a bit too much padding in here. So you can see we've got some padding on the header inner and on the container. So we can choose evil one. So I'm going to remove it for the header inner and maybe for the container as well. Utilize as much space as possible. Our common pattern in web development is to take this menu right here, which is quite wide, especially when you have other menu items and turn that into a hamburger icon. So I'm going to delete that altogether, and then I'm going to go over to our icon library again and say burger. I believe it's not called hamburger, but burger, but we'll soon find out. So there's the hamburger menu. I actually looks like a hamburger, and this is the menu burger, okay? Whatever ones do we have? Yeah. So basically the same thing straight or rounded. Do straight, I think. Yeah. And then we'll paste in that icon. We just need to drag it into the right position. So I'm going to put it before the logo, as you can see here. And because we've got a header inner with an automatic gap, we're getting some unwanted space between the Hamburger icon and the logo. So I'm going to group these together. Now, what this is going to do is it's going to create an inconsistency with the desktop version. So I'm going to do the same thing on the desktop version to keep these consistent for AI. So I'm going to go over here to our desktop version, and let's group these as well, turn on auto-layout and then call this header left. And then I might even want these items to be more to the left. So for header left, I won't do an automatic margin. I'll just do a line to the left. Looks like there's some automatic padding that's applied here somewhere, or at least a fixed with. So what I'm going to do is set the With here to hug contents. The menu is still staying in position. To figure out why that is. Looks like instead of some automatic padding, we're getting some automatic gap. So we'll set the gap to not auto, but let's dilate in ourselves, maybe like ten pixels, okay? So now we got head to left with our header menu and our logo on the left on desktop, and we also have the same thing over here, and we just need to get rid of that automatic spacing here. As you can see here, it's using free form flow. I'm going to set that to horizontal, and then I'm going to set the gap to let's start with ten. Okay. I think I need a little bit more than ten. 20, let's say, where are we head in header left. Okay, it's hugging contents. It's aligned in the middle. It's got a ten pixel gap. Maybe we'll increase that to 15 pixels. Okay, cool. Alright, so that's basically our header. So next thing we'll bring across is our hero. So I'm going to grab the hero by hitting Command C to copy. And then over here in our mobile layouts right here, I'm going to hit paste, and you can see it past in the same content. Hero image for mobile is going to be different. And this is pretty common within web development to have different banner images based on the difference between desktop and mobile. So I'm going to go in here, and I've got an alternative version, hero Image for mobile. So I'll upload that, and I'll also decrease the height of this hero. Looks like something's got a minimum on it, which is probably inherited from the desktop design. So let me see what's going on here. Height set to fill. Okay, yeah. So let me see over here. Yeah, we've got a min height of 900. We definitely want to change that for mobile. Let's say, maybe min height of 500, and then we will dial down the height to 500. And now you can see we've got our models more in the frame. So maybe I say min height 450, dial this down even more. Okay, that's a bit nicer. And then text right here. We don't want to be as big, obviously, so we can put 36 for the font size of the heading, maybe, let's just leave it at 16, just so it's more readable. And then I'm going to decrease the gap here, maybe just remove the gap altogether and then same thing between the hero text and the button. So I'll make it maybe five pixels. We're getting some padding on top and bottom of 165. Let's remove that and see what happens. Okay, we get our text way up the top. Let's just align center to get that aligning in the middle, and I'm pretty happy with that. Alright, so next section, the featured collection section. I'm going to copy that come into our mobile design. Actually, before I do that, I'm going to set the height of our mobile frame to hug contents. So it's going to be making the frame as big as the content within it, but no more. There you can go. And then over our mobile, I'll paste in our featured collection, which will inevitably make our mobile frame bigger. Alright? Now you can see we've got our section padding, but it's quite heavy at 75 pixels. So what we can do is we can set a different section padding on mobile. So I'm going to remove this, and let's just play around with some numbers, first of all, before we set the variable. How is 25 looking? Okay. I think I want to do 35 just for a little bit of extra breathing room, okay? And then in variables over here, I can if you're on the free version of Figma, you will have to create another variable, so you can call this section padding mobile, right? Set that to 35 or whatever your desired padding is. And then, like we've seen throughout the class, add that in here. Right. But actually, if you are on a deb seat, which we'll see a little later when we talk about the MCP server, you can actually create different modes to your section padding. So I won't demonstrate that now, but later on, we're going to actually create a separate mode, okay? I'll cover that in a later lesson. For now, let's just do it the way that's freely available with Figma. No paid subscription Figma required to do this approach. We just need to separate out the section padding into two different variables for desktop and mobile. Okay. Now we've got this a little bit of white space here that we need to sort out. Let me see what's going on there. I think that might be coming from the overall frame. You can see here that there's a gap. We don't want any gap between sections, so I'll remove that. There we go. Obviously, this heading needs to be way smaller. So let's dial in, let's say, 32, okay? Bit too much gap between these two now, so I'll work on that next. Maybe ten. Okay, cool. And if we're happy with a horizontally overflowing container, we might actually leave it just like this, okay? So the user can scroll to the other product cards in the collection. All right? Let's just have a look how responsive this is so far. Everything is using auto-layout, so it should be pretty good. All right, it looks pretty good, except for when we start to lose space around here. So I'm really small screen sizes. So we can either create another frame or just to make this more flexible, put the font down on this. I know I said I wanted it at 16, but let's make that 14. And actually, our button text could be a bit smaller, too. So I'll make that 14. Now our hero should work a lot better, no matter what screen size 768-320. There's some screen sizes where there's a bit of a UX issue in terms of the user might not know that you can scroll. Around here, you can see that there's, you know, a product card getting cut off, so that should indicate to the user that they can scroll left and right. But over here, not so much, and there's some cropping of feature collection. Not going to go into trying to fix that infigma because that's a minor improvement that we can make once we get to the code. So I'm going to leave that as is for now. But overall, it's pretty responsive. And then finally, I'm going to put in our footer here. So click Command C, go over to our mobile frame, hit Command V. And what we want to do over here is rejig this a little bit, obviously. We don't want to use the desktop section padding. We want to use the mobile section padding here how low did we put the logo? It was 75 pixels. So let's do that over here as well. Where is it Axis Whip 75 pixels. Okay. Let's play around with some of these flow options here. Maybe we set it to vertical. Actually, one of the problems we are probably facing is that these foot menus have a minimum whip, so we just want to remove those minimum whips, okay? I don't think the last one had it. But there doesn't really seem to be enough horizontal space for all of these foot and menu. Align horizontally. So I'll go over here and I'll set the flow direction to vertical and the alignment to the left. And yeah, I think I'm happy with that, actually. Doesn't look too bad. Let's see how responsive that is. Yep, works all the way from 320 up until 768. So that is pretty good. I'm pretty happy with that. And that's enough indication, I would hope of how we want the elements on our page to rejig for mobile. Okay. So now that we've finished building our design like a developer, let's look into how we can actually transform this into real life HTML and CSS code. 10. Figma to Code with Locofy AI: Alright, so in the last few videos, we covered building out this responsive design in Figma. And in the next two videos, we're going to cover two methods to generate HTML and CSS code directly from this FIGMA file. Now, I encourage you to create your own Figma design and then run through this process that I'm going to show you in this and the next video. But if you want to copy my design, I can just share that with you here on Skillshare so that you can test this out without necessarily creating your own design. But I encourage you to do your own design. It's important to put these skills into practice if you want to really learn I encourage you to create your own design. And as we'll talk about leader in the class, I encourage you to upload that as a class project here on Skillshare. Alright, so without further ado, let's get into the process of in this video, turning our Figma design into HTML and CSS with a Figma plugin called Locofy. You can see over here because I've used it before in my list of plugins, I've got Locofy right here. But for the rest of you, you can click on Actions right here and you can search for Locofy. You can filter down to plugins and widgets. As you can see, it's already showing there because it's a recent plug in for me. But if not, you can just search Locofy and then click on that plug in. Something that I should note before going any further is that in between videos, I have updated the name of my frame so that it has homepage dash at the start, homepage desktop, homepage mobile. That is to help Locofy AI identify that these two frames are representing the same page but different breakpoints. So let's see how well Locofy does that now. So before we go ahead, it's important to note that results really do vary when using these AI tools, whether it's Locofy or the MCP server, which we'll see a little later. Even using the same Figma project with the same prompt can produce inconsistent results. So keep that in mind, the output can be inconsistent. And so if you're comparing your result with my result, oftentimes it just won't be the same due to random variability. Okay. So as you can see here, I've got two options. I can use the classic or the lightning. These are the two options at the time of recording. And of course, if you haven't signed up to Locofy before, you do need to sign up for a free account or a paid account, whatever you want to do with it. I obviously did that ahead of time. But now that I have an account with Locofy obviously, I don't have to go through those on boarding steps again. But just noting, if it's your first time, you will need to go through the account setup, okay? Should be completely free for the purposes of this Figma class. You don't really need more tokens than what they provide in the free plan. So I'm going to click here to Convert To code, and I'm going to select our two homepage frames, and hopefully Locofy AI will automatically detect that they belong to the same page. So I'm going to hit Convert To frames, and as you can see that has worked. Now, it's struggling to find the tablet frame right here. Obviously, there is no tablet frame. So what I might do just to make it easier, we want to make it as easy for the AI to do its thing as possible. That's how we're going to get the best results out of it. I don't want it to think that the mobile breakpoint is 390. So what I'm going to do is I'm just going to duplicate our mobile design here and rename the duplicate to tablet. So I'll drag this out all the way to its max of 768 and label this as tablet. Okay. It's all the same elements and same content as the mobile design, but we're simply indicating here to locify that it all should be the same. Obviously, responsive. We want the same design at these two breakpoints. Basically, there's just one breakpoint, and that's 768. Okay? So let's go back to Locofy, hit Convert to code. Then we'll select those three frames pertaining to the homepage. And now you should see that it correctly identifies the different breakpoints. All right? So I'm going to hit Confirm, and now Locofy will do its. Obviously, this is going to take some time, so I'll be fast forwarding through parts of this. All right. And now we can see a preview within the Locofy app. So I'm going to just make this a little bit bigger if I can. It looks like I can't that any bigger unless I go to full screen and that's only for the code. Anyway, so let's have a look. Let's scroll down. Looks pretty good to me, okay? It hasn't identified that these are links, but that's right. We can add that in ourselves. Let's go down to 960 and see what happens. Okay, there's some white space on the right, and we kind of lose our header. Then once we get to 768, we start to see the tablet design, and if we go to 420 or 390. Interestingly, at 390, it works, but it hasn't figured out that at 4:20, we still want that mobile design. But this is not necessarily a big deal. The biggest deal is that the HTML has been created correctly, because we can finsce the CSS a little bit, fix up little things. But if the HTML is a mess, then we have to refactor the whole project. So I'm going to take a look at our code here or at least the code that Locofy have generated. It's bringing in some external style sheets from Google's font API, but these are probably going to be broken when they come through because family is set to object object. That's a bug I've noticed in Locofy. Let's have a look in our body section. So as you can see here, we've got the entire homepage desktop in a div, and then we've got our header. We've got our container, we've got a header inner. Okay, that's good. Header left. Okay, good, header right. And then we finish up with that header. We move on to the hero. We've got the hero. Homepage container. I'm not sure why it's container here and a homepage container. I would like those to be consistent. And here's where I've typically seen issues with Locofy, as you can see here. They've got two different versions of the hero HTML. They've got one for desktop and one for mobile. But as you can see here, the content is duplicated. The class names are a little bit weird as well. So you can see here that we have what was it container up here. Then we have homepage container and then container two. These should all be the same name, just container. And then this is a pretty weird class name. We don't really want to name our classes like that. And if we go down here, container three, again, the idea was to just have a centralized container class. We could go in and fix the classes, fix this content duplication. But in the next video, I'm going to show you what usually gets a better result for me, okay? As you can see, we're using a section element here for the product card. I wouldn't necessarily choose a section element for the product card, but as you can see, the structure is consistent amongst cards, which is then we go down to our FOOTA. We've got FOOTA container four, which I'd rather just be container because we're using the same container throughout the website and then foot it in with our image FODA menus. I wouldn't use a B element. That's pretty outdated in HTML and CSS. But honestly, this takes out a lot of our work to begin with. I think that we can polish this and get a pretty good result. That being said, I found a better tool for the job, which I'll cover in the next video. So before we move on to the next method, I'll just make note that the next option is going to be a paid option. We will need a dev seat with Figma in order to use if you have no budget to spend at all, maybe give Locofy a try and work on fixing the code from Locofy or look at some other plugins. But for those of you who have at least 15 bucks, I think it is a mum to spare. Let's have a look at using the MCP server in the next video. 11. Figma to Code with Cursor and the Figma MCP Server: Alright, so we're back inside our project in Figma, but you might notice that the interface is a little bit different, and that's because we're currently running the desktop version of the Figma app. Now both apps work incredibly well. The desktop app and the web app to me feel exactly the same. But the reason why I've got the project open on the desktop app is because this is required to run a local MCP server. Okay, so I'll get into what that means in just a sec. But first of all, we need two things downloaded if you don't have them already. Number one, you're going to need the desktop version of Figma. So you can find that in Figma downloads. I use a Max, so I'm going to be clicking on this one. If you use Windows, obviously, you'll click on this one. And then also, I want you to download Cursor. You can use another browser if you don't want to use Cursor, but the installation instructions for the MCP are going to be a little bit different. So if you want to follow along exactly, you'll need to use Cursor. Otherwise, if you are familiar with installing MCPs or you want to research how to do it in a different code editor, feel free to do a different code editor. Finally, as I mentioned at the end of the last video, just to let you know that if you do want to use the MCP server, you will require a Dev seat. So if we look down at the different plans here, if you do a year of the Dev seat, it's going to be 12 bucks a month. At monthly, it's 15 bucks a month, and as you can see down here, we need this in order to use the MCP Server, okay? So if you're not willing to try this out for at least a month, feel free to skip this video. But I found I get better results by using Cursor and the Figma MCP Server. Okay, so what I'm going to do is obviously, I've got my Figma program open here. But what I don't have yet is a folder to insert the generated code. So I'm going to open up my Skillshare folder and call this Access website. Okay. Then I'm going to go over to Cursor and open that folder. This is Cursor, it looks very much like Visual Studio code, which is the usual code editor that I use. And in order to connect Cursor to Figma via the MCP Server, we're going to go up to on Mac the menu item that says Cursor. It's going to be slightly off your screen, but then once I click on it, you'll see that this menu comes up. Then we're going to go into settings. Then we're going to go into Cursor settings. Then we're going to look for MCP on the left here, and you can see, I've already got two MCP servers setup, so I'll just remove them quickly and I'll reset it up with Figma. Okay, so I've removed them, and now you can see with an emptmcpt JCNFle, you can click here to add custom MCP, and then inside this object, we're going to add, let me just zoom in here, create some more space. So we can see this clearly. I'm going to type the word Figma with a F. And then inside of here, you can see the suggestion, URL, and then the address to the local MCP server. I'll hit Save on that. Now, it's likely that Cursor already suggested that because that's what I had previously. So if you're wondering what the URL is specifically in your case, I think it's the exact same no matter the user, but when you turn on the MCP server on Figma, it does give you the URL. So let's go back over to Figma. We're going to click on what's known as the Figma menu over here. We're going to go down to preferences. And then we're going to make sure that enable local MCP Server is checked. Obviously, I've already got this turned on, so let's turn that off and then let's go back to the menu, and I'll show you how this works if you haven't turned it on yet. I'll click Enable Local MCP Server. It'll actually give you the instructions here so you can see here, we can call it Figma or Figma desktop and that'll give you the instruction setting. Maybe I just copy that. That's actually changed since the last time I did this. Ast time it actually came up with the URL in a little tool tip over here, and then I just copied that in here. But like I said, I don't think this URL ever changes. It's a local URL. So if you have the MCP server turned on on your desktop for Figma, this is likely to be the URL. Okay? If we click out mcp dot JCN, we should be able to now see if I zoom out Figma desktop is enabled with this green icon here. Okay. So now we can actually generate the code from our Figma file. So what I'm going to do is I'm going to create a prompt here. I'm going to say inside my Figma file, I have a section with my frames for the homepage. And what I'm going to do is I only created a third version to help locify, so I'm going to get rid of this. And I'm just going to rename. Instead of mobile, I'm going to say actually, I'll keep it mobile and then I'll just tell Cursor that I want that at a certain breakpoint. Okay? So inside my Figma file, let me make this bigger. Inside my Figma fiile Aber section with my frames for the homepage, the frame homepage desktop is the intended look and layout 769 pixels and above, and the homepage dot Mobile represents the design and layout below 769 pixels. Okay? Please generate me the HTML and CSS for this homepage, keeping duplicate HTML to an absolute minimum. Now, before I hit Enter on this prompt, I have written something similar into Cursor using the same project and gotten a certain result. But like I said, results may vary. I've written certain things into the prompt like keeping duplicate HTML to an absolute minimum is because of what we saw on Locofy AI in the previous video with that duplicate HTML for the hero section. Unless it's absolutely required, we don't want any duplicate HTML. And anything else you can think of to give the AI more context or to help it understand the requirements better, you can put in here. But the main thing is that Cursor understands that the two frames represent the same page, but at different breakpoints. And the thing I like about Cursor, by the way, is that I can actually write in the exact breakpoint I want, which is not a feature of Locofy AI. Okay? So I'm going to hit this button to send that to the agent and see what it comes back with. We might have to click Run a few times here. I'll zoom out a little bit, drag this over. Keep clicking Run. These are methods on the MCP server itself. So I'll just keep approving these. And obviously, as this takes a bit of time for the app to do, I'm going too fast forward through a lot of this process. Mm. Okay, so it looks like it's done. It also provides us a lot of information about what it's done, as well. So you can see responsive design. It has the breakpoint, single HTML structure that works for both desktop and mobile. That's what we want. CSS classes to show and hide elements based on screen size, reusable components for product cards and navigation menu. Perfect. Okay. So from what we're reading right here, it seems pretty good. So I'm going to hit Keybll. I don't have any feedback. Obviously, I haven't looked at the code, but you can obviously provide feedback on the code that it generates. Instead, what I want to do is I just want to run this code in our browser and see the result. Let's do that first. What I'm going to do in order to do that is click down here to run Live Server. This is a plug in, so if you don't have this currently, you'll just have to go into extensions, and if I look inside my extensions here, live server right here, this is the one by RIT WIC Day. Let me zoom out so you can see the whole listing or most of it. Live server by RIT Wi Day. With that nard, you can click Go Live down here and now we have our website in our browser. Let's hover over our menu items, and as you can see, it has Cursor pointer, which is correct. That's something that we didn't have in Locofy AI, and the button has a nice little hover effect. The product cards are looking pretty good, but they have a rounded edge, which is not what I set and a bit of a shadow. The featured collection text is in the middle, not on the left, but perhaps we would want to go with this design instead. It looks pretty good. So at this screen Whip, this is looking pretty damn good. I'm pretty happy with this. Let's look at the web page as it responds to different screen whips. Okay, pretty good. As you can see here on like 958, the cards are a little bit squished. We'd want to fix that a bit. Once we get down to below 768, we're getting the Hamburger menu and the menu items here. We don't really want that, and we're getting the cards stacking a little bit weird, but that's easy to fix. Let's go down to 390. Okay. And with the exception of this menu here and the position of the Hamburger menu, not being on the left of the logo, this is looking pretty okay, and you can see that it's decided to stack our product cards instead of having them as overflowing horizontally. Alright? So I'm pretty impressed with of the stuff that it's gotten wrong, we can probably easily fix. Let's just verify that the HTML has been written nicely. So I'll go into index dot HTML, and then maybe I will close this down or try and create a bit more space here, close the chat. As you can see here, we've got one link to the Google font API, which is actually working, unlike the Locofy example. And if we look at the header, we've got layers that mimic the names we set up in our Figma. This is what I was going for. So head our centralized container, header inner, head of left, header right. That's looking pretty good. You can see we've got one section here, one set of HTML for the hero. It's using the same container class here, which is exactly what we want. It's using that container class throughout our webpage. Perfect. It's not using a section for the product card, which is a small detail, but still, I think it's much smarter. Scroll down to see the footer. Again, that container class we have for the whole page, and I'm pretty happy with this HTML. Okay? The only thing that we'll need to fix is it's currently serving these images through Figma. So we just need to move the images into either the folder here or some address other than our local address here because we couldn't publish this to the web because it's a local Figma server version. Okay. But all things considered, I'm really happy with this result. And then the next video, let's clean up our code a little bit, which shouldn't be too much work, given that the AI has done quite a good job of auto generating the code. I'll show you that variable modes feature Figma, and then we will finish off the class. So I'll see you in the next one. 12. Final Code Cleanup: Alright, so in the last video with the use of the MCP server Figma and the AI enabled co generator Cursor, we were able to create our webpage with proper HTML structure and class names, plus the CSS to make it work on every screen size, I E to be responsive, but it's not 100% of the way there. We can't just take this result and ship this directly. We need to make some changes. But I think you'll agree with me that AI have done a pretty good job. We just need to do the last, let's say, 10% of refinement to fix up this design. Okay. So if we look at this is the largest screen with, but maybe if I simulate this on a much larger screen with, I wonder if we can dial this up to see what it's like on 4,000. Okay, cool. So there you can see this is an unlikely screen with, but still something that's possible. And the only issue I see at this screen whip is the faces of the models. Remember I said earlier when we were adding the background fill, was that it would be nice to control the positioning, the anchor point of the background image. So we can do that within HTML and CSS. Let's click into our hero section here. Let's see how they've included the image. Yeah, so they've just put it as a background image on the element via the CSS. And what I will do so that we're not relying on the Figma MCP servers, I will move these asset files over and refactor that. But first of all, I want to change the background position. Sorry. Everything is a little bit tight right here. And as you can see, when I hover over this, it fills up the whole space. But basically, what we're looking for is background position here. And instead of center, I want this to be at the top. Now, this looks a little bit weird because her chin is a little bit cut off. So maybe we want to set another break point and on very large screen sizes, maybe make the height of the section even bigger. So I'm going to use my dev tools here to dial in a bigger height, maybe not 12. Hundred, but 1,000 pixels maybe maybe I look at the header, which is 98 pixels tall, and I make this extend until the bottom of the fold, so I can do that by going Cuk 100% viewport height minus what was it again, 98 pixels. Okay. Okay. Is I'm going to go back into Cursor. Going to go to the end of our CSS file here, put in media min width, and let's say 1,500 to start with. The selector is hero, and we're going to set the height to Calk 100 viewport height -98 pixels. Okay? And then we're going to change the top background position, not in a media query, but just in general. So we're going to look for hero. Instead of background position center, change that to top. Okay. That's looking a bit better. But instead of top, we can dial in something a little bit even more targeted, and that's to put in background position we've lost our attribute here. Let me just do it directly in the code here. Instead of top, I'll do background position Y. And then I'll put in like 5%. All right. Let's play around with that, so we can do 5% is about that, which moves it up a little bit compared to top, as you can see here. 5% reduces the space above the guy's head a little bit. Okay, so let's bring down our screen width. Remember, we set that at 1,500. So if we get down to 1,500, this should all work for us. Actually, we need to set our background position X as well, because as you can see here, it's not centered. So we'll bring back our center positioning on the horizontal axis, like such. Okay, great. And then once it gets under 1,500, you'll see that the height is not as tall, right? And so up to 1,200, I think everything is looking good. I'm all good with this. If we wanted our cards to look more like the original design without the border radius, if we wanted to remove the hooves staate and if we wanted to remove the shadows, we could do that. But I'm pretty okay with this. The only thing I have an issue with is they're pretty tall, so I don't know if I want that. So let me just remove responsive mode and apologies for this being super tight right here. And let's see what's making that like that. If you have a look at our container, it's only 847 pixels wide because it's got a massive padding. Okay. So on the container class, there's a giant padding that's been set, which is not what we're after. I believe in the Figma, we set the container padding to 16. So actually, for some reason, it won't let me change it. But let's go back into our code here, find container. And then I think if we search for it again, you can see it has the 16 pixel padding, but only up to 480 pixels right here. So we can just remove this completely. From the desktop styles here, and then the one that's below 480, we can remove that as well because that's just redundant and we'll just stick with padding of 16 pixels on either side. Now, if we have a look, they're not so squished, pretty easy fix. All right. So let's double check again on our super wide screen sizes, how's that looking? Let's dial 4,000 in. Cool. I'm happy with that. If we go down to 1,200, I'm pretty happy with that. Let's go down to 1,000. Cool, cool. All right. So we're probably where are we at around here. So that's 1030. Let's bring it down, down, down, down, down. I think it's getting a bit tight here. We might want to set a break point from maybe like 10,000 to the mobile breakpoint. Maybe we want to split this into a different grid, maybe a two by two grid like that. And then the product cards change the max width on them, so it looks a bit like that. Y I do that. Let's create a break point at the end of our CSS file here. Min with 769 pixels, and Max with 10,000. And then what do we have? We're going to remove the max width of the product card, Max with, let's say, 100%, and the what was it, Product grid. Actually, I'll just copy this. Saves me some time writing this out, set that to two, same gap as before. Then now you can see once we get from actually, I might have set this to too many zeros. There we go. Once we get above 10,000, we'll have four horizontally. But then once we get down to here, you'll see that we get a grid of four. And so that should be good for all of our desktop screen sizes. So 769 all the way to really large, like, we've tested up to 4,000. Now let's have a look at below 769. And as you can see, we've got some work to do here. So we no longer want this menu to show. So it does say desktop only, which is interesting. And it has got a class that's set to display none. But then, of course, it's being overwritten here by this other class. There's a few things we can do. We could set important on here. We could change the order. Given that it says desktop only, I'm okay to set these two important, right, because it's quite a specific class name. Usually, you got to be careful with importance, but if I'm putting the class desktop only on something, it's pretty certain that I don't want that to show. Okay. Now, the other thing in the header is that the mobile menu is over on the right. I don't know how the AI got that wrong. That was not part of the design at all, but we can just go into our index file here and move that directly from head of right over to header left. Okay? Oops, create the space there, put it in there, and you'll see it's in head or left. Alignment looks a little bit off. They are set to align items center, but sometimes icons have a little bit of a weird height. So as you can see here, the button is a bit bigger than the SVG within it. There's a few ways we can fix this. One of them is to put display flex on this. I see. Mobile only we've got Block Important blocking us. So yeah, I'll only use Important when we're talking about display none, and then I'll put display flex on here with align items set to center on the actual button itself, and you can see that with that on, it kind of moves it into position. So I'll go to Menu toggle in here, dot Menu Toggle. And as you can see here, rather than me trying to create this whole HTML and CSS from the design, I'm using AI to cut out like, 80% of the work, and then I'm able just to refine this with a little bit of code cleanup, okay? So these are already stacking on top of each other, which I don't think is the right move. So let's find our product grid class here. And it says under 768, we want it to be one column. Let's not do that. Let's give it two columns. But as we get down to even smaller screen sizes, we probably do want it to stack as one column, okay? And then product card Max WIP actually, we can probably just remove the max with completely at any screen size. Sorry, let me find that again because the max with should be restricted anyway by the container with, the available space on really large screen sizes. So just double checking that. Let's go back to 4,000, and you'll see that the cards don't really grow past 280 WIP anyway, because there's four of them in a row, and they're inside a Max WIP container. Alright. So back to, let's just say 650. That's looking pretty good. Okay. And then let's go down to actually, I'll use the responsive mode here to dial in. Phone 12 Pro. And as you can see here, these product cards are a little bit too tall. So I think at this width, we're going to want a single column. So as you can see here, there's already a break point for 480. So what I'll do is I will before product card put in a selector here for product grid and set grid template columns to one FR. Cool. I like that on mobile. Okay. So there you go, guys. It's now basically unbroken, but not particularly functional and these buttons don't really do anything. So obviously, we'd need to design that out and build that. We might want to set the Cursor to pointer on these cards. I'll do that. So set Cursor to pointer. And now it indicates that if I click on these cards, I'll go to the individual product. If we wanted to take this a step further, then we can still use AI with Cursor, just without a Figma design or with a Figma design if we were to go in here and create our sidebar menu and our cart. We could do that with Figma and then reference it in a prompt. But let's just say we don't build the design. We can still ask Cursor to create it for us. So we need to bring back our Cursor agent. I'm going to hit Command I to do that, and that brings up a chat again. And what I will do, I'll just make sure I know the exact class of the menu toggle. I'll copy that and I will say on mobile, I below 769 pixels. When the user clicks on, I want a sidebar drawer to pop out from the left with the same menu items as it's best to be really specific. If you use actual classes from the HTML, that's going to give you the best result. So I'm going to find header menu as dot Header Menu. Okay? On mobile, when the user clicks on that class, I want a sidebar drawer to pop out from the left with the same menu items as this particular element. Okay? If you have other requirements, if you're really good at describing what you want, specifically, you can add some more detail, but I'm just going to hit Enter on that and see what Cursor comes up with. As you can see, it's running through a to two list and updating our code. If we did have a Figma design for the drawer, would update this prompt to say, Infigma we have the drawer designed. Please follow that design. In this case, we don't we're letting Cursor decide the design for us. And I'm just going to click Keep A. And now let's have a look. If we look at our design on mobile and I click the menu item here. It's actually done a pretty good job. I'm impressed. There you go. So we've got the same menu items that we have on desktop. Oh, and now we've lost them. So let's find out where they went. Desktop only non important. Desktop only wasn't even in a breakpoint. So instead of having it like this, I'd rather have it the other way around. So desktop only to at media Max WIP, we probably already have a media query for that. So instead of that, find the media query for Max WIP 768 and put desktop only display nine important in there. Okay. So now you can see we have our desktop menu, and on mobile, that shrinks into this hamburger icon. We click on that and we have the same menu items in here. Okay? We can also create a drawer in a similar way using AI for the cart. But obviously, we'll need to create a lot of JavaScript functionality in order for that to work. And a lot more logic, depends on the platform you're using. But yeah, I'm pretty happy with this result. I've been recording this video for maybe 15 to 20 minutes, and we're able to take the AI generated result and get it looking like this, totally mobile responsive with a sidebar drawer for the mobile menu. So I encourage you to, once you generate the code for your own project, clean up the HTML and CSS code, and share with us the result in the class project section of this class. 13. Figma Variable Modes: Alright, so in this final video, before we wrap up with the conclusion, I am back in figma, and the reason why is because I want to show you a cool feature, Figma that's relevant to what we've been doing that I do recommend you use, but it does require the dev seat or higher Figma, which means it's a paid feature. Hence why I didn't show it to you earlier. But now that we've gone through the MCP and demonstrated that which requires the dev set or higher, I thought, if you have decided to switch over to a paid plan with Figma, then you're going to want to use modes. Okay? So I alluded to it earlier when we set up our variables. But if we go back to our variables over here and I go to sizing, you can see I've got section padding and section padding mobile. This is the perfect use case for a mode. Does it make sense to have two different ones when it's only the mode, that changes. Okay? So what I'm going to do is I'm going to click this button here to create a new variable mode. And let's see if I can extend this. There we go. So we can see both modes at the same time. And instead of mode one and mode two, what I'm going to do is say desktop default, and then I'm going to create one for mobile. Okay? For page width and page padding, we have the same values, regardless of whether it's desktop or mobile. We can always change this if we want, but here you can see for section padding, we obviously have a difference. So I'm going to over here set section padding on the mobile mode to 35, allowing me to delete this variable right here, okay? Now what that's going to do is I can use the same variable on desktop and mobile, but then change the overall mode of the parent frame to modify that variable. Okay? So let's see how this works if I go over to my mobile design now. We should see the fixed section padding of 35. You see here that's a bit grayed out and unlinked because we have removed that variable. If I go in here and just set it to section padding, it's going to be equal to that bigger section padding on desktop, but we'll fix that in just a second. So I'm going to set this to section padding. Now, in order to get it to respond to a different mode, we need to tell what mode this frame to operate as. So if I click on my homepage mobile frame and I go over here to appearance, you can see this icon here, apply variable mode. So we're going to click on that, go into sizing and click Mobile. Now you can see if I go over here and we go into our section padding right here, it's 35 there, but over here, it's 75. So obviously, we didn't have to set a mode on the desktop version, but let's just do that for completeness sake because it autos to the first option. If we want it to be specific, we could go in and set the mode of this frame to desktop default, and you can actually see the mode show up here. And that's just a basic example of using modes. Let me show you something cool right now. I don't know how to describe this, so I'm just going to show it to but we could set, for instance, the text size of the button on desktop and mobile to be a variable and then change it based on the mode. So as you can see, it's 20 on desktop and it's 14 on mobile. Instead of having it as two different values, what I can do in order to make this more automatic, and again, this is optional. We still got a good result with the AI code generation without this. But if you wanted to take this all a step further, if I was to go into here and let's create button text size. And then the first one on desktop was 20, wasn't it? 20, I believe, and the other one was 14. So what we can do now is I can go over here, change this to use a variable instead. So I just scroll down to the bottom, click this icon for variable, choose button text size. That will automatically set it to 20 because the mode of the parent frame is desktop. And if I go over here, do the same thing on the mobile version, change the button text size, it'll be 14. And what the coolest thing is is if I was to duplicate out this component, actually, we'd probably want to set the button text on the parent component itself. So I'm going to do that now button text size, right? So now if we were to duplicate out this button, and hopefully this is visually obvious when I do it. But if I drag this element from here over to here, we can see an instant change from one screen size to the other. Okay? So that's just a little bit on modes. We could actually take our whole header and refactor a lot of this content to be variables, set a separate mode on those variables, and then drag the section over into the other frame, and it will automatically morph into the mobile design. But this is not necessarily necessary to get a great result with our AI code generation. Modes is not something that is native within HMLCSS, but just something that makes our variables a little bit more organized. For example, having two section paddings that are essentially the same thing, but for different screen sizes, having the same name for both modes, but just changing the value based on the mode is a little bit cleaner from a FIGMA project standpoint. Okay. So with that little tip out of the way, let's conclude in the next video and talk about your class project. 14. Conclusion & Class Project: This concludes this class on Figma web design for web developers. For your class project, I encourage you to create your first web design Figma using the techniques we covered in this class, setting up your layout with auto-layout and components, naming your layers properly, and preparing your designs so that it can be turned into code with one of the AI tools that we explored in the class. When you've completed your design, upload it to the class project section to share your work with other students or to get feedback from me personally. If you enjoyed this class, make sure to leave a positive review and be sure to check out my other classes here on skillshare.com where I dive deeper into web development, Shopify, and other modern tools. Thanks as always for watching, and I'll catch you on the next one.