Figma Basics Super Easy Crash Course

1. Introduction: Hello everyone. I'm Rohan Ajgaonkar. And I would like to welcome you to the Figma basics super-easy crash course. In this course, we will be learning all the basics of Figma, that's the designing part, the various features of Pigma. And we will also be learning how to create prototypes in Figma. And all this will be done inside 60 minutes. Now let's look at the contents of this course. Now these are the contents of this course. And I have designed this course in such a way that it's very much beginner friendly. Which means if you have no idea what Figma is, or if you are new to Figma, you want to learn how it works. You're new to designing and prototyping as a whole. No worries, we will be learning from scratch. I'll cover all the aspects of designing and prototyping using the Figma application. First, we will be covering the installation part of Figma, how to install the desktop application. Then we will move on with some basic controls like creating the frame using the zoom in, zoom out command, using the hand tool, which are the basic necessities to use the Figma application. And then we will move on with the designing part. We will learn about shapes, mask, components, auto-layout, all the features of Figma that are needed to create designs in Figma. Then we will move on with the use of plugins. There are so many plugins in Figma, which make our job easier. We will learn how to use plugins to make our project even better. Then we'll move on with the Figma community part. There are various creators upload their own projects and we can duplicate these projects and modify them. To create our own project. We can copy the various elements from the creators and we can use our own creativity and take inspiration from them. We will learn how to use Figma community to make our project even better. And moving on, we will also learn how to create prototype in Figma, we will learn the various features that are involved in prototyping. And then we will be implementing the prototype to create a simple project, a mobile application. So this is how the flow of the course is going to be. First, we will learn the designing part. We will cover various features of Figma, like frames, mass components that we will look over them one-by-one. After that, we will learn how to use the plugins and Figma community features to make our project even better and our job much easier. And after learning how the prototyping works, we will create a project that implements the prototype without any further delay. Let's begin. 2. Installing the Figma Desktop App: Hello, everyone i'm Rohan Ajgaonkar and I would like to welcome you to this figma, Super Easy Crash Course Now Figma is a graphic designing and prototyping tool. Now in this course we are going to cover all the basics of Figma that you are going to need for graphic designing, user interface design, or prototyping. And if you are completely new to Figma or if you have already installed Figma, but don't know how it works, then this is the right place for you. We will quickly cover all the basics of Figma that you need. Let's get started. The first thing you are going to need is the Figma desktop application. If you have already installed it great. We'll just get back to you in a minute. And if you haven't installed the Figma desktop application, just go to any browser and search for Figma download. Here you can see the first result that will show up right here. Figma.com. Just click on it. Now you can see there's an option for desktop application. You can download this for Mac OS or Windows. Now, I'm currently using Windows, so I just click on Windows and this is a simple installation process. Just download the file and install Figma application. Once I've installed the Figma desktop application, the interface is going to look somewhat like this. Now there are two options. You can login with your Figma account or you can create a new one. Now I already had a Figma account, but just to go along with you, I will just create a new one. I'll just click on Create one right here. And now we will be redirected to the browser. Now here you can create a Figma account using your email or password. Or you can just sign in with Google. So I'll just click on continue with Google right here. Now there are some options you can just fill it. And once you are done, just click on the Create Account. Now the sign-up process is done. You can see there's an option, open the desktop app. I'll just click on it and just click on open Figma. Now we are inside the Figma desktop application for the very first time. And it's asking us for a team name. You can just click on do this later. By default, the team name is going to be the name of your email. So here you can see it says Rohan Ajgaonkar's team. So I'll just click on do this later. And here there are two options. Just click on the Explore by myself. Now you're out. Some default files given by Figma will just ignore them and go to the designing part. Now if you wanted to create something or design something, the first thing you need to do is just click on the plus sign right here. So I'll just click on this plus sign. And it opens in Untitled page. Now we are in the design section. You can see the name is untitled and saved as drafts. If you want to change the name, you can just do a single click on it and now let us give it a new name. Just click outside. 3. Basic controls in Figma: Now if you want to design something in the real life, Let's say you wanted to draw painting. The first thing you need is a paper or a canvas. Similarly in Figma, we need a canvas for our designs. Now this canvas is called as frames. If you want to set a frame for your designs, you can just click on frame or you can just hit the F key on your keyboard. I'll just hit the F key on my keyboard. Now on the right side you can see various frames are showing up now these are the default dimensions for various frames. You can see for the phone, There's IPhone 13 Pro Max. These are the dimensions of the screen of iPhone. And similarly, if you want for desktop, you can see these are the default frame dimensions for desktop. Now I just select this desktop option and a frame has shown up. Now before we start creating anything, there are a few commands and keys I would like you to know. The first thing is the zoom in and zoom out command. So here's the Desktop Frame And if I want to zoom out from this all, I have to do is hold the Control key and scroll down on my mouse. You can see we are zooming out from this. And similarly, if you want to zoom in, you can just hold the Control key again and up scroll your mouse. Now the control keys for the Windows user, if you have an Apple device, then I guess that will be the Command key instead of the Control key. So the functions are similar only the, control and command key are different. Now the next command is the hand tool. Now let's say I want to drag this thing and keep it on the left side. So for this all you have to do is hold the space button on your keyboard. And now you can see the cursor has turned to a hand icon using the mouse, you can just simply click and drag this thing anywhere you want. So I'll just drag this on the left side. This is how you can drag various elements. These two are very important the, Hand tool and zoom in, zoom out command. Now they might look insignificant, but while you are designing that are various elements in the frame are outside the frame. So the drag tool, zoom in zoom out part comes in very handy. So just remember that if you want to zoom in and zoom out, you have to hold the Control key or the Command key for Apple users and just scroll your mouse button down. For the hand tool you need to hold your space button and just drag your frame or a various elements of your Figma file, anywhere you want. That's all for the introduction session. In the next session we will be learning various more features of Figma. So that's all. Thank you. 4. How to Create Designs in Figma: In Figma, if you want to make changes to any particular element, you need to select it first. So to select any particular element, let's say frame or shape or anything. You need to just click on it. Now you can see the desktop one frame has been selected. Now if you want to de-select this frame, you can just click outside. Now there's another way to select these elements as well. You can see here on the left side in the layer section, there's the desktop one. You can just click right here.so this gets selected. And every single element that you add in your design page will be added in the layer section. Each element acts as an individual layer. So we will cover that in the later part with an example. The name of the frame that we added in the previous session by default is desktop one. If you wanted to change the name, you can just double-click right here on Desktop-1 in the layer section. From here you can change the name of the element. So I'll just change the name of this frame to lets say. Once you're done, just hit Enter. Now you can see the name of this frame has been changed. Let's add another frame to our page. You can just hit the F button on your keyboard. Now if you take a look at your cursor, you can see there's a plus sign. So if I just hold my left mouse button and drag this thing anyway, I want, I can add a frame of my own dimensions. You can see the live dimensions as well. So I'll just leave this mouse button. And here's my other frame. Now if you want to move this frame anywhere, you can just hold your left mouse button and drag this frame anywhere you want. And you can just align this right here. Okay, So the default dimensions of this frame are 1576 and by 1053, if you want to change these dimensions, all you have to do is just on the right side you can see there's the width and height. So from here, you can make changes to their dimensions. You can add custom dimensions of your own. I'll just add some dimensions. I'll change the width to 1080 and change the height to 1920. You can use the zoom in, zoom out button and the hand tool to set the screen in a way that you are comfortable to edit with. So I'll just keep it like this. Now if you take a look at the layer section on the left side, you can see there's the frame one. This was the second element that we added. Now let us go towards the design part. So I'll just select this frame one right here. Now if you take a look at the right side, you can see there are various options for the design part. The width and height option we just saw. There's another option that's the angle option for rotation. You can just enter a angle. You want to rotate this thing. If I just entered ten and hit Enter, you can see this is how it rotates. Now you can manually rotate this thing as well. You just have to take your mouse near one of the edges. And you can see the cursor changes to the Rotation icon. And from here you can just hold your left mouse button and drag this thing anyway, you want to rotate it. And on the right side in the design part you can see a live preview of the angle changes that you're making. I'll just enter it to 0 once again, that it is moving on. There's the corner radius feature as well. So here you can give corner radius to this thing. Now what is corner radius? Now let's zoom in and take a look at this edge right here So here you can see this is a perfect rectangle. The edges are straight lines. So now I'll select this frame and add a corner radius right here. So let's add a corner radius of 50. Now you can see there's a corner radius to our frame. This also about the corner radius. Now the auto layout and layout grid feature, I'll explain in the later part with an example. Now let's talk about the fill section. Fill just like the name says, here's the fill of your elements. Currently we have selected the frame, so let's change the fill of this frame. Right now the fill of this frame has been selected as white. Now if I click on this color right here, you can see we are various options for the color of this element. You can just select any color you want. You can also adjust the opacity of this thing by changing right here. Just select the color that you want. You'll get a live preview as well as you make the changes by just started as green for now. And there are many more options for this fill as well. If I just expand this option right here, you can see there's linear, radial, angular, diamond, and image fill as well. You can just explore them one-by-one. There's this linear fill option. You can change them the way you want. There's this image option as well, which means you can add an image as a fill of the element. So let's select the image option. From here, you can upload an image from your device. We have added an image as a fill of the frame. Now there's the strokes, effects and export options, so we'll take a look at them one-by-one. So currently the Stroke option isn't enabled. So if you want to enable the stroke option, you can see there's the plus sign. Just click on it. And now the stroke option has been enabled, here is the color of the stroke. So you can just select any color that you want. I'll just take it as red. And down here is the stroke size. You can just drag this thing and select the stroke size. Or you can just manually enter the number you want. I just set it as ten. So now we have added a red stroke to our frame. And moving on, There's the effect option. So currently this is not enabled. So let's click on the plus sign. And now there's Drop Shadow, inner shadow layer blurred and so on. So you can explore these features on your own. Now I'll just give you an example of, let's say drop shadow. Just select this icon right here and change the values the way you want. We've added a drop shadow now. Now if I just zoom in, you can see there's the drop shadow right here. Then there's the export feature. So I'll just click on this plus sign. You can see currently I've selected the frame one. We are talking about exporting this frame one. And now there are options that we're going to export this file types. So there's PNG, JPG, SVG, PDF, and so on. Let's select PNG. And now I'll just click on Export frame one. Now you can save this on your device. So I'll just click on save. Now this frame has been exported as a PNG on our device. Okay, so here's the frame. You can see this was the frame that we exported. This is how it's going to look as an image. Now let's add some elements to this frame. So take a look at the top-left option. The first one is basically the move tool that we are using, which is our mouse cursor. And the second one is the scale tool. Now the scale tool is basically for resizing the elements in your page. So to select the scale tool you can select from your or you can hit the K button on your keyboard. Now before selecting the scale tool, I'll just zoom out a little bit because that's how I feel comfortable editing. Now let's say I'll select this frame one right here. And I want to resize this frame. So for that I needed the scale tool. Let's hit the K button on our keyboard. So now the scale tool has been activated. Now if I take my mouse towards one of these edges, you can see the cursor has changed. Now this is a resizing tool. So if I just left-click and drag this thing, I can resize my frame one. Okay, So this is how the resizing tool works. Now similarly, if I want to resize this frame, so I'll just select on it. And I take my cursor towards the edge, and I'll just drag this thing. Now if you take a look while I'm resizing this frame, some part of it is going behind this frame one. Now if you want this frame right here behind this, our first frame, so all you have to do is just go to the layer section and then hold your left mouse button on our first frame and drag this thing above the frame one. Okay, So this is how layers work. Now I'll just put it back where it was. And I'll just move this thing right here. Okay, so now if I select this frame and I go towards the edge, you can see currently the scale option is still on. So if you want to turn this off, just hit the V button on your keyboard. Now if I take my cursor towards the edge, you can see we can still resize this thing, but it won't be resized according to a fixed dimension. You are going to resize this thing randomly, okay, so I just hit Ctrl Z on my keyboard. If you take it back to its original dimension. And now let's hit the button again. Now you can see that we are resizing this thing in each dimension, resizing proportionally. Okay, so I just hit the V button on my keyboard again. To go back to the Move option, you can select it from here aswell. You can either move or select scale. Now, let's move on to the second option. The second option is frame. We have already covered that part. And now the third option is the shape tools. So if I expand this, you can see these are the various shape tools. And some of these tools have a shortcut as well. So as you get well-versed with Figma, you can just directly select using shortcuts. Don't need to select from this menu every time. Let us go with a rectangle first. Now I'll just click on this rectangle. Now, just like the freestyle frame, you can just hold your left mouse button and drag this thing. Create a rectangle. And when you leave the mouse button, the rectangle has been formed. So I'll just click outside. Now there is another feature of this rectangle tool as well. Let's select the rectangle tool again. And now let's say I wanted to add a squared instead of a rectangle. If you want to add a squared instead of a rectangle, you can add that using this same option. That's the rectangle tool. For that. All you have to do is just hold the shift button on your keyboard and then drag this thing. Now if you take a look while you are dragging this thing, It's going into a perfect square manner. I just leave my mouse button and then leave the Shift key. So it stays Perfect. Okay, So here's our square and here's our rectangle. And both of them have been added using the same rectangle tool. Just like the frame option when we selected frame, we were able to make changes in the design section. So similarly, if you want to make changes to your rectangle or square or any elements that you add. You just have to select these elements and then you can make changes right here. Okay, so let's change the fill of this square. I'll change it to blue. And let's stay in the fill of this rectangle as well. I'll keep it as white. And I'll just add a stroke to this. Just change the stroke color and change the stroke width. Let's explore some more shape tools. There's the line. I'll just select this line thing. Similarly, you can just hold your left mouse button. And you can drag this thing. Now if you want this to be exactly at 0 degrees or 45 degrees or 90 degrees, you can just hold the Shift button on your keyboard. And from there you can just drag these things so you can see which stays in proportion. And then I'll leave move my mouse button. So there we have a straight line. Here's the line. You can select this line and you can make changes in their design section. Let's change the stroke width of this line. There it is. And let's change the stroke color to red. Now moving on, there's this arrow option as well. Similar to line. Now I'll just hold my Shift key and drag this thing right here. If we have an arrow here aswell and I'll just change the stroke width and change the stroke color. There are some options here as well. You can change the end point as well. Okay? So there's the diamond narrow, there's the line arrow. So this is useful for making flowcharts and so on. Moving on, there's this eclipse. Now you can just hold your left mouse button and drag this thing, but I'll just leave this thing as it is. Now you can add a perfect circle as well using this Eclipse tool. All you have to do is just select the Eclipse tool. And before you start dragging this thing by holding your left mouse button, just hold the Shift key on your keyboard, that we get a perfect circle. This is how it works and leave the mouse button first and then leave the Shift key so that it stays Perfect. Now, I'll select my first frame once again. If I tried to resize this thing, you can see we are resizing in three-dimensional. Now if I hold the Shift key while I'm resizing this thing, you can see it moves in a perfect proportions. We can't do the freestyle that we want. This is how the shift key works, I'll just add some fill to our circle as well. Now moving on, let's talk about the other tools. I'll just expand this thing. Here you can see there's a pen tool and there's a pencil tool. Let's select the Pen tool first. Now the pen tool is similar, to connecting the dots. If you want to create a vector, you can use the pen tool. The first step is click somewhere. Now this will be the starting point. And now if you click again, this will be the other points. So it's similar to creating dots and lines. We are creating a vector right here. Now, I'll just take this to the start point, or you can take this to any point you want. Once you're done, just click on Done right here. Now let's select our vector. And you can see that our various edit features that we can use for vector as well. So let's add a fill to this vector. Currently the fill hasn't been added, so let's hit the plus sign. Now you can see the vector has a fill as well. Let us change the fill of this vector. These are now this is just for your reference. The vectors are very useful. You can create any free shape that you want. Now, moving on, there's the pencil tool. I'll just select this pencil tool. Now it's for free styling. You can just hold your left mouse button and draw anything that you want. If you want to draw a straight line, you can just hold the Shift button on your keyboard so that it draws a straight line. So this is how the pencil tool works. Once you are done with the pencil tool, just hit the V button on your keyboard so that you go back to the Move option. If you want to delete any particular element, all you have to do is just select that particular element. Okay, now let's say I want to delete this thing that i have drawn with a pencil. Just select this element and hit the backspace button on your keyboard. Ok, so now this thing is gone. And if you want to undo the changes, now let's say I've deleted this pencil drawing and I wanted to bring it back. Just hit Control Z on your keyboard, that it undo the changes, takes a step back. You can do that a lot of times to go back to the previous step. So I'll just select this again and delete it by hitting the backspace. So I'll delete this thing as well. This one as well. Okay, so that's all about the penicil and Pen tool. Now let's move on with the other one. That's the text tool. Just select on text right here. And now let's add text somewhere in our frame. So I'll just go down using the hand tool. I'll zoom in. Now let's add text in this box. I'll just click right here. And now from here, you can just add any text you want. So let's say. once we are done, just click outside somewhere. Here's our text and I'll just drag this thing towards the center. You can see Figma is a very smart tool. It gives you dimensions as well. As our point, this right here you can see it says it's perfectly in the center. And now you can customize this text as well. You can see on the right side in the design option, there are various options. Here are the font styles. You can change the font from here. Let's change the font style as well. I'll change it to bold Now moving on, there's the handbook that we have already covered. You can just hold the space button on your keyboard and drag this thing anywhere you want. And the last feature is adding a comment. So I'll just select this thing. You can select where you want to add a comment. I just select this circle right here. I'll add a comment. Now just hit post Now the comment has been added, and now I'll hit the V button on my keyboard to go back. Now let's say you are working as a team and you want to check the comments that your teammates have left on this particular design. You just have to click this comment right here. And on the right side you can see the various comments that your teammates are dropped. Here you can see there's the one comment, so there it is. This is how comments are useful when you are working as a team. Okay, so that's all for this session. We are covered with the basics of Figma. In the later session, we will move on with the more advanced features of Figma and we will go over the prototyping part as well. That's all. Thank you. 5. Some Advance features to know before prototyping: Hello and welcome back everyone. In this session we are going to learn some more advanced features of Figma and we will be leaning towards the prototyping part. So before we start with the prototyping, there are a few pictures of Figma that you need to know, which are most commonly used in Figma. So let's begin. So first I'll just add an eclipse. Now you know how to add an eclipse. Just go to the shape, select the eclipse option. And if you want to add up perfect circle, all you have to do is hold the Shift key while you are dragging this thing. Here it is. So we have a perfect circle. Now I'll just select this circle right here. And if you look at the top section, there are three options. Edit, object, create, component, and use as mask. Now all these three are quite interesting and important if you are going to create multiple designs while creating a prototype or just for basic general figma. We'll just go through them one-by-one. The circle has already been selected, so we'll just click on the Edit Object option. And now we can edit this circle the way we want. You can see there are four dots right here, so you can just adjust them and create a design of your own the way you want. Okay, So this is one of the features of Figma to create some design. And once you are done, just click on Done right here. And you can change the fill of this shape as well. Now this was about the edit object feature. I'll just delete this. To delete any object in Figma, you just have to select that particular object and hit Backspace on your keyboard. So now the shape is gone. Now before moving on with another feature of Figma, I'll just add a rectangle. So just go to Shapes, click on the rectangle. And now I'll just hold the Shift key because I want a perfect square. So here it is we have a perfect square. And now let's move on with another interesting feature of Figma called as create component. Okay, So these were Create Component option. Now before explaining to you what is the Create Component, I'll just show you the difference between using Create Component option and without going with the Create Component option. Now Create Component option is very useful while creating designs and also in prototyping. So now you here we have a square. I'll just duplicate this now to create copy of any element, all you have to do is select that particular element and hit ctrl D on your keyboard. And it says Duplicates selection. Now there are two rectangles. You just have to drag this one right here. There it is. And now I'll just hit Control D on my keyboard once again to create another copy. Now if you've noticed, Figma automatically created the space between the two. So Figma is a very smart application. And now we're three squares. I'll just select the first square right here. Now if I try to change the fill of this first square, Let's change it to red. Now if you notice, I've changed the fill of the first square. However, the fill of the remaining two squares are just the same despite being the copy of the first one. Now even though they are the copy of the first square, they are in no way related with the first one because they are simply copy and both of these squares are an individual element, different from the first one. Now this is where the Create component function comes in handy. Because when you create any design or any project in Figma, there will be lots of repetations. The designs have to follow a particular color pattern or let's say a particular format. at that time, you can't individually keep editing every single object just to keep up particular pattern. At that time, the Create component comes in very handy. Now we'll learn how the create component function works. Now I just create a copy of this red rectangle. I just hit Control D on my keyboard. And I will drag this thing down here. Now we have a copy of this square. And let's change the fill of this square for just for demonstration purpose. But I'll just change it to, let's say green. Now here it is. We have a rectangle, another rectangle, It's green rectangle. Now we have a green rectangle. And now I'll show you how the Create Component feature works. I have selected this green rectangle and I'll just hit Create component. If you observe the color of this particular layer is changed to purple. Here we have a component, this green rectangle is now a component of parent component. Now if I go to create a copy of this element or if i try to duplicate this green rectangle. Just watch how it works. I'll just hit Control D on my keyboard once again. Now we're created a copy of this rectangle, and I'll just hit Control D on my keyboard once again. So now I have three green rectangles. Now if I try to change anything with the first one, that's the parent rectangle. You can see this is the parent rectangle. If you take a look at the layers section, you can see this was the first component that we created. And the rectangle six and rectangles seven are the copies of the first one. You can see the difference between the icons. So it shows that the rectangle five was the parent component, and these are the child components. Now I have selected the rectangle 5, and I'll just try to change the fill of this particular element. Let's click on Fill. I'll just change it to, let's say yellow. So now if I try to change any color or do any changes with this rectangle 5, the changes will be visible in the remaining two as well. There's the copies of the rectangle 5. This is how the Create Component feature works. Whatever you do with the first parent component, the child component follows. This is not only eligible for shapes, but also for texts as well. I'll just show you how this works for text. Let's add some text. Over text. I'll just select this text and increase the size of it. So let's increase the size a little bit. So here is our texts and I'll just hit on Create Component. Now this text is a component as well. Now it's not necessarily that just like the shapes are similar, texts tends to be similar as well. Texts can be anything. So I'll just hit Control D on my keyboard. We're created a duplicate of this particular text. Now, I'll just change this text right here. So here it is, this is the second element and Figma is easy is our parent component. Now I selected the first text. Now I'll just change the fill of this particular text. So this is how the Create Component feature works. Even though both of them follow a similar pattern, It's not necessary that they are to be exactly the same. lets go to the rectangle example. Once again, I'll just decrease the size of this particular rectangle. And I'll keep it right here. Now if I make changes to the parent component, Let's change the fill once again. You have to double-click on this in order to change the fill. Now I just changed up, we'll do, let's say pink. So here you can see the color has now changed for all of them. However, it's not necessary that the shape, the size of all of them have to be exactly same ,they can be of any shape as well. Okay, so now let's move on to another interesting feature of Figma. I just clear all this. They'll just select all of them and hit Backspace on your keyboard so that it gets deleted. Now I'll just add another eclipse. Just go to Eclipse. I'll just hold the Shift key so that we get a perfect circle. Now we will be learning another interesting feature of Figma called as use as mask. So now we have a perfect circle. I'll just keep it on the side and I won't do add an image somewhere right here. So I'll just go to the shapes and I'll just click on Place image. So i'll just place this image right here, so you have a particular image. I'll just expand this by holding the Shift key on my keyboard and then dragging the edges. So we have a symmetrical resizing option right here. Now what I want to do is I want this WordPress logo right here are exactly on this circle. I want both of them to be part of the same thing. So I'll just place this image over this circle. Now just go to the layer section, holdthe Shift key on your keyboard, select the eclipse as well as the image. And once both of that is done, just hit the use as Mask feature on the top corner of the menu so that it is. Now you can see we have used the element as a mask. So this is how the use mask feature works and you can drag this thing anywhere you want. And once you're satisfied, you can group these elements and create a single element from these two. So let's go to the layer section, holding the Shift key on your keyboard, select the eclipse as well as the image, and just hit Control G on your keyboard. Once you are done, you can see now this is a single group. These are no longer two different elements. There it is. This is how the use as Mask feature works. So now we have two circles and i'll place This second circle over the first circle will be moving on towards another interesting feature of Figma. So you can see here selected a second circle. Let's select the first one as well simultaneously. So just hold the Shift key on your keyboard and select the first circle. Now we have selected both of these circles. If you look at the top section, you can see this option that says Boolean groups. Just expand this. Now you can see there are many various options like union Selection, Subtract, Intersect, exclude. You can try these Boolean groups as well. So let's click on union selection and see what we get. We just clicked on union selection and you can see we have different shape. And right now, this is a union of the two circles that we created. So let's explore the other options as well. If you want to go towards a step back, just hit Control Z on your keyboard. You can go to the previous step. So I'll just hit Control Z on my keyboard once again. Now we have two circles once again. And it's not necessarily that both of them have to be in an identical shape. They can be in any shape that you want. So I'll just change the shape of this particular circle right here. I'll just change it to some eclipse. And now I'll place this above the first circle. Let's select both of them. Once again. Just hold the Shift key on your keyboard and click on the first one. So now we have selected both of these objects. And let's try some other features, like, let's say subtract selection that it is now those selection has been subtracted. So this is how the Boolean group feature works in Figma. Now that we're covered these parts, let's just move on. I just add some text right here. If you want to create a duplicate of this text, all you have to do is select this text and hit control D on your keyboard. There you have created a copy of this particular element. And that is also another way to create a duplicate of these elements. Just select the text that you want, the text or any shape that you want, and you don't have to press Control D every time. Just hold the Alt key on your keyboard. Then you can just drag this thing anywhere you want. Okay, so now you can see the copy of this particular texts has been placed right here by holding the Alt key on my keyboard. This is how it works. Similarly, you can create copies of the shapes as well. I've selected this shape right here. I'll just hold the Alt key on my keyboard and I'll drag this thing down. You can create an easy duplicate copy of any elements that you want. If you want to go back to the previous steps, that means if you want to undo, then just hit Control and Z on your keyboard multiple times. 6. Prototyping and Creating a Project: Now let us move on with the prototyping part. And while doing the prototyping part, where we'll be learning some more functions and tools in Figma. Let's begin. Now we will be creating a basic prototype, let's say create a prototype of a mobile application. So first what we need to do is add a frame, go to the frame option. Click on frame. You can select the mobile screen that you want. There it is, we have a frame. And let's zoom in. Just hold the Control key on your keyboard and scroll the mouse button up. There it is. So now let's create a duplicate of this frame because we wanted to create a prototype. So I'll just show you how the prototyping works. So i'll just hold the Alt key on my keyboard. And drag this thing right here. I'll hold the Alt key on my keyboard once again and drag this thing right here, so. We're going to create a simple prototype mobile application using these three frames. I'll just change the fill color of this first frame. Let's change it to black. Now we will add some text to the first frame. So I'll just type. Welcome to our app. If you'll notice the text size is too large, so let's reduce the text size. So I'll just select the text and I'll reduce the text size from here That it is now we have reduced the text size and I'll just write, welcome to our app. I'll place this thing, right here. Now let's add some text fields in form of a button. When some user clicks on these buttons, they will be redirected towards some other page. This is what we are going to create in this prototype. We have added a text and we will be learning about another important and the most popular feature of Figma called as auto layout. Just select this text right here. Then all you have to do is just hit Shift and A on your keyboard. You can see it says auto-layout has been added and you can add this as well. I'll just enable the fill option for this particular auto-layout so that it is. And we can just change the fill of this particular element. Let's just change it to yellow. And now we have created a kind of a button for this particular application. And now I'll just select this and reduce the size by holding the K key on my keyboard and then dragging this thing a little bit up. And now I'll just create a duplicate of this feature. So let's select this one. Hold the Alt key on your keyboard, and drag this thing down here. Now I'm not exactly creating a beautiful application. I'm just showing you how the prototype feature works and now let's edit the text of this particular element will name this as there it is. Now we have created two elements for this particular page. Now this will be the homepage of the application, and I'll just place it right here. Now this second frame right here will be the About Us page. Which means if some user clicks on this About Us button right here, they will be redirected to this particular page right here. Okay, so let's add the details in this second frame. I just changed the fill of this second frame as well. Let's add some texts. You can copy the text exactly from here as well. Just hold the Alt key on your keyboard and drag this thing right here, and then you can edit this text later. I'll just edit the text. I'll just create a duplicate of this text, hold the Alt key on my keyboard. Drag this thing down here and I'll just add a simple line. And now another important feature of Figma are the plugins. So let's see how the plugins feature works. Now, I'll just add a shape right here. Let's add a square down here in the About Us page. Now if I select this square and I hit the right-click on my mouse, you can see we get certain options. And among these options there is a feature called as plug-ins. Now you know what plugins are, but let's see how plugins work in Figma. Plugins in Figma really make your job easy. There are so many plugins for a lot of functions. Let us explore them. You can see we're manage plugins and browse plug-ins in the community option, I just click on browse plug-ins in the community. From here, you can install the plugins that you want, not just plug-ins Figma community is a very big community. You can see there are various features. There's typography there is mobile design as well as UI kits illustrations and so on. You get published your own designs as well. So currently we are looking for plugins. So you can see the plugins option has been selected. Now let's search fora plugin. I'll just search for the Unsplash plugin. Now the Unsplash plugin helps us to easily access non copyright images. for our design you can say this is the Unsplash plugin. So I'll just click on Install. Just click on install plugin. Now the Unsplash plugin has been installed. Let's go back towards designing page. Now if I right-click on this square once again, you can see if I go to the plugins, you can see there's the Unsplash plugin that we have just installed. So just click on it. You can see that the plugin has opened up. So from here, you can search for an image that you want. So there's the moon image that I want, so I'll just click on it. There it is. Here you can see we have added the moon to the rectangle. So this is how the Unsplash plugin works. Now the About Us page has been created. Let's create the Contact Us page as well. I'll just change the fill of this particular frame. So just hold the Alt key on your keyboard and drag this thing right here. And if you want to make sure that both of them are perfectly aligned, you can check the dimensions as well. Okay, so just select the first about us and hold the Alt key on your keyboard. And then you can just move your cursor towards the edges. You can see there's the distance, the dimensions of this particular text. So it says 19 and 86. Now you can make sure that this about us is in the same distance as well. So just hold the Alt key and then point towards the edges. Here you can see it's not exactly similar. Now just keep holding the Alt key on your keyboard and use the arrow buttons on your keyboard to edges the dimensions. Okay, So I'll just change it to 19 and 86. Okay, so now these two are perfectly aligned. I'll just change the text to contact us. So now let us add another plugin to this Contact Us page. So I'll just hit the right mouse button. Let's go to Plugins and click on Browse plug-ins in the community. Now let's add a plugin of a map that's location plugin. I just installed the first plug-in right here. Click on Install. Now the plugin has been installed, so just hit the right mouse button, go to Plugins. And now we will select the mapmaker function. So from here, you can add any location that you want. So I'll just type any random, even this one is fine. You can enter the input address right here, and then you can add the location. I'll just click on Make map. There it is. And now you can resize this as well. So just go to the edges and hit the k button on your keyboard. From here, you can resize this particular thing and drag this. Okay? Now when you hit the V button on your keyboard, go back to the Move option. There it is. And you don't need to manually create things every time. Various professional designers have created the application prototypes and various UI kits and so on. And all of them have been already uploaded in the community. All you have to do is just hit the right mouse button. Go to Plugins and browse plug-ins in the community. And here you can just search for mobile application. That's what we are creating just search for mobile application. So you can see this is the plugin section, and that is another section called as files. Just click on Files right here. And here you can see these are the various projects, various designs created by users and they have been uploaded in the community. So all these are files which means you can copy and modify these files. You can copy every single element from these files and use it in your own project. Which means you don't need to manually create things every time. Whatever you need to create be it an application auto login page, you can just search in the community, take inspiration from these people, and you can copy the individual elements as well. You can literally import these projects in your own Figma application and then you can modify them. Now let's say I want the login page for my application. So all I'll do is just search for login right here. And then you can just click on Files. You can see these are the various files available for the login page. You can see these are in login pages created for mobile applications or let's say desktop. You can select which one you want, which template you want. so here, this is the first project. So I'll just click on it. Here you can see this creator has created simple login page for the mobile application, a simple sign-in page. All I'll do is just click on duplicate because we want to copy these elements. So all you need to do is just click on duplicate so that you can import the project in your own Figma application. So here you can see this project that was created by the user is now being imported in our own desktop application. So the first thing that I want to do is I want this login tab in my own design. So I'll just select this login not just the text, but the rectangle as well along with it, because I want the entire login tab. So just select the rectangle as well using the Shift key and then create a group using Control G on your keyboard. Once you hit control G, you can see the both the elements are grouped into one. We'll just hit Control C on our keyboard to copy this login tab. And then we will go back to our own project. And then we will just select the frame one and then paste it right here. Now the login tab is available in our project as well. We simply copied it from the user. Now we want these icons as well, the social sign-in icons in our project. We'll just select this entire icons. We will hit Control G on our keyboard once again to create a group. And we'll just hit Control C to copy all these icons, the group together. Then we will go back to her own project, and then we will just hit Control V on our keyboard. This is how it works. It makes our job a lot easier. This is how the entire copy function works. And it's very useful. Now that we're done with the design part. This is not exactly a beautiful design. I just wanted to show you a basic design that we can carry on with the prototype. Now you can see we are done with the design part. So let's move on to the prototype section. There you can see this is the prototype section besides design. Now let us understand the flow of this prototype. When a user clicks on the About Us button, we want the user to be redirected to the second frame. That's the About Us page. This is the first part. And when the user clicks on the Contact Us button, we want him to be redirected to the third frame. That's the Contact Us page. This is the flow of our prototype. Now what we will do is we will create this prototype. The flow of the project is now clear. Let's create the prototype. Now let us go to the About Us button. Here you can see there's a dot right here near the above us button. So we'll just click on it and drag this thing to the second frame. Which means when a user clicks on the About Us button, you will be redirected to the second frame. and similarly for the Contact Us button, what do we need to do is drag this thing that's the dot near the Contact Us button. We need to drag this thing to the third frame, That's the Contact Us page. This is how the prototype works. It's quite simple, It's quite easy. This is how the prototype framework works. You can edit the animations as well on how you want to do it. So here you can see we have created two interactions for the prototype. The About Us button and the Contact Us button. Now you can't see them because they're quite close, so I'll just zoom them in a little bit. So you can see these are two separate interaction. The about this button goes to the second frame, That's the About Us page. And the Contact Us button goes through the third frame. That's the contact us page. You can create animations as well right here. Now this was just a one-way interaction that we learned. We need to create a reverse interaction as well. I'll just add a text that says previous because we learned how we can go from the About Us button to the About Us page. But what if the user wants to go back to the homepage from the above us page. So I've created a text that says Previous, I'll just add auto-layout by doing the right-click on it. So now we have added a auto-layout as well, and I'll just change the fill. Let us give a color to this fill that we create a previous button as well. Then we will be using this button to the prototype as well. Now I'll just copy this button to the third frame as well. There it is. Now we have the previous button with the third frame as well. You can see besides the previous button, there's a dot right there. We'll just drag this thing and take it back to the first frame that it shows an interaction that when you click on the previous button, you are redirected to the first frame. That's the homepage. So similarly for the next Previous button will do the same thing. You can see there's the dot. Just drag this thing and take it back to the first frame. That's the homepage. Now we're totally done with our prototype. We created a forward interaction and we're created a reverse interaction as well. for our the application. Now let's see how our prototype works. So now that we're done with prototype, you can see there's the Play button. So just click on it. Here. This is our homepage. If you click on About Us, you will be redirected to the About Us page. This is the About Us page. And if you want to go back, just click on previous. If you click on previous, There it is, you are back to the homepage. Similarly for the Contact Us button, if you just click on the Contact Us button, you will be redirected to the contact page. And if you click on previous, you will be redirected back to our homepage. So this is how the preview of prototype works and you can share this prototype as well. Just click on the Share button. You can send it to any friends. You can send it to any mail or any Figma users as well. You can also publish it to the Figma community as well. Just click on Share. You can publish to the Figma community as well. Those can take inspiration from your project as well. They can copy the elements of the project, just like how we can duplicate project of others and then modify it. So this is all about Figma. This is the basics of sigma. We learned some basic features, we learned some advanced features. We learned how to do prototyping as well. That's all for this session, and that's all for this course. I recommend you people that you regularly visit the Figma community, learn various things from other users that have posted their designs. There is always new things to learn in Figma. You can always visit the Figma community. Then you can duplicate their projects and understand how they have created these designs and project. So that's all for this course. I hope you guys do great in Figma. Best of luck, and thanks a lot.