Figma for Web Design UI & UX: The Essentials

1. Introduction: Hey there and welcome to this course that's going to teach you the essentials of working with Figma. Hey, there, I'm Chris Baron, a professional web and app designer, as well as a best-selling instructor. In these couple of hours, you're going to learn how to get up and running with Figma in no time at all. And that's without any previous experience. Our goal is to get used to the program while having fun. So that's why I've come up with all sorts of activities and exercises so you can improve your skills while doing something fun and interesting. Figma is the newest thing for the web design and mobile app design projects. It's quickly becoming the industry standard. So it's a great thing to learn to have a new CD. Figma competes with Adobe XD sketch in a few other programs. To do this course, you're going to learn everything that you need to know about it, including the basics regarding how to install it, plus what's my take as a professional? Is it good enough? Is it better than Adobe XD and all those other programs? Now, at the end of these couple of hours, you're going to have a meeting website completed, a collage. You'll know how to design burdens, text layers, and you'll have a good understanding of the fundamentals and Figma. Things like how to mask items, how to work with color, but also more advanced things like how to work with grids, effects of all sorts, components and drafts. Finally, this course is part of a series and this is the beginning of your journey. After this part is done, you should continue with the next steps so you can become proficient in Figma. And with that, let's get the word. 2. What is Figma and is it better than other design programs?: Hey there, this is cress, less talk about Figma. Figma is a free design program that allows you to create awesome web and app design projects. So websites, Android apps, and iOS apps. Now that I say it's free, yes, it is free and no significant limitations to the free plan. You can check out the comparison here. Basically, you won't be able to share stuff within a team, but that's really not essential. If you're working all by itself, you're the good ago. More on that in another video. Now, the next thing you need to know about Figma is that there's a lot of hype around that. People are talking about Figma and how awesome it is. It has serious momentum. And you can see that from this chart here, at least in terms of animating your designs, which is called prototyping. Now, Figma seems to be growing like crazy. Why do designers love Figma so much? Well, I can't really say there's one specific thing, but let me tell you my view. Number one, I like the fact that several people can work in Figma at the same time, in the same project. That's totally awesome. Now, to be fair, other programs are doing that as well. For example, Adobe XD, the second thing that I like, you can use Figma in your browser. Yeah, You heard that, right? You can fire up just about any browser, sign up for the free, and get to work. Your computer doesn't have to be all that powerful. You'll need at least Windows 8.1 or macOS Sierra, but that shouldn't be a problem. Now, that's it. Nothing more to it. One suggestion, please install the stand-alone program though. That's what we're going to use in this course. Please pause the video, create a free account, and download the program. Again, you can use it in your browser, but I prefer to use it as a program. I'm not going to show you how you can sign up because it's like signing up for Gmail. It's all super simple, straightforward NADH. The third reason why I like Figma is that it's fairly easy to use for the beginners, but it's built to handle the biggest projects in the world right now. Think about projects like Lyft or Uber. Think about apps that have four or 500 screens. Figma can handle it, no problem. And more than that, Figma allows you to quickly make changes in hundreds of screens. That's the real power of Sigma. It's actually being used by Rubens design team. Now one thing before we move forward, Figma in your browser versus big man has a stand-alone program. There's no difference between them. Is the same program, the same features? If you prefer to work in a browser, that's totally fine, but I like to keep things separate. So although there aren't any differences, again, I recommend the standalone version of the program. Next, let's talk about Figma versus Photoshop, Illustrator, Sketch, Adobe XD and so on. First, you shouldn't compare Figma to Photoshop and Illustrator. Those to Adobe programs are incredibly powerful, but della built for something else, completely different. Photo shop is an incredibly versatile program. It can do loads of things, but because it's so capable, It's also incredibly slow. It's like a cruise ship filled with loads of things for your enjoyment. But because it offers so much, it's very hard to get around it and it's not exactly the definition of speed. To put it nicely. Illustrator, again, similar to Photoshop. It's a fantastic program. I love it, but it's all about working with vectors. Figma, on the other hand, is all about web design and add design projects. That's it. The whole program revolves around these two types of projects. And because it focuses on just these two things, it's faster, easier to learn, but it's also incredibly powerful in that regard. Now, incomes Adobe XD and sketch, which are direct competitors to Figma. These two programs do the same things, but which one is better with C? That's not the right question. There is no best program. Bmw three series versus Mercedes, C class versus the A4. Which one is the best? The latest iPhone versus the latest Android, which is best. Pepsi or Coke, which is best. It's a matter of preference. Sure that our differences, but at the end of the day, they all do the same thing. Now, something to note is that Figma is free sketches $9 per month. Xd is about $10 per month at the time of this recording. And Adobe XD has a VBD grid feature, which is totally awesome. But figma has auto layout and as you can see, it's a very long list of differences. But as I said before, there's no clear winner. And we're gonna say that again. There are loads of differences, but they're not something that you have to think about. Trust me, even though these are direct competitors, I can't tell you which one is best because it's a subjective thing. More than that, I have a web design course in Photoshop and a web design course in Adobe XD. At the end of the day, it does not matter what will you use. What matters is what you can do with it. I'm going to say that one more time. It doesn't matter what program you choose to work with. The client doesn't care, the developer doesn't care, the design community doesn't care. I'm going to show you how to prepare the design for coding, and that will work for everybody involved. The coder won't have to learn Figma with Adobe XD with Photoshop. The client won't have to open the source file and play around with it. That's not needed. So because of these things, you can use whatever you want. If you choose Figma and joy than Pepsi and BMW. That's great. If you choose something else, again, it's the same thing, it makes no difference. So please don't worry about it and don't ask yourself which one is better. Instead, ask yourself which one do you prefer? And with that out of the way, please pause the video and make sure you have Figma installed as a standalone program because we're about to get to work. Thank you. 3. The welcome screen in Figma: Hello and welcome to this lecture. Let's open up Figma and get used to it. This is how the program looks like at the time of this recording. Initially, there's a lot to look at, but let's simplify it. To create a new project. You can click here in the top right side design file. Once you click on it, you'll be brought to your new project. No questions, no setup. Big merges brings us straight into it. Now, quick note, if you're coming from Adobe XD or the Photoshop, you can't open up your projects in Figma. Right now. Figma can only open up sketch files and that's about that. So you can't really come from a different program with your previous files. Okay, Let me close it so I can show you another way to create a new project. And that's with control and where you can remember N for new. So that's control. And in this course we're only interested in design files. So please ignore this other option is not needed. If you don't like seeing this option, just check this box. Okay, let's go back to the main screen or the welcome screen. This is where he can see your recent projects and you can change up this section by clicking here. I recommend that thumbnail version. You won't see the same projects on your end because these are specific to my account. This layout may change over time, so don't worry if yours doesn't look exactly like this one. For example, here we have a template section, but we can just close it off in case you want to check up on your profile, your settings, or log out. You can do that from here now. Okay, good stuff. Now, let me show you the important stuff. Figma is very big on its community. Click here and you'll get a totally new layout. Basically, this is where you have a ton of free stuff, plugins, freebies, things that help you with your wireframes, tons of stuff. You have a search bar here in case you're looking for something in particular. There are all these categories here. Now, I know that this might scare you. It's a lot to take in, but know that nothing here is essential. These are things that might help you after you get more experience under your belt. These are resources that might make you a faster, more efficient designer, but later on, as a beginner, you should not focus on them. Instead, I propose you learn the principles of Web Design. And after you have a solid foundation, you can start to explore these files. Again. Some of them are nice, but not at the beginning. Now how do we go back to the main screen? Well, if you click here, nothing is going to happen. What you actually need to do is click on this arrow here. This will take you back. So we have recents, drafts, and community. Oh, by the way, this is in Beta. So it may change when you're watching this video. If that's the case, don't worry, the functionality is going to be the same, okay? And when you're in community, you can go back by clicking here. Make sure you check out this highlight, I know among the recent tab because of this blue color. If you've clicked on a team project by mistake, you'll get another layout. Speaking of deems, Figma allows you to work with several designers at the same time, in the same file. Let me quickly rearrange my setup. I have the stand-alone program on one side and my browser on the other side. Let's imagine that this is another designer. Now, as I move my mouse, you can see it here as well. So this is how it's like working with several people in the same file. But that's not for everybody, so we won't get into it. Speaking of things we won't cover too much was this other thing called fig jam. We can see it here in the top right side, but also when we hit Control N, and we don't check that box at the bottom. Real quick. The egg jam is a white board that you can use to sketch out your ideas. Let me show you how that looks like. It's basically a place where you can brainstorm ideas, sketch things out, create a structure for your projects, and so on. But think jam is a separate tool, is not essential for our web design work, so we won't get into it. Jam is great for online meetings where several people want to discuss something. It works right in your browser. It's intuitive, so it's easy to get started with. But again, since we're not part of a team or a company, will put it to the side. I know you may be curious about it, but there's a time and place for that and it's not now. Trust me on that. Okay. Let's take a quick break and we'll continue in a second. 4. Getting started with Figma: Welcome back. Let's get to work. But I encourage you to watch most videos, especially their hands on one's twice. The first time you watch. Don't try to work along. Just watch and understand what's going on when you get to the end of the video, restarted and watch it again, this time by pausing as often as you need to in order to work along. This is by far the best way to learn. So again, don't try to work with me on your first viewing. Instead, do that the second time you watch the video. And please don't use your phone. It's way too small and you won't understand what's going on. Okay, let's get started. Please create a brand new project with control and, or by clicking here, everything seems so empty. But let's create a second project by using the same hotkey control. And okay, let's have a quick look here. Our projects are the shown as tabs. If we wanna go back to our main screen, we can click here on this Home icon. Just like that. Do move between projects. Just click on the names. Right now both of them are called Untitled. To change that focus here in the middle of the page. Click here, and now we can rename it. I'll call it Kress won. Now move to the other one and rename that to press too. So Project 1 and Project 2, right? Now Let's create a rectangle by hitting R, R for the rectangle tool, or you can just click here. You can see that this tool is the one that's selected because it has this blue highlight. Now let's drag one. It's gray on gray, so that doesn't work. Let's change this color. This is always done from this right side. This panel changes based on what's selected. You know, the rectangle is selected because it has this blue highlight. If we click anywhere else, notice we have very few options here. Okay? Select the rectangle and on the right side you'll find Phil there. Please click on this square, not the letters by the way, on the square, aka the swatch. Okay, that's going to open up the color picker. This is the color picker. Choose any random color and then hit the escape key or that the close button. But if you click the characters, you can manually type in the color code. That's fine too, but that's not what we want right now. Okay. Now we have a red square inside Chris, to go to the tabs and the head, this X symbol, to close it off. Now, this is really important. We just save all the work that we just lose. It would happen. Listen, it's all fine. Click on the Home icon. And in the recent stab, you'll see cress to, this is the first one in the list because it's the last project we worked on. If you want to open it, double-click it. So the first essential point is that Figma works with tabs exactly like any browser. If you want to switch between tabs, click on them. The next essential point, Figma always saves your work, so there's no need to use Control S or any other hotkey. Figma saves everything automatically. But that brings the question, where are the project saved? Well, they're not on your local computer. Everything is saved on the Cloud. This is why Figma is awesome. If you log in on any other computer, you'll have access to all your files. This is how multiple people can work on the same project. Since everything is on the Cloud. So on the Internet, everybody has access to it. Think about it. If the file is on your drive, other people would have to connect to your computer and that's not cool. But because the file sits on the server, on the web, everybody can access it. That is, if you allow them to, of course, the cloud is safe, fast, and very easy to get used to. The downside is that you do need internet access. Now it's not the end of the world. If you're on a flight or you get disconnected for the few hours. Once you get back online, the project will be uploaded to the cloud once more. But let's say you don't like working like this. Maybe you're used to photoshops way of saving files. You have that PSD on your hard drive. You can copy, paste it on a USB drive, email it and so on. Well, the thing is everybody is moving to the Cloud. Photoshop has that option as well. Adobe XD is big on the Cloud. Even sketch made the switch very clear that the Cloud is the future. My advice, don't fight it, even if you're not comfortable right now, try it out. As long as you name the projects in a decent fashion. And you can see the thumbnails. You should be able to quickly find them, but just in case you simply can't handle it. Please click here on the Figma logo. From here, go to File. Now choose save local copy. Again, I don't recommend that, but know that you can do it. There are a few more details here and there, but let's jump into a project to get our hands dirty. Let's work on something. 5. Best ways to move around in Figma: Welcome back. Let's talk about the best ways to get around and Figma. First, please go to your recent files tab and right-click these two projects we previously created. To delete the project, simply right-click it from the list and choose the leap. Okay, just in case you made a mistake, you can always go to drafts and from there you have a deleted section. Okay? Now, let's create a brand new file to control land, what, whatever method you prefer, and let's get to work. Initially, I know that everything seems so empty. Any project starts with a frame. That's the first thing you need to remember. A-frame is like an art board or a canvas, but there's just the bit different in Figma is a place where you add all your text images, basically your content That's all inside the frame. Don't worry about the definition. As we work, you'll soon get it. To add a frame. Please hit F to activate the framed wall or simply click here. Oh, by the way, does another tool here called the slice dwell, but we don't want that. Okay, we have the Frame Tool selected and the right panel just changed. You have loads of options that are very well-organized. Phone, tablet or desktop and so on. And you can click on the names to open or close them. And if you click on any of them, say iPad Mini, the frame automatically gets added. You can also see it in the layers panel. See this symbol here that kind of looks like a hashtag. That's a frame to delete it. Just tap the Delete key and that's it. Okay, let's move on to the desktop section and choose the first item from this list, which is also called desktop. We can see the size right here. It's 1440 by 1024, then you have it. Now the problem is, most web design projects should start with a frame that's 1920 by 1080. That's why I strongly recommend the best way to resize it is to use this part here. W stands for the web, and h stands for height instead of 1440, click here. And now you can type in 1920. Same thing for the height we're looking for, then 80. Now the frame expanded and we can't see it very well. Here's what you need to do. Zoom in or out. Please hold the Control key and use your mouse wheel. If you scroll backwards, you'll zoom out. If you scroll forward, you'll zoom in after you do it a few times is going to feel natural. Please use your left hand, ideally your pinky, to hold the left control key on your keyboard. Now use your scroll. Please do the following. Move your mouse in the coordinate of the frame and zoom in. As you can see, this really helps you focus on that area. Now, zoom out and move to another corner. Same thing. Zoom in by scrolling for the word. I know this seems like very basic stuff, but trust me, it's essential that you practice. You can't move forward until you master this stuff. There's one more thing that you have to know how to use, and that's the Spacebar key. Say that with Zoom then to a corner and with very happy with the zoom level. But now we want to move to the other corner. This is called panning. Panning around. Hold the Spacebar key and your mouse cursor is going to change to a hand. If you let go of the spacebar key, it will go back to the standard data, The moved well, so again, hold the space bar, click hold, and move from coordinate to coordinate, from side to side, up and down. By managing to master these two simple techniques, you are creating a very solid foundation. This is your alphabet. This is your basic, basic math. Please learn it. There's no getting around that. To recap, hold the Control key and use your mouse scroll to zoom in or out and hold the Spacebar key, click and hold to move around from side-to-side to pan around, panning around. Okay, please start an empty project and practice it because the next lecture is going to be an exercise. 6. Exercise: how to move elements around: Welcome back. This is our first exercise. Here's what I want you to do. Please download this file called first exercise that FIG. When you find it, please drag it into Figma. You should see a blue highlight. That's a good sign. Drop it and the file is going to import. If you don't like dragging and dropping, then please do this. Go to the Home tab. From the right side you're going to see this icon here, just underneath your avatar. Click it and you'll be able to browse for that file, select that, and that's going to do the same thing. You're going to open it. This is what I recommend, okay? In this project you're going to see two frames in the layers panel. The first one is called small frame, and the second one, big brain. And that's basically your task. You need to zoom in to this frame on the right side, select one of these icons and then move it into the big frame. As you can see, you do need to use the space bar key to pan around and you do have to zoom in and zoom out. I want the seat to icons in every corner of the big frame. That's your task. Make sure you move them one at a time. Don't cheat. It's no fun that way. And please don't move the frames together, leave them as they are. Now, one final thing, you'll notice that the small frame has yet another frame inside it. It's called framed to. I don't want that moved inside the big frame, just the icon's. See how you can manage that. Now, if you mess up anything, just about anything, you can always use Control Z to undo several steps. Okay, when you're done, please export the big frame as a PNG and share it to the platform so I can see it. Here's how you can export in Figma. Select the big frame by clicking on this name. Please be aware that if you simply click inside it, you won't select that. So click on the top-left side or you can use the layers panel. Just click there. Okay, Now move you that patient to the right side of the screen. The last option here is called Export. It's grayed out, but you can click it. From here. We have a few options. We're going to be happy with one X and B and G. So assuming we're done with exercise, we can hit this button and we're going to get this window. I like saving things on my desktop. I think that's great. Okay, hit Save. And that's going to be that please get to work two icons in every corner of the big frame. How you arrange them, that's totally up to you. What I would like to see a nice layout. Don't continue with the course because in the next video, I'm gonna show you how to solve it. Please pause and get work. Thank you so much. Have fun with it. 7. Solving the exercise and a few pro tips: Hello and welcome back. Did you do the exercises on your own? If not, please stop the video right now. I know it seems so simple and I'm sure that you understand what you need to do, but you do need to practice. Speed requires a whole other practice. Okay, here's a solution and a few tips to be a bit faster. The regular way of doing it is to zoom in a bit and click on the first icon. Now, zoom out a bit and move it to the big frame. It doesn't matter if you do it in one single movement or on the other hand, you could do it in multiple steps. You zoom back in, you select one, and then you move it to the left edge of the screen. Hold the space bar, click Hold and pan towards the left. Now move it again. And if needed, do this a few more times. Now when you place the second icon, I suggest you watch out for these red lines. These help you align things with precision. I don't care where you place the icons in the corner of the frame, but I would like to see them aligned. Okay, now, this is the standard way of working and I suggest you do the exercise this way at least two times. Okay, now give out some alternative. You can adjust your zoom level to a point where you see both frames in the same screen. Now grab the small one and move it right next to the big one. This would be cheating and I don't encourage you to work this way for this specific exercise. The idea is to learn how to zoom in and out and pan around, but this will make things much easier and we can learn a few other things. Here's another tip. If you click and drag and make a rectangle, you'll select some of the icons from the small frame. Check the layers panel for that. See how the check mark in the Chevron are now highlighted. That's good. But if you click and drag around the entire thing, you will now select the entire the frame. The essential point is that you can select multiple items by dragging out the box. If the bogs is do beg, you will select the frame itself. So make sure you make a note of that. Okay, Now here's yet another way to work. I'll select the minus and I'll drag it over the big frame. Notice that Figma immediately moves it in the layers panel. This is awesome. So whenever you move a layer above of rain, it will swallow it up. Please make a note of that. Okay, now I'll quickly add the random rectangle. Notice the layers panel. This sits above both frames. But if I move it over the big one, well, there you go. It just follows it up. And if you move it outside, Figma is smart enough to remove it from that brain. By the way, in case you're not sure if this rectangle is inside the frame, you can simply do this. Click here to close off the frame. That's what this arrow does. Now we can see that this rectangle is just floating around. It's not a part of any frame. But what if we drag it in the big frame by using the layers panel with if we do that from here, well, here's the thing. It does. Move it in the layers panel, but not on the actual canvas. You can see the highlight here. This isn't all that great. But we can do one more thing. Zoom out to a point where you can see the big frame. Now focus here on the top right side. Click on these two icons, the second one and the fifth one. And just like that, the rectangles sits right in the middle of the frame. Now, how does this help us? Well, we can select the minus symbol, and once it's inside the big frame, we can use the same alignment worlds. This time we'll use a line right? And then after that's done, align bottom, zoom into that corner, then there you go. Okay, Now repeat the process. The thing is, you might get an overlap. That's not a huge deal because this is a great way to introduce your arrow keys on your keyboard with this icon selected, hold, Shift, and tap the left arrow key. This will move the icon and 10 pixel increments. So if you want to move at 20 pixels towards the left, that's two tabs. One into cool stuff. The essential point is that when you select an item that's inside the frame, you can use the alignment tools to quickly reposition it inside the frame. I'll say that again. Figma knows that this is inside the frame. This means we can use the alignment tools, reposition it just like that. One more thing to note, say we move to more icons through the layers panel. This isn't the best choice, but hear me out. Now. Let's say we want to use the alignment wells. These won't work as expected because there's two elements selected. And that's because when Figma sees two elements selected, if things that we want to align them between themselves. So my advice, just do it one at a time when icon and then use the alignment tools and then the second icon. And again, the alignment tools with just about done. Let's quickly move to the next icon, which has another brain. That's something to be aware of. Here's the thing. Previously we went above the icon, clicked and it got selected easy. But here that won't work. Check the layers panel. I'll click on the background to de-select. Okay, Now I'll move above the icon and click it. And notice the secondary frame is actually selected. To get to the icon, we have to double-click above it. Now the frame has opened and we can do our thing with the icon. Let's do that again. In case you have a frame within a frame and there's a layer inside that that you want selected. You'll have to click, then double-click to go down the level. Make sure you keep one eye on the layers panel to know what's going on. It's not a huge deal, but you do need to make sure you have the right bank selected, okay, at the end of the day, this is what I like to see from you. All die cons nicely aligned. Make sure you watch this video once again to really understand all the key concepts. Thank you and have fun with it. 8. Discover Figma’s interface & why professionals use it: Welcome back. When you open up Figma, it looks like a basic design program. Let's open up any new projects so we can check out the interface and truly understand where Figma shines. Okay, here we are. The project is completely empty, so there isn't a lot to look at, but let's take it from the top. We always have the home icon here that allows us to come back to this screen. We might want to do that to open up another project. What maybe check out the community tab next to the home icon we have our project tabs. This part is very similar to your browser, so we'll move on to the tool bar. This is where beginning to think, this is a super simple program. And that's because we have so few tools. The first icon shows us a lot of options. Here we have our main menu and we can do lots of things. But here's the thing. You won't actually use it all that often. Most of these options have hotkeys that are far easier to use. No one comes here to create a new file, for example, instead, most people use Control N. So keep that in mind. We won't use this menu all that often. Okay, Next to this main menu, we have a few tools and indeed that are only a handful of them. The first one is the move tool, and that does exactly what you think it does. It moves things around, be at layers or the frames of glucose or the whatever is selected. Underneath it, we have the scale tool. This is great when you want to resize things and we have a lecture about that. The next one here is the frame to wall. This kind of looks like a hashtag symbol though. It's not the case. As you're about to see, this is actually a very useful tool. We have a complete lecture on that as well. Moving on, we have the classic shapes, rectangle, line, arrow, ellipse, the works. 95 percent of the time, you'll use the rectangle tool. That's just basic web design stuff. At the end of this list, you have an option to bring an image into Figma. As you can see, this launches the browse window. Choose any image and you're good to go. And of course we have a dedicated lecture about this as well. Okay, Now, please note that the last two world is the first one here. So it's best you memorize a few hotkeys, for example, are for rectangle. V for the move tool is not that great, but you should remember it. V for the move tool, or just click on this small arrow and select the most useful one. And that's the rectangle tool in this case. Next we have the classic pen tool, but we won't really use it because most of our icons and graphics are going to come from the web. The text tool is right here, hotkey P, It's very straightforward. Word plus a couple of other tools here that, to be honest, they're not all that great, that not all that interesting. Okay, let's add the frame and then a rectangle just at random. Just so we have something to look at on our screens. Maybe a text layer two. Okay? Now in the Layers panel, you'll see these items. They all have different symbols. As we continue, you will soon start learning them. When you have something selected, the right panel will show you properties for that specific layer. For example, here we can change the font family, the size, the color, and so on. But if we select the rectangle, there are fewer options. And if we click anywhere else, will deselect and then this panel is going to be just about them. Here's the thing. Grab the rectangle again. This right panel is set to design mode. And you can see that here at the top. There is also a prototype mode that helps you make a design interactive. We won't really focus on that, especially in the first part. And there's also a third mode here, inspect. This gives you a bit of CSS code and that's basically useful for coders. Now, what's important is that you stick to design mode. Okay, Now moving on, The next thing. You have the zoom level right here. And this is something that you should constantly look at. The important bit is these hotkeys right here, specifically shift one, Shift Z though. You don't need to remember them because you can always rely on controls growling, but know that this is available right here. And again, zooming to the correct zoom level is quite important. Next, the play icon is what presentation purposes when you want to check out your design without any distractions, without any tools and whatnot. This is also nice when you have an interactive prototype. But again, that's not going to be the case here at the beginning. Moving on in the interface, this is your avatar. Mine is c for the Kress. It without several people in a project active at one time, you will see that I have a towels here. And finally the share button. This is really useful when you want to show off your work, or do you want to invite other designers to work with you on the same file? The share feature is great because you can send the design as a link via e-mail or whatever, then continue to work on it. If you send the PNG file, That's like a snapshot, and obviously that doesn't change. So sharing the link is best because you can continue to work on it. And by the time the client opens the link, you might have fixed the big issue. Okay, in the middle of the interface, at the top, you'll find a few icons, and these are very powerful and will use them quite a lot. As always, will have separate lectures about them. Finally, on the left, there's a tab here called assets. What our users that want to make the most out of Figma. This is quite important. But if you've had the beginning, not so much. I'll explain everything later on. Just know that we have a separate tab here. No gate. Now, any design can be split up into several pages. This is useful when you have a large project With tens or even hundreds of screens. Think of a web design project with 20 pages plus the tablet version, plus the mobile version, then an Android app, then on iOS app, that's a huge project, so you do need some way to organize it. Well, you can do that through pages. To be honest, there are multiple ways to organize huge projects, but pages are definitely a part of it. Okay, now let's take a step back and focus on the essential bit. The main strength of Figma, what makes Figma fantastic is the ability to scale your work. Meaning with these basic tools and a few advanced features, you can create a way of working that will allow you to quickly create dozens of screens. This is the true power of Figma, the ability to create large projects without any headaches, with ease. For beginners, again, this isn't all that important. We won't be creating 100-page projects in this course, but it's best you know about Figma strengths right from the start. Again, uber uses it, left uses that. And some other huge companies are big pans or Pigma. But for us, it's now really all that important. Okay, with that being said, let's continue. 9. Create your first mini website: Welcome back. We have a hands-on activity where I want you to follow my steps on your second viewing. The first time, please just watch and understand how I approach this exercise. The second time you watch the video on pause as often as you need to work along. Please, please don't try to work along on the first viewing. The objective is to create a mini website by using all these items. The most important thing, please have fun with it. No pressure whatsoever. I know it's very early in the course, but I want to show you how easy it is if you have the right approach. Start from the layers panel. Notice what we have here, a logo, some items for the main menu, a burden, a photo, a main menu background and so on. So things are the fairly organized. Let's start with the logo. Where our logos typically placed in most websites. Is it in the top right side? Is it at the bottom? No, of course not. The logo is usually placed here in the top left side. So click on it to select it and drag it into place where exactly. Well, it doesn't actually matter at this point now. Okay, now what about the main menu? Where do you usually find that? If you're not sure, just open up your browser and check out a few of your favorite websites. Usually the main menu sits to the right of the logo. Please move them one by one, like so. And you'll notice that stigma is trained to help us out with these red lines and it's totally fine to work that way. Take your time with it. No pressure. Once you have them roughly arranged, something like this, please click anywhere on the y surface and drag out a box. Okay, this is how we can select all of them. Now, you can see this is the case in the layers panel. Double-check that. Okay, now use this icon here to bottom align them. This quickly arranges them. It's a bit faster. Okay, one more step, click here, and you'll have an option that's called an idea, which basically means clean it up for me. And just like that, the main menu looks quite nice. If you really want to be exact, you can do this. Move this out of the way. By the way, select both the logo and the main menu. And now you can use this icon here, which centers then this is optional, but it does make it look a bit better. Next, select the white rectangle and move it up. This gray obviously doesn't work all that great. So let's go to the right side and it will look for something a bit nicer. I like bright colors. So I think I'm going to go with this one for example. This looks better, but a great text obviously is now. Okay. So here's what we can do. Select all these elements like so. Okay, from the right side, look for this gray swatch. Here it is. Click it and open up the color picker, which should be fairly easy to work with. White is going to be that much better. And indeed, it's great. Close this panel and now let's center them once more just for safe measure. Use this icon here. If you're not sure which is which, just try them out and then use Control Z to undo. Explore. Be curious, That's the essence. Okay, for the button, move the text inside that. If you look carefully, you'll see figma. We'll try to help you LK. When that's done, please select the rectangle and open up the color picker once more. We want the same color. Notice Figma is again jumping to our help. We have del option right here. But if you can't see it, you can also use this icon here. Click on the main menu, and that's about that. We have the same color, but what about the text? Well, we need to make it white. Of course, there is no other decent option. Okay? Things are going along nicely. Okay, select the image and bring it up. Make sure you can see the entire frame so you line it up correctly. This is perfect. Okay. We need to handle the title and the description. For the title, please change its size to 40 pixels. That's for the z though. Now we can see it much better for the color white is. White is always in the top left side of the color picker. Go all the way in the corner. You know, it's pure white. If it says FF, FF, FF here. So Fs for the other bit of texts, 18 pixels please, That's 18, and please make it white as well. Now, I know that this may seem fast, but I want to show you how things just fall into place. Okay, The final thing, these items are all over the place. Where should we move them? Well, the best place is right here on the left side. Move the Paypal until you see a red vertical line that goes up towards the logo. This is what we want. Cf. That's perfect. Do the same with the other FX layer. Take your time with it. I do hope you're watching this on a computer and hopefully you are working along with me. Finally, with the burden, just move it into place one at a time. That's totally fine. And overall, this is our mini website. Here's what I want you to remember. You don't need to be creative. You need to know the rules. One of them is aligning things is very important. I know it may be boring, but it's actually essential for the logo and main menu, for the burden, for the alignment of these layers. These are all very important bits. Here's how it would look like without the lining them. Just a glance into how it would look like without any aligning. So this is all right, This looks horrible. So again, the principle is quite basic but powerful. Align everything, use the alignment two worlds, okay, in terms of color, we chose one bright color and the rest was pure white. Pure white, not yellow, not green, not anything else. Just white for the main color. It wouldn't make sense to choose something like this, right? It all has to make sense. The title is bigger than the description because it needs to stand out. So these are some of the principles that will rely on. We'll talk about them in detail in other lectures. But for now please tell me, do you need to be creative to do this stuff in less than 10 minutes. We created a mini website, and it was all based on a few principles. Align things correctly, use good colors, uses standard layout. The logo on the left, the main menu to the right, and so on. This is how we'll work. We won't sketch, we won't draw, we won't get creative. We'll learn key principles like alignment, symmetry, topography, contrast, and will create awesome stuff together. That's because this is what the client needs. This is what will get you hired and this is going to put money into your bank account. Now please pause, rewind, and get to work. I want to see your version with a different color. I know it's a bit early, but believe in yourself, You can do it. I'm here to help as much as I can. Take this as a fun challenge. At the end, click on the frame and then choose Export. Then Export once more, uploaded, and that's it. Okay, Thank you so much and I look for that than seeing your design. 10. Editing icons: colors & size: Welcome back to an exercise. This file is called Editing icons and you have it attached in the resources folder. As a reminder, go to the Home tab and then click on this icon to import to the Figma file. Let's work on this icon set that we already know. Say you want to resize it, right? If you just grab a corner handle and you start dragging, well, look at what happens. The icon does become bigger and if you hold Shift, it does get bigger proportionally. But notice it gets thinner. And if you make it smaller, waist smaller, well, it becomes thicker. And that is a very good chance you don't want that to happen. So here's the solution. Focus on the top left side of the screen and click on this small arrow. This will reveal the scale tool. That's what we want to use the scale tool. Now we can quickly resize it without any issues. Las are not holding down the Shift key because Figma nose, we want to resize all item proportionally. Let me undo and I'll show you how this works on several icons at once. So select them and then resize. Works like a charm. The next thing, changing colors. Before we get into that, I want to talk about something that's actually a bit boring. I downloaded these icons from the web and it is very likely that you are going to do the same thing over and over. Web designers don't actually create icons from scratch. And note that may sound weird, but let me explain why that's the case in a separate lecture. Just know that you're not supposed to create these icons by yourself from scratch. Because we'll download icons from the web. This means we'll use other people's work and everybody works differently. If you ask 10 people to make you an outlet, you'll see different ways of doing it. And it's the same thing here in Figma. If you look in the layers panel, you'll notice that these icons have a particular symbol. That's not what I want to talk about. Instead, click here to the left of this symbol and you'll open up this element. As you can see, the trashcan icon is actually made out of four things. These two vertical lines, the outline plus the horizontal line for the lead. Well, let's move on to this other one. This has a different symbol. This is a group. Again, that's not the important thing. But if we open it up, this is the essential bed. Will see loads of other things, more groups and the few vectors. And we can open up one of these groups. But here's another group, my gosh. So here's the essential idea. Every designer works differently. Don't expect icons to be built in a certain way. Some icons may have two or three elements, others may have 20 or 30. There's no right or wrong way to do it. Okay, now, let's go back to coloring icons. I just wanted to get that out of the way because I'm sure you're going to encounter the various types of icons. Okay. If we simply click on the trash Dan, we can see there's a gray swatch at the bottom right side in case you don't see it, move your cursor in this panel and then scroll down. This means we can click it and change the entire icon just like that. It's another color. Let me undo to Control Z. Because we have access to each building block, we can select one of them, say the outline, and only changed that color. And there you go. Now, for this trash can, this doesn't look all that great to be honest, but let's try the speech bubble. Open it up and select the outline. Change that to anything you'd like. I'm happy with any random color, by the way. Next, I'll select vector 6 and 7. I'll hold down the control key to select both of them at once. Now I can change their color to say to this one, for example, just at random. Now, okay, great stuff, but let's pause for a bit. Let's do a quick recap. If you want to correctly resize icons, you will need to use the scale tool. Remember to switch back to the move tool, by the way, hotkey V, if you want to change the color of an icon, you can change the whole thing, or you can drill down in the layers panel and select some of its building blocks and change those. Before I let you try this one out, here are some other icons. Select the first one and ignored all those layers and groups in the layers panel. Instead, please focus here. Notice we have three colors showing plus we have this option to load 11 other colors. Now here's the essential idea. You can decide which color you want to adjust and simply click on the swatch. Say you don't like the light green color. No problem. Open up the color picker and start playing with it. It's that easy. Let me undo and show you something really cool. Say we open up all the colors and you're not really sure with this dark gray is being used. Okay, that's not a problem. Just move your mouse here and click on this target icon. And just like that, Figma will point to that specific layer. So again, you open up this area and if you're not sure where that color is being used, click on the target icon. Okay, here's one final technique before this your turn. These icons come from the same set. Let's say we're not a fan of this gold, yellow color. Maybe we want it purple. Okay, no problem. As long as all of them are selected, click on the swatch and change it up. Isn't this awesome? I loved this type of thing. The main idea is to experiment. There's no right or wrong way. You just want to have fun at this point. So please open up this file and change up both these icon sets. Do whatever you want with them. And when you're done, select them all and hit the Export button. Have fun and please post your work. Thank you. 11. Here's why so many beginners give up: Hello and welcome back. Let's talk about something that's a bit sensitive. A lot of beginners give up on their learning when they hit a problem. When they don't understand something, they get frustrated. And I get that. And I do my best to simplify things and to provide as much help as I can on the discourse server. But in Figma, this is sometimes very challenging and I really want to address it. Let me show you one quick example. You don't have to work along, just tried to get my point about being frustrated. So here goes, you can organize a project into pages, okay, say we're working on a redesign for the website. We can have one page for the wireframes, another the page for the desktop version, obviously that's needed and that's going to be separate. Another one for the mobile version, right? Because again, that should be separate. Now, that's one way to organize a project in two pages. Just click here to expand or close this area. And when it's expanded, you can add pages by clicking on this plus symbol, then you can rename it. Okay? Now, again, all these pages are part of a single project with one single company. Okay? How you name your pages in, how you organize things inside them. That's totally up to you. Now, let's just assume that you understand how pages work up until this point, even if you don't completely get it, just stick with me. Okay, here is where it gets tricky, kills a project that I've downloaded from the Community tab. Check this out. We have so many pages, a simple cover page, then a guide which has eight frames. You can see them here. But then another page, four components, then a page that's just used as a divider here to help organize things. Then on and on it goes avatar accordion, banner and so on. There's tons thens of pages. This will make your head spin. This is why beginners give up. When things get so complicated, you just feel overwhelmed and frustrated. That's why I want to take a moment and tell you that this level of organizing things for the professionals, for power users, for those who already do this for the living. And they want to maximize the time. If you work at Uber or the mobile or HB, This is how you need to set things up. But here's the thing. If you just want to earn a few thousand dollars per month or if you want to redesign your own website, this type of thing is not needed. You don't need to go into this level of detail. I promise you this is not the essential. Trust me. The idea is this will cover some advanced features in Figma like this type of organizing. But my plan is to get you to walk before you run. If we focus on the most advanced stuff in Figma, it's very likely that you're gonna give up. And I want to be as clear as possible, those advanced features. They're not gonna make you a good designer. I'm gonna say that again. Those advanced techniques and workflows are not a big part of your foundation as a web designer, those fancy things are the last five or 10 percent, the cherry on top of your cake. So please don't worry if you don't understand something from this course, continue watching and I promise you, you're gonna get it. And if you don't come to the Discord server and let's talk about it in real time. Again, this chord is a chat room like WhatsApp or Facebook Messenger, but it's not private. It's with a bunch of other students that are all going through the same thing as you are. So please make sure you join the server. It's totally free. And if you don't wanna do that, Just ask questions on the platform and I'll clear things up. Remember, it's fine to not understand absolutely everything from the start. Watch at least half of the course and you'll see everything will start to make much more sense. Thank you for having patients, and I do hope you're having a five-star learning experience so far. Please write me or the view. It really helps bring a smile to my face. Okay, Let's continue. Thank you so much. 12. The biggest difference in Figma versus other programs: Welcome back. Let me tell you what I believe to be one of the biggest things that you have to get used to in Figma, say you want to add a button, right? How do you typically do that? Let's say in Photoshop or Adobe XD, what actually most other design programs, you typically get the rectangle tool and you drag a shape like so. Please don't work along by the way. Then you get the textbook or the Type Tool and you add something in. Finally, you select both layers and then you use the alignment tools to center the text inside the shape. As a bonus, you might group these two layers into a folder to keep things organized. Now, this may seem natural to you, but does not help Figma works. You shouldn't work like this. Actually, if you want to show people that you haven't used Figma at all, this is a clear give-away. This tells people that you don't actually know how to use Figma. Here's how you should actually work with frames, not with rectangles or the groups. Let me give you an example. Here's a frame, 1920 by 1080. Say that we've started a web design project and we need the header for the main menu. Select the frame tool and add one in this region, just above these two layers. Not perfect. And it's likely that there's not gonna be perfect. Feel free to move to the edges and resize it into place. From here, go to fill and click anywhere around this region. From the color picker, choose any shape that you'd like. This is how Figma works best. You may ask why though. Why do we have to use frames? Now to keep it short? This helps you control your design elements much better and it's also easier to create responsive versions. It's also going to help you with your prototyping, animating the design does basically when you want to make your screens interactive with no coding whatsoever. So frames, best dancer, I know this may seem a bit weird because you may think frames are exactly like art boards from Photoshop or Adobe XD, but they're not. And another thing you can put a frame inside the frame. This is normal in Figma and is the recommended way to work in other programs does not the case. So the essential idea is this. For the most of your design elements, use frames, not the rectangle tool. Very close to that idea. Please don't use groups. There is no need for groups because we have a smarter way of organizing all the elements. Well, you've just seen is an example. We added the frame above these two texts layers and now they're inside that. So if we want to move the entire thing, you can grab the frame and do whatever you want. As you can see, everything moves without the group. I'm going to show you a lot more benefits as we continue. But I wanted to be as clear as possible, frames, not rectangles and groups. Finally, we added a film frame. But notice that this doesn't actually create a separate layer in the layers panel. We only have the frame and these texts layers. That's a bit odd if you're coming from other design programs, but you'll soon get used to it. Let's take a short break. 13. Here’s how you create buttons in Figma: Welcome back. I told you frames are the best way to go in Figma, not rectangles or groups. Let's jump straight in so I can show you how you're supposed to work to create the button and Pigma. Okay. Grab the text tool. Yeah, You heard that, right? That's the first step. Type whatever you want. I'm going to say my button. Next, you have two main choices. You can right-click it and choose Add auto layout. So that's option one. Although layout, or what most people are doing nowadays is shift a is the same thing. So again, you add your tags and then you hit Shift a next, go to the right panel and click on fill. The default color is white. So open up the color picker and change it up to anything you'd like. This is the foundation of your burden. This is how you're supposed to work, is not looking all that gray right now, but let's bring some life into it. Square edges are boring, so let's round them out. This is done by using this part here. Let's go with a high value. Let's say 25. Maybe you don't like the color or maybe the text doesn't make sense. No problem to change it. You can simply click here underneath selection colors. You have this available. If you have the frame selected, please remember to hit the Escape key to close it off. As an alternative, you can use the layers panel. That's also an option. Click here to expand the frame, and now you can select the text. Some people find it strange that there is no background layer. There's no rectangle per se. Check the layers panel for that, right? There is only the text layer and that's because the frame itself has a fill applied to it. Think of it as an sorts. So no individual layer for the fill is totally normal and Figma, now the question is, why should we use shift they so although layout without burdens, well, we have a few interesting features. First off, select the text layer and increase its size, say 30 pixels, right? Notice how the rectangle grows in size. That's one thing. So that's one advantage by using auto layout, the frame changes its size automatically. The next thing, please select the frame. This is a very important step. So select the frame. And from this part here called Auto Layout, please change this value to 20. This is called padding and is the empty space inside the burden. The larger the padding, the bigger the button. If you use a very small value, like one or two, that text is going to get suffocated and we don't want that. But if we use larger values, like for example, our button is not only going to be wide, but it's also going to be tall. And that's not great. So here's what we can do. Click here on this icon towards the right. This allows you to adjust the padding on all sides individually with 24 the top and bottom fields and leave what the for the sides. Okay. This is much more like it. This is a button. So that's another benefit of using auto layout, but we're not done. See this blue icon here. This tells us where the text layer is placed to make sense of it, enlarge it from the bottom right corner. Notice how the text stays in the top-left side. That's what this controls. And we can move it here for example, or here. But obviously we wanted right here in the middle, just like that. So this means we have a lot of control over the burden. This means we don't have to constantly use the alignment tools on a rectangle plus a text layer. This is why using frames is so much better. Let's do this again, this time with an icon to my go-to source for icons is flat icon.com. But please be aware that this requires a subscription. This is not free. The format we're looking for is SVG. This works best with Figma. You have the icon attached by the way, so please feel free to drag and drop it. Okay, Now you may want to resize it just a little bit. I'll quickly cover that. Okay, now, here's the essential bet. If we click hold and drag it here, you can see there's a highlight. Let's make it happen. And here's the magic. We can control the distance between the icon and the text layer by selecting the frame. Now from the right within any value you'd like, let's say 15. Awesome stuff, this is great. So let me do that again. I'll drag the icon once more into Figma and I'm gonna make it smaller. Next, I'll give the type tool and write something here. Now select both layers and hit Shift a. Chances are the alignment isn't going to be correct. But open up the padding and center it. Lovely stuff. This is quite easy, but please work along on your second viewing to keep up. Okay, Now let's add a fill and make it any random color. I'm moving quite quickly, but of course you should take your time with it. Now please adjust the coordinates from this part here. Use whatever the value you want in change the icon and the text to white. I'll do that from selection colors. Again, the frame is selected. Now for the distance, Let's go with something like 20. And for the padding, I think I'm going to use something like 34 the sides. That's crazy though. And then for the top and bottom, and that's our burden. Now of course, there's a lot more that we can do, but let's take a step-by-step. Please pause the course and create your own buttons. I want you to change the corner radius, the padding, the colors, and maybe try out some other icons. When you're done, select the big frame and export it. If you have more than three buttons. If you have only one or maybe two buttons, you can export them individually. To do that, just like the frames and hit Export. There's also a cheat sheet attached just in case you want to quickly review what I covered in this lecture. Remember, have fun with it. There's no pressure. Just try things out. 14. The basics of working with color: Welcome back. Let me show you how you can work with colors in Figma, the essential points, by the way, in the next lecture that we'll get into more advanced stuff. Okay, start with any random frame. At this point, you know, you can use the Fill area to control this frames color. There is no difference between the fill for this frame and the fill for a rectangle, for example, let me add one. Please open up the color picker so we can explore this part. The top-left side is pure white. That's FF, FF, FF. So six f's in total. And on the opposite side we have pure black and that's six zeros, 0000, 0000, 0000. Now, why am I seeing these characters? These make up the hex code. The hex code is what web developers use to make our designs into a fully functional web site. You don't tell them you want the dark blue color for the button. Instead you say you want to d 0 six, CA. You can see this is a hex code because it says so right here. Never used anything else for the web design purposes. If your client has a specific color code for his brand, for example, DHL is famous for its yellow. You can type that in FFC, see 0000, just like that. And if you look up color schemes on the web, you'll be able to get hex codes for every single color. Just type them in on paste them with Control V. Next, you can lower the opacity by using this slider here, though I don't recommend you do that all that often. It's not a good idea. Now let me close this off and add the novel, the shape. Here's the thing. After you set one color, we can see it here in the document colors. This is big my trying to help us out. If we make this one red and then we want to add the third shape, for example, guess was going to happen. We'll have that wristwatch added here than it is. And if we click it will pick up that color. Speaking of that, this is called the eye dropper tool, and it helps you select colors from anywhere on the canvas. As you can see, there's a magnifying effect in the top right side. That's Figma, that's not me editing this video. So this helps you pick up colors with precision. This works great on photos, but we'll have time to explore that later on. Let's move on to this bar here. So far we've worked with solid colors, but you can also add gradients. The thing is this linear is the only one I recommend. The other ones, I use them maybe less than 5% of the time. With a linear gradient, you get two ends that you can control. Right now, I'm working on this one. When I'm done, I can move over to this one collected and now I can play with it in case it's half-full, just raise up the opacity like so. Please zoom in and let's play around with this gradient. Now, to be honest, all of these adjustments, like adjusting the transition here and all that. Well, you're not gonna do it all that often. That's the truth. But I want you to know that you do have complete control over what's going on here. For example, you can add a third color. See this empty square. If you click, you'll add another colored point. And if you want to remove it, just click it and then hit the Delete key. So again, you're not actually going to do that all that opened in web design projects, but know that it's available. Okay, one final thing, you can change the angle of the gradient like so. Just grab one end and then move it around. Now, to be honest, you will only use two types of gradients here. Now, the thing is in most web design projects, you're going to use two types of gradients, vertical and horizontal. These are the only two that are actually used in modern web design to make sure that the gradient is perfectly straight. I like to line it up on one of its edges like so the final option in this drop-down is image. When you click it, you will get this checkered pattern. This means you can drag an image year and this part, or you can click here to get to the browse window. The great thing about it is that you have some sliders to adjust the image. Now to be fair, this isn't exactly Photoshop, but this is more than enough for most people. So again, this is pretty awesome stuff. But let's go back to using colors. The great thing about this part is that you can add another fill on top of this image. Just click on the plus symbol. By default, the opacity is lowered to 20 percent. And that's how you can add that we are the image or even better add the gradient. For example, imagine you want to add some white text at the bottom, but maybe this part isn't dark enough, so you can't really read that white text. So to fix it up at the top to bottom gradient for the Opacity go with 80%. You might want to adjust it so the top part isn't going to be affected. And overall, just like that you have on awesome effect. Now to recap, this is called the Color Picker, and this is the hex code. You can type in color codes that you can get from the web. But remember it's always six characters. Sigma is helping you with these document colors, but that's only after you commit to a color app that you actually use it. You can lower the opacity of a color from here. And you can change the type of failure have from this part here, my advice stick to linear gradients as they look that much better. You can stack several colors by using this plus symbol here. And you can also change the opacity from this place, 01. Final thing I forgot to mention, you can always hide, you'll fill by clicking on this icon. So if you're not sure if your gradient is okay, turn it off and see what's what. And that's the basics of working with color. Next, let's see how the pros work. I'll see you in the next lecture. 15. How to work with color like a pro: Welcome back. At this point, we know the basics of using colors in Figma, but here's how we take this to the next level. Say this specific shade of blue is very important to the client, right? Let's just imagine that case. This means we'll probably use it throughout the design, right? We're going to use it and loads of places. Now, instead of relying on document colors or using the eye dropper tool, here's what you should do. To the right side of Fell. You're going to see these full circles. Click on that icon and that will open up color styles. Currently there is nothing here, but click on that plus symbol on the right. Figma is asking us to name it and it's even showing us the color right here. And just like that, we have our first color in other colors style. If you deselect by clicking on an empty region, you will see that this entry is right here in the top right side. Now, when you want to use the same color, whether it's on a text layer, on a frame, on the rectangle, wherever you can just click here, and that will reveal your colors styles. Click it, and there's going to be dead. Now, let me do that one more time. You might ask, why is this important? Why is this so revolutionary? Well, consistency is key. You want to make sure that you use the exact same color code absolutely everywhere. In a project that's only one page. That seems quite easy. But imagine you have 20, 40, maybe 100 screens that you have to go to. That's where this really shines. Let me quickly grab these elements. Do the move tool by dragging out a box, click on the circles, and choose one of the styles. That's how you can quickly update your design really, really fast. And if you want to switch things up, just click here and choose the other one. Simple and easy to get. Now, let me switch over to a freebie from the community tab. Here we have an app with loads of buttons, but imagine we just got some feedback and it's bad feedback. Well, here's how you should work. I don't have anything selected right now, so I can see the colors styles from this file. There are two of them, main and secondary button. Right-click the first one and choose Edit Style. You can change its name, description, and properties, but I want to change the color code. Click here and use the color picker. When you're happy with it, just close it off and see how you can quickly update all of these screens in just one action. And this is a fairly small project. Let me update the green too. So nothing is selected right? Then we right-click to edit to the style from the bottom click here to show the color picker. And now you can do your thing. Okay, That's the, moving back to the initial project. This is where you need to make an update. See, you should never call these colors by what they are right now, like red, green, blue or whatever. Instead, give them a description name like background-color, action color, headline, primary color and so on. And that's because if we added it and transform this to a green shade for example, well, the name read doesn't make any sense. So again, rename it to something that's universal, like main burden, secondary button, background and so on. But before we end, what about if you no longer want the layer to have the same color? Well, there is no more the fill entry here because you've assigned this color style. So basically these are linked, but you can always detach it by clicking here. Please be aware that you won't see this chain icon unless you hover over it. Okay, now it shows up. Click it, and that's going to be that the shape does remain the same color, but now you get access to expel and you can change it however you want. Let me select another layer. You could also use this minus symbol, but that will strip away the fill and you might lose your shape if you're not careful. See what I mean. Where is it? We still have it here, but it's totally transparent. Now to recap, all companies should have a color scheme. If your client doesn't, you will have to come up with one on your own. We have a separate lecture on that about how you're supposed to work with various colors schemes and come up with them. But assuming you have a few colors that you want to use, add them to your color styles. This is done by using this icon to the right the fill, click it, and then use the plus symbol. Remember to name it appropriately based on how or where it's used. Don't name it based on its current look. Before we go, let me switch back to that freebie and I'll delete both colored styles. So we're starting from scratch. Let's imagine that we just downloaded this file and there are no styles, the speaker, right? Okay, no problem. Here's how you should work. I'm going to hold down the Control key and I'm going to go over to one of these buttons. I'm going to use Control because that allows me to drill down to that layer. No matter if it's inside the frame, will a group what several frames on several loops. So that's why I'm holding down control will, Okay, next I'm going to continue to hold Control and then I'll add shift. And this will allow me to pick up multiple layers. So that's Control and Shift. Just like that. Now with all of them selected, we can now come to this icon, hit the Plus symbol, and create a new color style. In general, you'll set up your colors at the beginning of the project. But in case you encounter this situation, now you know how to handle it. Just imagine that a coworker just sends you this file, right? But maybe again, you downloaded it from the web. Now, okay, try it out and see how you do. This should be nice and fun. 16. How to add images: frames vs rectangles: Welcome back. In this lecture, I want to show you how you can add images to your projects. First, where can you get high-quality images that are totally free? Luckily, we have unsplash.com. This is the place for beautiful images. Use them however you want, they're totally free. Next, I want to show you how you should work with them in Figma. In the first row, we have some frames and underneath we have some rectangles. Here's how I recommend you work. Now, use the hotkey control Shift K, that's Command Shift key on the Mac. And that will open up a browser window. If you can't remember Control Shift K, please go to the toolbar and you'll find this option underneath the shape tools. So underneath the rectangle tool downstairs, I'll select the images by holding down the control key and clicking on them. Now, Figma is going to think for a second, is going to hesitate because these are huge images over 4000 pixels. So you do have to be a bad patient. You know, Figma is ready when your cursor is going to look like this. We can see we have three images loaded up. Now all that's left is to click on the frames when To Entry. Great. Now let's repeat the process, but we'll use the rectangles this time around. So Control Shift K, same to the images so you can get a nice comparison. And immediately you can see that this is easier to work with. This is what I recommend. These images look that much better because they fit better. That's the first essential point. Placing images in rectangles will get you a better fit. If we check the layers panel, notice the differences. The images have replaced the rectangles in a sense. That's because they'll set as a fill. So we get three layers, not sex. In terms of frames. We have three frames and three images. So we have a bit more stuff and that's not ideal. But why should you care about frames? Well, if you control, click the image like so, you'll get a highlight of its edges. You can now resize it. That is, if you're zoomed out and you can also use the layers panel to select the images and then resize them. Just be aware of one thing you do need to hold Shift while you resize so you don't distort the images. Otherwise you might end up with something like this. And obviously we don't want that. So please hold Shift or use the scale tool. Okay, so that's the thing with frames. The images are not set as Fells. They don't fit as well, but they're easier to re-size. Let's move on to the second row, which is again the preferred option here in case you want to adjust the image, my advice is you click here on Crop image. This is the easiest way and that's what I recommend. Now you can move it up or down, left and right and so on. And of course you can also resize it. But here's the kicker. Let me zoom in a lot. You can resize the rectangle or the image. So that's a neat distinction. The rectangle or the image, CDs blue symbols. These show you the edges of the rectangle. So if I drag inwards like so, and then I hit Escape to commit. Well, the rectangle is now aware. Okay, let me enable the crop once more. If I go to the edge of the image, we'll see this arrow on what God, sir. Now we can resize it, but once again, please hold Shift. Now the slight issue is that you may get this situation where these edges kind of overlap. So you might not know which is which, right? In these cases, my advice as you move the image until you can clearly see as edges, it really helps to also zoom in a lot. Now to recap when you want to place images, rectangles are a bit better than frames. Use Control Shift K and click on them, be at rectangles, circles or whatever else. When you want to edit an image that's placed inside the rectangle, use the crop icon from the top of the screen. If you want to resize it, make sure you understand the blue symbols outlined the rectangle. Okay, so again, blue for the rectangle. Okay? One thing, you can also double-click any image to adjust it in terms of exposure contrast, and so on, you get these sliders. But please be aware that if this panel is opened and you want to close it, don't click on the Canvas just like that. Instead, use the Escape key. So let me do that again. So with an image inside the rectangle, if you double-click it, you're going to open this panel. To close it, you can of course use the X symbol or better yet, use the Escape key. Grade. One final thing you should know, say you don't like this image and you want to add another one. Sure. Most people prefer dragging a new photo from their desktop above an existing one. But that doesn't work in Figma as expected. As you can see, the image doesn't go inside the rectangle. Instead, here's what you need to do. You need to select the existing shape and you'll notice the fill is set to image. Now, go to your desktop or whatever folder you want. Grab your photo, but this time, drop it here. See this highlight. This means is going to replace the existing one. Just like that. Now, let me do it again on a new rectangle. So a simple, basic one right? Now, drag an image, but don't drop it on the Canvas. Instead, drop it here in this small area. Now, it's indeed a bit too small. So which can do is this double-click inside an image and this panel is going to open up. Now you can drop the photo here. And because this is bigger, this may be easier for most people. Overall. That's how you add images to your project. Control Shift K on a rectangle, you may use a frame as well, but in my opinion is not as good. So rectangles it is. Thank you. 17. Create a gallery / collage in Figma: Welcome back. Let's put our skills to the test by creating a lovely gallery or a collage in Figma. Here's what I want you to do. I want you to time yourself the first time and the second time you're going to do it. Please, both the time in the comments along with your design. Start with any frame, any size, because I want you to change its width and height from the properties panel. We're looking for 1920 by 1080. Next, add any random rectangle. Now this is the interesting bit. Say we want three columns, right? You can use whatever you want, but I'm going to use three. How do we make sure that the rectangle is wide enough for a good fit? Well, here's the thing in the width field, you can do some math. So type in 1920 slash 3, that's 1920 divided by three. And that's gonna give us 640. And now we can create copies of this shape and we know it's going to fit right? You can use Control D to make copies, D as in duplicate, but that will place the copy just above the initial one. So here's a better way. What I suggest is you hold down Alt or the Option key on a Mac, click and drag out a copy. Now, this works in most design programs, and I'm very happy at words in Figma 21 more time. But this time I want you to hold Alt and Shift as well. Shift will make the copy move in a perfectly straight line. So that's great. Okay, Now the issue is we can't see the edges of our shapes. Please select Alt V and add a stroke. This is available right here underneath fill. The stroke is very easy to use. You can adjust the color like so the color picker is exactly the same. And that means we can have a solid color, a gradient, or even an image as a stroke. We wanted pure white, though my advice is you make it a bit thicker. But please note, you need to use your arrow keys on your keyboard to change this value. Your mouse scroll doesn't work here. Okay? Now you can also switch up the positioning. Right now it's set to inside. I'm quite happy with that, but you can choose another setting. If you choose center and you have a value like six pixels, three of them are going to be placed on the inside and three of them on the outside. So that's what centre means. Next, we need to add more rows. So let's use the exact same technique. So all to make a copy and shift in order to make it go in a straight line. So all shift drag. In this case, I didn't do any math because I want to show you an alternative. So now that we have nine shapes, please select all of them. Just in case you select the frame, please press Enter. Notice that difference by the way. So right now I have the shapes selected. But if I draw a big box, like so, okay, now this frame that's called this top one that's selected and that's not good, that's not what we want. So if the frame is selected, just hit Enter and that will grab all the layers inside that they're going to be selected. Okay, We'll now move here and drag down. You'll feel figma. We'll try to help you find the edge of the frame. Okay, Beautiful. Now this fits. Okay, now it's time to add some photos, go to unsplash.com and download a bunch of them. I've already done that, so let me use Control Shift a to add them in. Again, please wait a second until Figma processes them. It's usually quite past. Okay, Now click on each rectangle. This is an exercise of speed. The techniques are fairly simple. Alt Shift, drag, control Shift K, and that's about that nothing all that special. Or of course you can do some math. But I want you to move as fast as possible and create a nice collage. Now, I would love to see some images from your own country. See if you can find any that should be fun. And in case the white stroke doesn't work, please select all the layers like so. Have a look though. The frame is not selected. The shapes are. Okay. Now change the color of the stroke to anything you'd like. You can adjust the thickness as well, maybe the position. Now, it's best you do this now because you get to see how the entire gallery is affected. Try it out and post your own collage. Again, I would love to see photos from your other country. Have one and remember to post your work and your time. Thank you. 18. How to mask in Figma: Welcome back. We know how to add images into Figma Control Shift K or the drag and drop off photos in the filled region, either in the right panel or in this review area. So those are the main options. But let me show you something else that you need to know about and that's masking. Let's say you want to make an avatar. A very common theme in web design projects. Start with an ellipse, a circle. You can find that underneath the rectangle tool. Drag one out and as you're doing get lease, hold shift. And that will give you a perfect circle. Next, drag any image above it. I already have one prepared. Now, initially is going to be huge, especially since is from unsplash.com. This is not added as a film that's intentional. Okay, Now, this is actually a good chance to teach you how to quickly resize a giant image besides the point, but it's a good opportunity. So we know that we need to hold shift so we won't distort the image right, squish it or anything like that. Okay, Now, shift helps us with that. But if you hold down the Alt key or the Option key on a Mac, that will allow you to resize the image from both ends. So if you're working on this coordinate point, the other one is going to follow suit. So that's Alt and Shift to shrink it, It's a faster way to work. Okay, now back to the main topic masks again, please make sure that the circle is underneath the photo. This is very important, is now going to work otherwise. Now select both of them and had this icon from this top area. In just like that, you've greater than Mask. If you check the Layers panel, you'll see that you now have a mask group. And it contains two things, of course, the photo and the circle. If you click on the photo, you can resize the image, move it around, and so on, basically complete freedom. The same thing applies if you switch to the ellipse. Though total control. Now, Is this better than using Control Shift K? Well, it's really up to you and your preference, but note them advantage, say that you have a large text layer. This is shown in Airbus 300. So a massive, massive size, 300 is absolutely huge. Now I'll drag another image above this text layer and I'll repeat the action. I'll create a mask by clicking here. And as I said before, we have total control will move the image around for the better the effect may be rotated and so on. And the text layer is still alive, it's still editable. The only thing you need to do is grab the text tool. You don't need to have a particular layer selected. You can actually select something completely different, like this avatar. Now I'll activate the text tool and move here. Okay, Now I'll edit the text to whatever else, maybe something like this, and that's it. So to recap, you can use any kind of layer of any kind, be it the shape of a text layer or another image and use it as a mask. What's important is that you place that specific layer underneath the image, gets there. Now, here's another advantage of using masks versus the control Shift K technique. You can add several layers to this mask and they will be hidden to, for example, all as some circles here. Notice how this works. In the layers panel. We can see that this extends. That tells us that all these ellipses are also a part of the mask. Basically, anything that you add to this group is going to act this way. So for example, if you want a new circle that's not hidden, you have to place it outside of this group. Now, to be honest in other web design work, we won't encounter too many cases like this. But knowing the principles of masking is important. In case you ever get a skills test at an interview, you will now know how this works. And with that, let's continue, but please make sure you practice what I've just shown you. 19. Here are the 3 types of text in Figma: Welcome, welcome. Let's see how we can work with text. We'll cover the basics and as before in the next video, we'll do more advanced. There are two ways you can add text in Figma when you can click and start typing just like that. And the second one you can click, drag out a box, then start typing. I'm going to paste some text with Control V, So just paste it in. Now, these are two different ways of adding text. Now let me click again. When you start any text layer and you want to finish editing it, you can click anywhere else like so. And as you can see, the text has been saved. Or let me do this again. You can also hit the Escape key and the text will remain as is. Now, I know that in other programs, the Escape key might remove the text, but here that's not the case. So that's your first essential point. Escape is your friend, be it in the color picker when you're adding text or when you're working with any other panel. Now back to it for the paragraph text, meaning the one with the box that we drew, we can grab a handle and move it around. This allows you to make it as wide or as narrow as you want. Now we have a few options here. If we click on this one called Auto, where the text is going to be as wide as it needs to be in order to fit on one single line. We don't want that notch here and not in general, to be honest. Okay, now let me add the new text layer through a box. Notice what icon is pressed by default, it's this one, fixed size. If you think about it, it actually makes sense. We drew that box right? We, the user, the designer, we probably made that, that big because that's what we need. So does the third option, they're fixed size. Basically that's telling Figma, hey, this is the size that I want. Okay, now there's another option here called auto hide. This is very useful because when we draw boxes, we are quite sloppy to be honest. As you can see, there's quite a lot of empty space here at the bottom. And that's not cool. Let me show you why. Let's say I add another shape to the Canvas. Okay, now with these two side-by-side, let's say that I want a bottom align them right. Now, look what happens. Figma sees this text layer as being this big. Now for us, especially when we deselect, well, we assume that this, all that is. So as you can see, this is quite a problem. Here's another quick example. In Figma, you can measure distances by holding down the Alt key and moving your cursor around. So there's the ALT key and then moving your cursor. So if we have the text layer selected and we hold down Alt, and we move our mouse over the rectangle. Well, Figma is going to show us the distance. Cool as expected. That's predictable. That's the key word here. Predictable. But look what happens if we put the rectangle underneath. If we check the measurement. This is obviously not correct. This is a surprise and that's not good. Now, technically this is correct, but it's not what we expected. So the solution is to choose auto height, automatic height. Okay? Now, I know I spend five minutes on this, but it's important in case you ever have to explain what these are to recap. The first one is best for single lines of text that are typically short. The second one is generally the most useful one as the box or just based on the text. And the third one is what those cases where you know exactly what size you want. In my actual projects, I start out with a random box. So the third option, after I base my texts, I then switch to auto hide, and that's what I'd recommend. So again, draw a random box, then switch to auto hide. Before we go, let's talk about font-family, fonts and typefaces, words all that. Well. The first one here is the font family. Roboto is a typeface or font family that contains several font typeface or font family. They just mean the same thing. I'm gonna say that again, typeface and font family, they're the same thing. Now, to understand the differences between a font and the font-family, think about the following. You are part of a family right? Now that may be multiple people in your family, maybe just one person, that's fine as well. Nevertheless, you have a family. Now use specifically are a font. You're the entire family is a typeface or font family. But the individuals, for example, your mother or your brothers or your systems, those are fonts. So again, this means that the albedo is a typeface or font family. And Roboto bold is a font that's part of that font-family. Most people often interchange these words like they mean the same thing. Font and typeface. That is not correct because of what I just described. If you mix them up, it's not the end of the world to be honest. You won't be put in design of jail because of it. But again, to recap, multiple fonts, makeup of font-family though Bordeaux italic, Roboto, Light, Roboto, bold. Those are all fonts. They are part of the Roboto font family. Okay, now you know the differences and we can continue. Thank you. 20. Discover the properties of text layers: Welcome back. Let's take a look at this part of the Properties panel and see whatever the bed does. More than that, I'm going to tell you my best practices. So this won't be just a basic tour. Okay? Now we know that this is the field for the typeface. We have Roboto right here to change it up, just type something else. This is how most Bros work. You don't actually open up this list then scroll know, instead you just type in something like MOSFETS and their ego, Montserrat. Now, let's do a quick, quick detour. How do you get these fonts? Now most people use Google Fonts, but here's a tip. It's important that you choose your fonts based on the project's mood. As an example, imagine you're going to the beach, right? Would you wear a formal suit? Of course not. What about the wedding? Would you wear the shorts and flip-flops? Again, of course not. Every situation is different and it requires a different look. So are your web design projects. That's why you have to take some time and think about what works best. Some fonts are elegant, some other playful, some of them are serious, stern. So this means that this should not be a quick decision. After you made up your mind, you need to download the font by clicking here. The process is quite simple. You're going to get the zip archive that needs to be extracted. In this folder. You'll find some files and these need to be copy-pasted into C Windows fonts. And that's that. Now in some cases you may want to restart big map to make sure that those bonds are going to be available to you. My advice is you download this particular archive that contains most of the Google Pons liability. It's absolutely huge, so please bear that in mind. Okay, Now, this is what you need to search for. This is a very popular site and you can trust it with a 100 percent. Okay, The next part in Figma and this properties panel, this is called the weight or the style. Some typefaces have a single style. If you go back to Google fonts, you'll see the number of styles shown here in this part. My advice, always use bonds that have at least three styles. So that's light, regular and bold, for example, at least three of them, right? Moving on, this is where you set your size. This is in pixels, even though it actually doesn't mention it. You can't use your mouse scroll to change it up, but you can type in your values manually, or as most people do it, they use the up or down arrow keys. Plus shift. Shift changes this value in 10 pixel increments. So that's quite nice. Okay, here's the fun stuff. The line height. This is crucial for my web design projects. This controls the amount of vertical space in between each line. Let me show you a very low value will make the text looks question. It's like someone stepped on it. Write, a generous value will make it feel loose. Now both of these extremes should be avoided. Instead, you should use this specific formula, the font size multiplied by 1.5. So if this is 12 pixels, that means the line height should be 18. In case you don't want to do any math, you can also type in a percentage like 150 per cent. I prefer pixel values. So again, that's 1.5 times the font size. You can always use the smaller the multiplier, like 1.4 or 1.3. But I love one-point Pi. That's the sweet spot at the most I use to x, but that's in very specific situations that will cover together. My advice stick with 1.5 and you'll be good to go. Next up is the letter spacing. You shouldn't play with this except for titles that are quite short. A few words and that's that. But please never modified this field for the paragraphs. It's a huge mistake. Now, next paragraph spacing, this is nice and neat, but I can't say that I use it all that often. Kills idea. Say that we have a block of packs, right? I'm going to hit Enter and that will break it up. But if you want to control the amount of empty space here, you could use this field. Notice how it works, even though we didn't have any visible empty space here, this field inserted it. Here. I'm going to tap it twice. And obviously we're going to get this gap here. I'll hit Enter, but only ones. To do this option called paragraph spacing. We can adjust our gaps. Again, it's cool for people like me, but will you use it? I quite debit. So don't worry about it is just something you should be aware of. The final options here are quite straightforward. This is the orientation of the text, left or right align, or for those few cases, centered. Pretty easy to understand. You will use this quite a lot. But here's something that you won't use. This part here changes the alignment of the text in the box that is stance. So if the box is quite big, you could potentially bottom align it or center it. But, and it's a huge, but I don't recommend you play with it. It's not needed. You'll see why that's the case later on in the courts, we have much better options. Now, you may think that we're actually done with this part, but there's a ton more to go. Click on these dots and see how many features Pigma is actually giving us. Plus, this is a scrollable window so that there's loads we explore. Now what I love is the fact that you get this preview window right here, left, center, right align. You probably know this. But what if you're not familiar with just the pie, for example, will hear this word it is, the second line of text has bigger gaps so that it forms a nice block of text. What about underlying all strikethrough? Just hover over them and see what's what. But again, the truth is, I don't really use these speeches except for the one in particular, all caps. This is available right here under letter case. Click the first one and notice the change. You can see this is enabled by this gray background. The move it click on the minus. This is a bit of an odd choice because in most design programs, if you click it again, you disable it does not the case here. So again, if you want to disable it, use the minus symbol. Now for the rest, I'm going to leave you to explore these parts if you're interested. But my advice, install lots of Google Fonts. Remember to use 1.5 for your line-height and don't mess with this other stuff except all caps. We have far more important things to cover. Thanks, and I'll see you in the next lecture. 21. How to work with text like a pro: Welcome back. Let me show you how professionals work with texts layers in Figma. After you set up a text, look a certain way, we have to use this icon here. This panel is called Text Styles. And if you've been following along, it's very similar to color styles. Click on the plus symbol and now you can name it. The next step, you can select any other text layer or create a brand new one. And instead of messing around with all of these settings, you can do this. Click here and choose Basque style that we just created. Plus you can organize these styles however you want. But most people use the following structure. H1, H2, H3, sometimes H4, body texts, quotes, links, and maybe a few other items. But let's take it the best lower. Why though, why do we need all this much prep work? Well, here's the thing. Let me open up this freebie from the Community tab. We have three titles here, right? If we click on the first one, we can see this is shown in a railway extra bold 25 pixels. But what if the next one was 23 pixels and the final one was 27 pixels? Would that be okay? No, of course not. That's because we need consistency, but we also need speed. So to make sure that we have both of these things, we set up a style. We'll call this h3 or the subtitle, or whatever you want. And now we can apply this style everywhere. This is a single page, but again, this lecture is about how professional designers work. Serious projects may have 2050 Even when 100 pages or screens. When that's the case, you might not remember the, if this value was 22 or 24, 26, people forget, it's normal. That's why we have the US textiles. This helps us work faster but also stay consistent. Now about that naming structure, maybe you don't know what H1, H2, H3 mean. Okay. Let me quickly explain it. H stands for the heading or the headline. This is a term that comes from HTML and it's a standard naming convention. H1 should be used for the most important title on the page. It's also the biggest one, and there's typically only one of them on the page. H2 is another title and it's often seen several times on the page, but it's less important to make sure that these are vastly different things. You should make sure that there's a big difference between them. So if H1 is 60 pixels, H2 should not be 56 pixels, right? By sex. No, because that would be too similar. People might not see the difference. Instead, you should use something like 48 pixels. Now, let me be clear. There are no strict guidelines. There is no particular set of rules that you have to follow if you want your biggest title. So H1 to be 48 pixels, that's totally fine. If you want it bigger or smaller. Again, that's totally fine. It's up to you. The only rule is this makes sure that they are different enough, especially with the first three titles, H1, H2, H3. Again, these should signify a different level of importance. Now in this particular project, if we deselect, we do see that we have seven headings. That's quite unusual, but like I just said, name them however you want. For example, this designer chose this bit of texts from the testimonial section to be styled in H6. I would have preferred this to be called body text. And I would probably use the same one for this short description here in these the cards. But again, at the end of the day, don't put a lot of pressure on yourself. If you're not sure how to call them. Use whatever naming you like. Testimonial texts to review text, quote, whatever works for you, as long as you remember what you did is totally fine. Now going back to speed, Let's edit heading to say the extra bold version, right? I'll crank this up to a large value, say 60 pixels. Notice how lots of texts layers have been updated in a page. This is nice to have, but there's nothing all that crazy, right? It's not all that impressive. But in a 50 page design, this is absolutely monumental. So that's how professionals work with text layers. They saved them styling in this panel and they make use of it to be faster but also to stay consistent by doing that, they get the job done, but they also Bacon a lot of flexibility. So if the client hates this font, you can quickly change things up. Speed, consistency, flexibility, that's textiles for you. 22. Effects in Figma: blur, shadows & more: Welcome back. Who doesn't love effects? Am I right? Job, shadows in the shadows blurs the words, right? Well, figma has discovered, Let's start with this design that you have attached to the course. Let's explore the various examples starting with this main menu. This looks pretty good, right? But the contrast just isn't there. It's a bit hard to read. We could select it. This value, this controls the opacity of this layer, but here's a better way to go about it. Go to effects and click on this plus symbol. Remember you can scroll in this panel. So if you don't see effects or export, just scroll down. Now by default will get a drop shadow. Click here and change it. And just like that, this rectangle became frozen. But say you really can't bell maybe because of the recording. Well, no problem. Click here on this icon to customize their effect. This has a single field and it controls the strength of the background blur. Change it to eight. Let me zoom in and you should see the effect. This is quite popular, especially on iOS apps. This frozen look to see the before and after, you can click on this icon right here at think it's a good step forward. But my advice is you stick to white or black. Okay, let's try this again. On this secondary button, you can see the background image is a bit messy. So again, it's hard to read at the background blur and it's going to look nicer. My advice is you do not get carried away with it. I wouldn't add that here on this blends simply because we already used it in the header, and that's enough. Okay, now let's move on to the main title. Same visibility issue. This time, a drop shadow may help us enable it and yeah, I think it's easier to read. Now my advice is you always de-select to see the text without any distractions. Let's open up the settings and see what's going on. X stands for horizontal. My advice is you always leave it at 0. Let me crank it up to something like 30. See what happens. The shadow moves towards the right. And if you use a negative value is going to go towards the left. In modern web design, stray shadows are the way they go. It's best that way. So again, 0 and if x stands for the horizontal, y stands for the vertical axis. And this controls how far the shadow is placed from the text. Low values work best. Actually, most drop shadows should be really, really, really subtle, barely noticeable. But if you want to stand out more, you could increase the opacity. Right now it's at 25 percent. Hold Shift and tap the up arrow key, we increase it. But this is danger that it already, I would never use such a high value. So let's take it back down. Okay, Now let's move on to the main button. Here I'm going to show you another type of drop shadow, this time a colored one. Use the same purple as the button. You should have it right here. But if you don't simply sample the button, okay, the eyedropper tool is fantastic. Now raise the blurred to something like Ben and for the y value, let's say six. Finally, take the opacity up to 50 percent, just in case you have not seeing was going on to do the decoding. Let me move this background image out of the way. Notice how the button is radiating habit has a globe. That's another way to use a drop shadow, cool stuff. Now let's move on to layer the blur. Select the main image and apply it, and you'll immediately see what's what this helps with the readability of the text quite a lot. And of course you can adjust its intensity from this part here. Now let me clear something up. This is the layer blur and it's affecting the layer that we have it applied on. This button here has a background blur. So the frozen effect shows up only on its background. So that's the difference. I'm going to say it one more time. The layer blur works on the layer that you have it the applied on the background layer will only blurred the layer that's behind the rectangle or that specific frame. Okay, When this lecture, let me say two things. First, try these effects out to see it on your own and see how you like them. I also recommend that you try and replace the background image with another one from unsplash.com. Now the second thing, and that's actually the important one. Please use effects sparingly. Don't add them everywhere. And when you do, please be subtle about it. All these effects are not the crutch. If you can't read the text first, try and blurred the background. If that doesn't work, click here and add the black overlay. But if that doesn't give you a very good result, please just change the image. Again. Effects are not your saving grace. They're not a crutch that you can lean on. Sure you could add a massive drop shadow and strokes and whatever else. But this will look horrible. So again, please use a very low dose of impacts. This is why I won't show you enough shadow, for example. It's not an option here, but most beginners overuse it and they make their designs look like it's 2005 again. So again, I'm just going to skip it. Okay. Overall, please have fun with it and remember, low doses. 23. Everything you need to know about grids: Welcome back. Let's talk about grids. Start a brand new project and add that this top frame. Please change the width to 1920 as that's what I always recommend. Zoom out a bit and let's talk about adding and using a grid system. First, have you add it. This is done by selecting the frame like so. Now in this panel just underneath auto layout, you'll find the layout grid. Click it, and you'll have a mobile grid applied by default. Obviously this is useful for the mobile apps, iOS and Android, but for the web design purposes, please click here and from grid, switch it up two columns. Here are the best settings for the grid for a web design project. 12 columns and the margin of 360. This is what I strongly recommend you use. Now, why do we need a grid? Well, this helps us align things correctly. Close this off and grab the Rectangle Tool. Imagine we're going to design some cards for an online shop, right? 12 columns is the standard because we can divide that number by 234 or even six. Here I'll add a rectangle that spans four columns. I'll quickly duplicate it, then you'll see that it will fit quite nicely. This grid will show you any imperfections. For example, let me move this one just a bit to the side. See how this stands out. Grids keep you in line, but they also help you in Figma when you want to resize something, for example, for the desktop version, resize it for the tablet version. So 12 columns with why 360 on either side. Well, that's my personal preference. And here's why. 360 times 20 is 720. 1920 minus 720 is 1200 pixels. This part of the design is called the active area, and this is where all your the important elements should be placed. Let me show you a quick example. Say the New York Times, right? See how does a lot of empty space on either side of the content. Thus the 360 margin that we put in. But here's the thing. Let's switch to Stripe.com. You can clearly see there's a vertical line going across the left side. Things are perfectly aligned. Okay, Nothing else goes outside of it. But on the right side, look what's going on, What's happening here. Why is this dashboard design allowed to go outside the active area? Same thing if we scroll down just a bit. This is actually not a mistake. This part here in the middle, this is essential content. You need to read it, you need to see it. But this part that's outside, That's just decorative. It looks nice, but that's about it is not essential, is not important. So to recap, the grid for web design projects should be 12 columns, 360 margin, 1920 wide, with a 1200 pixel active area. You can place design elements outside these built 100 pixels, but only if they are decorative. That means that if they're not seen, it's not a big deal. Let me explain things a bit more. The most used screen resolution in the world right now is 1920 by 1080. This is why my frame is 1920 and not 1440. What's something else? Now was the second most used resolution. The six by 768. This is mostly used on laptops, older ones at that. Here's the thing. Here's a 1366 frame with a grid that's adapted to that size. This rectangle here is 1200 pixels wide. This is where the content is going to be placed. And you can still see there's a bit of empty room on either side. So this is why I recommend 1200 pixels for the active area. Even on older laptops, the user is going to see the website in a decent way. So I'm going to say that again, we design at 1200 pixels because this will fit well in most computer screens and laptops, even older ones. Now, you may ask, press, what about the 960 grid? Sure. That's basically just a bit narrower and unfortunately narrow designs simply don't look as good. Most people prefer a large and immersive experiences. Now, if that's the case, you may say, but Chris, why stop at 1200? Why not go to 1400 or 1600? Maybe even more. Wikipedia takes up all the screen real estate, so does Amazon or Netflix. But these are exceptions and I can't recommend them. You'll get into a lot of trouble if you don't follow my advice, at least begin with. Rules are meant to be broken. Sure, but not right now. Any design that you post, please make sure that you follow my advice. 1924, the frame 1200 pixels for the active area, 12 columns, 360 margin. Now, before we end, I want you to do this. Use Shift R, that will reveal the rulers on the left and on the top side. So that's shipped are. Now click and drag away a guide, lays it on either side of the active area here. And when you're done here, this is where I'm going to use as I'm recording these videos, I'll actually hide the grid for most of the time. And even when it's enabled is now going to be at 10 percent. Instead, I might use it at 3% or something like that. And that's because it's distracting to be honest. There's a lot to look at and develop loads of design decisions to be made. I want you to pay attention to what I'm doing and not be distracted by the grid. I think that's a much better learning experience. To hide the grid, simply click here on this icon and that's it. Okay, that wraps it up. Please make sure that you remember those values. 1920 and 1200 pixels, 360 on either side, 12 columns. 24. An overview of components: Welcome back. Let's quickly cover components in Figma. These give you a lot of control and flexibility. Here's how this goes. Say we create a button. I'll start with a text layer and then I'll use Shift a to enable auto layout. Then it's really a matter of preference. I'll enable a fill, choose any color that you want. I'm going to choose blue or something like that. Of course, we need to change the text to pure white. That makes sense. Obviously, we might want to make it a bit bigger. The default size is way too small. Okay, then round out the coordinates and so on. Again, this tiling is subjective, but as you can see, it does take quite a few actions, right? It's nothing too difficult, but it is a lot of clicks. Now that we have one button completed, we can use it throughout our design, right? Say a 50 page design. But as always, the client comes in and he says, Hey, I don't like that color, I don't like that burden. Add an icon, change the corner radius, and so on. Basically change everything. This is where the problem comes into play. We have to update it in lots and lots of places. Now we could change the color if we use colors styles. But what about the rest? This is why we need components. Let me delete all these copies. Here's the original burden, right? Select it and click on this icon Create Component. Next, I'll drag out a copy. Now, let's just say the client says he wants square edges. Okay, not a problem. There you go. What about the color? Just change it up. It's as easy as that. But what if we need to add an icon? Well, we can just drag it in and adjust it as needed. As I'm working. Here's the key. The clone on the right is constantly updating. That's the magic of components. They allow you to make a change in the original component and then all the clones automatically update no matter how many they are. Let me switch to another project. Here. These are all basic buttons. Actually, they're made out of a rectangle and the text layer. So this isn't even using a frame that's far from ideal. But say the client wants to change the style of this button. Well, first of all, let's delete all these basic ones because we don't need them. Just imagine a colleague of yours just handed over this project, right? Maybe you downloaded it from the web or something like that. Okay, let's select the first two and use Shift eight to enable auto layout. This is optional, but most designers prefer it. Next, go to the top of Figma and transform this into a component. Beautiful. Now you could potentially alter drag copies like so. But if the project is huge and across many pages may be you can't manage that. So go to the left panel and switch to assets. Here you're going to find the button. Now, drag it and put it everywhere else. This is how you're supposed to work from the start, you might think, but Chris, if we're constantly dragging things from the sidebar, can't we just do it every time the client changes his mind? Just update and dragged out copies. Well, yeah, of course, in small projects like this one of course this is totally fine. But in bigger ones, it's a major headache. And keep in mind with only gonna do this one time after that, begin change up the button, like so, find the original one and start editing yet, I'll do something quite obvious so you can see the changes. This is how components can save you a lot of time. More than that, you can change up the text content in any of the clones to anything else, type in something, and that's that. But if you change the original styling, this one is going to follow suit. It will update the size, the font family with whatever else you did in the original one. And components are not just with buttons. You can use them for just about anything you can think of. But let's take it step-by-step. First of all, how do you know which is the original button and which ones are the clones? Well, the original one is officially called the master component. If we switch to the Layers panel, you'll see this symbol. Noticed this is filled. This is a mass that component and this is where you do all your edits and they'll be spread across all your clones. The clones are actually called instances. So again, clones or instances is the same thing. And this is their symbol. This one is empty. So it's quite easy to remember filled for the original, empty for the clone. Another way to go about it, click on any clone and you'll see this option here. Go to master component. Just like that. You now know where you can find the original. But what if you deleted by mistake? No worries. Click on OK loan and you're going to see this option called Restore component. Figma has our back. Okay, now let's pause and recap. Components are a great way to speed up your work. Select any frame, any folder, any element, and use this icon here from the top. Most people prefer to enable auto layout. Before that, then I suggest you dragged out copies from the assets panel. You can do that from the canvas as well. But as this panel, that's where this war basically. When you wanna make sure that's fine, the Muslim component, aka the original button. You can recognize it by this symbol in the layers panel. Or you can click on any clone and you'll have the option to go to the main component. Okay, Going back to it, you can make edits on your instances and they'll remain as they are even if you change the master component. Here's just one example. I'll do something fairly. Their friend. I'm going to disable the fill. I'm going to keep a stroke. I'm going to change the color of the text. So again, radically different, right? No need to work along for this one. By the way, I want you to notice that the other instances, so the other, the clones, they remain the same. Now let's go to the original one and change up, let's say the form family, right? I'm going to switch it to Montserrat. See how everything updates, including this one. I'm also going to increase the size so you can see the differences. And again, it will follow suit even though we made some changes to it. And if we change our minds, the great thing about it is that we can go right here and you're going to find this option called reset all overrides. In just like that, it flows away all our edits. This is the power of components, but this is just an overview. We'll talk more about them at a slower pace when the time's right. At this point, I want you to practice with this specific situation with a button. Use this project and retrace all my steps. Delete all these other buttons, use auto layout on this first one, make it into a component and then just have fun with it. See what you can change in what you can't change. Please approach it with a relaxed attitude. Now, I didn't mention a few things about components and that's totally intentional. We'll go into more advanced stuff later on. There's also a cheat sheet attached to the ratio of memory. And with that, please go and have some fun. 25. Drafts & Projects in Figma: Welcome back. I want to take a minute and explain the limitations of the free plan and Figma, there's a lot of information to cover. And that's because Figma is built for the projects that contain hundreds of screens. That's why everything that's coming up is so God damn complex. The good news is that you don't have to memorize it. You don't have to memorize anything. Sit back and relax. Okay, on the welcome screen in the left panel, you have the option to create a team. You should do that even if you plan on working alone for the moment. I already have Mindset up and I can right-click it to rename it. Now, this is where we can create a project. I recommend you use the name of the company you are working for. So if you're redesigning, this looks great. Dotnet, that's my blog. That's what I would write here. So just type in the name of the company. When you click on your project, initially is going to be empty. But the right side tells you the story of the free Figma plan. You get three figma design files and the single project, meaning this one that we just created. Let me explain how this works. As I just said, I recommend you name your projects based on the company's name. So if you're working for the Uber, type that in, you can always right-click and rename the project. Okay, now, you can think of a project like a board game. All board games have a box that holds all the pieces together, right? If you have different board games, you should have different boxes for each of them, right? And that's because you don't want to mix pieces between them. That would be absolutely horrible, right? You should keep them separate at all times. This is why we have projects to keep every file related to that company inside its own box. It's very similar to folders in your operating system, right? Say you have three games installed on your system. You should have three different fonts, right? If you install all three gains in a single folder, the files would get mixed up together, and obviously that would be quite a nightmare. It makes a lot of sense to be organized. Okay, So that's a project, a big box or the folder that keeps all the files together. But what files go into project? Figma design files. That FIG files, meaning what we've just created with Control N word by using that dedicated button in the top right side. Now, if we go to the recent tab, you'll see loads of files here. Imagine these two are for the OBOR project. Well, just click on them and drag them inside our project. Simple as that. So you can drag files from the right side towards the left. Now let's move away from recent and checkout to the project. Inside this box we have the two files that we just moved. Imagine this is the design for the mobile app and this one is what the top version. It makes sense to have them separate because the projects are quite different for the same company, but again, different types of projects, right? Or maybe one of them contains the wealth frames. Or maybe you have the sources of inspiration or maybe some notes from the client would maybe a presentation that you made for the client. Large projects can have tens of different files. If you're coming from Photoshop, you can think of these like individual PSD files. That's what they actually are, individual dot FIG files. But instead of them being saved on your hard drive on your computer, they're saved on the Cloud. Now, let's pause for a moment to recap a project. This one here can contain several design files. These design files can be just about anything that's related to the project. The three Figma plan allows you to have three files. That's it. Okay, moved to the recent tab and drag another one there. Now, go back to the project and notice the message, upgrade for the unlimited design files. So that's the limit with the three Figma plan three files. Now the pricing is descent, but what if you don't want to pay? Well, I don't recommend this, but here it is. When you create any random project like so. Let me make a simple rectangle with a bright color. Now, when you close it, this automatically gets saved. The question is where not in recent, don't be fooled. Instead, it saved here, under drafts. Here you can have as many files as you want. So basically this is the work around. You could potentially leave all your files here. You can't share them with any other designer to work on them together, but you can present them to your client and you can rename each file to something like Uber iOS or Android, Uber desktop and so on. It's obviously not as good as not as well organized. But if you're just a beginner, this is totally fine to begin with. And after you made a few thousand dollars from your design work, you should upgrade to a paid plan that's more than these. And furthermore, you do have the option to search for your files as long as you name them correctly, you shouldn't have any issues. Now to recap, this is all about how you organize things. There is no right and wrong way, but there are best practices. It's best to have one project on the left side for the every company you work for. Inside that project, you can have several design piles. One for the newsletter design, one for the social media 14, that iOS app for the mobile version and so on. Now, here's one thing that you can do for the very large projects. Inside these files. You can have pages and pages help you organize things even better. For example, in the social media file, which can be a lot of things. You can have separate pages for YouTube, Facebook, TikTok, Pinterest, Instagram, and so on. Right? So again, this is just a way to organize a massive project that can contain tens, maybe hundreds of screens. Figma can be used for the biggest projects in the world with themes that have tens of designers, project managers, product managers, testers, developers, and so on. Literally $100 thousand projects. And when there are so many screens and so many people involved, this is the type of thing that really helps you out. You have to be incredibly organized. But back to the real-world, you don't have to worry about all this. I'll teach you step-by-step went to create a new file and new pages and so on. So please be patient and don't worry if you don't completely understand all this. As we continue with the course, I promise it will make more and more sense. But right now, you know the limitations of the free plan, one project and three individual files. You know that dress is a place where everything gets stored by default. And that you can't invite other designers to work on those projects along with you. But even with drafts, you can share your work with the world in the sense of showing it off with the view. And with that, let's continue. 26. Here’s makes you a good web designer: When I think about what makes a good web designer, I always think about these three things. Pixel perfect execution, understanding the client's needs and attention to detail. We're going to talk about these things in detail. But I want to underline one incredibly important point. Don't get caught up into advanced workloads at the beginning. Otherwise said, Don't think that if you learn Figma at a super high level, that you will automatically become a great web designer. Let me explain what that means. See, Figma is an incredibly powerful designed to well, that's used by professionals from all over the world, from freelancers to huge design studios. Now if you manage to master these advanced features, Figma, I can help you build awesome projects in no time at all. You can work with design systems. You can share assets with a team, rely on components, invariance, use constraints to easily create responsive states. Again, truly advanced stuff. And I know you don't know both of these terms. So here's a quick example. I can easily change the color scheme to do a few clicks. This power of understanding figma has capabilities. I can also change my topography with the same ease. I can change that dark text to something a bit more vibrant and you can see how that simply works, right? Maybe the client wants the categories above this area, not a problem. This layout is built in a way where this takes literally no effort. I can flip a switch and I can change the style of a burden just like that. Now a few years ago, this would have been incredibly time-consuming. And this is In the surface. There's so much more capability packed into Figma. But see if you let the beginning of your journey, this might make your head spin. This might discourage you. Frames components variance with the hell up those things. Frames within frames with auto layout. That's why I actually made this video. To tell you this, please don't focus on these things. It's great to learn them. Don't get me wrong. It's awesome to build your project with the most advanced techniques and the best possible practices. But it's so intimidating and it might make you want to give up. That's why I wanted to tell you about this apparently complicated stuff. This won't make you a great web designer. The most advanced stuff won't make you overnight success. Instead, here's what I propose. Please understand the three principles that I'm going to mention in this course. Pixel perfect execution, understanding the client's needs and attention to detail. These have little to do with Figma. If you focus on them and you understand them, the rest will fall into place. More than that, you can work in any design program, be at Figma and Adobe XD sketch and whatever else. But please don't stop learning about web design because you don't understand how some advanced features work. These things are all optional, variance and constraints and whatnot. They are not a must-have. In time. You will learn them. I will teach you about them, but they are essential part is the principles. So I'm going to say it one last time. Don't let these advanced features scare you. They are not essential to you becoming a great web designer. You're going to learn them in due time. And with that pressure off of yourself, we can continue with a more relaxed attitude. 27. What's next?: Hey there, This is Chris. Congratulations, I'm really happy that you've made it to then. I hope you've seen how awesome Figma can be, your activities and exercises. But you have to note that there's a lot more to unpack. I suggest you check my profile so you can start the next leg of your journey. Figma is being used by the biggest companies in the world for the web and app design projects. So my advice, heat going, see what all the first is about. There's a lot of buzz around Figma. Everybody's talking about it. And in this part, we've just scratched the surface. There is a third more to unpack. So with that, I hope I'm gonna see you in the next part of your journey. Remember, keep learning, keep growing. This is press baron signing up for the moment.