Figma for User Interface and User Experience UIUX

1. Figma introduction: Hello everyone and welcome to our class of Figma for Learning UI UX. If you're planning to learn user interface and user experience from the beginning, then you are in the right place. Because we'll cover in this class from the basic to an advanced level of using this particular application. This is a beginner level class. If you have no previous experience, then you can just join in this class and we can learn together. First, let's take a look at what all you will learn from this class. First, I'll be telling you guys the introduction, like what this application Figma does, and how it is better than any other application which do UI UX designing. After that, I'll be telling you guys about the workspace and also the interface, okay? In any application or in any software, if you're familiar with the workspace at the interface, it will be quite easy for us to work in that same space. Next, I'll be telling you guys about all the basic tools in Figma, what all you can use. Okay, I'll be telling you guys how you can move your object or how you can create frame, select a particular frame and scale it up according to yourself. And also show you how you can import images, videos, and different types of shapes. Okay, after that, I'll be telling you guys how you can use pages. Sometimes we need to create more than two pages, in that case, how you're going to manage pages and all the functionalities related to pages. I'll be telling you all after that, you'll learn prototyping in Figma, which will help you to make your own mobile designing app or your web page. Okay, so you can design your own web page or your mobile application that you can connect all these together and give a good outcome. After that, I'll be telling you guys about few of the easing options that you can use. And some of the prototype animation like how you can do animation in prototyping. I'll tell you off after that, I'll tell you how you can import images and use those in your UI UX designing, okay? You can crop those and many more. Okay, so the next class is about that. Only about masking, about how you can crop images from all the ends and different ways of doing that, Okay? I'll also tell you guys about different image plug ins, what all can be used. Okay. After that, there is option called component and effects. I'll tell you guys how to use the component and also how you can put different type of effects in your Figma file. Okay, lastly, I'll be telling you guys how to export your images, which you have imported in your file. So I'll tell you guys how you can export your images from the Figma application. Okay, after completion of this class, you'll be able to make your own mobile app and web page. And you'll also have your own color, balette and gradients. You'll be able to grab a good knowledge of coloring in web designing and also be able to do good prototyping like you will reach to an advanced level of using this application. After that, you will also be able to select images to make buttons, and also make the font of the web page. Basically, you'll be able to design a web page in short, as this project is like project based class. During learning you will have class projects. So what you learn, you'll be able to participate in class. You can do practice while you're learning. You'll have supporting resources in this class. It will be easier for you to learn during learning. If you face any issue or if you have any questions, then feel free to ask me. I'm always there for you to help you. Let's start learning Figma for IU together. 2. What is figma: Hello everyone, and welcome you all to the tutorial on Figma. Here we'll be learning what Figma is. And the first chapter is going to be Introduction to Figma, where I'll be telling you guys about what this application is basically all about, how we can basically use this software and many more things here. Okay, so here if you're a beginner and trying to learn UI UX design for the first time, this is the best course for you where you can learn that. After that, I'll be telling you guys that how this Figma actually works. So Fima has revolutionized the design process. Offering a collaborative cloud based platform with powerful features that cater to both novices and experts. Whether you are an aspiring UI UX designer, a product manager, or a creative enthusiast, this tutorial will equip you with the skills to navigate Figma world and produce exceptional designs. Let's not waste time, and let's get started with this class and the first chapter on Figma here. As you can see, I have searched Figma in micro, This application here. This is the first one, and this is the file where we are going to work. This file actually works in both. If you're using Apple product or even Windows, you can use this file there as well. In our smartphone also, we can use this particular application for me. First, I will go to this one. Okay, once you come here, you guys can see the interface here. Okay, here we do have two types of things, one figma and another with figma jam. Here, all you can do here, you can do on line one board, you get strategic planning teats. You can also create different type of diagrams. Here. You can do development work design prototyping as well. Okay, here, if I want to download this particular application, I can download it from here. But first, let's see what all we can get here. From here, I can see the overviews, I can see customer reviews as well, and also different type of resources regarding this particular UI UX design tool. Okay, This is similar with a XD. I have used this feedback application for now quite some time. What I can differentiate is this tool is quite user friendly. With this application or with this tool we can usually work a little better as it's get new updates. They do have quite good updates from here. Okay, here I can see different type of templates, plug in and all practices resource library. If I want help with anything, I can go to the health center and ask for any help. As I want, I can tell my problem. And here is the community resources. Okay, Here also I do have many community creators from where I can refer their work and learn different type of things. As in this UU designing, we need to basically understand how we want to design our. If we refer those people and see their work, basically we'll get a better idea about UU designing. And here we do have different user groups and also a few educational programs of how to get used to with this particular application. I can also see different types of events and livestream which are conducted by Figma as well. As I've already logged in, there is option called Logout. If I want to Logout, I can log out from here. Okay, if I go down here, they do have a brief of what this is like. So many people can work in this application or in one folder together. We can always work on the latest version. And we can also save our work in Cloud team libraries, which I'll be explaining to you guys later and also in detail. Okay, here I do have all this. You can see which all brands are its partners. Okay, here is the whole page. And let me go and download Figma from here. Okay, so I'll click on download. And once I click on download, this Figma is basically have two version, okay. It have a free version as well as a paid version. If you're starting on with graphic designing or you're starting with UI for the first time, then I'll suggest to you that start with free version and basically afterwards slowly you guys can go onto the paid version. Because it paid version. They do have a few premium features which are quite useful when you're working regularly on this application. But if you're using a time being or for a particular project, one or two project, and after that, you are not going to use that for that to practice. And everything free version is also good because they also do have many different features. As you can see here, if I want to download it in a desktop, I do have option for a OS and also for Windows. If I want to download it in my iphone or ipad, I can click here, and here is the ipad option here. I do have for Android, if I want to take different type of phones, basically phone installer is like, it will give me different kind of phones which I can use in Figma. So we can download this one as well for OS and for Windows is this one. What I'll do, I do have a Windows laptop, which I'm using right now. I'll just click here, Dest for Windows. Once I click here, you can see it's getting downloaded on top here. It might take some time, which is around 100 B, and will take me around a minute to get downloaded. So here you can see about this, like if I want to see all these resources, if I want to compare with other apps. Okay, so these are some competitive apps which are Sketch, as I already told you, Obex D and Framer design on Windows. Miro Invasion Studio. So these are some of the apps which does the same thing, which are just UI, UX designer app. So I can use those from here or compare those and see what is the difference between these apps and this figma if you want to compare. Okay, if I want to explore that, what I can do, I can see it from here. And if I want to use the paid version, let's see what is the price. Okay here. If I come here, you guys can see if I'm using the free version, I'll be getting three Figma and three Fija files, which I can collaborate with others at work. And I'll have unlimited personal files, unlimited collaborators, plug ins, templates, and also I can download the mobile app. It starts from $12 per month if I am using the professional one. Okay, here you will get unlimited Figma files, unlimited version history, team library, advanced prototyping, and Ve mode, which is in beta. I can download it here in this one if I'm choosing the professional one. I can also get some discount if I can show proof of if I'm a student or an educator, maybe if you're a student you can just upload your identity card or any document from your college, university, or school after that. If I come here, $45 per month for it is the Figma organization. Okay? So here you'll get these libraries, centralized file management, single sign on, and all of this, okay? And this is the premium one, which is the $75 per editor. Per month, you'll get a dedicated words piece, advanced design systems, guest access, network access restrictions, and expiring public links. You'll be getting all of this here, this is about, Figma is the starting thing here. You'll be able to get the same thing. Music player, if I'm using the free one for Figma Professional is $3 Fija Organization, it's five, and the enterprise is $5 per editor, per month based on your need. You guys can see which one will be good for you, is beneficial for you. I have downloaded this one, now I will go to my file, I will try to install this particular app in my PC. Once I have installed that particular application, it directly redirected me to that app. Okay, so here I'll go to the home, and as you can see here, I do have all this work, Okay? I'll be showing you guys all of this, which I have done here. You guys can see I have done all of this. I will be showing you guys how to do here From here. As you can see, this is the notification bell. I can click here and see if I do have any notification here. This is the recent file. Which you have worked on. It will be saved here here. The team is quite important in this Figma. Okay? So basically, suppose I'm doing a particular lesson or a particular project, okay? In that I can take different persons or I can include so many of them, and we can work on a single file, so many of us altogether, Okay? So this is one of the greatest thing which is quite helpful if I got something like it will take me around 20 to 30 hours and I want to finish that work in three days, four days. Maybe I can take two or three people with me and together we can work there, share our ideas, and get used to that particular app and finish our work. So here you can see if I do have any team or not. And here is the draft where all my work is being saved. Okay. And here is the recent app. Here you can get, you are verified for Fema education. And here you can see ready to upgrade a team for free. Okay. So as I have applied for Fema education one. So I can now here as I have already created these teams, as you can see, I do have different teams here. Once I drop this down, you can see I do have already done some team projects. So let me delete this from here. Let me delete, I will write BC. This is how you can delete a team. Okay? And the same way, I will delete this one as well. I have named this one as Robert. I will delete the team here again. This one also I will delete just to show you guys that how we can actually create a team. This is the process of how we can actually delete a team. Let me delete. Yes, this team also is being deleted. Now from here, I can actually create a free team. From here. Once I want to create a team first, I have to come here, click Create a Team, and I'll just name it. Suppose I will name it as Mark. Okay, And I'll click Create Team. Here you can see another page which appeared here. Here you can add your collaborators and what I can put their E mail here in these boxes. As I've told you that in this version I can only add three of them in my team, if I'm using the other version, which is the paid one, I can add more. I'll be not putting any e mail here for that. I'll just keep this part for now. Here you guys can see I do have this option finished set up and I'll just click on this. I Agree to Figs Term Oil Service, and I'll click on the complete upgrade option. Here you guys can see Team is being created. This one is the Team project which I have here. I can actually view it like this in a least format or also in a grid format. I will cancel this one. Now here you can see on my home page that I do have a particular team. Here is another option. If I want to create a new project, I can add a new project or I can console it as well. Okay, I can just console it like this. Okay, so if I come here and now I'll be showing you guys what the workspace will look like if I click on this one here. You can see this is the main space where you guys will be working in Figma from here on top you. If I double click on this one from here, you can actually change or rename this particular project file. Okay, let me just name this one as project one. And I'll click Enter from my keyboard here, you can see this one is saved or renamed as Project One. Here you guys can see I do have the main menu. From here I do have the file option and so many things which I'll be explaining you guys in later stages of the class. This is the selection tool, this is the Frame, this is the shape tool, this is the creation tool which includes sin and the pencil tool. Here, I do have the text tool and here the resources, the hand tool. If I want to add any comment, I can add a comment using this box. All of this I'll be telling you guys in the later stages of the class. Everything here, every tool and it's uses. I'll be telling you guys this is the control panel from where I can choose the design and also export my media. After working, I do have a few of the prototypes which I'll be showing you guys how it is done. I'll be telling you guys how to do prototyping as well after that. Also you can see I do have local styles as I've already told how we can export. We do have different formats, PG, JPG, SVG, and PDF. I can see that as well. Here I do have the preview option. This is the main thing, what we'll be looking at, which is the layer. Okay, so while working in Figma, we should use layer and laying is the main thing. So I'll be telling you guys about laying, how we can add different pages from here. Take two or three pages and work out that how to create frame. So all that we'll be learning in the next tutorial. So till I hope you guys have understood how we can actually download and install the Figma application. And if you don't want to download as well, you can work from the browser as well. Here as I've shown you how we can add, this is the Assets option. So I'll be showing you guys the usage of this as well. I hope to see you all in the next tutorial on Figma. Take care. And goodbye everyone. 3. Workspace and interface: Hello everyone, and welcome me all to another tutorial on Figma. In last class, we learned about what Figma is. And I have also shown you guys the workspace from where you can work. In last class, I gave you guys a brief of how it is, but in this class I'm going to show you the workspace at the interface in detail that you guys can understand once you've done the work, how it will actually look or how this actually works. Once you understand the workspace at the interface, it will be easy for you guys to work in that particular application. Let's not waste time here, and let's get started with this particular class here. As you guys can see in the home page of my Figma application, I've explained to you guys about all this. What I'm going to do is I'll be taking a full done Figma project to show you guys how actually it looks and what all can be done there. For that, I will just go to the community, the Figma community, as I've told you what all you can do. Let me show you guys how it actually looks here in the Figma community. You'll have so many things here like aspiration team sings design systems. If you want to see any web page development or a mobile page development, you can see it from here. They have also shown we framing. From here you can download different icons which are free from here. Okay, to use it in your work. There is so many things to learn from this community of Figma As all the advanced learner or the advanced people, those who work using the Figma, they do sometimes upload their work here to show how this application is useful. Let me go down and see as I do have different files here, I'll just go to this one and let's see what all I do, have it here. From here, what I'll be doing, I will come down here, try to see what all components do I have. Okay, Let me just take simple app to show you guys here. Okay. I'll be opening this one in my application. As you can see this is load here. This one is basically a Dr. appointment booking, mobile app. Okay. We'll see what all options do I have here. Okay, I'll just open this one in Figma. I'll be using one of my accounts here. If I want to edit the file, I can edit, but I wouldn't be editing just to show you guys the interface of how it actually looks when this one is actually quite large. Okay, with my hand tool, I'll be moving this one. Let me go here in the starting and I will just zoom in here. Okay, so I hope you guys can see now how he actually managed to do this step by step. As here you can see this is the first screen, and once you click here, you'll be redirected to this page here. This option might have something else here. You do have the steps, if you click on let's get started and many more. Okay, here as I've told you guys about the basics of all this, once you're done with the work or once you're doing the work, this is how it will actually look. As you guys can already see here. This is how it will look, okay, from here. If I want to take anything, suppose I want to take this particular page here and I want to move. You can see here, this one will be automatically selected because this is under this particular frame as. And if I have selected another frame, if I zoom out, I'll be able to see which one I have selected. This is how it actually works. It will be better if I show you guys a project in which I can fit all those things in one in my screen. Because this project is quite vast as you can see. But it's quite a good project which is done here and a total project. What I'll be doing is either I can just move it around from here, okay? To show you guys. Otherwise I can just keep this down here. As you can see, you can change the positioning and it will also show you the alignments, okay? This is how you can move. It all depends on you, okay? Like how it is suitable for you. You can actually align it side by side or in a vertical or also in a horizontal way. It totally depends on UK. These are the layers. As you guys can see, these are called frames, which I can create using this button here and the shortcut keys. I'll be telling you guys about all of this, how we can create a frame, and how we can put your work on that, how we can actually set those up. I'll be telling you guys now. Let me go to another file from the Figma community where I'll be able to show you guys, once you did a project in one layer, how that basically looks here. I did found one design file, which I'll be choosing to show you guys in brief of what all can be done here. I'll just open this one in Pigma, like the last one, I'll just continue it with my e mail here. You guys can see this is the page, this is how you can start making your web page, basically from here. As you guys know already, you can start creating your page. As you can see, by default it will come page number five, just right after the first page. What I'll do, I won't be creating any pages, but to show you guys how we can actually create a page, I'll click here. This page. As you can see, I have already told you these are just different layers. Now I'm in my second page. This is the third page, and this one is my fourth page here. The one who created this one, he have named this particular frame that he doesn't get confused or particular pages accordingly. These are different layers under each layer. They do have different options here. Suppose I want to select this particular thing inside. Let me just zoom in using my control and my mouse. I'm just dragging inside with my hand tool. I'll just come here. Okay, To give you guys a better view of the screen, suppose I selected this particular frame. Now I want to move this frame towards the right here. You can see I do have the option here, The X, Y with hug. Okay? The rotation angle, the curves, all that I can change from here, and also the auto layout constraints. I do have the layer grid option from where I can choose different grid styles and I can browse it from the browse libraries as well. Once I'm connected with my Wi Fi or my Internet connection, I can access those as well, which are there available for free. Otherwise, what I can do is I can also create my own grid style from here. As you can see, if I want to delete, I'll just click on this one. I also do have the layer, what kind of layer do I want here? I do have different layer. As you can see, this is just giving me a preview. All I have, suppose I do have two or three layers here. Once I put one layer above another, how I want it to look, I will be showing you guys all that. Well, I can also select the fill means the color. Okay? Suppose I have selected a red color, it will give me this type of colors from here. Okay, I'll be taking this as white only. I don't want to ruin this from here. I can change the opacity. If I take 50 and I click on, okay, I can change the opacity. And I can also decrease it if I want to decrease it more. If I do want to see that and see the difference here, you guys can see the difference right here. Suppose I put up by text here or a particular box, or a particular color on that. If I want to change the stroke of that particular text, all I can do, I can just change the stroke color from here. I can also increase the stroke, like if I want to increase the stroke from the inside, from the outside or from the center, I can do that from here as well. I also do have the option of effects. From here, I do have different effects. Drop shadow, inner shadow, layer blur, background blur. Here you can see on side in the layer blur, it appears like that inner shadow and this is the drop shadow. After working, I can also export, as I've already told you guys in the last class, here is the option of alignments. I can do that. Let me show you guys about this X and Y. Suppose I will increase it, it's just moving on to the right. The same way if I want to move it upside down, I can do it from here as well. Also as you can see, I am able to change the corners from here. Also, if I want to rotate this, I can rotate it accordingly the way I want. I can do all this. I will just put it as zero. Yeah. Once we'll do this work, the many more text boxes will make the baby more text will put or the frames will make. We'll be able to here, you guys will also be able to get a preview from here. As you can see, after each and every option, I also do have the shortcut key for that I'll get the preview if I click on the page up button and also the space. At the same time I'll get the preview. For my keyboard only, I don't have to use bow, but I feel using bow is quite comfortable. I do use that. I can also share my particular work. I can actually invite them using any email whomever I want to send. I can also select that. Can they edit my particular work or can they only view? Okay, after that, if I copy the link and I can go and share it in any media using the e mail or also using any other social media platform like in Whatsapp Messenger, like that, I can just give them the link by copying and pasting in their page here. This is the layering. As you can see, after creating a frame, I do have all this option inside that I can actually put different components under that. As I do have frame photos, I do have this frame as well. You can see, I hope you guys have understood the basic of what a layer is being used for. Also, we'll be looking here at the assets option here. If I come, I can actually browse different types of assets, or I can just open the team library, or I can view the local components. What all are being used here in this particular file or in this project. I can just view those from here. As you can see this particular work quite neatly and well done project. I can see this. If I want to modify anything from here, I can modify those according to the way I want, okay? As I'm selecting here, you guys can also see on my screen that particular icon is getting selected. Okay, if I click on this, you guys can see this all are getting selected. This is how actually we can try designing or just keeping a layer and track of all icons I have used in this project. And here I again do have the components. Okay, this is the third page. This is the last page here. Okay? Here, if I want to change anything, I can select this one. I can select it just redirected me to that page. I don't want that. I'll delete this. I will just close this one here. If I want to select anything I can select like from my button. If I want to delete this, I can delete that and undo that again. On top I also do have these options here as you guys can see. If I want to edit any object, if I want to create a component, and also if I want to use this particular layer as a mask here. If I want to create a link, I can click in this option and try to create a link like this one. Okay, as I've already told you, in case of any text, I can actually change the text size from here. So I'll just close this one. I can select the text actually put out or I can actually modify or edit the text according to my need. Also fill color, fill stroke export. This is the prototyping option. From this prototyping option, I can go to this and I'll be showing you guys in brief of how you can prototype. Hope you guys have understood this class of workspace and the interface. Now I believe that you guys are familiar with this application. From next class we'll be learning about all these basic tools which I have in my toolbar. We'll be learning about that, all the uses of what we can do with those particular tools. This last is going to be interesting, I believe. And you guys will also learn about UI UX design and particularly about this application from a very basic knowledge to an advanced knowledge, like after completing this tutorial, you guys will have a good idea about UI UX design. And we'll be able to make your own web design and mobile app design as well. Hope to see you all in the next tutorial. Take care of everyone and goodbye. 4. Basic tools in figma: Hello everyone and welcome you to another tutorial in Figma. In this chapter, we're in our chapter number three and learning about the basic tools in Figma. We'll be learning about the move la scale tool. Also about the shape tool that how you can create different typo shapes including a rectangle. How we can play around with all those shapes and modify those accordingly about the text. How we can modify a text, create a text and put it inside your frame. I've also showed you guys how to layer down or rename your frames and put up your work there about the slicing and adding a command and also the resources, plug ins and widgets. So let's not waste time and let's get started with this particular class on Figma. As you guys can see here, I do have an empty workspace with that empty workspace. What I'm going to do is now I'll be explaining you guys about all these tools. First, I'll be taking this frame tool with my frame two, I'll be just creating a frame. Okay, suppose I don't want to create any frame of my size. I do have any particular size to do my editing. Here you can see I do have different presets. Okay. Here I do have preset for my desktop, which is bankbook air. Here also you can see the size. There is other website where you can find different type of sizes which is appropriate for you or your device. There you can just put up your device name and they'll show you the size of the particular screen. Under the phone option, I do have a Android large and small. All these iphone options, if I do have a tablet, I do have all this. The ipad D 8.3 the Surface Pro Eight. If I'm making any application for watch, I do have this screen size as well. Now as I've already selected that one, I'll be creating a frame here. After creating the frame here, you can see in the control panel, I do have all the options to modify this one. Okay. Maybe I'll take this color, as you can see one. I'll select this one. I do have this option of doing all this. No, if I want to darken it, I want to create the normal. I can do the layering from here, and I can also change it from here as well. If I click here, you can see it get lightened by 50% If I don't want to see that, I can just click here on this eye button from here. And I also do have that eye button here as well. Just right beside that, I do have the log button. Now, I won't be able to move this using my selection tool as well. Or make any changes, which if everything is inside this particular box. But once I unlock this, I can actually move this particular frame, position it accordingly. And from here I'll be also showing you guys if I want to move this on the x axis or on the y axis, I can do that. I can also select this if I want to take it in a portrait mode or in a landscape mode. This is how you create a frame. I also do have this option of strokes. If I want to change the stroke here, you can see I'm able to change the stroke, change the color of the stroke. If I don't want to see this one, I can just click on this again. This one. If I don't want to see the stroke. This again. This one. If I want to see from here, I can change the opacity by 50. This is how it will look. If I want my stroke to be inside, like outside, I can click on this. If I want it in the center, I can click here. In this option, I also do have the option of effects. If I want to give any blur effect, drop shadow, inner shadow, I do have all this here. Okay? This one is the scaling tool and the shortcut key for that is K. If I click on this one from here, I can just scale up or scale down this particular frame from here. This is quite simple and I'll tell you guys, suppose I want to make another frame, okay? I will make another frame from here. As you can see, I can make the frame the way I want, okay? But if I'm selecting this frame option from here, and if I click on control shift and then try to make a frame, my frame will be proportional, okay? So I can create a frame proportionally from here if I'm trying not to create Proportionally, then you guys can see it's going on the other way. But it will give me a proportional framing here. This is how you can create a proportional frame. From my clicking control plus shift and holding or dragging onto your mouse. I'll delete this one. This one as well. Take this frame here. I can rename the frame from here by double clicking on here. Otherwise, on top of this particular frame, I can also click here. I hope you guys have understood the use of this and I'll be showing you guys more options here. The framing, you guys have already understood. I do believe this one, okay? I have the shortcut key for that is the move tool and the scaling tool also have been understood by you guys. And now let's move on to the section, okay, here, using this, I can create a particular section. Suppose I'll create this section here, and I can just move this particular section here inside my frame, okay? So I do have this section now inside my frame. Okay? If I select this one, or if I select this, suppose I keep here, put up a color. Suppose I chose this color, doesn't look good. Yeah, not bad. Okay, now if I come here, click on this, again, close clip content option. This is how it will actually give me a preview. But if I again come here on the clip content, there is a change which you guys can see just on this section with the clip content. And this is without, this is how it will actually look as you guys can already see here now. Okay, this is just right above this one. Now let's move on to the slice tool. And the shortcut key for that is, so basically just slices down frame or a particular area which you want to import or export. Okay, if I choose this particular section here, I have selected the slice too. As you can see, this is the place which is just occupied after selecting this. If I come to this export option, as you can see here, it's written, if I want to export this slice one here, okay, if I export slice one here, I'll be showing you, review this, What will be saved in my screen, just a slice from where I have slide. It will just select that part the same way if I select slice two, it will give me a preview of this as nothing is there. I'll just slice one as well. Okay, understood. This part as well here. I do have all the shapes here. If I want to create a line, a rectangle, Okay, I create a rectangle, Just think I'm creating this one from here. I can create different icons. If I select this, fill this with a different color here. Okay, here you can see I do have this with Alt. I can just duplicate this as well. As you can see, I have duplicated the same size of icon here. After that, I can make buttons with this shapes as well. In this line here, I can create a line the way I want here. There is a good thing about Figma, it will show you alignments. As you can see, there is a orange, reddish color line here, which shows me the alignment here. From line I can actually put, if I want to put any kind of arrow, I can do that or all the preview, I'll get it here. And also this one. This one. And I can also change the width or the stroke size from here. Okay, I can do this all as well. I also do have the arrow thing here. I can just simply click or create an arrow from here. If I select this here, you can see I can also change the opacity. I can also do it like this, reverse triangle in the circle, arrow, diamond arrow, round, square. I do have these options here. If I want to make a circle, I can make a circle the same way with this particular circuit. I can play around as you guys can see. But if I click on control shift as I've selected this one, no control shift, it will be created in a proportion. Okay? They will create circle for me in proportion. After that, let's go to polygon. The same way I can create a polygon like this. If I want to move it inside any frame, I can move this as well. Okay? Here you can see once I have done this, these things are frame, okay? All these things are under frame one. As this one is inside, I can change the setting from here. If I want to change any setting of this particular framing, I can do this from here. Suppose I want to change rotation from here, and everything will be included in that. As this is under frame one here, I have understood this. Let's go to star. From here, I can create star if I want to. Here you can see I have these options where I can widen this or I can play around with all this. If I want to increase the count here you can see I can increase the count as well. Here I can play with this one as well. And if I want to place any image or video, I can just click on this particular option. Or from my keyboard, I can click on Control Shift after this. Let's see here on the Creation Tools. Under Creation Tools, I do have the pen tool and the pencil tool. If I take the pen tool, you guys will be able to see, I can make different shapes from here. As you can see accordingly. The way I want here, I have created, I can also bend it. If I want, as you can see here, I can make different things from here. Okay, If I'm done with this, I click on. Or if I want to bend anything, this is the Bend tool. I can use this as well. Okay. If I'm done with this, I can click on here. Let me show you guys the pencil tool. Pencil tool, it's just a human writing. If I just write Igm, I'm sorry, my handwriting is too bad. I'll be deleting all of this from here. Click on the delete button here, and this is deleted. This one as well. If you guys have understood the usage of pen and pencil pen tool, the shortcut key is only for pencil to shift plus P. You just need to include a shift with the P to select your pencil tool. Let me come to this text tool after that. Here, once I have selected the text tool, I need to create a particular box here. From here I can just type anything like I will type Ma basic tool tutorial as I have written this one. If I select this particular thing from here, I can actually select the font. Okay, I can select the font and I can also select particular size. Okay? What size do I want here? I do have this one. I can also change the alignment, and many more things are there, which we'll learn here. I do have two lines. I can also increase or decrease the line size from here. As you can see, okay, I can change the width as well from here. I can select the font from here. As you can see, I can do all this here, like once I have selected my text, I. Use this particular text option. And I can also fill color, give stroke put effects, which we'll be learning later. With this, I will put it here. Okay. I have also learned how you can use the text tool. For the text tool, the shortcut key is from your keyboard. After that, we'll go to resources. If I click on resources, I can get different type of plug in, a different type of widgets. From here, plug ins are quite helpful. I'll be showing you guys a few of the plug ins which are quite helpful and handy to use. Okay, so here using the hand tool, I've already shown you guys how we can move around here, like in this page, as with this selection tool, you can just move around. Okay. But here using the hand tool, supposed you do have a full page of work and it is so much okay, so many frames you have created and so many things you have done here. Now you just need to move around with your hand tool, This is quite a handy tool. The last tool in the tool bar is a comment section. If I select this one, and here you can see a comment box is there. Suppose I want to put a comment here. Okay, so here I can click and I will write Change, change the font size and color. If I want to mention anyone, I after the add their name, those who are in my group with whom all I'll be working, I can actually mention them. If I want to mention everyone after the rate, I can also put everyone okay here. I also do have different Emoji. As you can see here, I have different Mogi I can use accordingly. So many different images, not only the face emojis, also animals, fruit snacks, and many more. Here I do have some words as well. Okay. Which I can use. I can even search, so I can do all this from here. This is also quite handy tool if I click on Enter or if I click here, you guys can see I have uploaded a comment here. If I have mentioned anyone, they'll get a notification that I've mentioned them in my project that they need to do something or I have given some advice or anything as such. It will appear in this box as well as in their box as well, that it might be visible for them wherever I'm doing this. Okay, from here I can just edit this as well. Well, I can also even delete this one. I'll just delete this one. I hope you guys are now well familiar with all the tools in the tool bar. Now you can actually make a basic file using this Figma application. I hope you all have understood. See you all in the next class or in the next tutorial. In the chapter, we'll be learning many more interesting thing about this particular UI UX design application. Till then, take care. Goodbye. 5. How you can use pages in figma: Hello everyone and welcome you all to another tutorial in Figma. Now we are in our chapter number four, and I'll be showing you guys how you can use pages in Figma. In last class, I've told you guys or gave you guys a basic idea about all the tools, then what are its uses in this particular application? Here in this class, I'm going to tell you about pages. You can add a page. How you can copy a particular content from one project to another using the copy paste method. And how you can actually put up so many frames or so many components, so many vectors inside a particular page. And how you can actually work by showing you guys some examples from the community of Figma. Let's not waste time here. Let's get started with this class. Now, I'm in the home page of Figma. As you can see here, I have the explore community. And I have taken two of the projects, like designs. I have taken two of these designs to show you guys how it actually works, like what are the use of pages or how you can actually use page in your work. As you can see, I have taken this first design here. You can see he have four pages down here. Okay. Here he have four pages. If you want to add more pages from here, you can just come here and click on this page from here. As you can see, once I clicked on a new page, I got to create a new page. Here I am it accordingly. Okay. Suppose I'll just as pages class, I'll just say that. Now what I want to do is I want to create a frame. From here, I showed you guys how we can create a frame as you also do have presets here. I'll be taking for a desktop, I'll take 12, 18 to 832. Here I do have this particular page. As you can see, once I have created this page, my frame is there, but under my frame, I don't have anything because I didn't put any boxes or takes inside that. Now, let me create a box. As you can see, where I created this box or this shape inside my frame frame. The rectangle box is just coming under by frame. Okay? By rectangle box is just underneath the frame. And now I can basically name this the way I want. Okay? I'll just write decks. Stop. I'll save this one here. You can see I can actually give it some color the way I want. Give this one also a different color. Okay, Let me take this color. As you can see, I do have this page. Okay? This is how you can actually use a page. And we can also create different pages or different frames in the same page. Okay? If I just zoom out using control, a mouse down here, you can see I do have one frame here. If I want to replicate the same page of the same size, what I'll be doing is I'll be clicking on Old first. I will choose this frame. I'll click on Old. Once I click Old there, you can see on my mouse, I do have two mouse. This is the way how I can replicate the same frame. Again, I will select this and I will move this one with my hand tool. I'll just move the screen that I can show you guys in the middle. What did you understand here? Like here, we have understood that inside a page we can create so many of frames, so many vectors. We can also put so many text animations, icons. Okay, I have also showed you guys how we can create a page. Let me show you guys if I do have the same name on how I can actually change that. Okay, from here. I'll click here to this one as three. That I don't get confused here. Okay? Suppose I did like any of this thing. Okay? Suppose I like this particular logo. Or let me go back to this page and I want to take this particular image in my own page. For that, what I'm going to do is either I can click on control C, which is copy. Otherwise I can just come here, click on Copy from here, and go back to this page with my selection tool, select this particular box and paste this over here. Okay, so as you can see, once I have pasted it came in my page as well. Accordingly, I can also take or refer so many of the other projects from the community option. If I go here, suppose I first let me zoom in with my head to let me move this one from here and here. You can see how it is actually used. Here he have first selected what colors he should use. Okay? These are the colors that he'll be using. These are the font type which he'll be using for heading. And this will be the font type or size for the body. And if you want to use a small letter, he'll be using this font. These are different kind of components which he'll be using. These are the navigation tool which will be used, dividers system and different type of text boxes if you want to put any special text text area and up let buttons as well. He just made a nice blueprint for himself before making any mobile application or any kind of website. Once you're done with this, like once you make all of this, it becomes quite easy for you to work that we don't have to ban it size from other places that it remains the same. See here, he have listed so perfectly what all switch he'll be using. Here you can see he have selected two switches from here, the radio radio group atoms, what all things are needed. He have actually put those in right order that he don't get confused. Here you can see charts and here he'll be putting column chart. But here it's written soon that he'll be working on this later. This is how we should actually work. Before starting any project, we should basically set up a blueprint for ourselves that we can refer that particular thing and work accordingly. Here you can see this is logo from here, this is another page. This is not the first page, Okay. Here is another page which he took and tried doing the demo work from here. Suppose if I'm taking this page here, I can move it down from here under this. Also, I do have different titles. Suppose I want to move or I want to copy paste anything in this particular page. What I can do is I can just click Paste Options here and Copy option is also here. It depends on what I want to do here. Let me come here to this other web design here. If I come, if I go to this assets option from here, as you can see, he have used all these assets here. If I want to use this particular asset, what I'll be doing is I can just click here or select this C. Instead of that, let me just take this one from here. Okay, because this is going to look, I'll take it here. Go back to my layers pages class. Here, I will just press control V here, you can see the writing. I do have it here. I can increase the size if I want to. For that I need to zoom in and increase the size according to my need. With my move tool, I can just move up here. I can also change the color if I want. Let me take a black color. Let me put this on top. Okay, here. Now I have bit by text one. I can put it somewhere here in between. Yeah, this looks quite good. I can actually do it with else calls as well. Okay, here they name this frame as placeholder. I can basically delete this one. I can put anything as I want. Okay, suppose this full script. From here, I can click control, go back and click control here. You can see I do have the full page here or the full image. I can actually check the size from here. Okay, I can decrease the size the way I want. This is the page size. If I want to decrease the radius, I can decrease the radius as well. This is how we can work with page and we can actually create our own design. And also we can put up anything as we like. I hope you guys have understood the usage of pages and how we can copy paste, how we can take different pages and put content inside our page. Basically, inside pages we have frames, and under frames we have all other components. We'll be learning about components, Masking vectors. I've already told you how you can use the shapes. We'll be learning about all that. It's all about a sequence and how we actually work on this. See all in the next class where we'll be learning about how we can prototype in this application. Figma. See you all in the next class. Take care. Goodbye. 6. How you can do prototyping in figma: Hello everyone and welcome you all to another tutorial in Figma. Now we're in our chapter number five and we'll be learning how you can get started with prototyping in this application. Prototyping is like making an app where you'll just scroll and get to the next page. I'll be doing that and we'll be showing how we can preview your work, how we can present your work, and how you can also edit your work while doing the prototyping. Let's not waste time, let's get started with this class here. As you guys can see, I do have three Frap here. This is just a page I'll be showing you guys how you can prototype between these pages. First up, what I'm going to do is I'll be selecting this particular frame. After selecting here you can see the design option, just beside the design option, I do have the prototype option. Here you can see I do have the prototype option. If I click down here, you can see flow chart, the interactions and all. But what I'm going to do, I will be clicking on this plus side and I'll be joining with this one. I do have these plus sides here, I can join on these four sides. Okay, prototype is basically quite vast, but I'll be just starting on with prototype just to show you guys how this actually works. Like how you can start making your own application or any web page. They're asking me how I want to navigate to. I want to want to go forward. I'll click on this workout app. Fine, instead is also fine. These are a few of the animations which are there. I'll be taking brief class on that. Here it is on click. I'll just link this same here as I do this side with this side, I will join this page here. Okay, I have this one as well. Now as you guys have seen, I do have this. Now I want to see how it will go from one page to another. Okay, for that you can see I do have a icon here. Okay, here there is two icons basically. The first one is present and the other one is Preview. There is a vast difference between present and preview. If I click on present, I will have a different box here, like a different window if I click on present, let's see how it will look. After that, I'll be showing you guys what a preview looks like and how it is different. Here you can see I do have this one. If I click on this, I can just change. Okay. As you can see a manually also, I can click here and see how my page looks like. Okay, here, suppose I do have these icons here. If I'm just tapping, I'm just going to the other page. I hope you guys have understood how you can do that manually. Also, we can go back, but suppose I want to change this particular writing from here. In that case, every time I should not go back or just cancel this particular pages. What I can just do, I can just come here. Suppose I want to select this, or I want to select this box. And I want to decrease the size of this box. Okay? Shrink the size. Something like that. So I want to just delete this box. Okay, Just to show you guys an example, I'll just click delete. Now you can see my page starts from here. Okay? In that case, what I'm going to do is if I come here in this page here, you can see my first page looks quite like this. I didn't have to delete this first page or cancel this first page to view the changes. In that same case, if I want to change any color or anything as such, I can just come to the design option to this field option. From here, I can take any color as I like here. You can see I do have this particular color here. I can just select this as I do have this color. I can also take this color in all these frames as well. Okay, I will take a color same as this here. You can see I do have the color and I can change the pattern from here. Here, If I want to take a different color for the film, I can do that as well from here. Okay, All the boxes also, I can put different type of color from here. Okay, so hope you guys have understood how you can do the prototype and how you can see this page, okay, here, as you can see, once I have made some changes here also it got changed. This is how it actually works. This is how you can get a present or see our work in a new tab. But if I want to see a preview, let's see what it does. If I click on Preview, I'll have a window just beside my work here. It won't create a different window, but instead of that, it will just give me a preview. On any corridor where I will put here, you can see my preview box which is just loading now you guys will be able to see that it is giving me a live update of my preview. From here, I can open this one in presentation view, which I don't have to do because I have already opened this one here. I can also feed this to the frame aspect ratio. I can here from here manually. If I just tap on this, it will go from first page to the second. Second to the third. 7. Easing options and prototype animation: Hello everyone and welcome you all to another tutorial in Figma. This is the chapter number six and we'll be learning about the easy options and prototype animation Like in last class, I've shown you guys how you can start with prototyping and connect frames with frames. Here in this class, we'll be learning about how you can actually animate those frames when they appear in the screen. And a particular button can lead you to another page. I'll be showing you guys how you can do that. Under that, I'll show you guys many more options. What can be used in this particular application to make a mobile app or a web app? Let's not wet type, and let's get started with this particular class. Here again, I'm back in my home page of Figma and I'll be showing you guys from here. Okay, here as you guys can see, I do have these frames now, I'll do prototyping from here, but it will be quite different as I've told you that if I click how I can lead on that particular page, which can be anywhere. Okay, Suppose I want to directly go in this page. What's I click on this particular button, let me just zoo in in this button. Selected this one. I have the spelling mistake. I'll just add here. As I do have this particular button here, what I'll be doing, I will first zoom out if I click on this one. If I go to my prototyping, as you can see I do have the plus side here. What I'll do is once I click on this particular button here, I will drop on this page. That's what I want. Okay, here you can see I do have many options. Like if I want to navigate two, if I want to go back and what a animation in which page I want to go. In this page I want to let here you can see the last three pages. Also, I do have it here. I'll click here. I'll also choose this option from here. Okay, here you guys can actually see the preview of what it will actually look as you can see from here. I can also change is is out. Let me show you guys by just getting a preview. Okay, I'll just click here. Take the preview. As you can see, it's loading. But it will give me this thing here right now. If I click on this breathing here, you can just easing out. If I go back again and change this particular thing to instant. Now if I go back again and if I click on this one, there is a instant change here. These are the animation or the way we can actually animate this is on click. Sometimes we just want to D, okay? In that case, I can click on this one, especially this is used in case of pop ups. If I want to drag anything or want to go to the next page, then I can do like that. Okay, here I do have these options. Let's see it one by one, okay? If I click on Dissolve here, you can see the preview how it will dissolve slowly. Okay, let me go back here in this page. If I click on the breathing here, you can see this is just dissolving. Okay, I will be explaining you guys the smart animate option later, because this is a little bit tricky. We'll just keep it for the next phase of the class. Here is another option called moving. This is how it will come if I click on my page here, let me go back. Click here. So it will come like this, as you can see from here. Also, I can actually change the timing. Okay, Like with it, how many seconds or milliseconds it will come? I'll give 450 milliseconds. I have said this one. Now let's go back again. Click here. As you can see, it appeared a little slowly. It all depends on your application or what kind of mobile app you're making, what it is based on, and everything like that. Here, I can see all these options. If I choose the bounds on, if I go back now. Okay, if I click here, you can see it gives the bouts here on my screen, I can choose from all this. If I want it to come slow, it will come like this. It will come slow from here. And suddenly it will just pop up in my screen. I'm just showing you guys every option which we do have here. This is another way I want it to appear quick. If I click this one, it will come like that. And if I want it to come gently here like this, it will appear okay. At what side do I want it to appear? Suppose I gave it from the right here. Now you guys will be able to see that this page appears from the right, not from the left, it appeared from the right. And in that case, if I gave it on top, so it will appear from the top. Or it will appear from down and it will go to top. Okay, let me click yes. And this one is the total opposite of that one. This is how can work here on this all applications. Okay, I hope you guys have understood. And if you guys want to change anything, suppose this particular thing I can see from here I can div as I want. It is out if I choose this one, if I want to see the preview, this is how it will come. You guys can see the preview here in this box as well. Okay. If I want to navigate it back, I can click here. Okay. And now let's try to prototype this whole four pages which I have here. Okay, so with my hand tool, I'll just move this box a little bit. Okay, go back to my first page and as I've already told you guys that you don't have to close down your preview or your present while making any changes. If I come here on the prototype and choose my selection tool again, here you can see this is the whole page button. Okay, I will show you guys if I'll just connect this one to this page again. And I'll be giving all the connections here here. As I do have the relaxation option, I'll choose this one and I can choose the text as well if I want, but I'll just select the box as my text is inside the box. I'll take this one. I'll bring it here. From here, I can animate as I want, how I want it to appear. Okay, In this page I want it to dissolve. I will set the timing a 400. It will take 400 bill to dissolve the breathing. I have already put it here for yoga, as I do have this option here, yoga. Click on this and it will take me to the yoga page. How I can actually delete this one is first, let me select box here in this box. Now I can select this page here. Okay. Here you can see I do have all this here in all these boxes here. You can see I do have the Home button as well. I'll make sure that once I click on this particular Home button or home tab, let me just zoo into this. Home tab here. Move this with this here. As you can see, I want this to us. Go to this page or connect with this page. As you can see, the plus option here, I'll just connect here in this page as you can see from here. Also, I can change, I'll just keep this out and I will put it as move out from here. Also, I will take this button, I'll take this one here. So far I'm not able to select this. As I have selected this one, I will bring this to here. Only from here I can choose how I want to animate, as I have directed all of this to my home page. Let me get a preview of that. Okay, this is how it will ease out. Y here, you can see by navigations of all I want. Let's see review or I'll just cut the preview. I'll just present it in a different panel here. You guys can see it's loading now here as you can see, I do have this. If I click on this relaxation, you can see I went to the relaxation page. If I come down, if I click on this one here, you can see I'm back to my home page again. If I click on this breathing option, I just land it up here in the breathing page. Okay, From here again, if I come back and click on this home button, you guys can see, again, back to the home page. If I click on this yoga button, I'm back on this page as well here. If I want to go back again to my home page, I'll click here. I can come back again to this particular page. There are so many other options for that. We need to create more frames to show you guys an example how this prototyping actually works. I have show, I hope you guys have understood to give you guys a basic knowledge of prototyping and about this animation I have showed. Again, let's go to this main file here. If I want to change anything from here, I can change it. Just go to the design option. Now you're not able to see the links between all these four pages here. I'll always suggest that name your page properly then you don't get confused. Because when you're making a small app or a larger kind of an app, you always need to make sure that you don't get confused between your characters or between your frames. That it will create a mess and you guys won't be able to make out where you're supposed to put. What in that case as maybe in the third chapter there have showed you guy which I have taken from the community in Figma. I've taken a project and showed you guys how he actually ordered his work. He have chose particular color which he'll be using, the tapes, the icons, all the designs have those in a column. In each frame, he have just said what all fonts he's going to use, Sizes, everything. We should set it all before creating any application. Now if I want to delete this one, like the links for that, again, I have to come here in the prototype. On this prototype here, you guys can see I do have all these links here. Okay, here you guys can see I do have all these links. If I want to delete any link from here, I can just simply click here and I can click on this minus button here if I don't want to do that. In that case I can just select that particular line where I have connected the frames. I can just click on that line and click on Delete. Okay, that's how I can delete. I'll just undo this one again. Here you can see this is the way we can be a simple mobile application by the help of prototyping. Hope this class was clear and now you guys can make your own mobile application. I'll just tell you guys to start with something simple. Just try to create a simple application. Try that one after that. Once you are very used to this application, go for something complex that you get used to this application, that there won't be any problem when you make the final product. Hope to see you all in the next tutorial where we'll be learning about delays and smart animation. What I mean by smart animation is suppose I do have this particular icon, or any kind of image inside my page here in that cage. If I click on this, it will appear in animated way. I'll also be showing you guys in the next class how we can actually do that in our particular application. Take care everyone. Goodbye. 8. Smart animation: Hello everyone and welcome you all to another tutorial figma here. This is the chapter number seven and we're going to learn about smart animation. Like how you can basically move around any particular tool or any particular object inside your frame and to animate that it drops off properly. And in a nice way, we'll be learning all that in this particular class. Let's not waste time, and let's get started with this particular lesson here. Again, back in the home page of Figma. Now, in last class, I have already told you guys about how we can actually go from one page to another. Now if you guys have remembered, I've shown you guys in this class. As you can see, I also do have the prototyping till now in last class, if I click here, I have exempted this option. This class is basically about this smart animation. I'll be also showing you guys about delaying what this basically is. Suppose I do have this image or this frame inside my main page here. Okay, so what I'll do is I wanted to just come in with an animation for that. We'll see how we can do that. Okay, for starting, what we'll do is I want to duplicate another layer of this particular frame here. Okay, for duplicating. I have already told you that we just need to click on Alt. As I've clicked at here, you can see I do have two mouse. Okay, let me select the whole frame. Click on the Alt option here, you can see I one. Okay, I do have the duplicate of this layer. Let me just move this side. Let me also move this particular frame on this side as I don't get confused. Okay, this bring this one here. As you can see, I do have this two separated. This one is named as you guys can also see, both of them is relaxation on this frame. Copy of my first frame here. Now what I'm going to do is I need to select the object which I want to animate. Okay, now I'll just come here. I want to animate this image or this particular frame. In that case, what I'm going to do is before that, what I'll do is I'll select this one. I'll connect this with this relaxation tab here. Okay, Now you can see I do have this one. I'll come here and I will choose the option called the Smart Animate option. And here I will use Is is out option. As you can see, I have selected 400 here. I'll just do 450. And I'll click on Okay. From here. As you can see I do have this one. Now what I'm going to do is as I want this one to appear slowly, I'll just drag this particular layer outside of this. Okay? Now this one is not inside this frame. What happens here if I just drag all this down here? You can see I do have to relax. So I'm going to name it as relaxation one and this one as the relaxation two, okay? So I'll save this one and as you can see now I have relaxation two page and also the relaxation one, okay? One should be on top and two should be here. And I will keep this frame on top of this one, okay? I'll just show you guys an example if I just drag this particular frame from here, okay, Suppose I want to drag this. Now, I'll just come to design. Take this particular frame as I have, moving in this one, okay? It will just go inside this one, okay? As you can see now this one is inside that. But once I just start moving this out, you can see it is coming outside the relaxation one tab, but I want it inside. As I have already shown you guys here, I do have the prototype things. See I have also connected this one. Now let's try to see a preview of how that actually will look. If I click on Present, it will give me a better view from here. I'll click on the relaxation from here. If I click here again, it appears like that. Yeah, you guys have understood how we can basically do this. But what I want is that I don't have to click here as I have clicked as you guys can see. Let me show you guys again. Once I click here in this, this page appeared again. When I clicked here, then only this particular image appeared. But what I want that whenever I open this particular page or the relaxation tab, I want it to appear slowly. In that case, what I'm going to do is I'm going to put on some delay and I'll do setting modification here. Okay, let me go back to the original file here. Another way of doing this is if I select this particular frame, and suppose I want to bring this here, okay? I will bring this here. But in that case, what I'm going to do is I will just change the opacity, okay? So let me just change the opacity of this one, Okay? Let me go here, Fix this particular frame here, zero, okay? I don't see this at all. In that case, I'll just do ten. If I do ten as well, I'm not able to see much. Okay? Maybe I will be able to see something like 25 is here. You can see, I do have a blurry place here. Now if I try to get the preview of this one now, let's go back here. If I click on this here, you can see this appears. But now as you can see, again, I need to tap on this just to get a view. Okay, here I have already changed the opacity. I want to do more. Let me do 50% Okay, now let's see the preview From here, I'll click this, this is how it will appear. Or if I just want to change the opacity and bring it on this place, I can do that as well. Come here, select the whole frame. After selecting, just put this whole frame here and see the preview now. Okay, let me go back. Click on Relaxation, then click here, and then you'll get page. But as I've told you, I don't want to double click here. I want it to appear by its self. Okay, for that, I will come here. As you can see, I have selected this button here. Go to the prototype option. I'll just select this one here you can see I do have the dissolve option, but instead of dissolve, I'll be choosing the instant option after that. As you can see, it will lead me to the relaxation one page and this is the relaxation two page. I want it to appear in a here, as I've already selected the after delay option here. If I go to the prototype, I will connect this here and click Yes. Now I do have this option here as well. Okay, I can just delete one from here. I do have this option here. As you can see, I do have a lighting here now. I will just go here. Go to the main page and click on this. Here you can see it will come this like a slide. I hope you guys have understood this tutorial as well. Okay, how you can smart animate. I've showed you guys the option, how you can actually smart animate your thing. How you can duplicate your frame. And all of this here in this tutorial. In next class we'll learn about how we can share and also how you can come in. You can share it with your client or with your team members and also work at the same time in a live interface. Hope to see you all in the next tutorial. Take care of every want. Goodbye. 9. Usefulness of sharing and adding comment: Hello everyone and welcome you all to another tutorial in Figma. So here now we are in our chapter number eight. And our chapter name is usefulness of sharing and adding comment. So here in this class, we'll be learning how we can basically share. I know you guys already know the basic of how to share, but here this class will be in depth about sharing and how this is quite helpful to add a comment for other team members while you're working on a life project. Like you guys can work together at the same time, you guys can see what your other team member is doing. You guys can add a comment. Invite them. I'll be showing you all here in this particular class in depth about sharing and adding comment. So let's not waste time and let's get started with this particular class. So again, we're in the home page of Figma, as you can see. And now here as I've already told you what we're going to learn. I'll come again in this particular project here. Okay, and suppose now I want to share it with my client or with my teammates. Okay, in that case, I have gave you guys the basic of what can be done. So here I'll just click on Share. Then suppose I want to put up e mail address here. I'll just put up an e mail address. I'll click on this one. Here you can see as I have selected an e mail address, What they can do with that, can they view this one or they can also edit it from here? Okay, Who all will have access to this particular thing here? Okay. Here I can tell only people invited to this file, which I need to do it from here. Otherwise I can just click here. Anyone with the link. Basically, if this file is white secretive, then in that case I can only select this one, like only people invited to this file. But if this file, I want to select this particular link and I want to copy this one and send it to their word, Sap or Messenger. I can do it from here, Okay. And whether they can edit or they can only view, suppose I just want to send my client the link where he can only view. Okay, in that case I can click on this option for my teammates whom I'm going to invite. I will, they can edit as well. So I can have both of these things here. I can also add a short message for them, those who all I'm inviting. So I'll write that you need to help me finish this project at the end of this. So I just gave them a message. With whom all I'm sharing. This, I can just give them a message and I can send an invitation to them. Okay, here if I do have three or four team members here, in that case I can choose who can only view, who is the owner and who can edit. Okay, in that case I can select from here, I can just copy the link. As you can see, this is copied in my clipboard as I have this page here, and I have already selected an e mail. So I'll just send them an invitation. Okay, from here I can invite them. You can see I have just invited them here. If I want to publish my particular work which I have done, I can click here on Publish and I can just name this one, give a description. If I want to use different kind of tags, I can use different kind of tags. If I want to make it a prototype, I can make it a prototype. Or if I want to make it a file, I can make it a file as well. What preview they'll get. Okay, if I choose prototype, I can fill the screen, the actual size or 100% I can also upload a thumbnail for my prototype class, and here are some advanced options. Who is the creator, the license and the e mail address as well? Okay, I won't be a, so I'll just cancel this. Come here and let me show you guys how you can actually work. So many of you can work at the same tab. You can edit or live designed together. Okay, so I'll just go back here. I will just go to that email. I'll go to. E mail from here, I will just take another e mail here. You can see I do have invitation. Once I click on this one, I will be redirected. Okay? As you can see, this particular file, it's working on Figma. I'll just close this down as I'm already here. As you see, I do have this one as well. Okay, Here to show you guys in a better way. Here you can see in this file, if I come, minimize this, So here you can see, once I am moving in this screen, the mouse here, you can see what the editor is doing. And suppose I want to change the color of all of this here. What I can do is I'll come here, I'll come and edit. And I will just pick up a color. And now I want to paste that color here, okay. Or I want to change the whole page color to black. As you can see, once I did this particular thing here on this page, on my other page also, it changed as I have given him also the permission to edit. He can do it at the same time. This is quite interesting. With this, I can also change all the settings. Suppose I want it in 50. I'll click on Enter here, you can see both the page looks the same. Okay? As I am able to do anything from here. Okay, From this design, I select a particular box here. Suppose I am selecting this particular box. Now I want to change the stroke. Okay, I want to select the stroke and I will change the stroke of this box here, you can see there is the change in my box. And I can again, come here and change the stroke color to something like this. Okay, something in this color. Keep this one here. And click on okay. Here, you can see both of this changed here. If I just take a full screen zoom in, move this one with y, had to here. You guys can see I am working here as well. And I can also see what my partner is working. Okay, suppose I want to add any comment. Okay, if I am adding a comment here, suppose part here. Then what I'm going to do, I'll just take this frame and put it just beside this one. With my hand tool, I can move and see what it is. Okay. As I am here in the same laptop, both of these, then it is quite hard to do that. But I hope you guys are understanding what I'm trying to make you guys understand, like how you guys can collaborate, how you guys can work as well. Suppose I want to add a comment and I want to say like change the shape of the box to rectangle without any change in the corner radius. From here I can actually mention like, I can mention them if I just right them or I can mention them accordingly. Okay, If I want to mention, I can mention them as I want to mention him, I'll just give up an emoji as well. Now, if I submit this one here, they will be notified that I have sent up a message. Okay, let's see here. As you can see here, I do already have my message. What message is this here? The message or the comment box Also, I'll be notified that I have a message for myself. Okay. Here. Once I open this one and I can see the message that he's telling me to change the shape of the box and without any change in the corner radius, I'll do that from here. And we can collaborate like this. If I have already resolved that particular thing or that particular problem which was being told to me, then I can click on Resolve. But here I don't want to change anything. Just to show you guys the use of sharing option and also the comment option, like how important this is when we're working in a group. Suppose here I do have so many pages for a particular frame or a particular page, I can also divide the work for them. Suppose if I just click on this particular frame here in this box. Now I want to share this and I want to tell him that you work on this particular file only for that I can just click on. As you can see, now this is linked to selection, and I'll just tick mark on this one. From here, I can actually invite them again and they can start working on that. This is another feature which is being offered by Figma for better user friendly option. Now I hope you guys have understood how you can actually share your file and add a comment, and how it's quite helpful to us. Hope to see you all in the next tutorial where we'll be learning how you can use columns and grades in your Figma file. Hope to see you all in the next tutorial. Next tutorial is helpful. I hope you guys will be able to make application of your own at the end of this tutorial. Take care of everyone and see you in next class. 10. Columns and grids: Hello everyone and welcome you all to another tutorial in Figma here. This is the chapter number nine and we're going to learn about the columns and grids. In this class, we'll be learning how you can use the columns and grid. How you can change the color, the intensity, the column gutter. I'll also tell you guys what that is. Also how you can use this and get a size or get an idea of how to design your web page. Let's not waste time, Let's get started with this tutorial. Now, I'm here on my work space, or the place where I'm going to basically now. First I'll be creating a frame. Here you guys can see for creating a frame, I'll be creating layers or two pages basically, one will be for desktop. For that, I do have a standard desktop size, but you guys can also research and see which is the most used desktop size. Desktop you're basically using that file for. I'll just take particular size which is 1,440 in 2024. I'll take that. And here you can see I do have this frame, which I just selected it from the Precinct. Okay. I do have the text of one here. Now, I'll be creating, in the same way, another frame but in a different page. Okay. I'll just add another page. I'll name this, ****, this top page. I'll name this as mobile page. I do have this one here. In this also, I'll try to create a frame. And I'll take it from my precept. Which side should I take? I will take it for phone 14 pro max. I'll click on this one here. You guys can see I do have my frame here. Okay. What I want to do here is I want to put some columns. Okay, Here just underneath the auto layout, you can see a option called Layout Grid. What I'll be doing is I'll be clicking on this plus side here. As you can see here, you can see I do have a grid, but for me I don't want to grid, I want to get some columns here. I do have the layer grid settings just on the left hand side, and I'll click here. Instead of grid, I will choose columns from here. After I choose column here, you can see the count is 12. But for me the count is five. But I want 12 12 because this is the standard size or the column size, column count for most of the graphic designs. I just want to go with the defaulted one. If I want to change some colors, I can change those colors as well from here. Okay, I can actually increase or decrease all this from here if I want to change the width and the height. And here you can see the gutter. Gutter, basically the spacing between both the columns. Okay, here, this mal part, which is in white, this is called the gutter here. If I increase the size, suppose if I put 40 here, you can see it changed from here. The same way if I just decrease it to ten, you can see it changed. It decreased from here. I can also choose how I want my column to be. Do I want it in the left, right center, or I want it stretched out throughout my page. This is the best format. In the same way I'll come here in the mobile page, I will come to my layer grade. As I will click on this plus option, select the columns from here. Here also, I'll take 12. This ten. This one I will just keep it in stretch. Okay. From here I can change the intensity of the color as well, if I take. 50 here, you can see how deep my color becomes. I just want the color to be faded. And it will look good if I do also put any kind of animation or so. Now what I'm going to do is I'll create more frames. Suppose for this, for one, I will create one frame here. I do have one frame here. Okay. I will also take another one from here. Okay? I will just fill this with a deep color. Let me take something dark. Okay, From here. This one will be the column here. I will create another frame. From here, I will take the main body. From here, I will just move this much. Okay. I do have my frame here as well. I'll take another small frames here. Okay, select this. I'll select this one. I will duplicate this layer here. I'll just take this here as well. Also here. Now I do have these four columns. I can also put some colors if I want to. Suppose here I want to put up a different color. Suppose I want it dark black. I also want to put this one in a different color here. In that case, maybe I'll Something in green. I will here as well. Some different color. I'll just choose my color accordingly. Red here, in blue. Here, something in yeah, this is fine. This will be layout the same way. I'll come to the next page. From here, I will be taking a frame. From here, I'll choose swan. After that, I'll be creating a main page here. This will be the body. Suppose I want to create a brochure or a flyer. I can start like this from here. Okay. Now I'll be creating four more boxes from here back. Create a box from here till there with my old. I will just copy this. What old copy here? I do have four boxes here. All the four boxes. If I try to select at once, suppose I want to select only this particular frames. From here, I can click on this, this, and this. Now what I'm going to do is change their color accordingly the way I want. Okay, suppose I will give them this color, but I'll change the opacity of the color here. You guys can see, I can also align it the way I want. Now, the four frames are allied. I'll put a color here as well, this layer here. I'll put another color for this particular layer here. You can see I have created this using the green. You will have a knowledge about the idea if it's in central or not. I have created this layer from here here for this mobile page. Also, I do have a particular size which I refer or prefer. I can do the work from here as well, from here. Again, let me show you guys, if I come here, select this frame here. I do have 12 columns. Okay, now what I want to do is I want to add margins. Okay? On the side. I also want to add margins. And why do we add margins is basically when we do create a web page or an app page for mobile, sometimes we don't want the main things or the main topic to be on the sides. Okay, so basically to put those in middle, we do have a good idea while using this column that where to put that particular thing. Basically for that we do use all of this and let's increase the margin from here. Okay, let me take ten. And if I click okay, there is no much difference to show you guys. I'll take around 19 here. You can see these are the margins here on the sides, the white ******. This is the margin and this is the main work space for the phone. Suppose I'll be just working here on this particular part and I will edit, or I'll do the designing here in this particular part. After that, if I think that, okay, I just need to cut these sides off, I can cut those as well. This is also a precautionary measure which is quite helpful and can be quite handy while working at this. Let me just go back again, back to our 12. Take this here again. I hope you guys have understood about this. I've told you guys about the stretch and you already know about the coloring. Okay. If I go to this text page, now I do have here 12 columns, the same way. I'll just select all these from here. This one. Now what I can do is just click on this, change this one to ten. Click on Enter. If you ask me what is the perfect size for a gutter? There is no size basically which you want to put or any number, but for this, you can put something like 50 to 20. This is quite standard, which can be used here. If I show you guys the margin, okay, If I put 60 here, you can see on the sides, I do have the margins as well, okay? So I can exclude my work on this side and work on my own on this thing. Let me just go back and do this as I do have 12 here. If I want to bring it down to six here, I do have six. Okay. I can work here as well. I just need to make sure that I am aligning all my things properly. Okay. If I just put this on this side here, this one should be somewhere here. This one white here on the site. I can put this. Yeah. This basically looks good. This is one of the way how we can actually align web page that good. This is how we can. Let me create another page where I'll be showing you guys the I'll just it as grid. I'll create a frame or I'll just take preset from here. Let me take a Desktop or yeah, Desktop preset. If I click on this layout grade option here, here you can see I do have the layout grade. From here I can actually change the standard one is eight to ten, basically. In the Android and Apple phone developers, application developers, they do usually this size, okay? But if you're working for a company, you're working towards making your own application. It is basically based on your need, okay? The way you want, you can actually consult with so many UI UX designer. It's not that you have to be a coder to become a UX designer. You can start from Basic, learn It, and then you can apply your work to an advanced level. Or you can work in a higher level where you'll deliver your work to your client. Once you are doing some good work in designing, you can make some good bucks from here. As you can see, I can change the color as well. Here, the same goes with the rose, the way I've showed you. Columns. The rows also, it will come like this. The same way of the columns. I won't explain to you guys in detail about this, but here you can just work like this and put different shapes accordingly. Okay? You see as you can see, if I'm going on the sides, I can see a red light which is showing that if I'm going outside. Okay, I should keep that also in mind. Here you can see this. Also, I can create different sizes. If I just zoom out, I can show you guys my work here. Hope you guys have understood this class on column green and also rose as it's quite similar with the usage of column. Hope you guys know the usefulness of columns and green that how it helps you to make design. Hope to see you all. In the next tutorial we'll be learning about how you can basically create or use colors in your web page or in your design. Like what are the different ways to use your color? The more color or the balance we get better. Our web page will look there. We'll learn about the inspiration, the eye dropper, and how you can basically create a color palette as well. After that, we'll also learn about how you can make gradients. Lastly, I'll tell you guys how you can create and use color styles. In particular application that your web page will look so much attractive and so good hope to see you all in the next class. Take care of everyone. Goodbye. 11. Colour inspiration, colour palette and eyedropper tool: Hello everyone and welcome me all to another tutorial in Figma. In this class, we are going to learn from where all you can get color inspiration. Like I'll show you guys about the websites from where you can get matching colors. What to be used in your web page or app development. Okay, After that, I'll be showing you guys how you can make your own color palette. And also about the Eyedropper tool. Suppose you does have image or any picture and from there you want to take out the colors which are being used it in your web page or your UI designing. I'll be showing you guys how you can take those particular colors from there, and also about a few of the websites. Let's not waste time and let's get started with this class Here you guys can see I'm again in my home page. In last class, I have shown you guys about how you can use the grid and the column here, I'll be using that same thing, just those colors. I'll be telling you guys if you want to match color in your work or in your project from where you'll get that inspiration. I'll also tell you guys how you can actually use, I drop it to like how we can extract color from a particular screen or an object and drop it wherever you want. We'll be learning about all this in this class. I'll also show you guys how we can make templates as I have already told you. Let's get started here. I do have the last class slide. I'll just move out a little bit back. Now what I'm going to do is I'll be showing you guys a few of the websites from where you can get your color. This is the first one, which is the Autobl. Other one is Color.com okay? Here you can see many color combinations from here. Whichever color you like, you can just take those. And you can also see from here, we know how to put up a code. If I come from here, I can just type that particular code. Suppose I like this color from here. Okay, This one. Okay, For that I have just clicked on this and it got copied. I'll just come in my Fima page, select. I will just paste Enter. You guys can see I do have that color on this page. Likewise, if I choose this one here, I want to change the color. I can do it the same way, but for now I don't want to use the background color. It looks quite ugly. I'll just go back, here I am again back with my white background here. This is a few of the websites from where I can choose this color colors, and also the whole thing from here. Suppose I want to paste this whole thing. I can take this ones as well to get a good idea. We can use that. Okay, here you can see some of the popular colors which are being used. Here we can select colors for our project. Here you can see the popular color of the month of the year, and also the popular ones of all time. Okay, here I do have some random color collection. Okay? There is no palettes in collection as I have did add any, but I can do add it from here. Okay, If I want to just a color here, I can download this particular image. And here you can see it got downloaded. Okay. Now I can take this particular color from here, and I can just use it in my work. Okay. The next website, which is the Color.com here, this is a more advanced color inspiration to. Okay, from here we can see the color wheel. Here I do have all these colors. I can readjust it according to my need. If I like something on this, they're showing me the gradients of this, in which one will go nice with which color. Here I can get those particular things out here, you can see. And I can also select which all colors do I want. If I want to explore the primary colors, I can explore the primary colors as well. Suppose I want to take or add this to my library. I can just click here. This one is added to my library. If I want to download a Jpeg, I can also download the Jpeg from here. Just to view those colors. These are a few of the things. Why does this color goes on? Well, here you can see an image up here, okay, there they showed the color combination of how it will look in your work. Same goes here, as you can see the image and how it matches. After that, if I go to the Trends option here also, you guys will be able to see what all color are trending right now. For graphic designing, these colors are quite helpful for fashion. These colors are helpful illustration for UI UX designing. What colors do they basically use for architectural things, for game designing, wilderness flavor, we can choose it from here. It's not that if these colors are only used for UI designing, doesn't mean that I have to choose from this color as well. Suppose I like something from these colors. I can just download all these colors as well. Okay. If I am saving anything into my library, I can view it from here. This one is quite a nice color theme in my library. I do have these both color themes. Okay, Now if I come back again here, if I try to move this one out, you guys can see I will have the color, let me see it, in a moto chromatic place. Here you can see the color palette. If I save this color, this color is successfully added to my library here. You can see, okay, if I want to see that, try it, how it will look. Complementary, split. Complementary. The double split. I don't like this Options edge, but you guys can use it as well. These are different shades of color. Let's see how we can use this color here. Suppose I come up here, I want to place at image from here. As you can already see, I also do have a color wheel here. Let me just put this color wheel on top here, Bring it inside. So here I do have the color wheel. And suppose I do have my particular work here. Okay, I'll choose this one, keep it in one corner. I will keep this color wheel here and my different themes. Just right beside that, I'll come to downloads, and I will select this three. And I will open here. You can see I have one here on there and another one here. Okay. And I'll decrease the size one by one here. I do have a set of colors which I can use. I'll just zoom out a little bit as this is here. I do have these colors as well. I do have this as well. Suppose I want to change the color of my boxes here, okay? And always make sure that you have your colors on one side, that you don't get mixed up while working on your final project. Okay, I have all this here, okay? I want to animate those things from here. What I'll be doing is if I select this one, I'll come to this color option right down here. I will just click here. This is the Eye Dropper tool. Okay, Suppose I want to change the color from here, and I have selected the Eyedropper tool. Here you can see a particular color. I have this particular box. Once I choose any color from here, that particular box color will be changed. Let me take this color and let me select this box here. Now I want to select this box color as well. For that I will double click or just click here with my color or the eyedropper tool. I will select this particular color for the boxes. I'll be choosing a color from here. For that, again, this, before that I'll select this box. I drop her tool select. Something in dark. Again, I drop too. This is how you can actually put up the color you want. This is how we can do some work here on this page. This is an easy way of how you can complete your website and you won't get confused that you'll have a good idea about what colors you're and what all can be used here in your particular project, okay? Before that, only we need to make sure web page is going to look like how my application is going to look like. Accordingly, You guys can put those colors. Suppose you do have a set of colors, but you just want to modify those. In that case here, you can see here, you can choose the opacity from here. Also, I do have this option right above here. From here, you can actually check out those colors the way you want. I'll just go back. I'll also show you guys how we can actually create a color palette. Okay, suppose I do have the color sets here. Okay, What I'll be doing is I'll be taking a few rectangle boxes. First, I'll take this small rectangle box, copy this one, copy this other one, copy this as well. I do have four boxes here with my eye dropper tool. I'll come here, take this particular color here. I want to, I do have this color here in my box now. I want to create different shades of this particular color. Yeah, I think I will just delete this one also, and this as well. Now, I'm going to copy this particular box from here. As you can see, once I have duplicated, I do have this color here as well. From here I see the shade which I want. Likewise, I can create another box. Now, this color is copied here in my film box. Also, I do have the same color. Now I can choose a different shade from here. Again, I will just continue the process of how many shades of this particular color you want. Now I'll just go to some lighter version here. I do have a particular color palette, as you can see. Okay. The same way if I want to create a particular palette for this brown. Okay, it's brown. Yeah, it is, but something light brown and not really dark. It's somewhere in the middle. The same way what I'll do is I'll take my rectangle box. I will create a rectangle box here. Put up any color using this one. Or suppose I'll take something in blue. Okay, let's take green. Okay, I do have this green here. Now, come here and copy the box again. From here, I can choose a different shade of this green. Copy this one, and also change the shade from here. Okay, now I do have a little bit lighter, and again click on Shift at A. Okay, I'll come here and now take another lighter version of this color. Here I have showed you guys how you can create a color palette. If you want to save this particular color, you guys can save this. Suppose I want to save this or copy this one to another page. I will come to this page here, I'll paste this here. From here I can actually decrease the size of this one. But here again, you can see I do have the colors as well. I hope you guys have understood how you guys can actually get color inspiration from which all websites. And how you can create a color palette. And also the usage of Eye drop, two like eye drop different type of color from a secondary object to your final thing or to your final project. As I've already told you guys that the ob, let's come here the color doo.com This is quite advanced level of color wheel, or from where we can choose color. Suppose you do have a particular image with you, okay, In that image you like the color contrast of that particular image. What you can simply do is you can bring those particular file or that particular image in this and upload it from here. What it will do is it will extract the color from that particular image and save as a color palette for you. Okay, if you want to use that particular color, let me select a file from here. Okay, here you can see I do have this Fib logo. Okay, I'll click on this figal. I'll open this. And here you can see I do have this color palette here. I can actually save this color. Okay, here you see. If I want to create a new library and save this, I can do that. But if I want to save it from here, I can save this as well. Okay, this is the colorful one. I'll save this. If I want to take the bright one here, you can see how it looks, the muted. There are different ways of how we can actually select this. If you want to replace the image, you can replace the image as well. Let me go back to this one from this image. Also, if you want to extract gradient, which is our next class, I'll be showing you guys how we can create gradient and different options under that. Okay? From here also you can see the different gradients of this one, okay? Suppose if I come this one and from here select the gradient level from here. Okay? If I want to copy this one, I can copy it from here. As you guys can see, I do have that option as well. If I want to save this gradient, I can save this gradient as well. From here, you guys are able to see the contrast ratio between this color, text color, and the background color it's showing that will this particular color go on with this particular background if you want to use all this and you can try different colors from here as well. This is quite helpful tool which we can actually use to make our work look better and get a better idea about color contrast and about coloring. Okay, so here you guys can see. And it also gave me a pass that, yes, this color combination can be used between a text and a background. This is how we can actually use this. If I want to import color, I have shown you guys already what to do. I want to save this one. I can save this from here. Okay, From where I can view, I will go to my libraries. From my library, I will have the colors from here. Now as I have selected this particular color, this one, I can just download this Jpeg version, come to my Fib application, and from here, place that particular image. Okay? If I click on this, I'll open this particular file. If I want to put this on top here, I can put this from here. As you can see, I do have this color combo. Okay. If I want to change size, I can change those size as well. Okay. As you can see, I do have this. Okay, From here. This is one way how we can add up colors. Suppose I'll take this one here. Control shift, move my color. Okay, here I'll get the colors. Also you guys can this particular themes from here. If I go to the Explore option, again, Create option from here. Also I can take those colors code from here. I can just simply copy and paste those in my feedback application. Hope you guys have understood how you are supposed to use colors in your particular work. I hope to see you all in the next class. Here in this lesson, we have actually learned about three things. First one is from where you can get your color inspiration. I've showed you guys the website. And the next thing we learned about the eye dropper tool, how we can drop your color. Okay, And also we have learned about how to make your own color palette. In next class, we'll learn how you can basically work with your gradient. Like how you can make your own gradient and what are the different ways to make that. Okay, so till that take care and hope to see you all in the next tutorial. 12. Class Project 1: Create your own colour palette: Hello everyone. Now this is the time to create your own color palette. And this is the class project number one where I'll be checking out your color palette. Like to understand how is your sense of coloring, We'll be doing that. Let's get onto the class. I'll be showing you guys what all steps you need to follow. And if you're getting confused, my tutorial is already there. You can refer those tutorials. Let's see what all you need to do. The first thing is that you need to make one rectangle shape using the shape tool. After that, once you've made that particular rectangle shape, you can choose any color of your liking from the color box I've shown you guys. From the fill option, you can get your color box and you can fill it with any color. After that, you'll be duplicating the filled color box and keep on changing the intensity of the color to make a palette. Otherwise, you can also choose different colors which goes on well with each other. Continue that particular process. And minimum, you need to take four colors, okay? Or four rectangle boxes. This is the minimum if you guys can do more, much more happier. If you guys can show that. After that, select all those layers and turn it into group. The last step will be export that particular group in your system and submit it in our project section that I can see your project and try to understand your level of knowledge in coloring. Okay, I'll be showing you guys how you can do that as well. Here I do have my figma. I'll take this rectangle box and I will make a box here. Okay? As you can see from this corner, after creating a box, I do have my color box. This is the step number two. Let me come here. Okay, I'll choose this one, and let me take something dark. Okay, now what I'll do is by clicking on Alt, I will just duplicate this layer again. What I'll do is I'll come here, take something lighter again. With all, I will just duplicate this color box again. Now I will come here. I will continue this same process again and again. Okay, I'll be creating five next here, this one. And choose this color, or I'll take here. Okay. So here I have created my own color panel. Here you guys can see I do have four rectangle boxes and those things are individual. From here what I'll do is I'll just group these things and come down here on this export option, click on this. From here, you guys can see, first I will just come here and I'll select a group. Okay, I can name this group as color palette. Save this, now go to export. Now, when you come to export here, you can see the preview. Okay, I want to take this one in the Jpa format. I'll increase this one. Now I'll export this color palette and save this here in my downloads. Okay, now I have already saved palette. Let me go here and view, where is my color palette? Now you guys can see I do have the color palette here in a J Pac format. That's all you guys need to do here in this class. In this class project, I'm hoping you guys will send your work. I'm really interested to see idea or see your knowledge about coloring and making your own color palettes. I'll be hoping to see work. So take care everyone. 13. Gradients: Hello everyone, and welcome you all to another tutorial in Figma. So now we are on our Chapter number 11, and we'll be learning about the gradients. That, how we can play around with all your colors, how you can make your own gradients. And also, I'll be showing you guys a website from where you can get the Did gradients And from there you can actually copy those color codes and paste it in your application. Let's not waste time here. As you all can see, now I'm in one of the workspace here. I'll be showing you guys how you can start on with making gradients. I'll just go on top. I'll just create a frame. I'll take a phone size 14 proof, Keep this on this side and duplicate this layer. Yeah, Now I do have four of the frames here as you all can see here, as I've created four page now. Now I'll take this rectangle tool from here and I'll create a rectangle box which I'll be using to make gradient. Okay. Before that, I want to show you guys website from where you can get any type of gradient which you can use in your work. Okay, This is the website, the gradient.com From here, basically you get different type of gradients and how you can use that. You can just come here, click on this particular color, you can just copy and paste this particular code in your application. Or if you want to add this to your library, you can add this by just clicking here. Okay, I do have this one, but I'll be showing you guys how you can make your own. I'll again go to my face application. Now as I do have this one and this one is selected, I will come here in the fill option and under Phil, you guys can see a gradient option is there. And once I click on that gradient option here, you can see I do have a linear one, radial one, okay? And angulo, once I put the color, you guys will be able to make out what's the difference. And this one is in a diamond shape, okay? Suppose I mostly use the linear at the radial one. Okay? Let me take this first color from here. Let me take down blue. Okay, From this in, let me try to take anything in pink as you can see here. And how I can adjust the positioning is if I take it from here, just move this one here. You can see I can actually maintain, or I can actually put where the color will be. This is one way how we can create our own gradient here. We can actually put more than two colors from here. Okay, If I click here, now I do have a point here as well. Okay, suppose I want to add one here. Now I'll be choosing maybe a different color. I can choose like this. This one, I'll make it a little deep here. You can see I do have my gradient. You can add this as much as you guys want. Okay, you can add more from here. Suppose now I do have this one. I'll change the color of this. I'll move this one in top. I'll keep this one in middle. Now I can change the color from here. As you can see, there is a, once I come here, maybe I will take something similar from here. If I want to darken it, I can darken it. If I want to just make it light, I can make it light. It all depends on me. Let me just go a little bit on the lighter side. This one I'll take it on this side. Yeah, my gradient is ready now. As you can see here, I do have gradient. If I click on Enter, you guys can see I do have my gradient ready. If I want to copy this one, I will just copy. One, take it to a different page, paste this one here. You can see I do have the gradient size here. Like this, we can create our own gradient. Let me also show you guys about all the other three options here. I'll just go back again to the same page. And I will come here, create another rectangle box from here. Or let me just take another shape. Okay, let me take down circle. Okay, I'll be creating a circle from here. As you can see, I do have my circle here. Yeah, I'll just keep this one in the middle. Now what I'll do is I'll come in this field option, go to my library here, Go for the radial. And now I will select a different color. Okay, let me take red here. I want to put some yellowish fade over here. Okay, from here I have selected this one. Now go to the yellow. And here you can see just outside the red, I do have my yellowish discoloration. I'll just bring it somewhere here in the middle. Yeah, I'll just bring it in here. And I can also add different colors. Like if I just click on here and maybe I want a green, what I'll do is I can select green from here. Okay, I can select green somewhere here. Yes, I can. Now, if I want to expand, I can also expand. Okay. I can take this green color from here. I will make it dark. I will also increase this one as well. Okay, here, I'll keep this here. Yeah, you can make radial as well the way you want here. You can see if I also increase the size from here. This is how you can play around with all the colors from here. Okay, this is one way how you can play around. Likewise, I can also add different color. Also increase the size. Maybe I want to increase the size from here as well. Okay, if I want to make an arc, I can also make a arc like this if I want here. I just made a radial gradient. As you guys can see, I hope you guys are understanding what I'm trying to show you guys here. Now, let me take a polygon here, let me create a polygon on top of this. Let me bring it to the center. After that, what I'm going to do is I'll select this. Now I'll be showing you guys about the angular one, okay? First I'll be choosing color from here. Now this one I'll select maybe this color actually. Where do I want this color to be? As you can see, I have selected this color from here. Maybe I'll add another box on this corner. I'll increase this one. I can choose any color I want. Or suppose I do have a particular color already, which I want to drop here Using this color, I can come here, I can pick this color. My eyedropper tool here, you can see there is a change. Okay? Likewise, I can add a different color here. Okay, let me add this color now. Let me just lighten this one up as well. Maybe the color combination is not that great, but to show you guys that, what is the difference between that from here? I also do have some of the options like X and also RGBs if I create another box here or if I create another shape. Okay, let me take a rectangle box only, I'll be creating from here. Pick out this one. Let me just move this with my hand tool a little bit that you guys can see this properly. Okay? I have this now. I will just drop this one down here. Okay? I will take the angular one here. You can see how we can basically work with that. Okay? From here. Or change the coloring here, you guys can see. I can add a different color here. Suppose I want to take a green here, you can see a greenish coloration. Okay, let me zoom in that particular box here. Here, you can see that if I add a different color here, I can select a different color as I like. Okay, let me take this at this end, green color. This is a way of how we can actually work on this application. Okay, likewise you guys can own gradient. Once you're done with that, you can just click on Enter once you're ready with your gradient. I have also showed you guys how you can basically take this to other layer. If I want to copy, I'll go to this layer. I'll just paste this one here. As you can see, I want it to be the same size as this one. For that, I will click here, Scale. I want to scale one. Now, again with the move tool, I'll select this, increase the size. Like this. Yeah, now I almost do have the same size, but I can also see the width and the height from here, 270-93-2022 79.3 22. Yeah. Now both are the same size. As you can see, I'm joining both of these. These are the two gradients which I created here. Again, go to this particular page. Let me show you guys the last option from here, which is the diamond shape. Okay, here how the diamond shape will look. But angular was only fine. Let me take another shape from here. Let me take a star. Let me create a star here. Keep this in the middle. Now, put a select star, Pick out the field. Let me just take some brown color here. On this point, let me take a yellow color. Okay. Yes, yellow color from here. And the same way, I can also add different color from here if I want. Okay? Right down in the middle, if I want to add some red or it's just taking on the whole color, this is how we can basically adjust the coloring. You can see it's fading out as it will be a diamond shape. Okay. Here, if I just extend the size of this one, the size of the star, if I want to scale it, I can scale it as well the way I want. Let me just scale this down. Yeah, now this one is in the middle. Select this again from here. Selection or the move tool, linear diamond. And click on here, you guys can see how it actually looks. Okay, Here you can see a small point. Using that, I can just extend the line. Or I can also put this one here. Here in this slide, I want to add one color. Okay, Let me take this one, and here you guys can see the coloring of my star. Click on Enter, and here you have your star gradient. Okay, I also want to select this or copy this to my desktop page here, Paste. Yes, I do have this gradient as well. Decrease the size. Yeah, I do have this gradient as well. I hope you guys have understood how you can make your own gradient and different types of gradient. And I have also showed you guys how you can play around with your gradient style. These are the four options you guys can use any, but for me, I do use the linear and the radial one, Mostly from here. I can also the faintness of how much I want, how deep, mild, I want those colors. Okay. I can choose as well from here. Okay. So hope this class was clear. In next class I'll be telling you guys how you can basically make your own color styles or create those and use it in your file. Okay, I'll be showing you guys that, so stay tuned with this class and hope to see you all in the next tutorial. So now we're going to our last lesson of coloring. Take care of everyone and see you all. 14. Colour styles: Hello everyone, and welcome you all to another tutorial in Figma. So now we're on our chapter number 12 and we'll be learning about color styles, like how you can create different color styles, save those that you can use them in your project. Okay, so we'll see how you all can do that and name those particular style that you don't get confused. I'll be showing you how to save your color, how you can apply, and once you can edit those saved color as well, I'll be showing you guys how you can edit those and once you change that particular color from the edit panel, how it will change all the places where you have applied those color. We'll be looking at all those things here in this particular class. Let's not waste type L. Let's get started with this particular class now. Again, in the previous project or the page here, okay, I'll be showing you guys here that how you can create a color and how you can save that particular style, that it will be easy for you guys to use that same coloring in the next project as well. Let's create another frame here. Okay, I'll be coming here in the frame option, I'll take the same as I do have already here. Okay? I will keep it somewhere here with my hand tool. I'll just move this one that you guys can see properly here. Okay. Now what I'll do is come to the shape tool, create a rectangle box here. Another one here. I will copy this one, put it here, maintain the and the spacing. Yeah, now this one is in the center. Now what I'm going to do is I have this type of colors here as you can see. Let me bring this file as well somewhere just beside here. These are my color styles, which I do have, how I can basically save these colors and apply it anywhere I want. I'll be showing you guys that once I change any color from here, if I want to edit after saving that and applying those style, that particular color will be changed in my whole pages where all I have applied. Let me show you guys an example how okay, I do have this particular color here. As you can see in the field box, I already do have this color, okay, Or this gradient. What I'll be doing is I will click on these four dots in the field option. Come here, click on this new variable, and you can see I do have a style here, it's telling me to name this particular color, okay? I'll just save this one as gradient one, okay? And if I want to add any kind of description I can add as well. This is done like if so many of us are working in a same tab, I want them to make them know or let them know that for which thing or which part of the designing, I want to use this color. Suppose I want to use this color for buttons. Tabs, I can just click here, I can click here. And here you can see I do have the gradient color here. Okay. So now I do have this gradient color here, and now this is selected. What I want to do is I want to apply this color in all these boxes as well. Okay, I'll just click here, come here, come to this Feel option, I need to come here. And here you can see this particular color is being saved here. Okay? Now if I click on this here, you can see why this color is pasted over here. Likewise, I can also do this with all this color as well. In library, I just do have one color and I can select this color as the primary color and create a style. Then take this color. I will save this one as the secondary color. I'll here again, name this as the second color. Now if I come to this particular box, choose this or this one. Now I'll put my primary color here. I'll put the secondary color here. Now I do have this. Come here and put the primary color here. I will put the secondary color. I'll also do here, let me just keep this one as the gradient. Click on Enter. Come to this pie here, again, I'm doing the same mistake again and again. Here, I'll put the secondary color, okay? Now, as I have selected this particular colors from here, as you can see, this is filled with this three colors from here. Now, if I want to change this color, suppose I do have this one. I can actually rename it. And here is the color editing option. Okay? From here I can edit the color. Now if I come here and if I change this color there, you can see wherever I have applied that particular color, it's being changed. And now I can click here. As you can see, it's being changed. Same goes with this one here. In the secondary color option, I want to change all the colors. I want to change the shading here, you can see I can change it from here. Here you can see where I have applied those colors can change that come to the primary color. I want to change this color as well. I'll just take it something in pink or want to just add a gradient or choose this color. Yes, I hope you guys have understood how we can actually use these colors and save your color styles, how we can basically work on with all of this. Once I've changed that thing here, you see here on that particular box also, you can see the color have changed because this is also a rectangle box and I actually took that color from here. Now you can see the primary color is this one, Secondary is this one, and gradient is this one. Okay? Likewise, we can add different type of color. Name them, and put description the system. You can use it in other pages as well. Suppose now I am in this page, but still I do have my particular color styles here. As you can see, I do have the color styles here as well. Now, also manually, you guys can come up here create style. Okay, let me create a color style, or I do have this option. I'll directly go to how to create a new color style. I can select the color from here. Suppose I want to save this. I want to name this as Background Background Color. I can save this particular style as well from here. I can also change the background color from here. If I come, I can just select this one. Click on Enter. Suppose I'm here, select this color. By this, I can also change my background color, but I don't want to use any background color for now as it won't look good in this page. I hope you guys have understood this class of how you can save your style and also how you can create your own color. Change it in one place and it will be changed in all hope this class was clear. Now, you guys can apply this in your particular file or in your application web page wherever you want. Hope to see you all in the next class where we'll be learning about images like about masking and how we can actually crop our images. Also how we can basically put up an image here in our workspace. So hope to see you all in the next tutorial. Till then take care and goodbye. 15. How to use images in figma: Hello, everyone, and welcome you all to another tutorial on Figma. So this is the Chapter number 30, and I'll be showing you guys how you can use images in this particular application, like how you can import, what are the options, and what all are the ways that we can do. I'll also show you guys that how you can actually do some basic editing in your image. I'll be showing you guys that. And also we'll be learning if I do have a particular shape or a particular place in my already done way page. So there instead of color, how can I fill that place with an image. So I'll be showing you guys all of this here in this particular class. So let's get started. So now, as you can see, I'm back in the page where I do have a frame here. Now, what I'll be doing is I will click Control plus Shift plus. Okay. And after clicking this, here you can see that this is the shortcut key of how you can get your image popped up screen that you can upload or import image in your particular work. So what I'll do is I'll click on this one, and I'll open from here. And as you can see, I do have my image on my mouse. So here I can choose the size of the image. From here, I can choose this particular size, how I want to put my page. So here, as you can see, I have put by page here. And there is another way about control shift K. And from here, what I can do is I can just drag this particular thing and drop. But here, if I do this, the size of the image, I can't maintain from here. But if I want to maintain the size of the image, so I'll just go back. This is how we can put image. We can also click here in the shape to option, and from the shape to option, we'll go to place image and video. And once I come here, if I want to select any image, I can do that. And suppose I want to import more than one image at the same time, so I'll be selecting like this. Here you can see, I'll just leg till this much. And now I can open this, and here you can see, now I'm having 11 images on my mouse. So what I'll do is I'll create the size, the way I want. So here I will put another another. So like this, I can actually change or put so many different images at the same time. And if I do click on Control Shift, here you guys will be able to see that it will grow on proportionally. Okay? But I don't need that. I'll take this, this and this Here. Okay, it's done. So I'll show you guys the whole page. And here you can see I do have my images here. And as this is so many files, I'll just put them inside the frame, select, and I'll choose frame selection. So now here you can see this is under a frame, okay? So this is another frame. I'll just keep this in one side. So this is shortcut method or the best way, how you can place your image. Or if you do have a video, you can also import a video as well. So let me up here back again. So I'll just in to this particular page here, out a little bit. Click this one. And bring it here in the beddle. Okay. So now I do have this. And here, what basically we can do is if I select this particular layer, suppose I want to select this whole layer, this two layers here. This is one frame. Let me see what all the other did that. Okay. I do have this frame So yeah, now, what I'll be doing is I'll just take out this particular image from here, and I'll be putting on an image of my own. So for that, what I'm going to do is once I've selected this image, I'll come to this fill option, click on this one. And here you can see I have the option of image. So here you can see I selected this option image. And now, if I just Go back or click Enter. Now I do have this one. Now if I go to this fill option. Here you can see I can choose an image. Suppose I want to put this image there. I'll just click on open. Here you can see I do have the image just underneath this. I do have my image here. As you can see, I do have it. And here again, I will try to make a shape. Suppose I'll just take a circle, make a circle here, click on this fill option, image, who's an image from here. And maybe I'll take this, I'll open this one. Here you can see I do have my image as well here in the center. So this is how you can basically put up your image inside a particular icon as well. So I'll just delete this one. So this is how you can do that. And now, if again, I come to this fill option here. So as I do have at image here, I'll choose So as I do have this one, I can also change the exposure of this, also the contrast. The way I want I can actually do. This is not photoshop, but we can do some of the basic editing of your image from here. If I want to increase the temperature, I can do that, and I will just use this stint a little bit. Okay. You can see or. Highlights and the shadows. This is fine. I'm happy with this. And here I can also rotate the image into 90 degree from here, as you can see, I can rotate this, so I'll keep it like this. Now, hope you guys have understood this class of how you can actually put up image according to the way you want. So here you can also animate the text or if you want to put any text box somewhere here, Like if you want to put and you want to write like featured by Figma. And I'll just click outside. Take this on top. Yeah. I can do it like that. And here you can see I'm just able to select this box. And I can actually change the box size as well. So now you know that how you can play around with this particular application in the images option. Okay? So in next class, we'll learn about how you can mask an image and how you can also cm that particularly. So I hope to see you all in the next tutorial and take care and goodbye. 16. Masking, cropping and Image plugins: Hello everyone and welcome you all to another tutorial in Figma. So now we're on our chapter number 14 and we'll learn how you can use masking, cropping, and few of the image plug ins. I'll be showing you guys from where you can get free images for commercial use or just to work on those, to practice from where you can get high quality free images. I'll be showing you guys that. I'll be showing you how you can basically crop an image in different ways and how we can do the basic masking in this particular application. Let's get started with this class now I'm here in my page. The first thing I'll be doing is I'll be exporting image the way I did in last class from here. Also I can do here. You can see from that rectangle option, I can come and click here and I will choose an image, okay? Basically to crop image, what we do is we can just do it from here if you want this one to proportionally grow. In that case, I can just click on control shift and this is the way we can, and I can also come here back again. Take this same image and suppose now I am increasing this image size. This is one way how you can crop, basically. Now, this much is enough if now you want to crop proportionally. In that case, what I'm going to do is I'll click on Control, or I'll click on Shift here. You can see I can actually move the image proportionally, okay? I'll select this one from here. Now I can also crop it down from here. Here you can see feel is good enough and feed is also fine. But if I do crop here, you can see the option of cropping like how I can crop this image if I here choose image open from here. As you can see, I'm able to crop this down. Let me just take this image on top of those. Otherwise, let's move this one. Maybe here, sine or I just took that shadow. Now again, I'll come here and I have adjusted the work space. Now come to this image. Now here you can see in this crop option, I can basically crop from one end like this or I can do it from the ends as well if I want to proportionally. In that case I can do like this. Here you can see it will crop proportionally from all the blue dot icons. I can basically crop this image. I can also change the contrast exposure and this one is the contrast, the saturation of the image temperature, I don't want to put any tint highlights, this looks better and shadow will be this much. Okay. Now you know how you can do that. If I click on Enter here, you can see I do my image here, which I have just cropped down. You can also do masking from here. For that, let me take another image. I'll just take this particular image from here. As you can see, I do have it on my. I'll keep this image till this much. Now what I can do is suppose I do make a rectangle. Okay? And I just made this particular rectangle and I want to put this on top. Okay, On top of this then I'll just mask it, or I will keep this one here. Now select both of this layer. Now what I'll do is I have selected both again, I will just mask this. What I'll do is I'll change the opacity to zero. Enter here I do. Have the image, or what's the problem here? From here I can change the opacity. I'll go back. I don't want to mask, change the opacity from here. Zero. Now I'll be able to see, this is the image page which I have here. As you can see, this one is the image, this is how I can mask. And I'll show you guys the other way of how we can do that. I'll delete picture from here. I do have a here. I'll delete this as well. I'll take another image. Now what I'm going to do is I'll come here again to the option or I'll just click on control shift. From here I will take another image. I'll open this one. Now I do have this image. I will just put it like this. This gin what? I'm going to do this image from here, I will take shape here. I do have my rectangular box here. I do have these things here. Or first I'll delete this image. Take this one from here. Let me just shape the size out here. Now I'll come here from here. I want to place an image here. You can see, choose an image. I'll open this one here, actually. Now I will be able to increase the size. Suppose if I take ellipse instead. Okay? And I'll keep it here. Place that image from here. From here, open. I have placed that image from here and I'll come here and I'll use the option as crop from here. Basically I can choose all these things of how we can actually work here. So I can actually adjust this a little bit more if I be the crop option already come here slightly. This one is fine. I can just click here and as you can see inside icon, I do have the image as well. Okay, This one was another way of doing this, cropping your image and the original or the way of using this option is first what I need to do is I'll just select a shape. Let me take a triangle from here. Now I'll bring this here. What I want to do is I want to just put this underneath the image. Okay, here. I will take this one under the image. Okay, I do have this polygon. Yeah, here you can see the image on top. And I do have the shape just outside. I'll bring it in central. I will also add just the height, okay. Yes, this is fight. Now what I'll do is once I select both of these layers here, as you can see, I can click on this option, okay? But if I click only this one here, okay, I will have a different thing here. Okay. I'll click both of these. I'll use this as a mask here. You can see this one is a mask. Now, I can also change the setting from here, come here, like this. I can basically crop down the image the way I want. Okay, this is one way of doing this. If I click on Enter, you guys can see is the image or this is the shape inside which I do have the image where I have used this option as masking here in my layer. Also, you guys can see I do have a mask group. I can also rename it the way I want. I'll write Masking one. I'll click on Enter here. You can see once I select this one, this whole thing is getting selected. But if I just click on particularly this one from here also I can adjust, as you guys can see, I can adjust it like that if I want to adjust the polygon. I can adjust it like this. Okay? So we can also adjust it down from here according to the way we like. What all shapes did we take? Okay, It depends on all that. The same thing we can do in many presets frame as well. Okay? But to put all these icons inside my web page, basically we do shapes instead of a whole frame. Okay, now here I have shown you guys how you can do masking, how you can do cropping in different ways. Suppose now if I take a text from here, okay, I want to write inside this text first. I will come here. Or with my hand too. Let's see what all other images we have got here. Okay, I will select this image. Bring it somewhere here. Now, I'll just increase the size. I'll just increase the size to this much as you guys can see here. Had to move the side. Now with my type too, what I can do is I can type, okay, let me take the white color from here. Type tool, select, right? Okay, so maybe I'll just write as, this is the Adobe After After effect page. So I'll just write Adobe after Effect. Okay, now what I'll do is I'll just select this whole text from here. I'll just select the whole. Now what I'll do is first I'll come and change the color. I'll make it white. What I'll do is I'll just increase the size of this particular text. Okay, for that also I need to select both of the control shift. Then this button right here, which is the Full Stop button. Okay, I will click on this, then the Full Stop button here, you can see this is one of the short cut way of how you can actually work here. Okay? Or just increase the font size. This is looking good, not bad. Now what I can do is I can come up here, I can just view this text. Okay? If I click on this blue page right up here, change color or change the opacity. Zoom in a little bit. I'll just in the image quality is not that great. But to show you guys an example will be fine. I'll just put this text underneath this frame. Now, I do want to take this one. Where is the image basically? Let's see this image. I want to bring it underneath this one. Now you're not able to see. What I'm going to do is now I am going to, this one change to zero. Now if I select both of these, use masking here. Now this text, I'll bring it top here, bring on this corner. I will adjust the size a little bit. Maybe 48 is fine. Yeah, I'll try to adjust this to bring it here. Yeah, here it's fine. Now, I'll select both of this and I'll click on this option right on top here. Okay. Yeah, one thing I forgot, I need to bring this one on top. Okay, the image on top of my writing. Now if I just click on this masking here, you guys will able to see that. Now I do have this masking option here. Okay, So I can see underneath, Okay, if I of the masking. This is how it will look if I own the masking. This effect it will give me here. This is how it actually works. I hope you guys have understood this class on masking and cropping. Hope to see you all in the next tutorial where we'll be learning about constraints and effects before ending this class. Let me also show you guys how we can actually download free images and also how we can actually get those images in your plug ins For that, what I'll be doing is I'll go to my Chrome from here. I'll search on Splash here. I do have a website from where I can get free images, but if you're working for a company or anything as such, you can just tell them to view their profile and also can see what can be used and what all can't be used. Okay? If you want to connect with them, you can basically connect with them. And if you want to follow them, you can also follow them from here, you can see all these images here. You're able to see, okay, suppose I take this, let me just take a picture. After clicking the picture here, you can see all of the basic information like how views they got and also how many downloads. If you want to report this by any chance, you can do it from here. You also can see when it is published, on what camera and everything is used. Another website which you can use is pixels. If I go to pixels from here, from here you can see, you can search the images here. And you can also see the license. Like what all is allowed to use. For what purposes? Here, all photos and videos, pixels are free to use. Attribution is not required. Like you don't have to mention the name of the person or the people who created this while showing it in your work, but we just need to give credit to a photographer or pixels is not necessary, but always appreciated. It's not necessary that you have to do that, but if you want that, this is a good gesture from here. You can also modify those photos, videos from pixels, try to be creative and edit them as you like. If you're doing anything identifiable, people may not appear in bad light or in that way offensive like you can just put their image and do some bad editing. Suppose you can't just use it for any wrong purposes that all this says. Now if I come back to my Fagin, I'll just delete all this. Delete this one as well. Now I came here in my Figma community. I will go back and I will search three images. I'll just take the plug ins from here. You guys can see I do have all these things here and here. I also do have the option for unsplash. Okay? If I just want to try this particular one out, I can try this particular one out. How you can use if I run this one. Let's see what will appear here. Come to this plugins, and now I do have my splash here as well. As you all can see, now they're opening the file. This is how it will look here as well. From here, basically you can see different presets. You can search some of the editorial files. If I click on this one here, you can see this picture is automatically getting downloaded. Okay, I have inserted one image as you can see. Now I can just move this aside. Go back and I will just fit. I'll just keep this one. Go back and I can feed the size according to my need. Okay, shift and I can decrease the size of this image. Then again, zoom back inside. This is how my picture will look. If I put that in plug in. This is one of the easier way, how we can do this. The same way if I come to the community again here you can see I do have other apps as well from where I can just download images. Okay. So here I have I ebay generator by free pick. You can also use that. Okay, from here I can add that plug in. I hope you guys have understood this class on how you can mask and how you can drop. Also how you can add some of the best images and freely used images. I've showed you guys the website and now you can also download it in your plug in, hope to see you all in the next class. 17. Component and effects: Hello everyone, and welcome you all to another class on Figma. Here in this class I'll be teaching you guys about how you can create a composition and how you can use different kind of effects in this particular software. So here I'll be teaching you guys like how you can create a button and afterwards how you can use that in your same project, in a different page. I'll also show you guys how you can save an effect and use different kind of effects for different kind of view. Okay, so let's get started with this class. Now here again I'm in the workspace. And from here I'll be showing you guys component for that. First I'll come here, take one circle and as you can see, I do have this circle. With this component, I can actually make buttons. Okay. I will type, I will increase this 226. Select this one. I'll delete this. Take back again. From here I will increase the size 40, 45. Now I'll just type, maybe I need it a little bigger. I'll write plea. I can select what I want. Pulled control shift and this key. Just click on this till the time it reaches the particular size. And this is fine. Bold. Select this again. I'll put this one in between the circle. Now, I can add any color to this circle as well. Suppose I want to add a red color, or maybe a green. I can do this from here. Okay, Now what I can do is, as I do have two components here, I can select both of this from here. As you can see, I do have the option of creating component and the shortcut key for that is Control plus A plus K. I can click on that or click on this option here. As you can see, once I have this component, it's being saved. Now let me create another page. Okay, I'll create a new design file after creating a new design file here. If I go to the expect option here, if I come and here, if I try to see, okay, if I explore library, yes, I did a mistake here. It won't be working in a new file, okay. It won't be working in a new file, but this component will show up in the same project. But if I try to create a new project, supposed from here, if I try to create a new design file, I would have that component. But in the same project, in different pages, you'll be able to view that. Let me show you guys here. I do have this one and I have created a page number two. In page number two, if I come to the assets here, I do have the local component with shift. I can actually lower this down. Control shift, I can basically lower the size of this one. Again, increase this like that. Okay. Control shift. Yes, this is fine. This is the way how I can do this. If I want to decrease the size, I can also decrease the size the way I want here. I do have this, suppose I want to decrease it. From here, I can decrease it. Okay. I hope you have understood this class here. Now let's learn about effects. Okay, Like how we can create different effects for that. Again, I'll take another shape from here. Let me take a polygon. Now I have taken a polygon from here. I have selected this. Now what I'll do is I will come here on the effects option. Here you can see the drop shadow option. From here I can basically change the shadow. The X axis is changed, now the Y axis. Here you can see. How you can do that. Put up different colors. Okay? You can also put up different color from here. Also, you can actually choose the depth of the color as well. Okay? Here if I take this or X, I can also do with all those as well. Okay? This is one way how you can do that in the same one. Let me show you guys about the inner shadow. This is the inner shadow. At the same way you can see, you can actually change the x and the y axis. Both of these are quite similar. Here you can see the blur. Well, if you want to change the color, you can change the color. From here. There will be an inner shadow before it was outshine, but on the shadow is inside my object. Okay. Now let's see this third option as the layer blur. Okay? If I want to blur this particular layer, how much I want to blur it, I actually do it like this, okay? There, you can see the blur effect here. You can see the blur effect again, If I select this one and go to the last option here, which is the background blur, okay, I can also choose this. Okay? I can do this as well from here. Okay? But let me take an image just to show you guys from here. Maybe I'll take that same image here. Now, I will just keep this image somewhere here, as I do have this image. Instead of this, let me take a rectangle. What will happen is now if I just make a rectangle on top of this, come here, go to the effects option I can do is background blur. Well, not this, basically. Go to drop shadow. Go to this fill, just change the opacity to ten. Okay, here you guys can see I do have my image here, let me move this component somewhere here. Now what you can do, it does have a frame of its own. Now, once I come here, I can basically change the framing. The color will also change of the image, but this is just happening underneath from here. Select this, I'll just put up a little effect here. I can take different colors as well. Okay? Maybe I'll increase this little bit. Now, I hope you guys can see the framing just on my picture. Sometimes it might look good, but depends on yourself what project you're basically doing. This is one way how we can play with effects here. I hope you guys understood. And if I do have two or three effects here and I don't want to see the effect, I can just click on this one. And I won't have my effect shown this particular one. If I want to add any effect, I can just click on this. Once I click on this, this particular setting will be saved there. Okay, I hope you guys have understood about this particular class. Next class will be the last class of this tutorial where I'll be teaching you guys how you can export your image from this feedback application. Take care everyone. Hope to see you all in the next. 18. Exporting images: Hello everyone, and welcome you all to the tutorial on Figma. So this is going to be the last class of the Figma tutorial. And if you guys have made this till this far, I hope you have enjoyed the class and thank you for attending this class. And the last chapter is going to be how you can export those images from the particular application and different ways and different formats of exporting those. If you want to export the whole frame, you can do that if you want to export some particular item. Basically, I'll be showing you guys images here, I will show you all that. Let's get started with this last class of Figma here. I do have my workspace. I want to select this particular image from here, Only this one I want to export. In that case, what I'm going to do is I will come here on the export option. Click down here, you guys can see in what format I'll be taking, this one here. I do have the PNG format, JPG, SVG, and the PDF format. If I want to get a preview what I'm exporting, I can see here, Okay, I am just decreasing the size of this one. This is what I'm exporting to my system. I'll just export this particular thing from here. Come to the export option. Now what I'll do is I will select the two X, Okay, this is just the resolution. If I am viewing on a high Ram or fast computer or a PC, then I can select this one, that it will give me a high resolution of that image. Instead of PNG, I'll take a JPG and I'll export this particular frame. I can select what name I want to give. I'll write this as Figma file. Now I can select where I want to place this, Save this out here. Now if I go to this one here, my File Explorer, and I'll go to my downloads from here. You can see I do have this file. Let me see how it actually look. This is the one which I have just from the image option. The same thing. Let me just do it from here. Okay. Suppose I want to take it one x, okay? Or 0.75 x. Export the frame, save this one, come and view this as well. As I have downloaded this here, you can see the size is less here, but there it was two x, now it's 0.75 here. If I just zoom in also to my, this image, the picture quality is quite better. But here, in the same way, if I come to this file, if I zoom in, you can see the quality is not that great comparing to that other one, okay? This is one way we can do. For my PC, I do basically take two x one, okay? You can also do three eggs, four eggs. If you want to change the width here, you can change the width as well, different methods of using this. If you want to save this export setting, you can just click here and you can just add any suffix from here, like if you want to use 512. Okay, I will export this file 512 and export both of this frame here. Come to the downloads and save this. Let me go back again to this file here, we see downloads replace. Yeah, I will have those around here. Okay. As I do have this, I will click here. You can see this image, or maybe it is this one. Okay, here you can see it changed the width of this image. In this one here, they have changed the height of the image. Hope you guys have understood how we can basically use or export your image from this particular application, then you can use it in some other places as well. This was the last. I hope you guys have enjoyed and learned all the things which I have explained and now you're familiar with this particular option or this particular application. Keep on practicing with your designing that the more you use, the more you work on this, the more you learn about everything. I have also given you guys some of the project class projects which you guys will be submitting on the project panel. I'm really eager to see what you guys will be doing. Please send your work and let me see how much you guys have learned from this tutorial. Take care and goodbye everyone. 19. Class Project 2: Making prototyping: Hello guys. This is the time for class project and we're in our class project number two, where you guys will be making your own design. Whether it's a mobile app design or a web page design, it totally depends on you. After that, you guys need to do prototyping. I have already shown you guys in the tutorial how you can do that few steps which you, I'll be showing you guys and also be giving you a demo. Let's jump into that one. The first thing is you need to create your own particular design. And as I've told you, can be a web design or even a mobile app design. Make sure that you guys use a minimum of four frames. But if you're making something bigger or something which consists of ten frames or more than that, you guys are always welcome. I would really love to check out your works. Okay, after that, you guys need to go to the prototyping option, which is just beside the design option. And connect the frames with the icons icon with the frames. Then after that turn on the present mode, as I know, there is two modes, the present and the preview mode. Just present mode because it will open in a new window. After that, just share the link of your project in our project window and I'll be checking those out. See how much progress you guys have done, then what all you have learned from the tutorial. Let me show you guys a demo here. Here I have already made design. Okay, this design I have shown you guys in the tutorial as well. I will just show you guys the prototyping as I have already made the design. But you guys make your own design, try to make those things. You can also get help from the Figma community as well. Take up their fonts, icons there, paid style. You guys can take those and make your own. Okay, now what I'll be doing is I'll go to the prototype option. After going to the prototype option here, you guys can see I can select the from here, as you can see. And I will link this swan with this page. And I can also change this. It should be instant or dissolved. Let me just give this dissolved. I'll just select this button right here. Take this swan and connect with this. Okay? Enter, then this, the last one, okay? And Enter. And I want to go back to my home page whenever I click on this particular home button. So what I'll do is I'll just connect all all the home buttons with the first page. Enter. Okay, This one. Enter. Select this one again. I will connect with this, then I'll press on Enter. I did my prototyping. If I want to see the prototyping here, you guys can see I have connected icons with frames, frames with the icons. Now what you guys will be doing is you guys come up here on this option and select this present option. Okay, not the preview on the present. Here you guys will be able to see that it is loading in a new page or a new window. Okay, now what I can do is if I click onto this relaxation one here you can see I can go back there. Click on this page, here I am. Back to this one. Again the same way as I can do. If I can also manually go back here, I can click on this one, it will re directly to this page. What all you guys can do is share your work with me. Come here in the shared prototype option, just click here. Okay, anyone with the link. And just put it as can view because I won't be editing your one. Okay, just select this one and you can just copy the link from here. And just put that particular link in our project box. Simple as that. I'll be hoping to see all your work and how you design your page. I will see the capability of you after joining this class, of how you can design your own web page and also prototype accordingly. Take care, everyone, hope to see your work so. 20. Class Project 3: Making colour gradient: Hello guys, and now it's class project time. Now you guys will be doing the class project number three at the last class project, where you'll be creating your own gradient. Okay? To create gradient, I have showed you already in the tutorial. If any problem you guys face, you can always refer the tutorial. Okay, I'll show you guys the steps of what all need to be done. Let's get to that. First, you need to make any kind of shape using the shape to it can be a star, a rectangle box, a square, or a polygon. Okay? And then you can go to the fill option. And from the fill option you can go to the gradient. After that, choose any gradient style, as there are basically four gradient style, linear radio mode and angulo. Okay, You guys can choose any from there. After that you need to add more colors to your gradient. Keep on doing that. And minimum five colors you need to choose. After that. The last step will be export that particular gradient box or a gradient shape in your system and you guys can upload it in our project section. Okay, let's see how you guys will be doing that one for me. What I'll do is I'll just take a rectangle box only after coming to this rectangle box here. You can see I do have the fill option here. Okay? Under the pill, I will come to this gradient option, which is just beside the solid one from here. Now I do have this option, linear, radial, angular, and diamond under the gradient. But what I'm going to do is I am going to select the linear. And as I have already told you guys in the tutorial that I like to use the linear and the radial want more. I'll be choosing any particular color from here. Suppose I will go for something dark. Okay, I'll take this color and I will add more colors here. So what color I'll choose? Let me take this one, then add another box here. Now let me take something lighter. Okay? As you guys can see, I can make it according to my need and I'm able to do it the way I want. Now I do have three and come to red again, or just go back, take another one here, and I'll just take up a red color. I'll take a red. Last one, which I'll be taking here is this color, and I will take a yellow. Okay. And in all this color, I can basically choose solid if I want to, if I want to fade this out, I can do that. I can always maintain this lining here, these five colors here, as you can see here. I can change the darkness here. Here, I do have the color gradient I have selected. And you guys can also change the opacity from here. If you want it dark, you can go this side. I have explained all the in the tutorial. Now the next thing what I'll be doing is I want to export this one. Select this, click on Export. Here you can see, I can see the preview of how it will look if this one is a PNG. And here I do have the preview of a JP. You guys can download whatever you want. Three X export rectangle. Yeah, I'll just say that now. Let's view this one here. You guys can see I do my gradient here in which I used five different colors or five different shades. I'll be waiting to see how you guys make your own gradient and want to see how you can make up colors and also understand the designing of your color. I'm quite interested to see all that. Take care everyone. I'm just hoping to see some good work from you guys by everyone.