Design Magic with Figma: A Crash Course for Beginners

1. Course Introduction: Are you interested in learning a powerful design tool that can take your user interface design skills to the next level. Then this Figma for beginners course is perfectly for you to start. This course is designed for anyone with little to no experience in Figma. Whether you're a complete beginner looking to learn the basics or someone who wants to brush up on their Figma knowledge, this course will provide you with a solid foundation in using Figma for UI design? There's no software requirements for this course. However, basic computer literacy and familiarity with design principles will be very helpful? Over the course of this comprehensive Figma training, we'll be covering a wide range of topics, including what is Figma and its key benefits for UI design. How to set up your Figma account and navigate the interface. We'll learn how to install Figma desktop app for added functionality. In the same course, we will equally learn how to create files, how to use the properties panel and the layering of elements. We'll also learn how to design and work with frames, grids and guides, how to add and customize various shapes, to use pen and parcel tools, we master how to use boolean operations to manipulate and combine shapes effectively. We learn to create interactive buttons and reusable design components. In the same course, we'll explore the vast library of Figma plugins to extend your design capabilities. And at the end of it all, we'll learn how to export and share your designs for various uses. By the end of this course, you will be equipped with the skills and knowledge to confidently use Figma to create professional looking UI designs. I'm doctor Rashi, a lecturer, a speaker, and a passionate YouTuber, and I'm going to be the instructor for this course. So are you ready to dive into the world of Figma? Let's get started. 2. What is Figma?: So what is Figma? FGMA is a cloud based design tool for creating user interfaces and user experiences, what we call the UI UX, right? In web design and apps development. So it is similar to programs like sketch, but with a focus and collaboration, it foster collaboration between teams between your partners, or your colleagues. You can easily work on a particular project in real time. And then it allows for creating vector graphics, designing layouts, and adding animations. One of the benefits of using Figma is that it is easy to learn. It has a beginner friendly interface, which makes it great for those that are new to design software. And then we talk about the real time collaboration. It's very, very important and it's one of the key focus of Figma, can work with others on design simultaneously regardless of your location. So wherever you are in the globe, you can collaboratively work on a project or on a particular file. In real time, you can make changes directly. So we look at how to collaborate in this particular course. And then we talk about prototyping. You can build interactive prototypes to test and refine your design ideas. It's very easy with Figma. And then we talk about the cloud based nature. In Figma, you have access to files from any device with an internet connection. So it's easy to synchronize things and you can access them anywhere. The fact that it is cloud based, you don't need to save anything. It automatically saves it saves your work as you're working directly on the Cloud. Even though you have the desktop version, but it's easily synchronized the online version as well. So it easily works. Once you have internet connection, you can continue working directly on Figma. And then lastly, we talk about the handle features. You can seamlessly transit your designs from concept into development with Figma. It's very, very easy. This is an all in one tool that you can use to develop apps, to design websites, to design different kind of interactive elements, and you can go to prototyping and you enjoy your experience. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. By 3. Creating an Account and Signing In: To start with, you can come anywhere within your browser. You can open any of your browser. You come to the search bar over here and just search for Google, and you can search for Figma very easily. You can just search for Figma and you see it over here. The collaborative interface design tool and you can see it with the first option. Or alternatively, you can just go on to figma.com and it will bring you over to the same platform. All right, so it will bring you over to this very platform. So this is the FGMA website. You can come either directly to figma.com, like I said, or you can follow the Google procedure. And once you're here, how you design, align, and build really matters. So do it together with FDMA. So you can see this is just a collaboratively sample of what the platform is all about and what you can use it for. So some of the features that you can study and just understand how the platform can be used to develop different kind of apps, different kind of web related things, and prototypes. So down here, you can go on just to have another understanding of some of the benefits and what are some of the features that it offers that you can actually go through just to understand brief about the platform. Now, once you're done, you can kick start by creating an account over here, and you can do that by just getting to using get started here or you can use the guest started feature for free over here. Alternatively, you can check out the link in the description of this video and you'll be able to find a link to join. So let's click on get started for free, and then you have this match options. You can log in directly with your Google account. You can sign up directly with your Google account, or you can use any e mail that you have or password, and you can use it to create an account directly. For this tutorial, we're going to use one of my G mail account just to log in, so we can click on the Gmail account. Okay. So once you sign in, you'll be brought into this very platform. Now, over here, you'll have to answer some questions to have access to the main platform. We have the option to skip at any given point if you don't want. But I think advisably is advisable to just answer the questions. Basically, they are just basic questions, so you can just say, what's your name? You can just write, and then you can go ahead. What kind of work do you do? This is just for them to be able to prepare the platform for you, just to have some data about you. So, for example, we can say student and educator, and then we can go to the next, and then we can say, do any of these describe your work? Freelancer at a boot camp, at a company, at an agency at school. Let's say at school, for example. And then we can see what type of institution do you attend or work for? Let's say higher education, for example. And then you can see, who do you usually collaborate with? So let's say teammates. So you can say want to invite some collaborators. At the moment, I don't want to invite anybody so I can just go ahead and skip this. And then what brings you to Figma today, start a new job and project. So start a new job project. So that's my target for today. And have you used FGMA products before? I can say, no, it's my first time because this is the first time and car I'm taking you along through this. So we just have an understanding of what it is and what we can use it for directly, so we'll learn everything on the job. So which plan will do like, it is the startup plan, which has this match feature, or the professional plan, which has this match feature as well. Well for this tutorial, we're just going to go with the startup plan. So we can just go ahead and select the startup plan and go on with next. Now, what would you like to do first, is it to use the Figma or to go on and use the white board in fed jam. But for this at this moment, to focus on the design with Figma, so I can select the first option, and then I can just go ahead and say finish. All right, so now you're in the main platform. Okay? So you have the option to kind of just follow through this and is just going to show you around so you can text a text layers with your tool bars, move tools that you can move your documents to your features to different places, and so on. And down here, you have the formating in the design panel. You have the formating features, the design features over here. And you can just just showing you at a glance, the properties. So you can just go ahead and start a new file from that, and then you can just go ahead and be welcome to the main platform. Okay, so this is the main platform where you'll be brought in whenever you sign up to Figma. Now, this concludes this class about how to create an account and sign in to Figma. In the next class, we are going to look at some of the basic things you should understand before using Figma. All of this general overview of the interface. We're going to go through some of the basic things here that you need to understand before you start creating files and start work seriously. Okay, but we're going to cover some of the basic things you need to understand at this stage. So until next time, thanks for watching and I look forward to seeing you in the next class. By 4. Basic Interface Overview: In the last class, we talked about how to sign up and create an account within Figma. And in this class, we are going to talk about the basics, the general overview of the interface, what you need to understand, and what are some of the things you should pay attention to. So the first thing is when you log into your Figma account, this is the main platform that you're going to be brought in. At the top left over here, you have your account. You have the option to change things directly. You can edit anything here. You can add your COV photo also, You can add anything. And then you can change the theme of the entire looks of the figma. This is light theme. You can make it dark. Some people like it like this. But I think I prefer it in the lights theme, so you can always use the theme and you can change it directly. Or you can follow the system design as well if you are interested. Now, again, you have the desktop, the settings. Here, you have a bunch of settings that you can play around with, for example, you can change the name, and then you can change the language or the job title, the theme. Also, you can change from here. And other features. So you can just go ahead and study them, and then you can understand the account information from here. You can update or delete or add anything. And then you can delete your account even permanently if you're done with what you're doing and you want to delete. And then this is a community for the Figma users. You can have your own can join the Figma community to publish files and plug ins and comment and see what people are doing. You can follow members and like what they use, and you can learn from them as well. And then you can manage notifications as well from here using this very feature. So this is about the three dots. These are about settings. If you like, you can download the deskstop version, which is actually what we're going to be using for this tutorial. We're going to be using the deskstop version of Figma. I'm going to show you how to download and install it. It's very easy, and then you can open it and start work. It automatically synchronizes between the desktop version and the online version, so you don't have to worry about anything. And this is the community profile. You can create a profile on your own and just join the community, and then you can share ideas. If you have any challenge, you can always share it with them, and then you can communicate and add your own comments also to some people's challenge. And then over here, you can choose the account that you want to work on, which means you can work with more than one account, and then you can sign out if you're interested. So this is the first option. You can search for things directly from here. You can search for files, you can search for projects, you can search for anything using the search bar. Right? The next, you have the recent. This outlines some of the key recent things that you've touched within Figma. So if you have touched a particular project or a particular file that you're working on, you can always find it in the recent of here. And then at the top here, you have the fig jam templates. If you want to work on template, you can easily check out and work on templates. They are classified. This is all. You can check brainstorms, you can check diagrams, you can check planning and meetings depending on what you're trying to create. But then our target for this is the recent views, okay. And then these are shared files. If you have shared files, if people or team have shared files, you'll be able to find it over here. Shared project as well. You can find projects that are shared with you so you can work on them directly. Now the next thing is your teams. You can have multiple teams that you can work together on, and then you have the draft. Draft is actually one of the most important places to be in Figma. This is where you can create different kind of projects, different kind of files. You can create and work on directly from here. So you can add different kind of files from this draft using this plus sign. So you can click on the plus sign, and you can see you can create new design file, new figma fi jam file. You can create from here, and you can import media from here directly. I'll show you in detail how to use this. And then down here, you have the option to view your plan and upgrade if you need to. Then over here, you have teams. So the first one is the first thing you have. You can have multiple projects. You can add new projects directly from here, or at any given project, you can come over here, you can hit on this plus sign to kick start a project. This is also another way, but I always like to start from the draft. From the draft is much better and easier. So these are the basic ones. Over here, this is the main thing where you can see your draft, and then you can see deleted if you are working on draft or deleted projects, you'll be able to see them over here. Now, at the top right, this is where this is where you can check out. You can add design files. You can create an add design files by just hitting on this design file, and it's just going to create a fresh design file for you. In the same way, you can equally create fit jam board directly from this top right. And then you have the option to import media be an image B and video, you can import directly from Pre. You can check out all files, design files, fi jump files, the arrangement, you can check on the sorting. Is it alphabetical? Is it date created or last modified or days first or newest first, you can arrange of files accordingly, and then you can change the looks. This is the grid view. You can change it to list view, which is something like this. And I think specifically, I like it to be on the grid view, which is my favorite. So down here, in cases, if you have any challenge during your work, you can always come over to this. And click on this, and you have the option to enjoin the watch their YouTube videos. You can check their support forums, the release notes and submit feedback if you have issues that you can share with the brand with the company, and then you can contact support directly as well. You can ask in the community. This tab is also going to take you to the same community where you can interact with people and share your challenges and ideas. And then over here, we have the shortcut, keyboard shortcut. And then down here you have, you can reset on boarding. Everything goes back to reset and you can change the keyboard layout and change the language as well from here. So this is a very important thing that you can always click to have an understanding or to connect with the other features. And then over here also, you can explore the community if you're interested. So this concludes this class about understanding the basics of Figma. The very basic things you need to understand before we start using Figma. In the next class, we are going to learn how to create a project or a file that we can work on directly. Okay? So we would create a project and a file, and we're going to understand overview of the interface as well, so you can have a clear understanding what the platform is and what we can use it for directly. So until next time, thanks for watching and I look forward to seeing you in the next class, right? 5. Installing the Figma Desktop App: In this class, we are going to learn how to download and install the Figma desktop app, which is very, very important if you have it installed on your system, so it is your work, and it is the process. And mind you, like I said before, it is very easy to s to work on the desktop version, and it is automatically synchronized with the Cloud version. So whenever you login in any computer, you'll still find your work intact. It's just for ease of access that the desktop version is made. So to access the desktop version, all you need is just to log in as we have login over here, and you can come to the our top left over here, this doctor sheet. You can click, like we've shown earlier. You can see get the desktop app. This is where you get the desktop app and download and install it. So you can click and it's going to automatically detect what kind of operating system you're using, whether it is a windows or it is a mark operating system. It is going to automatically detect and it's going to give you the version for that particular operating system. So in my own case, I'm using Mark operating system, so it's going to give me the mark version automatically. So once I come over here, it's going to save this file. It's very very small. You can see it. You can just click and you can see it. Our FIG model DMG, once you click, you'll be able to see the location, and you can start working on it directly. So you can double click and start opening and start installing directly. It's very easy to install. It's just a step by step process. Like we do install things on software on mac operating system. So you just need to drag this and drop it here. And it's just going to give you the textop version installed. So it has detected that have already have already installed one. So is it going to replace this stop because I know I have already installed. But that's the process just drag and drop, and we're going to have it installed. So once you install it, you can just go ahead and open it and to open, you can just come to the launch part over here. You can just click and you can see Figma. You don't see it, you can search for Figma and you see it here Figma. So once you click, it's going to open, so you can close on this textop version and continue to work on the online version. And you can continue to work on the desstop version. Provided you just log in, you can continue with your work. So this is the desktop version, and I've just log in, and you can see there's no difference between the desktop version and the online version. So it's just for ease of access, so you can work everything on the desktop. So basically, this is how to download and install the desktop version application for Figma. You can just go ahead and follow through, download and install it on your system that we can continue with the project. So in the next class, we are going to look at how to create a file and a project and then the overview of the main file platform, on the main platform, so you can understand what is what are some of the important things you should pay attention to while using FICMA while creating a file and managing it on FIGMA. So until next time, thanks for watching and see you in the next class. 6. Creating a File and Interface Overview: In this class, we are going to learn how to create a file and the general overview of the interface within a particular file. So to start with, like I said, you can be at the draft, which is the easiest, and you can be at the team. So you can come to the plus sign, and then you can kick start, whatever you want to kick start. Alternatively, you can come to design file over here and it is going to start a fresh design file. For this tutorial, we're going to start with the draft, you can come to the draft and you can click on this plus sign. And again, you have the option to design start from new design file. Or from new fik jam file. For this class, we're going to start new design file by just importing by just clicking on new design file. And once you click on that, you'll be brought into this very platform. So the first thing you need to look at at the top is you have this draft, and then you have the entitled project. So you have to name the project at the beginning. That's the first step. So we can do that by double clicking here, and let's say this is our first class. On Figma. So you can click on. And now you have this class this file, first class on Figma under draft under the project draft. And you can now click on this small drop down and you have the option to show version history to export this project and then to change the file color profile, and you can duplicate the file. You can rename it anytime you want, and you can move the project to somewhere, and then you can severate this file or delete the file as you swish. So this is the main thing that you can do over here. This is the main canvas where you do all of your addition and prototype creation and so on. You do everything over here. Now on the left, you have the layers where you can do search over here. You can search for anything also within your layers or within the other platforms. And then you have the layers listed and you have assets, and you have pages. Also, you can list pages and as you continue to work on the project. We look at this in detail as we move on with our project. So right now you can be on layers. And you can see to the right you have this design tab. This is where you have most of the key things that you can play around with such as the properties, and then you have this prototype section. You can prototype, you can create a new connection. You can run your prototype also from here to see how it is going to look at the finished point. So these are two very important sits to the canvas that you must understand how to use them. Now, to the top left, you have this drop down. Once you click on this drop down. You can check out the quick access to quick action. If you want to check out quick action, you can check it out. And then you have the file. You have the opportunity to create new design, new f jam file from here or you can place an image or save a local copy of the project that you're working on on your local machine or on your computer directly. And you can save to vision history, if you want or you can show vision history. And so on, and you can export frames to PDF and export your project to local file. You have these basic options like the editing, you can copy test and find things to replace the about. You can find you can do quite a lot from here. You can change the views. Also, you can insert gridlines, rulers and so just to help you with your work and you can zoom in and out. You have a lot of Zoom features directly down here. Okay. And then you can show and hide the user interface directly. You can show outlines, frame outlines, and so on. We learn how to use most of these basic tools, basic things as we navigate around. You have the object features, you have the text features, which we have quite a lot of them at the properties panel over here, and then you have the arranged feature. Which talks about the arrangement in layering, which one comes first and which one comes last. The vector feature, the plug ins, the widgets, and the preferences, you can enable or disable anything over here to change the preference as regards what happens or what shows on the platform. So you can check or tie or antique things from here. You can change the theme also from dark to light mode, or from light to dark, or you can follow the system theme. Using this method as well. Color profile, keyboard layout, and you can have quite a lot of controls from here and libraries. You're free to check out the libraries and help an account, which we have shown also from here. You can log out, you can check the legal summary, video tutorials, also keyboard shortcuts. Help page, you can check out all of these from here. So this is the first option. The next item is this move feature. You can click on this small drop down and you can move Your content or your project. You can scale things, which we're going to look in details about how to use them. After this, we have the frame which you can activate by using the letter F, or you have the section, you can create section, you can create slices. We're going to learn how to use all of these also in details together with their shortcuts. The next over here, you have the shapes of different types, rectangle, have rectangle line, arrows, ellipses, and polygons and so on. You can place images and videos if you're interested with their respective shortcuts. You can go ahead and explore all of this. And then over here, the next one is we have the Pen tools. You have the pen and pencil depending on what you want to use. We have both of them. And then the next one is the text feature. You can click to start writing anything. So you can just click and you can start writing your text, and you can see it over here, Ca. You can double click on it to have the option to change things around. As you move on. Okay, so we're going to look in detail about all of this, so you can see, you can have the design text editing features. We talk about all of these features, how to use some of them, change the phone style, the layering, the regular and the field style, the color, the stroke, the effects. We're going to look at all of this in detail to this tutorial. And then you have this resource page. You can check out anything. You can add plug ins, can add components, can a widgets as you move on. So we look at in detail, how to use some of them, and then you have the hand tool in case if you want to pun things around, within the particular camas. You want to move things around. You want to zoom into some feature or to some direct point. You can do that as well. And then over here, you can add comments. You can add comments at any given point, and someone can work on that particular comment. You can add someone. You can use the add sign to call any particular collaborator, and you can work collaboratively with that person. You can give him instruction and he's going to work directly. So we're going to look at how to collaborate with people within Figma by adding comments and collaborative words or collaborative actions so that you can work simultaneously on the same project. So let's say color this. All right. It's just a normal thing, just a normal feature, right? You can see we can see it over here. So I'm just giving an instruction. Now, this is the most basic things. Over here, also you have we can check this. Once you click, you are now check the comment section. Now, over here, you have your name Spotlight me showing that I'm no one adjusting working on this particular frame. And then you can share your files directly from here, you can share to people, you can create link and share, and you can give the various respective controls to people you are sharing the document with such as owners of this link can view or they can edit the project. Depending on what kind of control you give to them, they can be able to access and it edit the project directly. All right? You have the option to publish the community so that people can see, you can view your work, and they can give you comment as well. So this is the control. You can say anyone with this link can view or can edit this particular project. Okay? So this is about sharing. You can copy the link and then you can share with them, or you can add the e mail address of the person directly. For example, I can say I want to add, and then you can just go ahead and invite, and this is now going to send in this message to invite this person to work on this draft. Select a particular project and say, we want to invite this person, and he's going to receive the invitation, has been invited to edit the first class in Figma, which is the project we're working on at the moment. Okay, so this is the message that you are going to receive once you send the invitation. So this is the message, the class that I invited you to edit the first class of Figma, which is the project we are. So you can open Figma and you can continue to work on the project as well, because you are now giving the permission. To start work on the project. You can see you have the development mode. You can enable this, and you can always pre play your prototype to see the results directly. You can click on this and you can present and preview your prototype directly to see the result of what you are creating. We're going to look at this in detail also to understand what it means or what you can use it for. Now, we have the Zoom feature. You can zoom this 100%. You can zoom in and out and you can pixelate, and it's in pixel preview at rulers, layout grids and so on and multiple also other things, which we're going to cover and show how to use them in very detailed form as we navigate through this tutorial. And lastly, we have these three dots. Very, very important. Your recently closed tabs will appear here. You can check out from the three dots. So, lastly, you have this p s as well at any given point. If you want to refer to the help center or you want to contact the support or you want to check out the videos or thereabout. So this concludes this class about how to create a file in Figma, and then the general overview of also the platform of the file. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in my next class. 7. The Properties Panel: Hello, and welcome back. In the last class, we talked about how to create a file and some of the overview of the platform while creating files. We talked about some of the basic tabs over here, how we can use them to enhance our experience. So in this class, we are going to look at the properties panel, which is what we have here. At the moment, because we don't have anything on our canvas, so the properties panel, we can virtually do nothing from here. Except that you can change the background and change the background color, by just coming over here and clicking on this, and we can change it to any color of our choice. So you can go ahead and change it to any color of u. And if you have a cot, you can as well entire it. And then down here we have the export feature, which we're going to cover also to move on with this tutorial. But for now, let me kind of do this so we have a plain background. One thing you need to understand is that this properties panel is one of the most important thing that we're going to be using throughout our experience with Figma. All depends on what property, what element you are dealing with this properties panel is going to change. So, for example, let let's take for example, if you come over here to the shifts, and we can just click, and let's say we select on this ellipse or circle. If you want to draw a circle, you have to hold down the shift key, and then you can draw a circle just like so very easily. And by just mere drawing the circle, you can see that the properties panel has now been changed. Now, a lot of things have been introduced in that you can change the positions of this circle from the x axis x axis to y axis, and then the width and the height. You can vary all of them. Even by clicking, you can increase the number. Okay. By clicking and dragging, you can increase or decrease the number accordingly. Even though this are connected to the width and height are connected are linked with this, you can link them and you can vary them individually as you so you can see if you vary them differently, the shape changes accordingly. I'll prefer them linked, and let me do this at this moment. So this is one of the things. You can change the position, you can change the layer position also, and you can change the field, which is one of the most important things. You can click over here and you can add different kind of coloration to this very shape that you've just added. Let's say we can move across to somewhere nice and we can select and just give it a very nice color. Okay, let's say something like this, and we can click out. Okay. So while still selecting the shape, we still have other features like down there, you can add a stroke by just clicking on this position. And you see now we have a stroke added inside. Okay, you can change the position of the stroke. We can make it center, you can make it outside. So in this case, let's make it outside. But because it's a very small stroke. That's why you don't see it visually. You can increase the size also while coming here, you can increase and you can see right now you're increasing the size. I think something like this is quite okay. And if you want, you can change the color of the effect of the stroke as well. But just clicking on this. You can make it something like depending. You can make it something like something like this. I think this is nice. So you can just an escape to escape this and you're back to the same property spanel. You have other features that you can deal and deal with. You can have the effects. You can click to add effects. You can add drop shadow to this very shape. You can add drop shadow, and you can see you can see in shadow drop shadow layer blow, or you can at the background blow. In each case, you can see the shape is changing in terms of its properties. So, let's say we have a drop shadow, and you can see visually we have a small drop shadow over here. So you can remove any of these features by just clicking on this negative sign and introduce remove it and you can enable it or disable it to this eye feature. So you can enable and disable. You can see the drop shadow, it's quite little, but it's visible. The same thing over here, you can enable or disable this stroke with just this sign. And down here, you have more features. Let's say I enable this. Down here, you have more features. You can export if you're interested and export, you have different format. You can default this PNG, but you can export in P SVG and PDF. This is very basic and you can preview, can check out the preview of what you have just created. You can export. This is without background, and you can use it on other documents report writing or anything that you're working with. So this is very basic. And this is one element out of the many elements that we have. Let's try another element. For example, let's come to the text over here and just click. You can enable the text by just clicking on the tab T over here, the text, or you can use the letter T on your keyboard to kick start the text command. So you can click anywhere, and let's say we write something like welcome to my channel, for example, And you can see right now once you select, you do come on to select everything. Depending on the counter elements that you have, the effect over here changes, the properties over here changes. So like this text, you can see you can deal with the position as well. You can play around with the position left or right on the x axis. You can play around with it on the way axis, and you can play with the rotation as well, can rotate it to any angle. The something here, you have the rotation feature, but you can see at any given point, you can rotate. Let me do this. And you can check out the layer, which layer, you can play around with the layer, and you can arrange it accordingly. This is the opacity. And then down here, you have other text, basic text editing features, like you can change the phone style. You can see different kind of phone style. As you hover over, you'll see that the text changes in the phone style, and you can have the phone sizes. You can have the different size. If you want, you can on your own just directly, increase the size directly. So it's very easy. So and then down here, you have the other features, like you can add the line height and This is line spacing, line height, and line spacing as regards the text, if you have multiple text, you can add the line height in between them, and this is the vertical, this is letter spacing in between them. You can add as well. And then this is the paragraph spacing. You can maybe make it two, the width of the paragraph, you can increase or decrease accordingly. And this is auto height. This is fixed size throughout. You can you can adjust all of this. You have virtual controls. You can align left right and center. You can do all sort of alignment over here. And you have this align top bottom middle. You can do all that from here. And one of the key things you should pay attention to ist text feel. You can change that from here, you can click and you can add the feel over here and you can change the color to any color of our choice. Stra something like this blue, and you can add stroke to it also, depending, you can add stroke and increase the width, of it and you can change the color, just like we have explained in the other one, right? So let's say we have something like this red color, and we can have it like that. And then you have the effects as well. Drop shadow, you can add drop shadow to it. And I can see you can see the difference without and with. Let me just do this. This is without, this is with drop shadow, and you can see the text is kind of looking quite nice. So you have a bunch of controls over here. Another thing you should pay attention to you have other controls over here. Like you can add a link to this, You can create a link out of this and you can on your own, create a component out of this. We'll talk about all of this in detail as we navigate across through this tutorial. And one thing you should also take note of is that whatever element you're dealing with, you can still find the properties enabled over here. You can see welcome to my channel. This is the text that we have, and you can see the lips. This will discuss all the arrangement and where are they here and how to take care of the position issues. This concludes this tutorial on the properties panel, what it is, and how to understand the basic features. As regards adding some elements and playing around with some of their features. I hope you enjoyed this video. Thanks for watching, and I look forward to seeing you in the next class. But 8. Layering of Elements in Figma: In the last class, we talked about the basics of the properties panel within Figma. And in this class, we are going to talk about the layers basics. So whenever you have created a project, throughout your experience in Figma, you're going to be using these layers features quite a lot because most of the things that you're going to be most of the elements that you're going to be arranging, are going to be arranged over here. So the arrangement over here is very important to understand. So the first thing you need to understand is that we can create duplicates of this by holding the option key or the old key on your windows. You can just select the option key and then click and we can drag and you can see right now we have a duplicate of this. So you can see right now we have LPS one and LPS two. This is because both of them, they are two different things. And another thing that you should know is that the position really varies in terms of the layering. So any object or any elements that you have at the top here is going to focus or is going to behave at the top of this LPS one because it is on top of it, even in the ranking here at the layering. And you can see this text is above them all. So if I bring this lesta for example, I select this and change the color to something like red. And if I try to bring this over to this, you can see right now it is on top of it. This is because this layer two is on top of this. So we can right click and rename it if you want. We can rename this. Okay, so let's call it the orange circle. And then let's rename this one to the green circle, for example. So let's say this green circle for ease of understanding. Okay. So we can see this is the orange circle, this is the green circle. And when you try to bring the text also, you can see the text is above all of them. That's because its position is really above all at this point. You can try to adjust. You can change them by just dragging. For example, when you drag and drop your orange, you can see it goes below above the text, and you can drag the green one also to the top, and you can see it becomes the top. So the arrangement is very, very easy. You can always adjust if you're interested. So the text can always come back because we want it at the top. You can see right now we have it at the top. You can play around with the very basic things from here, but the arrangement is what is important. If you understand how the layers are arranged, it will make your work very, very easy. So you have quite a number of things to look out for. So anything that is above is above. Anything that is below is really below that when you look at the layering process, you have other bunch of things which we're going to look at in this same panel. You have the assets panel, and we have the page panel, which you can create multiple pages like we've said, we're going to look at all of this in details through the other tutorial. And you can lock positions of elements. For example, you can lock the position of this text with just this click. So this is going to remain at this position, and you can lock it directly by just clicking and you can use this feature equally to enable or disable it from the panel from the canvas. So it either becomes visible or invisible. So depending on what you're working on, You can always have some of these features and play around with them. Okay, so this concludes this class about layers basics, understanding the layering in terms of the elements arrangement in Figma. I hope you enjoyed this video. Thanks for watching and see you in the next class. 9. Adding and Customizing Frames: In the last class, we talked about the layering of elements within Figma, and in this class, we are going to talk about the basics of frames, how to add frames. Now, what are frames? Frames are actually the elements that we do add properties that we can have that help us to separate elements and the properties within different kind of pages, okay? If you build a phone app, the different pages that you have in that particular app are signified by frames. So the number of frames that we have depending. So if you have ten pages in a particular app, that means you have ten frames arranged in that hope. We're going to learn how to create them and how to link them and their properties as we move on. For now to add a basic frame, you can come all the way here and you can click on this frame feature, or you can use the letter F. You can hit on the letter F on your keyboard to enable the frame tool. So you can just select anywhere and you can drag and you can have your frame selected or created just like. So this is 469 by 3408 size. We can just release, and you can see right now we have this as a frame. Now, this is becoming a frame, you can see automatically make sure that all of these elements are now housed under it. You can collapse this and you collapse it back, and all of these elements are now specifically under this. So particularly frames can be used to categorize our elements as well so that we can know exactly what portion of these elements belong to this frame and what portion of these elements belong to these frames as well. So again, when you alternatively, if you are certain with the kind of size that you want, if you don't you can adjust the sizing directly of the frame as you just drug, click and drag and move it across, you can adjust it to any size. Or if you know the size, specifically, you can come over here and you can change the sizing accordingly. You can see we can increase the size or decrease the height in terms of height, as well as in the position in x and y, you can play around with the position. And at any given point, you can click and move it. But if you are setting with the kind of size that you want to create, you can easily have it, so for example, if you are trying to create with the F key, and you enable the frame creation, you can see the templates that the Figma is giving you. So we have a bunch of preset sizes for maybe phone if you are dealing with phone, maybe if you are trying to develop a phone app, You can see the different sizes for iPhone 14 and 15 Pmax. You can see them. This is the size. This is the standard size for 15. This is the standard size for iPhone SE, and phone h, you can see this is the standard size. For Android, small, this is the size, Android large, this is the size. So you can just go ahead and select anyone. If you're dealing with tablet also, these are preset sizes that you can just easily select depending on what you are trying to create if you don't know the specific size. If you're dealing with desktop, you can see different sizes are using MT book or TV or desktop or thereabout or Map book pro 14 or thereabout. So you can just select re creating presentation, you can see the different sizes. You're using 16 by nine four by three, Oh, you can see if you're using watches as well, is an apple watch. And if you want to create sizes for paper, you can see most of them A A five A six and letter size and different social media. You can select on and you can have the paper selected and you can you can have the precise sizes attached. So for this case, let's go with something simple. Let's select pon 14 plus, click on it, and you can see by default the Figma has just given us this size as our pon 14 size. Okay. So you can on your own, Hold down the command the command key and use the scroll wheel on your mouse to kind of pan around to zoom out so you can have more details over here with the command holding down the command key and scrolling down, you'll be able to reduce the sizing, just like or increase it if you scroll up, scroll down, you can use this command key pan to with the letter H and inmove these two sizes by the side. Another thing you can notice is that in frames, so you can always escape to go back to the selection tool. So you select any frame. You can be able to duplicate it by just using the command D to duplicate a particular frame. Or alternatively, you can hold down the option key in mark or the t key windows, and you can select and drag and you can create the same copy of this particular frame. So it's very easy to do that. As well, you can copy and paste this same frame somewhere. Now, let's hold down the command key and zone this out a bit so that we can see everything within. So another thing that I want to show you is that you can copy properties. You can align this accordingly. If you have them is aligned, you can align them directly by just directly selecting all of them over here, and you can see down here, you have this icon, which enables you to align them vertically. As you click, you'll see them, they are equally aligned accordingly. You have equal alignment vertically. And if you want them to if you have them separated, for example, is aligned, and you want them aligned vertically. You can select all of them. Ample, let's hold down the Shift key. And we can command key and scroll down, we can select everything, for example, and then we can align this. This is going to make sure that they are aligned vertically. And if you want to align them horizontally, this is align horizontal. If you want to align them vertically to be on the same size at the same level, you can just come over here and you can see align vertical centers. So you can just with just one click, you can see they're equally aligned and they're aligned at vertical center. So this is basically how to deal with elements with frames and deal we play around with them. Now, another thing is you have to understand that elements that we have in a particular frame are easily, you can copy them easily and put them on different frames. Okay. So, for example, if we have this frame, if you select this frame and we select this text and just click and we can just put in this. Let's write something. Welcome. And we have this welcome. What this means is if you select this text and you hold down the command key and you hold down the option key, it's going to show you exactly the distribution. The size is from the left, from the top, from the sides, the arrangement from the sides and from the right hand side and from the bottom. This is the arrangement. So if you want to copy this welcome, you copy it with Command or Control C on your keyboard, you come to the second frame. You can do command V to paste it and you can see that when you hold down the option key, you're going to see that It has been pasted at the exact position where you copied it from the other property, from the other frame directly. And the same thing here, you can past it and it's going to maintain the same position accordingly as you move on. Another thing that we can learn as regards the frame is that when you look at this, you'll notice that each of the iPhone frame that we have, this is iPhone 14 plus, Phone 14 plus one, two, three, they are arranged accordingly. You can rename them like we have explained earlier on. You can just double click and you'll be able to rename them so you can see screen one, for example, and then you can make it. No, this is screen three. For example, let's say screen three, and this is screen one screen two, and this is screen one. C just double click and call this screen one. So you can see the welcome is now a subset of screen three because this is an item under this frame three. This is an item under frame two. This is an item under frame. From one, in one. And then you have this, let me use letter H, and you can see on this small one frame one, you can see all of these are housed under this frame. And in each case, you can collapse the properties, the elements, so you can be able to see for clarity and ease of access to other properties. Now, in each frame that you've created, you can see that you have this option, once you select on you select that frame, you can see these properties. These are the frame properties that you've just created. And you can play around with the size as well in terms of the position, the width and height. You can play around with some of these properties, and you can invert it from horizontal and make it from vertical and make it horizontal or the aboard. And you can play around with the corner radius. You can use I use this quite a lot. So because when you play around, you can see you can increase the corner radius. And everything now becomes the radius now is no more steep like you have before. So you can have this much properties. The rotation angle, just like we've explained earlier, you have the properties to play around with irrotation as well as the feel, you can change the feel color by just clicking on this and you can select the color and vary it accordingly. Okay. So we cover all of these basic elements, how to add elements and deal with them within frames in details. But right now you have the field option. You have the stroke option just like we've explained earlier. You have the sect option. Also, if you want to add drop shadow there about, you can see quite a lot. So we have these other features as well. We have the mark as ready for development and users mask and great components out of this. This concludes this class about how to add frames and customize them accordingly within our canvas. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. By 10. Adding Grids and Guides: Okay, so in the last class, we talked about how to add and customize frames within Figma. And in this class, we are going to talk about how to add grids and guides in our frames. So grids and guides are actually very important to keep us organized and to make sure that we work with precision throughout the process of adding elements and removing them within our frames. So we can know exactly the sizes across throughout the sites, and so on as we move on with our frame creation. So the first thing is we can add grides by just selecting on a particular frame, and you can come over to the properties panel over here, and you can see the layout grid over here. So you can just click on this plot sign to add a grid, and by default, this is the grid that is being added. Now, I have a grid on this, and you can see it clearly grid layout visible. You can hide it if you want. You can hide or show it directly like we've explained this cut across any element. If you want to have more properties of this particular grid or play around with it further, you can click on these dots, this Seton. You can just click. You can just click, and you can see that with this drop down, you have multiple types of grid. This is normal grid. If you want to have column grid, you can click and you have this column grid. You can make it 20, if you want the number. Depending, if you make it 20, you can see we have 20 number, and you can play around with the coloration can change the color to any color your choice. Right now, you can see we have this color, and you can hit and escape. And you have other properties like the opacity. At the moment it is ten, you can make it maybe two. So pave for your elements to be visible. You can see right now it is two, but your elements are very visible. If you don't want you can increase it to maybe four, increase the visibility, so you can see it right now. Elements are visible, but also the grids are also visible as well. So you have down here the type of grid. This is column grid. You can click to half other have left grid, and you can have the right grid or centered grid depending if you're interested in getting more spacing from the right or from the left, depending on it all depends on you and you can come over here and say stretched, displaced across. So it all depends. You can play out with them. So right now, let's say we want the left grid, and you can play out with the with across the separation. You can have it to be maybe five the with now becomes smaller. An less thicker. And if you want, you can make it maybe seven to increase the thickness. And the offset also now it is set at zero, you can come over here and increase the offset. If you make it six, see the offset has been increased. Okay? So depending on what do you want at the edge. If you want a bigger offset at the edge, you can make this probably maybe 15. Okay, so you can see now we have a bigger upset at the edges. Now, down here, you have the gotta number. You can increase it. Maybe if we make it five, you can see right now you can increase or decrease the number. Let's say we make this 30 fit, so you can see the gotta as you can now increase it there. Now, you can add other grid layout. If you are interested, you can always escape on this, and you can add other grid by coming to it on this plus sign, and you can change. Now, you can add the gutta. If you want it to, you can make it one, and you'll be able to see that it's now much bigger. When you zoom in, you'll now be able to see what you have the separation, the gotta, but then you can have this 20. I think, and now I think this is good. Now you can add other grid by just coming over here. You can escape this, and you can add other grid by coming on this and hitting on the plus side. So you can add other, so you can come over here also and play out with the properties. Depending, this is column grid. You can make it row grid, and you can play out with the features as well. You can change the different portions. This is handy in cases where you are trying to so let's make this probably 15. Oh, 12. So this is handy sometimes when you are dealing with the phone thing and you want to arrange your elements accordingly. So if you have this uniform size, it becomes very easy for you to arrange your elements very nicely. And then you can go ahead and peel with them. The other features like we've explained, and you can enable or disable any of the grid directly with this as well. And you can remove any grid by those hitting on the negative sign. Well if you are interested, you can just remove the grid. Now, another key feature that I want to share with you that can help you to stay accurate and to maintain the spacing within your frame is the guides. The guides can be attached using the rulers, okay from the rulers. So you can double between to show the rulers and show them across any kind of Sigma canvas by just using the short cut the shift F shift r to enable the rulers at the sides and at the top over here and shift r again to this. So you can double the ruler with shift r and you can double it on or off. So the guide that you can have here to help you in the precision is you can come to the edges and until your coaster turns into this horizontal sign. When you click and drag, you can see you have a line that you can move inside the canvas to define maybe the starting point of an element. If you want to know the sizing of where you are, the moment, you can hold down the option key on your keyboard, and you can be able to hold the t key on your windows and you're able to see the number of the piece from the left. And the same thing also, you can come down. Click again and you can put another one on the right, if you're interested so you can just for ease of clarity, you can still hold down the option key to define the length at the other edge. You can do the same thing also at the top to have a horizontal guide by just clicking over here, and you can just drag and you'll have it. Let's say we hold this also to define the exact position. You can bring in as many as you want, depending on what you want to create. You can bring in different ones and to define a particular size that you want to add in elements during the process the addition process. So to remove any can of guide in a frame, you can just go over it, select it, click and hold it, and then you can pull it back and you have removed that guide away. So you can see, just remove this by just clicking and dragging them back very easily. You can see just remove all of them. So this is the basics of how to add grids and guides to help us in acquisition within our fms. So this concludes this class about adding grids and guides in our frame within Sigma. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. Bye. 11. Adding and Customizing Shapes: In the last class, we talked about how to add grids and guides to our canvas. And in this class, we are going to learn how to add sheeps, different kind of sheeps and customize them accordingly. Now, let's start by clearing this. So let's use our pan tool with the letter H to clear our canvas, and then we can start bringing in different sheps. Now, to insert shapes, you can let it on cap to go back to the selection tool. To insert shapes, you can come all the way to the top here. You can see you can click on this dropout and you have series of different shapes. You can start from rectangle, which you can trigger with the letter r, and you have line with the letter L. You have arrow with the shift letter L, and so on. Okay, you have lips and polygon and star, and you can place images and videos also into the same canvas if you're interested. So let's start with importing something simple like a rectangle. And once we click on the dcgle you can draw it directly by just dragging like this. So you can notice that I'm drawing a rectangle, but when I hold down the shift key, it's going to make it a square. It's going to make it a square with both the length and the width and the height equal. So if you want to create a square, it's better you hold down the shift key during the equation. So you can see right now, I have a square. But if I want to draw a rectangle, I can raise my hand from the shift key, and you can see right now I can go to any length of my choice. But let's say I'm going to go with a square of this length, since you can see now I've just drawn my square. And let's add another one. Let's say I can draw a polygon like this. I can easily draw. You can draw another shape as well. Let's say we go with the ellipse. And if you draw also, you're going to go with ellipse like this. And if you want a perfect circle, you can hold down the shaft key. So it becomes a perfect circle very easily. Now, this is how to insert different shapes or to draw any shape into the canvas. Now, whenever you select on any of the shapes of the elements that you've just imported or inserted, you can see it properties appear over here. For example, the x position, you can come over here and you can play around with the position in the X. And in the y direction, you can vary them directly like this. And you can alter the width and height if you want to alter the width and height, even though they are interconnected, so they increase or decrease in the same way. If you want them to increase or decrease in different ways, then you have to remove this linkage. So in that case, you can increase the width, Okay, you can see it can now increase or decrease the width on its own without affecting the height. You can see it right now or you can increase the height without affecting the width. But I always prefer it to be linked up so that we can have a uniform increment or decrease. So let me do this to have a perfect square. So another thing, while still selecting the shape, you have the option to rotate it, you can rotate it to any angle of your choice if you're interested. Right? Let me do this also, and then you can play out with the corner radius. Right now, it is sharp. If you want to reduce or increase or bring some curve nature to the radius of the corner. You can see right now you've added some curve nature to the corner. Alternatively, if you want to add the same course curve to the corner radius, if you select the ship, you can see these dots. If you select on any of them, select, click and drag, and you can manually also add the corner radius. Accordingly, you can increase or decrease. This is another way of adding the corner radius. Okay, so this is this. Down here, you have the field option. You can add different kind of field coloration to this. You can click and you can select on any color of your choice. You're free to navigate around and choose a very nice color for yourself. This is a solid color. If you want a gradient color, you can always click on this, and now you can see you have a gradient coloration. When you click on this, you can add in the gradient from this side. You can use this feature to control the location of the gradient. Okay, so you can increase or decrease the location of the gradient, so you can see. And over here, you can also change the color of this. If you have another color, if you want another color, you can also choose and you can see it changes accordingly. So down here, you can add stroke, you can hit on this plot side. To add stroke to this, you can see if added a stroke can make it inside or outside or center. Right now, let's make it inside the thickness of the stroke. Right now is one, less bumpy to something like 30, and you can see half its at 30, and you can click on this to change the coloration of the stroke. For example, let's go with something like white, a kind like white color. So you can see, Right now we have our stroke as white. And in each case, in each of these properties, you can enable or disable them from here, the coloration and the stroke. You can enable or disable them using this, and you can remove them also using the minus sins, as we've explained earlier. Then you have other effects. You can click to add the drop shadow effect. You can add drop shadow, you can add inner shadow, you can add layer blow or bag blow. You can add any of them. But for now, let's go with drop shadow. All right? And then you can export or if you are interested, which we're going to cover in a later class. Now, we have added so much to this property to this shape. If you want to add the same thing or similar property to this one, there's an easier way to do it within Figma. The first thing is you can come to the top. While selecting that shape, you can come over to the top and you can select over here. You can come to edit and you can come all the way down and come to copy properties over here, and you can select on this and you can go back and then come to edit and you go to pest properties. Over here. You can do that with the option command C, can paste the properties directly, you can see option command V or option command C to copy an option command V to paste. And right now you can see you have added you have copied these properties to this property without you having to recolor this and then add some of the features that you've added. In each case in each shape, when you double click on the sap, you have access. It means you have access to the shape. You can do quite a lot. For example, you can change the shape of this by just coming to the sites. You can click on this and you can extend this directly like this. You can come over here as well, and you can click and extend this and make it another shape if you're interested. You can see, you can just vary it by clicking, you are extending or changing the shape. And if you like, you can select to add another one, can just select and you can play around with it. So let me do this, but just to show you that this is giving you very much control as regards what is here. If you want to change the color of the fiel, you can see if you want to so you can change the color of the field, can select, and then you can change it to something like red. So I think this is okay. And you can click out. And if you want to change the color of the stroke, also, you can click and then you can change the color of the stroke, maybe to something like blue this blue. And you can see right now once you hear an escape, you can you have this color. So depending on what you want to change. But then if you double click on any of the sheats, you can have access to that sheet, and you can play out with it very easily. So I think basically this concludes this class about how to add sheats and play around with their properties and customize them accordingly. So, I hope you enjoyed this video. Thanks for watching, and I look forward to seeing you in the next class, right? 12. The Pen and Pencil Tools: In this class, we are going to learn how to use the pen and pencil tool within Figma. Now, to start with, you can come to the top over here, the top icons over here, and you can see pen and pencil. When you click on this drop down, you'll be able to see pen and pencil, which you can trigger with the command with the letter P on your keyboard or the Shift P to enable the pencil tool. So whichever one you're whichever one you're going to work on, you can easily trigger it with the shortcut keys. Now, let's start with the pen by just clicking on letter P, or we can just click on P, and you're into the pen tool over here. So you can go ahead and write and create anything of your choice. You can just go ahead. And as you notice, if you are freely moving, you're free you can move to any angle of your choice. But when you hold down the shift key, it's going to snap to maybe 45, 90 degrees, 45, 90 degrees like that. It makes snapping very easily within these features. Let's say we're going to have something like 45 degrees, I click here, and then we still holding the same shift, you can see it automatically tells me that I'm at a point where these two are equal, so you can make a click also, and then probably we can move over here, and until you get to this point, it's now showing you that you are at the same at the same point and location. You can just click on this and then finally you can close if you want. We can move out here. And make another click and then finally to this point. But I want it to cover here and it's just 45 degrees. I wanted to cover then. I may have to release the shift, then I can just click and just cover this. So now this becomes perfect, according to what I want. I can always hit on the command key to get out of this. And now I have this shape drawn with my own pin. When you select a particular shape that you've drawn, you will equally see its properties over here. By default, it adds a stroke to this. And you can be able to see the stroke. When you come over here, you click and extend and you're able to see that the stroke exists. You can see it exists. And if you want to change the color, you can equally change the color just the way we did in the other class, you can change it just like so. Now, another thing that you can do with the shape that you've just created is you can always double click inside. You can always double click inside to be inside the shape, and you can make some edits. For example, you may wish to add some points for the edit. Or you may wish to change the shape of this. You can just click and you can change the shape. We just may click. Just like that, you can see you can make changes to the shape. You can extend it and you can change it to however you want it. You can just play around with this very easily. And if you want to color some sections of this, for example, you want to put in some feel inside this. So while you're still in the edit mode, you can come over here and click on this pen pocket. And once you click on it, you can color the sections accordingly. You can now color this section by just hitting on this and by default, it removes the default color inside. And you can come over here, just click and you can change now the coloration. You can change it maybe to this red and an escape. And once you're done with this, you can go ahead and say done, and now you have a shape that you've created with your pen and it has this much detail. Now, if you want to use the pencil tool, you can still use the Shift P. Shift a letter P to trigger it, and you can come over here and write anything that you want. Okay? So you can come and you can see by default the figma will help you to streten whatever you have. You can see right now and just typing something. Okay, so you can go ahead and just type whatever you want to type over here. So you can see what you have written in this layer good in detail on how to arrange all of these layers, so you can be able to understand what all this means. But for now, you can use this and you can be able to create this. You can write as you so wish within this ship or anywhere. And once you're done, you can always an escape to get out of that, and you can see you can select on any of these features that you have written. And you can make edits also if you're interested. But at the moment, I don't want any of them, so I can I can select all of them and delete if I want to delete. But this is the basics on how to use the pen tool and the pencil tool within your canvas to write anything or to draw anything of your choice. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. But 13. Boolean Operations + Assignment: So, welcome back. In this class, we are going to learn some basics of boolean operations. Okay? So in Boolean operations, we're going to learn how to combine one shape with another, and we're going to learn probably sometimes how to separate one shape from another. So we're going to start from a fresh I deleted everything, so I'm just going to bring in two shapes that we can demonstrate this with. Let's say we come to the shapes option, sept shape feature over here and let's select something like and draw something like a rectangle. And if we want to have that same circular edge around it edge, we can still come over here and dli and drag and we have a circular shape just like this. We will decide to change the field color to something like something like this is good. Let's try to add another shape. Let let's add this. We draw the circle like we've shown earlier, you can hold down the shaft key. And you can draw a perfect circle just like that, right? So let's change the field of this as well to something like something like this, can just click out. Now, in Boolean operations, usually, you have to combine two things together. So when we select drug and select these two shapes, you will notice this icon just appear. It is called Boolean groups. This one, you will learn to group these items in different forms. So when you click on this drop down, you'll see you can have union selection, you'll have subtract selection, intersect selection, and exclude selection. And then we have flatten selection. Okay? So we're going to learn about all this at the end of this class. Now, let's start with the beginning one. Let's select our circle and just drag it to this one. Okay. So we'll just sort of insert this into this. Now, when you select all of them by selecting all of them just like that, and you can come to the bullion groups, You can do union selection, which combines this feature and this feature together, right? This and this is now combined. Now, in any case, if you want to have access to each of them, you can double click on the shape, and you can see right now you have two shapes, but they are combined using the Boolean groups. And you're free to move them around and change and interchange their position if this is what you want. So this is combined, a bullion. So you just combine the two shapes together. Now, you can do this. Let's say we do this up to this point and then let's steel drag and move them across, and then we can select. And now we want to do subtract selection. So we do subtract selection. What this does is is simply subtract this portion that the combined section a, I subtract from this portion from this one. Right? So how do we confirm that? We can double click here, and you can see that that circle is still there, right? It's still there, but it's been subtracted, and you can change the subtraction or the arrangement or the behavior between the two by just moving around, right? But right now, the default is it has been subtracted and you can extend or play around with this feature, however you want it. But it is now a single thing that has been subtracted. That shape had been subtracted from this. Now, another thing that we can confirm is, so let's do this also. Since we have seen subtraction. Let's go back still while selecting both of them, can come back to the Boulan operation, we can say intersect selection. Now we select, what this gives us is the intersection point between the selection. So, this is the intersection point between the two of them. So let's do so that you can understand what I'm trying to say. Okay, so this is just the intersection that it has given us between these two. Just this intersection is what it has given us. So you get the message. That's the intersect selection. We can select again, and we can do the last one, which is exclude selection. And what this is going to do, the intersection point between these two shapes is what is going to be excluded. So let's try that. And you can see the intersection point has now been excluded. You can move also around. And when you double click, you can move around also to change the intersection. But what is telling you is that at any given point, these two shapes intersect is that section that is going to be removed for you. You are free to play around with this, however you want it depending on what you're trying to create. Now, the last feature, which is the flatting selection, whatever boolean operation you've selected here and you have the resolve, if you do flatting selection, it's now going to convert this to a single shape. So now you have only a single shape that behaves with the Boolean operation that you've just selected. Basically, this is the basics on how to use boolean operations player with ships and adding different things, right? So you can go ahead and try them however you want, depending on what you're trying to create and depending on your target, you can just do subtraction addition or intersection or thereabout. And then at the end of it all, you can convert everything into a single ship. Now, before we finish this class, I want to give you a simple assignment that you can try on your own, just to demonstrate the use of the Figma to create the bulon operations. I want you to create this. Let me let me on the letter H to pan around. So this ship. I want you to create this ship with the Boolean operation. This is just a triangle and these are circles on top of it, and we use the Boolean operations to create it. So please do try and create something like this so we can see if you don't have if you don't have the opportunity to do it, we're going to solve it in the next class. But just to get your hands on the system and try to do what we are doing and try to learn the basics, I want you to try this, but we'll solve it in the next class anyway. Okay? So I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. Bye. 14. Solution to the Assignment: So in the last class, we give a simple assignment about how about you trying to create something like this simple shape with the Boolean operations. So in this class, we're going to just reproduce it to see how we can do it quickly using the Boolean operations. So to start with, you just come over to the shapes over here and you can click on any shape. Right now, we can see this one is a rectangle. Is a polygon, so we can just go ahead, click on a polygon, and you can just click and drag and we can now see we've created a poly. So we can select it while selecting the polygon, we can still come back and change the field to any color, can change it to any color just to differentiate what we have. So let's select something like this. And then these are small small circles that we have. So to create those circles, we can just come over here to ps, click and hold down the shift key to create the circle, right? You can see we just created a circle, and you can change the field as well to any color that will match this. So let's go with something like red. Yeah. So red to differentiate and click out. Now we can select this and copy and paste using Control C and ControV control C and Control V, and then we can see we've created them three times. We make three copies one, two, three, right? So in each case, we can can drag each one of them and put it in a position. Very easily, something like this, very easily, something like this, and very easily, something like this, right? So I think we have only three needed for this, right? So we can sell like this and delete. So we don't need this. So once we have these three shapes aligned or combined together, now we are going to apply the Boolean operations as you have shown in the previous class. So how to do that. To do that, we can make selections of all the three features, all the three shapes, and then we can come over to the Bullion group over here, and then we can go on and do sub track selection. So we can just click on subtract selection and boom you have your solution ready. Everything is being created just like the way we have this. So this is just the basic solution to our assignment, little assignment that we just gave in the previous class. Please go ahead and try to see how you can play around with most of these features and see how you can move things around and see how you can keep planning things together. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. But 15. Using the Alignment Tools: Okay, so in this class, we are going to learn the basics of alignment within Figma. Okay? So I have these shapes that we have worked on. I've just added some few just to demonstrate some of the applications. Okay? So let's say we have these shapes scattered and we're going to learn how to align the shapes alignment of shapes within a particular frame. So you can see I framed all of them, and this one is going out of frame. This one also is going out of frame. So how do we ensure that they are aligned using this alignment feature? So the first thing you need to do whenever you want to start the alignment is to make sure you select all of the details or all of the elements that you want to align. So in this case, I've selected all of these ships, and I can come over here, you have different kind of alignment options. For example, you can align left, and everything will be aligned to the left, or you can align center or you can align right. So let me do this, and everything is going to be aligned according to this box. Mind you, is according to this box. So center left, it's going to it has just aligned left. And to align center, you can just click on align center, and everything would be aligned to the center just like this. So let me do this also with controZ and you can align right and it will be aligned right just like this. Okay, so you can see everything is now being aligned right. Now, another thing that you can do is you can this vertical alignment. You can do horizontal alignment as well. So you can do top align top and everything is now going to be aligned to the top according to this box, and you can align center as well. Using the vertical feature. You can see everything is now aligned, and you can equally align bottom just like the way we have it at the vertical sign. Now, another key key thing to note is that in addition to this very basic horizontal and vertical alignment, you have the dots. You have more options when you click on this, you have the tide then you have the distribute vertical spacing, and then you have distributed horizontal spacing. You can do that with all of the key shortcut keys. Shortcut keys, you can use them. The tidy up make sure that the features are enabled equally spaced in the vertical direction. So you can see with this pink sign pink line, it's been spaced in the vertical direction. So you can alter this also if you're interested when you hover over the pink color and your cursor turns into this vertical sign, you can click and drag and you can see the pink color directly showing, and you can increase or decrease the sign also however you want it. The pacing in between the shapes in the vertical direction, right? And you can do that also from here. You can do that from anywhere, right? So let me do this as well. And then you can do the other way in the distributed vertical spacing. You can see they've been distributed equally in the vertical spacing, and you can do the same way in the horizontal spacing as well. They've been distributed equally in the horizontal spacing. So this concludes this class about the basics of alignment, how to align left right and center and within these ships that we've just added. So until next time, thanks for watching, and I look forward to seeing you in the next class. Bye. 16. Adding and Customizing Buttons: In this class, we're going to learn how to create buttons and even make them responsive. Now to create buttons, let's start by adding something like a frame. So you can come over to the frame section over here, which you can trigger also with the letter F. You can just click and let's select anyone. Let's say we go with F 14, F 13 mini, this one. So to add a button, you can come directly to the shapes over here. You can click and you can select a rectangle. You can just come down here and click and drag. So this is now our button. But as you know, most buttons do have circular reds by the sides, so we can add circular reds. By coming to this end, we can just come over here until your cursor turns into this horizontal sign. You can click and you can create the circular nature. So you can see we have the circular edges. So you can change the coloration of this. You can just come over here. Let's change it to something like blue. And we can select on this color and click out, and now we have our button created. So the next thing is we can add a text on the button. We can do that by coming to letter T over here or the text feature, or you can press on the letter T on your keyboard to enable or to trigger the text feature. Now we can click over here and we can just write anything. Okay, start and we can select. We can play around with the sizing over here. Let's make it something like 40, right? So we can hit an escape, and if you like, you can align the two of them. So you can select this and select this holding down the shift key or you can just select both of them together. And you can just go ahead and come over here and see align center and align center as well. So this is now perfectly aligned to to your button. The text is now perfectly aligned to your button. Now the next thing is, if you notice this is not responsive, what we mean by not responsive is if we select on this and we try to change the start menu to something like, let's try to create a duplicate of this for example. Select and do come and D, you're marked, to create a duplicate, you can just double click and you can say get started. You can see right now it is not responsive in that as the length of the text extends, the button still remains where it is. So to create an extended or a responsive button, all you need is just to select both of them, the button and the text, right click and say group selection, and then you can still wire right click in. You can use the shift A on your keyboard to make it responsive. What this means is, if I double click on this, and instead of start, I try to make it get started, take a look at what happens. You can see the button extends also as I try to extend my right top. Okay? So the button now becomes responsive based on what I have written in the button. Okay. So if I decide to change this as well, and to just call this menu, it just quickly turns into menu. Another thing that I want to show you is that while still selecting the button that we've just selected. One thing you should pay attention to is this auto layout. Now, at the moment, you see that it is selected horizontal layout. It has selected horizontal layout. That's because all of what we have here is aligned horizontally. Everything is horizontal. If we add anything, it's going to be to the horizontal. The increment and decrement of the size, the responsive nature is to the horizontal because it has detected automatically based on the content that it has. Let's try to see how how it's going to automatically detect this to be vertical. So let's create another simple button, roughly. So let's say we have this button like this, and we quickly come over here and adjust the side corners and change the field to something like red. And now we want to add some elements, maybe let's say small circle. We just draw it and we change the color to something like blue. Right? So something like this, and we kind of increase the size a little bit, right? So let's say we increase the size. Now, what we can do is we can duplicate this maybe a few more times. Maybe we have three of these. So we can just drag and drop, drag and drop, and then we can drag and drop. So we can select everything like we did before and we come to alignment. We can align everything to the center. So everything is now properly aligned. So while still selecting everything, we can do the Shift A to make sure that everything is now made responsive. So you can see by Mor doing shift A, the auto layout has been changed to the vertical layout, B it has detected the increment of this. So let's say we cannot duplicate this. So let's say we added some we want to add something to this. You can come over to the circle, and let's say we'll create another circle but this time around of this color. So if you want to add it to this feature, going to align it's going to adjust and respond to the addition and it's going to be in the vertical direction. So let's just come over here and you can see with this blue line, it is just signifying the position that it is going to put our circle. So once we left, we release, you can see that it's been added into our circle, right? So you can select this and let's kind of move it up so we can see everything. Now, this is the duty of ad of making it responsive to the vertical. So you can do that however I want it. And you can double click on this and remove. And the same button is going to respond to what you have added. So in this case, this is very useful in cases if you want to add some icons into this. For example, you can just select and you can move this, maybe probably to here. And once you release, you can see the button has just adjusted accordingly. Let's change this color, so it becomes visible. All right, so let's make it white. All right, so you can see, start here and this now becomes responsive as we added it, and this one also becomes responsive as we removed it. So this concludes this class about adding buttons and making them responsive, both in the horizontal and vertical using the auto layout to. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class, 17. Adding and Customizing Components: In this class, we are going to learn about components, how to add components, how to create components and manage them within Sigma. So components are specific behavior that you can assign to some group of elements that you can have a specified behavior across. So assuming I have this start button, and I plan to create ten or 15 more frames, and I want to have this start button included in all of the frames. Now, ordinarily, if I'm to include this in different frames, by example, let's say we select this frame, and we duplicate it. And let's say we have this fresh frame, and we want to have this tab menu included in all of this in all of the respective frames that I want to have. What used to happen is we can do that in different ways. We can copy this and we can come to this frame and paste it. And what happens now is if we change any of the features of this, it's not going to affect this. All right. So if you decide to change the coloration of this, it's not going to affect this particular one. So in cases where I'm dealing with more than ten to 15 five frames with this start menu included, it might become very difficult for me to make changes. If I change a particular one and I want it to effect on all the other ones, it becomes very, very difficult for me to do. So how do I make it easier? You can make it easier by creating components out of the series of elements that you have, or this particular button, for example, So let me do this, or let me select this and delete. And what I can do to create component is I can select this particular frame, which you can see over here, frame one. And while selecting it, you can come to the top to this top men. You can see create components out of this. And you can do that with the option key and command key and then key. It's going to help you to create components. Now, we can click on this and automatically this now becomes a component. You can see the edges have just turned to this pink color, and you can see also from here that this now becomes the color of these changes, and it has this diamond sign, that this is now a component. So this is a sign that this is now a component is a combination of all of this, and it has the same single property. Let me show you what you can do also to manage this component. So let's call this let's rename this to make it main button. So you can call this main button, right? And here don't enter. And so let's try to duplicate this so that I can show you something. Even duplicating it alone is not enough. You can see if we duplicated this. I'll probably will want to have this duplicated copy. You can see it's a duplicated component. It is here over here. You can see this one has the two signs are different. This is an incense component and this is a duplicated, this is the main component, this one, this is the incense, just like a copy of the main component. Now, what happens is if I try to copy this incense component and I come to this frame and paste it. So if I change anything here, it is not still going to affect my main component, just to show you that a copy of the component cannot serve the function that a main component can serve. So let's try to do that. Let's change this, and you can see nothing, no effect is shown on the main component. Even though it's an incense component, which is a copy just like a copy of the main component. Okay, so if I make a copy of this. So if I make so let's delete this, and if I make a copy of this, maybe, for example, I select, and I duplicate this and move this to this. Okay. And probably I have another frame. I duplicate this also, I duplicate this form so I have three frames with this. So whenever I change any of this, nothing is going to happen. But when I go back to the main component, this one, and I change anything, it's going to affect the rest of the component. Take a look at what happens. So if I come back to the main component, and then I change this color to probably something like this red and you can see, everything now changes and it takes in the effect that I've just inserted to the master component, which is the main component. And if I decide to change the radius of the outer circle radius, if I change it, it's going to equally affect the whole component, the whole body that I have in all of the different fms. So let's say I reduce I increase this corner radius, It's still going to affect the otherwise. You can see if I select and add anything here, it is going to affect the other ones. You can see very easily. So this becomes very easy for you to navigate and to connect in between different elements as you have them across the different frames, no matter how many number of frats you may have. So having creating components, it becomes very, very easy for you to kind of navigate across. Now, let me show you how you can add in components very easily across the different elements, the different frames, also. You can also always come to assets here, iPhones and you'll be able to see the main component here that you've just created. So you can easily drag and drop it here. You can easily drag and drop it wherever you want to drag and drop. And whenever you make changes to this also, it affects the whole thing. You see, very easily. I've affected the whole thing to Changes on the main component will definitely affect the others. Okay. So basically, this is how to create components and manage them within Figma. I hope you enjoy this video. In the next class, we are going to look at variants, what are variants and how do we manage them within Figma. So until next time, thanks for watching and I look forward to seeing you in the next class. By 18. How to Create and Manage Variants: In the last class, we talked about how to add customized components. And in this class, we are going to learn how to create variants. So variance I cases of components, you have to keep the property of this the same across all the other platforms across all the other buttons that you're going to create. But in variance, you're free to now have a different version of this, and when you want to change any of these, automatically, you can select which of the variation of this that you want to create, and you can just create it very easily. Now, let me give you an example of what I'm talking about as regards this. To start, let's try to adjust something adjust this. So let me delete this because we don't need it, and we equally don't need this at this moment. Let's start by adjusting this. By selecting it, we can come to the properties panel over here. The first thing is, let's say, I want to create a variant of this. You can see by selecting, you have the properties. You can see properties, so you can hit on this plus sign and you have the different properties. You can see create new properties. You have variant, you have bullion, you have instance swap and text. For this case, we're going to create a variant. So we can just click on variant and we can see what we have here. The name is properties and the property is default. I set at default. The property is set at default under this. So what we can do is this is the main variant, all right? It's its name property and the property that it has is default. So we can decide to rename this, call the main variant, and the property is going to be default. We can keep it at default. But then we can create mean we can create a variant from this by just coming down to this plot sign, and we can click on add variant and we have this second variant. Now, everything is going to be enclosed under this dashed frame, something like a dash frame. Also. It is extendable. You can come over here and you can click and extend it if you want to extend it. So that's why we say it is sort of like a dash dash frame. So now, this one, this second one, let's try to see if we can change the properties of the second one. All right, so let's say we try to change this comp this property the properties of this particular button. For example, we can decide to remove this coloration, can decide to remove the color, and probably we can make it this light. And then we can decide to play with this border. So we can decide to play the border the stroke by just adding the stroke and probably extending it to maybe our five is speak, but I think it's okay. So we can double click on this text, and we can change the properties of the text, also, especially the color, especially the color of the text, and select it and let's make it this red. And this icon also that we have, let's select it and change the color to probably this pinkish color. All right, so we can see. Now we have this start with this color of the so we can call this. We can double click on this and we can come over to the properties. Now we change the main variant. We can call this variant two, but we can call it. Let's call this outline, for example, because it is different from the main one because this one is just the outline. Right? So right now, I want to show you how you can effect these two variants on these buttons that you have distributed across the two frames. So when you select when you make a selection of the main component of this button, you can see the same properties coming up. So when you select this particular button, you can see from the main button. Oh, this is the name that we've given the main button. That's what appears because this is a component of this. It's just a copy of the main component. You can see we've named it to be in button, and you can see the properties is a default. So when you click on this drop down, you can see outline button, which is for the variant. So once you click on this, you can now see that your button now change to this variant. So it becomes really, really handy in cases where you don't have to recreate this and you have multiple frames to just be using different variations. So when you come over this as well, if you want to change it to the other one, you can just select and see outline copy. Or if you want to go back to this main variant, you can just select. There's some changes. You can select, and you can come down and you just say default, and it goes back to the main one. Okay. So that's basically how to add variant and create variant and manage it across. Now, let me show you another instance that's very, very important and that you can enjoy using. So let's say with this one. Let's say with this variant, this first one. I want to change something. For example, I give this one. I give it another name. I call it icon, and I call it true here. And I call it true. And I select this one and I come over here. I give it an icon name also. But this time around, I call this false. Okay. So what I'm trying to do. I'm going to do is while selecting this one, I'm going to delete this icon, this one, which means this one is without an icon, and this one is with an icon. I've just defined them. So whenever I click on this, this is now the name has now changed to an icon, but four. And then this one also the name has changed to an icon, but true. So now, when I when I try to change the faration across this, maybe I select on this, and I come to the main button. You can see right now the name has changed to an icon or with this on and off sign. So if I on this, it's going to bring back this variation. And if I off it, it's going to go without the icon, just like we have shown. Okay, so it's very, very interesting. If I select this also and I want to make it back to this button variant, I can just off the icon, so it now becomes this. So this is only possible because I have added the true and false command, okay? So if you come back to this and you try to click on it. In this case, I define the property as true, and in this one, I defined the property as false. That's the only reason why I'm able to get this two variation button to toggle on and off. So just get the difference. This is if you use any text, you're not going to get the same effect of this toggle on and off of the icon issue, you can see, this variant. As you can see, also from the layers over here, this first icon, it icon equals to false, and in this one icon equals to two. That's the difference. So this concludes this class about understanding variants, how to create them, and how to manipulate them within Figma. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. 19. Adding Plugins: So in this class, we are going to learn how to add and run plug ins. Plug ins are third party elements that we can applications that we can add into our Figma to enhance our experiences. Sometimes you may have to employ some free third party applications to add in creating our content within Figma. Sometimes in website creation, or sometimes in element creation. We may need to add in one or two components or plug ins to be able to have a better experience on it. So there are different ways to add plug ins. But the easiest and the fastest way to add plug ins is to come over to this main menu. You can click on the main menu and you can come down here, you can see plug ins. You can come all the way down here. You have this much option. You can create new plugging in port plugin from manifest, or you can view the API documentation about plug ins. You can show or hide consul and so on. But for this, we're going to go to manage plugins over here, and you have the option to make search about any kind of plugging that you want to use. You can see we have components here. We have plug ins here, we have widgets here. So we're going to go with plug ins and we can make our search directly over here. So the first so let's say I want to add this animated moges I want to add animated moges You can just search for any plugging. You can see this one animated plugging animated images, and you can just go ahead and on. It is now loading animated plugging and you can see it over here, right? So all you need is just to select where you want to add the plugin and you can just directly go ahead and add it. So let's say I want to add this. I can just click on it drag and add it inside my frame. And you can see it's been added in my frame, and I can go ahead and resize it and put it anywhere that I want within my within this. So maybe probably I want to put it somewhere. Yeah. I can just select it, and you can see I've inserted this MOG. And whenever you select the G. You still have its properties over here down here. If you want to change any of its properties. You can click also to edit different properties, and you can play it to have a preview also of what it does. And you have this much feature as regards its opacity, can change it directly from here. So this is the first plugin. You can have as many plugins as you can as you want. All you need is just to make sure you come back to plug in here, and come to plug ins. These are the two I've used. You can add many. Let's go to many. You can say, There's one that is called content el. It's also very nice and interesting. So you can just go ahead and select it and you can go ahead and run. And right now you can see we've just added the content trial. So how do we use content? There are different features that it has from advertised to full name, date of date, full address, phone numbers, US currency, and so on so many things that you can use this for. And it has the effect can add the effect on text, Add effect on images, and it can add the effects on icons. And then so let's try to have an example into what we're talking about how to use this content trial. So, for example, if we have let's come to ships, and let's try to add this ellipse, click and drag it somewhere here, I can hold down the shift key, so we can have a perfect circle. And let's say inside here. I want to add a picture and I don't have it, so I can add something like this Avatar. I can just click with just one click while selecting this ship, is going to add the image of someone. And if you keep clicking, it's going to keep changing the images that it has inside the same ship. So depending on what you want to create. You can equally have that selected and you can have it created. So that is how to add this. If you want to add images also, if you want to add different images, you can equally come over and you can use different kind of image. You can use different kind of image and you can see multiple images depending on what you're creating. You can use check and select one and just apply. So you can select an image and you can just change it from here, right? The same thing with icons. You can have multiple icons, fluent icons regular. These are created by Microsoft. You have fluent icons filled by Microsoft as well. So you can click on any of them and you see multiple icons. Obviously, you can see multiple icons that you can at least be using, throughout your creation in Figma. So you can just select on any of them, can select on any, can drag it and drop it, and you can easily add it into your creations. So you can select and you can as well drag it and drop it here. I have this feature to yourself, you can change any of the features while still selecting the icon. You can change any of its features. While still selecting the icons, you can change Iqu a lot of things from here. This is about plug ins. You can manipulate any one of them that you are interested in, and you can just go ahead and explore, try to see how you can find other plug ins and adjust them, or start using them to start learning how to use them because plugins are exceptional when it comes to bringing in professionalism and ease of access and work in Figma. So I hope you enjoy this video. Thanks for watching and I look forward to seeing you in the next class, but 20. Creating Designs from Templates: This class, we are going to learn how to create some designs from template within Figma. So let's start by coming back to the home tab over here. All right. So once you're here, you can come down here to explore the community. And you can see that there are a bunch of different types of templates that you can access from here. You can search for everything within the community from here directly, or you can come to inspiration, what other people have created, team sinks and design system, visual assets. You can check out developments, icons, and accessibility, web, mobile and were frame. Quite a number of that the Figma users have created, and you can find quite a lot of inspiration from here. You can even come down here and discover what are the trading things that are working on FDMA. So some of the trending creations by FDMA users. You can see the quite number of them. So on your own, you can just go ahead and search directly. For example, you can search for anything. Let's try to search for something simple like trouble up, right? So let's try to search something like trouble up. Okay, so for this class, we're going to go with something simple. Okay, let's select this trouble up 2.0. You can just click. And it will bring you to show you this and you can just go ahead and say, open in Figma, you can just click and it's going to open this as a fresh project within Figma. Okay, so once you open, this is what you're going to be welcomed with. The first st is you have the main menu where you can click and you can select and you can get to this point. This is the list image, and then this is the detail page. So this is the detail page containing some of the things that you can change. Now, to change any of these features, you can just click and just change it. For example, you can click on this and you can see we've talked about the use of frames and elements, how to add different kind of things, layering of all of this. Once you select any kind of elements, like, for example, if you're interested in changing this image, you can click on this and you select the image. You can see image over here, you can click and you can come over here and see choose image. So you can navigate to wherever you have images within your system. For example, in my own case, I have this Figma tutorial, I have it in this resource. And I can select any of the images either this or this. Let's go something like this. And with just one click, you can see we've just changed the image on this. Okay? So you're free to use any of your images. You can escape on this and you're now back to the new. So you can see right now we've changed this. You can change the text as well, but just double clicking on the text. Like we've explained, this could about the best adventure for you. Enjoy your vacation here, for example. You have this much option. You can double click and you can change anything from here. For example, you can change the sizing of the text, right? You can see you can change the sizing of the text and exchange the phone style. Okay. You can make it bold. You can make it utilize. You have this much features as so gas text editing features as well. You can change the fill from this to maybe probably red color. So it's very easy to alter and change some of these elements as you move on. So another thing that you can play around with is this button. You can just click on the button and you can be able to change quite a lot of things. Also from here, you can change the coloration. You can make it something like this. I can see, and you see that we can see that we'll change it. Now you can control the corner radius also from here. We talked about the corner radius. You can control it. And here by just double clicking on the object. You can see double click on it and you cannot change the corner radius, increase or decrease it, however you want it, right? You can see let's say we have something like this. And you can change the text inside as well to start now. Join now. So you can do quite a lot of things. You can change quite a lot here as regards the content of this. You can as well change this and just click and This was added using the plugin that we've shown earlier. You can add different kind of icons with the plug ins. So if, for example, you want to change this, you may want to come over to plug ins, like we've explained earlier, you can come to plug ins and you can go to Public content real. We can find it come to content real. And you can see you can come to icons, if you have any kind of icon that you're interested, let's select on this. Okay, so you can select based on these icons, the ones that you're interested in, you can just easily select, for example, let's select something like this, and you can see we've just added it to this particular, right? You can hold on the command key. You can easily drag this. So let's say we drag this and you just insert it here. We can see if just added this. You can add it anywhere interested. So this is how to bring in different elements and change them accordingly. I can close on this and so let me use the letter H to pan around. So this is actually how to customize different things. You can change any of this. If you're interested, you can change any of this accordingly if you are so interested. So this concludes this class about how to open a template and adjust any feature from that template. The next class, we're going to learn how to create a particular UI design from scratch. Maybe we're going to replicate this from scratch. We're going to create this from scratch and see how we can play around with some of the features. So until next time, thanks for watching and I look forward to seeing you in the next class, right? 21. Creating UI Design from Scratch: In this class, we are going to learn how to create UI design from scratch. We're just going to pick any of these pages, and we're going to create it using a different methods, different methods. You can start by creating a frame, so we can go ahead and come to frames over here. We can t guide it with a letter F, can just frames. And like we said earlier at the beginning of the tutorial, we can select on any of these. So let's go on 14. Let's go fan this one, and I think we're lucky to get this the same same size. So what we need to do is we can just double click and can change the name of this particular frame, can make it maybe aviging H. So can go ahead and add different features as we have seen here. So the first one is we can add this image. We can add images directly coming back to this folder and you can use directly on your own and drag and drop any image directly into the frame. Can see right now we've inserted this image. You can go ahead and resize it to shore up the entire verses say we caracze like this. And carry size like this as well. All right. So one thing we can notice is that this one has this curve nature at the bottom. So we can do that. We can replicate that also by coming to the curve nature. We can select the image, and we can change the curve feature from here, the corner radius. You can change the select this double click here and maybe make this 25 and you can see if added some corner radius, but it's not as pix so we can drag and make it much more visible. Okay. This is one way to do it. Alternatively, we can come to the independent corners. C just click. And if you notice at the top here, there's no corner. So this is the top sign. The top button bottom corner. So let's go over here and let's make this zero and make this one zero as well. Okay. At once we click out, you can see that right now we have this with the corners by the top the slow corners. So we can select alternatively as well, we can still create the corners using this can track and you can make this with the corners, just like we demonstrated at the beginning of this tutorial. So we've just created this. The next one is we can add this text. Oh, we can add these elements, this one, it's just a rectangle with this much features. So we can add the rectangle on this. You can come to shapes here, click select a rectangle, and we can just select and draw a rectangle. This one equally has some circular ends, so we can come over to the radius and just increase the corner edges of this. We can have something like this. And we can change the color also to pure white this time around. Okay, so we have something like this. But it's not everything. We have to have a drop shadow. We can have come to effect until we have this drop shadow. And now we can see that we have our elements just like this way we have here. Now, down here, we can add this different so we can add this text. The text is easy. You can just copy and paste. So let's do just copy and can just come over. Let's say we add it with this, can come to the letter T, and we can just click and write something. Travel. Details, for example, and then we can click out and we can click and move it somewhere here, and then we can have this noble text, which we can still trigger with this. And then we can select. Okay, and we can have a text here. I just like we have it over there. So you can just click is just a text box and you can past in different things I resize using the properties, different properties. So the next one is the last one is to add this button, and we've learned how to add buttons by just coming to shapes over here. You can select a red tangle, and we can draw and make it this big. So if you like, you can zoom in to see the details and you can use the letterhead to pan around as well. So you can select this and we can come to change. You can resize it also you can escape. You can resize this, and you can change the You can add the corner radius from here, just like that. And you can change the color from here. You can see more colors. You can use the color picker and pick the exact coloration that we have here. So you can escape this unless trigger the text and we can see join now, can just join now. And we can select this and make bold, we come and, and we can select select everything, select the text, as well as the button, and then we can centralize center of both at the horizontal and vertical. And now we have everything. So the next thing we can have is this location, the star as well as the two. So this can be added from the icon. So this requires us to add a plugin. So how do we add a plugging come over here and we can search for a plugin called the icon scout icon scout. So you can just search for icon, default you see quite a number of different plug ins that can give you icons. But for this oral, we're going to use the icon scout, this one. So you can see on click, click on, and Explore. Got it. So it requires you to log in. So you can just go ahead and search for any icon. So for example, we can say back arrow. Let's say we search for back arrow, and we can see different kind of back arrows we can easily use. So for example, for this one, you can see this back arrow, this one, this one. Let's try to create it, so we can have different kind of back arrows. We have this So we can go ahead and use that as well. So let's use this. So let's use this. We can drag and drop it. So we can resize. Let's resize it. Let's escape this let's resize this. So let's resize it and put it somewhere here. So let's put it somewhere here. And we can change the coloration also from here. Let's make it something like white. I think that's it. You can have something like this, so we can move back. So over here also, you can add all of this. You can add this text on location and this price tag. So you can still come back to the same plugin. So you can just search for location. Okay, so you just search for location sign. And you can see them of different types. You can drag and drop. And you can re size directly. You can roll down the shift key to get a perfect resizing. Okay, less, we'll resize it. Then we can search for the other ones, price tag. You can always come back to the work and continue. So this concludes this class about how to create a fresh design from scratch. Okay, so I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. 22. Creating an Interractive Prototype of the App: In this class, we are going to learn how to create an interactive design of this UI application that we're trying to create within Figma. So to get started, let's try to make this very something that we can interact and move in from one frame to another by carrying out some actions from the first frame that could lead us to the second frame, and we can define the behavior of each action based on the prototype. So the prototype is just like the demonstration of how the application that you're trying to create is going to look like in real life. And we're going to do the preview directly here with this icon. Directly. So to get started, let's start with the first frame here. Let's add a simple icon or a simple button. Let's go back to the selection mode and select to add a simple button and less copy and pat it. Yeah, let's move it here. And let's rename this as get started. Let's make it gets started, and we can add something here to demonstrate the impact of what you're trying to create. Let's say we add an image to this, we drag this image and paste it inside this. All right. And you can see right now it has covered everything. So let's try to arrange it and bring this down. So we have this and can bring it down here as well, so we can have the other features abod. But then we can always select the image and we can bring it over here, and we can reduce the opacity so it becomes quite visible. The other features cannot become visible, sot put it as a opacity of ten. That is to small. Let's make it maybe 40. Okay. I think this is okay. So we can see from here, we can get started and link up to this place. But then let's add probably my logo to this. We can just drag and drop the logo as well, and we can also size it by coming over here and liking and dragging so we can make it a bit smaller. Holding down the Shift key, so we can have a perfect arrangement, and then we can just select and put it by the side. So we can add in some text, maybe to signify that something is going on here, but I think it's okay. When you click, you can get here. And then from here when you click, you can see this detail. So how do we do this? How do we link up the action, maybe on your phone that when you click on get started, it will bring you over to this frame. And then when you click on this image, it's going to bring you over to this mag detail. So the first thing you need to do is to start by clicking on get started, and you can come to the prototype over here. And then you can go ahead and come over here. You can see this plus sign. Okay. So once you click on the plus sign, you can click on the plus sign, and you can just join like this, all right? So you can see it just navigates to the next action. It is linked to the next bridge. And how does it happen? Is it on click? You can see the default is on click. So once you click on get started, you're going to be linked to the next frame. That's a default, but then you have other features like you can make it a mouse enter or mouse leave mouse down or mouse. Or after delay on Drac. You can select any of this if you're interested. So for this class, we're going to just stick by or click, which is a default, and we'll just make it navigate to this page. If you have other option, like you can go ahead and select from Pre, can have overlays, can have swap overlays or thereabout and the other features, you can go ahead and select accordingly if you're interested in. And this is the first option. You have linked it. After this, it's going to be linked here. So the next thing is we can try to test run, and let's see how the The action is going to be from this frame to the next one. You know the transition between this frame to the next one. We're going to test it live to see how it's going to happen. So we can start by coming to the test run over here to the preview button over here, where we can preview the prototype and see what is going to happen on our mobile phone. So can come here and click. And then we brought it into this platform as we have it. And so you can go ahead and click and get started, and on click, you can see it does takes us to this point directly. Okay? So we can see by just clicking and get started, we are here, and that's exactly what we are trying to prove with this. So let's go back to the Figma and let's continue with our linking or making the app interactive as a whole. Now, the next thing is I want us to connect this image to the next slide. So when someone clicks on this image, it's going to take over to the next frame. So we can select this image, and then we can come over to this plus sign, and we could just click and add and connect it just like so, and it's going to link up to this. So how is this going to be? So we can select or move in. Because you have different kind of options. You have instant, you have dissolve, you have smart mate. So I'm going to select move in, which is going to show you the previewle here and you can change the ease out. And the other features as well. If you want it to move in from left to right, or from right to left, you can see the preview or from top to bottom, or from bottom to top, you can select as you so wish. So for this one, we're going to go with right to left, and I think we can see update to this. And then we're done. Okay, so we can close on this, and then we can try to test on this as well, so we can see the transition from the first frame up to the last frame. So we can just select the first frame, and come over here. And click on start. Once you click on get started, it brings us to this point. And once you click on this, take a look at the transition very fast and very interesting. We'll get to this. So in a nutshell, this is how to create an interactive UI design within Sigma and play around with it on your mobile phone. So you can see, we've shown the preview even of how you can see it live on your mobile phone, the various action that you're going to take and the various steps and click and how the interaction is going to be. I hope you enjoy this video. Thanks for watching, and I look forward to seeing you in the next class. Bye Okay. 23. Sharing and Exporting Designs: In the last class, we talked about how to create an interactive UI design within Sigma. And in this class, we are going to talk about how to export or share our design with colleagues or with our friends or anyone that we're interested in sharing the document with. So to share a particular design, You can come all the way here to the share button at the top right. You can just click on it, and you can invite the person directly by giving his e mail address, and you can just go ahead and invite him. I can invite someone. For example, let me see mentorship, but I. So once you type the e mail address of the person, you can as well change the permission that you're going to give to this person. For example, the permission at the moment is that he can only view, but he can click on this and you can make him an editor as well. To this very project. So you can go ahead and invite the person and he's going to receive an e mail inviting him to comment or to edit this particular project. Okay, so once you log into your Gmail account, you can see that we've received an e mail from Figma once you open. You can just go ahead and click to open. Okay, at the same time, you can record. You can download the project, can dowload any kind of can download any section of the project, any of the frames by just selecting the frame, and you can come all the way back to the design, and you can come down down here and you see export. If you click on export, you cannot define what kind of what kind of format file format you want. You can see the default is PNG, but you can go to JPEG or S V G of PDF depending. Let me go with JPEG, and I can just go ahead and export. You can see the default also is one X, which is going to maintain everything as regards the quality. But if you are exporting a very large project, it's better to go for two X, which would be less in the quality during the export, but high in the quality during the preview from the other end, maybe from your client's point of view. So once you're done here, you can say export the menu and you can define the location where you want to export it. For example, in my case, I want to export it into the Still Figma project, and I can just go ahead and see safe to this. And this is now exported in that particular location. If you want to export the whole frames, you can click and select a particular frame. Hold down the Shift key and select the second frame. Hold on the shift key, and select the third frame, and then you can go ahead and come over here and say export. Now you can define also the default that you want. O JPG, and I can say export the three layers. And define the same location. For example, I can create another folder here and call it output and click on create. And then I want to export everything in this location so I see safe. And right now, it's been exported, so let's check the folder and see what we have exported. You can see we have exported all the three files that we have. So we can just click on any to have a preview of what you have just exported. So this concludes this class about how to share your project within FGMA and even export it into your computer in different formats. Hope you enjoyed this video. Thanks for watching, and I look forward to seeing you in the next class. Why? 24. Course Conclusion: Congratulations on completing this course. You've reached the end of this Figma for beginners crash course. Throughout this journey, you've gained a comprehensive understanding of Figma and its functionalities for UI designs. You've learned how to navigate the interface, create and manipulate elements, build interface prototypes, and ultimately share your designs with the world. As you bid farewell to this course, remember, Practice is key. The more you use Figma, the more comfortable and confident you will become. Try and explore the Figma community. I would like to challenge you to check the project section of this course for a simple project for you to try and demonstrate your newly acquired skills. Sincerely, I would like to thank you so much for being with me, and I wish you the best of luck in your subsequent undertakings. Keep designing.