In this video, you will learn to design user interfaces for websites and applications using, and it will not be just a traditional explanation. No, you will learn Figma with practical application. If you can imitate any design at the beginning in order to start practicing user interface design in the best possible way [Music] [Music] on the website, you can go here and click on Design. File, you start a new file, you create a design on it from scratch, or you make something called this, of course, we don't need it right now, or from here you flip the file into a figma . You save it on your device or home from wherever you work for it and start modifying it if you click here on the Design File like this. This will open a new file for you that you can access with all the special settings, but as a beginner you do not need to start something from scratch in this way. In this course or this crash course, we will start using something called this link. You will find it in the video description. Delivery. You will start accessing it and Hindus together on Open Enfigma. In this way, you will find him starting to take this file for me and open it for me in a new file in my account on, and from here we will start working and imitating this design, and from it we will start learning very many things in Figma, and this is what we will walk through one by one in this course, and this will make us learn many things. Very much about Sigma, and this is ours. We will learn how to be able to imitate this design in the first place, and you will find that this is the best way you can begin to imitate UI designs so that you can start making a kickstart for your carrier or the user interface that you are going to work on. Come now, let us understand the concepts of the interface that we have before us. We explain in detail the interface of Figma in front of us. Of course, we are now using a file that someone made before us or someone designed before us, so we have now taken a copy of it. The version is called If you want to change the name of the copy that you took, you can step on the mat here and start changing the words. This is very normal, and we will find here something called I. If you click on a word like this, you will find it opened for me, which is the private part of my email. I mean, any file that I open from Figma that I designed before, and I am starting to modify it or practice on it. Any designs that I want to work on, you will find it placed here in the form in front of you. In the classroom, now we have understood two things: here I can change the name, and here I will find a Facebook saver. I want to make a copy of this, another side copy, and save it in any other folder. I can simply click here and click on and start calling it. Any name like this. Make a copy of it. If you come back again, you will find it. He made two copies of this design for me, the Cuban and the basic design, and the two of them are a copy of the basic design that the person I worked on was the one who made it. I simply make modifications to it and save these things in my account. By the way, now we talked about the part related to the folder and the name of the file that we are working on. Now, on our left hand, we will find here, from above, the tools that are all present in. From below here, also at the bottom of the left, we will find the same as any program you worked on. If you worked on the Photoshop program, work. Comment on any programs you use or the layers. It also compiles it in the same way. These are layers, and you. You are working on it, and if we find here, we will find something called pages. The page in front of us is just an image. The image is the cover of this design. If we click on this, the task for us is here. Here is the entire design of the user interface for the application in front of us. Here we will find six different user interfaces in particular. With this application, if you go to any one, you will find something like this on it, like a certain group in the Lira. If you open it, you will find many Lira available. If you go to each one, you will find here this botton, this word, this icon, and so on, this title. Well, if you click on any of these things For example, when you came to step on this botton, you will find on our right hand that it remains exactly like this. Here are the settings for this botton. I can make any modification to this botton in the settings here. Anything I step on, I will find there are settings for this part, but it will open on our right hand. You will find The settings differ here for every thing I click on. Now, these things, how can I control them? The things in this text, how can I control them simply? I can, for example, step on this . I want to change the location of its place on the page in front of me. I can simply take it and put it in Any place I want, and you will find something like this that opens for me like a red border. I can move very simply to show me the parallel or alignment with the rest of the designs in the way that is in front of you. I can change anything and make any modification. I want. Right now, it is the first tool that we talked about or that we used unintentionally as well. You still haven't talked to us about which tool is the Move tool. If we click here like this, we will find the Move tool, which is the letter V, with which I can move anything in the user interface in front of me. Okay, now we want to imitate this design so that we can begin to understand many concepts in Figma. Let's move the Category, then put it down. Here and edit this, also put it like this and move this here and put it here in the form in front of you. Okay, I want to zoom in to get bigger. Let's get to know the rest of the shortcuts. I can simply press Control and Plus on the keyboard. You will find that Zoom starts working for me. Of course, I want to go to the left a little. I press the Space sign or this hand. I answer this hand like this and start moving. Or I step on it and start moving anywhere. I want to go to it myself. Here I'm standing, it's on me. I want to make a page like this. This is on the right of this page, so I can start making a design like the one in front of us. I'm doing this . How do I do this place in the first place? What is this page called? Here it is called. If I want to make a new frame, what will I do? Can I go to another one? The tool we are talking about is the frame tool, or the third tool, because we talked about the move and we talked about the hand with which we can move. The third tool is the frame, which is the letter Alif, its abbreviation is the letter Alif. I can make a frame. I can get this tool and I can make a frame like this. I made another frame. I can do design on it. Imitate. This is the design, but is this frame the same size as this frame? Of course not. I don’t know what this frame size is. Okay, let’s find out something else. If I come to stand on this, I can know its dimensions. The first time I come, I step on it. I will go to the frame setting here, step on it, and go down until I can’t find it. The check mark marked here has pre-saved sizes in Figma that you can use simply, such as the liter size, the Twitter size, the Facebook post, all the internationally recognized sizes. In this design work, I use the iPhone 11 Pro Max, which is 414 x 896. So when I come to create a frame, I simply click on it. The frame is like this, and before I do anything, and before I do anything on the interface, I come here and step on the phone and start looking for the iPhone 11 Pro Max. I didn’t find it here. I will go down to what it is. Surely in the archive, I will find it made for me the exact same size, and this is the first thing we also need. We knew it in the frame, which is the frame. I want to make a frame for a specific mobile phone, with a universally recognized size. Instead of writing or starting to move, I am in the frame, which is very normal. Like this, you will step on the frame and start making the size. I will not go to the frame from here and start choosing the size that I want very simply, for now. He downloaded the frame for the iPhone 11 Pro Max for me, and I can put all the modifications I want to it in order to imitate the shape we have before us. This is the face of the aspirin we have before us. Well, now I want to change the name instead of it remaining iPhone 11 Pro Max. It remains, for example, Splash Screen Two, for example, or Splash. Screen Copy How can I stand on the name of the one above this and step like this and change it? I will simply make it a Splash Screen Copy only and you will find it changing and you will also find it changing here. Anything else or any design will start to be placed inside here as a group, as I said here that this is the group for Express. It is in This foundation is a frame inside the frame. There are very many things added inside the frame. Anything I will add inside the special frame inside it. Okay, so let's start doing design and imitate this design and also know many concepts. The first thing is that I want to do the background behind this, just to make the topic easier instead of doing the background. There are a lot of gradients in it . Let's make a background in one color so that we can understand. But it is understandable. How do I start doing background design? The topic is simple: I can click here on this frame and create it. For example, I click like this here on this white color and start choosing the color I want or stepping on this tool. Which is the tool for this point, and I start stepping on it like this, and I go here and step on any color. I want, for example, to step here. I took all the color of this background and made all the backgrounds of the frame in this color. So I took the frame and made its elephant one of the colors in this background. In another way, come on. We are working on another method. What is the second method? The rectangle tool. This is another tool that we will talk about, and it is with the letter R. I can do this. I did this in the form before you. Come on like this, we reduce it so that it stays exactly on the frame line. Then this is of course in gray. We start. I also go to the full and step here. I go to the high dropper. And I started choosing a specific color, so I did this like inside the frame that I made. Right now, I am doing this. It is supposed to stay inside the frame, but it is placed outside like this. I want to leave the inside of the frame so that every adjustment I make, I know that it is inside, so I will simply take 46 of this and then rename it. Simply click on Destin and call it, for example, Background. Take it like this and put it inside the frame, so it stays inside the frame. Because I drew it outside the frame, now it remains inside the frame. If I open it, I will find the rectangle Background that I added in the form before you. You must make sure before you do any design inside your frame. You selected it first so that the thing that you made a design for remains inside the frame and not outside it as I did before. This means that it is necessary now. I mean, now I will make another modification inside the frame, so I must define the frame in the way that you have before you so that the thing remains inside the frame. Now that I have determined the frame that I want to do, How do I treat the area below the one in gray? Also, I will take as long as I can draw what I want, just make sure that it is in the same alignment as the second one, and if I noticed it because I set the first frame, then it is the new one inside the splash screen, not outside, so it will grow a little like that. Until it stays in its second alignment, right now I want to take the color of what is this grey. I go again to the right side. As we said, I start to determine the color. The color remains the same. Is it the same shape as this one also? No, it is still like this, like this circle on the side. How can I do it when I select the rectangle that I am still working on. You will find here in the design settings there is a mark that is a corner. Let us enlarge it in this way. You will find that as it grows it will start to take this corner or this corner will remain circular. Let us, for example, make it 34 in this way. It will become exactly like this, but if we notice from Underneath, we will find it from below, not from below also, and I take it the same circle as the one above in the corner, not it, but it is in the basic design. There is no this circle . I want to leave it without the bottom, so it remains normal. Someone will tell me, of course, I can make it bigger like this and take the thing outside the frame. This is really something right, but Isn't it the best thing for the right design? Let 's go back to this setting and we will find something called this, which is called every corner, or every corner independently. We will find here what is at the top right, here is the top right, and here is what is below this. We need to make it zero. Okay, this is the bottom left. Here, let us also make this exactly the same design. Come on, let us raise this copy a little so that it stays in exactly the same alignment. So we made the same design. After we finished the design for this rectangle that we are still making, we need to make the circle that is in this text, but before that. Let's make this circle. Let's make sure of the size of the circle. Exactly what size is this circle? When we come to make it, let's go to the circle. As we said, we will determine the main splash screen and go down until we are sure that we are standing on the circle and stepping on it. When we came and stepped on it, we will find it written for you, its size is 104 in. 104 Ok 104 A in one hundred and four A 104 Length times 104 Width Okay, we will find this in the settings. How? If we go to the right, we will find something called Width and the length is fine, and the X and Y are in their place in the Y chord, or the % We also want to know something very important before we do it. It is how far away it is from the private alignment, so when we come to do it for it, how do I know this alignment on Windows? I will step on the one and find the course changing. I will start looking up, and I will find from here 164 and here 153 and 157. Of course it is not there. Exactly the center, because here the two countries are supposed to remain the same, the same number, but here the same number is not present, and from below it is 416. Okay, let us do this design in the way that we will select the second one and look up at the same tool. Press on the button below this and it will open for me such and such tool. We have it, which is the circle and I can I go to shorten it: I step on the keyboard, the letter O, and I do this on the letter O. I mean, of course, I specified that I can specify it so that it can be done for me inside. I will start making a circle in this way. I made the circle, but the circle is not perfect. A circle or a circle is not a parallel circle. I want to make it parallel. How do I step on a shift while I am making the circle and make sure? If I reach one hundred and four, one hundred and four, like the basic design, I did it. That's it. Leave the mouse and leave the shift like this. I made my own circle. Okay, I want to put it in the center. I start walking like this. You will find a group. Help me to put it in the center. This is how I put it in the center. Okay. Is it from above 64? Align it from above like this. Let's make sure, as we said, we step on it and we step on it and make sure from above, no seventy-one, not sixty-four. Okay, I want to make it reach 64. It starts with the control buttons that are from above and below on the keyboard. I go above that until it is 64, so now I made it 64. On each side, it is 155, so it is exactly like this in the text and the alignment is 64, exactly like the basic design. Well, as we said every time, how can I change the color? I step on it and I will find the number of elephants. I step on the elephant. I choose the color here. The color is simply white. I don’t have to step on the hydrometer. It is white. I select it as white, so it remains. White, in the form in front of you, exactly like the design. Now that we have finished the design of the circle, we want to put the icon or logo inside the circle inside our circle. How can we do this topic? Is it possible? I simply go to the circle, start selecting, click again, click, click again, click until I reach inside, and then select. The icon inside this circle I stepped on in this way, which is this vector. I do it. I go to my circle, I press the control on it, and it is placed above that, and then it remains inside the circle. I simply take the logo or the icon inside the circle remains in my circle. I do not need to do anything, I can also if I want to put it. Icon or logo other than this. What should I do? You can simply search on Google. You will find many types of free icons that people provide and you can open them, as we said. Now, for example, I found something like this. I opened it. I can take any icon I like. How will I get it? For example, I select this icon. Like this, I also press Control. I go to my file and specify, for example, here I press Control. It is now in this way. I want to make it bigger. I press Shift and Start Bigger so that it grows with me and I can put it in this place. For example, if I want to change this, it won't be my own, but of course we are designing the same design, so we need the thing to remain exactly the same as the design, so I can do it, and I did it as simple as if I took this icon from a copy and put it here. Come now, let's talk about how we can write words on the frame that we were working on first before. We do not do anything to see how the settings used in this text are done so that we can imitate it. As we said, I will start stepping on two or three steps until I reach this word, which it is. I stepped on it and it will close. This is what appears. I stepped on it like this in the text. If we use the right hand in the settings, we will find The text is the user who made Design SF, and here he tells you that the mark means that this font is not present on your device. We can replace it with anything, and here they used bold and size 34. Now, in order to write this word or this sentence, we will use the writing tool that is with the letter “that” and you can also go to it. You step on a shortcut on the keyboard, the letter that we stepped on the tool. I will come to be able to create a place like this, select or write in it, or simply just step on it and stomp anywhere and write the sentence. Select all the words. Make sure that it is 34 and I am born, and the font does not have to remain the same. This is a lot of unnecessary things. It is necessary now that you can use the font. Any font that is similar to the same story will remain in the speech below. We do not need to do it again, but it is possible to simply take the box of this speech in copy. Of course, it will also tell me that the font is not available. We take this speech in copy and go here and make it and put it here. Simply put, we will also check the settings. We will stand here. We will step on the one to see the distance between him and this person. 25. We will step here like this and see the distance between him and this person. No, 15 we will need to go down ten like this. 25 Like this. We finished this part quickly because we understood how we can do it. Okay, now we need to. We do the buttons for the order very simply, just as we said, your house is in the same way. Let us know its settings like this. Before we come to do the design, we will keep stepping like this until we reach its settings of 374 pixels by 56, and the alignment is here in the text, and we can see the alignment between it and what is above it. 48 pixels between it and The one above it is fine. Let's start like this. We will begin to answer the length. First, we will determine that our frame is Hindu. We will do this and then we will make sure that it is 300. It was said that here is how much 374 here is 374 in fifty -six. I think that it was like this. This is exactly the same. This is exactly the same. Strong in color as we said. Of course we are Hindus. Finally, let us choose the color. We made it very simple. How much of an angle is this border or corner so that it remains circular? It is here. Wish we will go here and leave it also. Wish we can make sure that it is exactly in the text. In the exact text. Is the alignment from above correct ? 42 here was how much it was 48 so we need Let's go down a little bit until we reach 48. We will also need to write this sentence inside it very simply. I will select the button. It will go to the writing tool. Write inside an order in this way and make sure that it is not my age. It is not the same age. It is almost very similar. Okay. Let's see these numbers. We will also go to the text. We will find the sizes 15 and 18. And it is written in the text. We also check these settings 15 and 18 and make sure that it is in this form. We put it in the text exactly like this, like this text, it is not exactly close to it because of course it is not the same font, but we are continuing to the same shape or close to it. So, take the sentence under this word or delete it. On it also, we will find its alignment from above 32, which is 64 times 18. Well, we cannot also take a cup and do it like this and move down to it until its alignments remain. We said, how many conversations are these, its alignments are 30, and we go down two until it remains 32, and in the way you see it, it is considered that we imitated everything and understood the concepts. There are so many things that can make you start dealing with the course. This is not complete. It was a crash course. It is not complete at all. There are still very many things that you need to know in Figma, but you have learned about most of the things that make you able to start. You can simply go to this link that will remain in the description. You will begin to apply it to the first page and begin to apply it to the second pages. Try to see if you will be able to achieve the same design in this same form. You will need to do a lot of research , but you will certainly arrive and be able to imitate these things. You will certainly need to understand many things, but I hope that this course will allow you to know Figma and you will still want to start in Figma. If you like the video, please leave a like and write us a comment. If you are in a long series of Figman, we will talk more about it and explain more about it, with all the original charm that is in it and all the secrets of the program, of course, and the performance is very great, and it contains many very special things, more than what we have explained here, of course, if you want to do it. A series or we will make other videos. Please leave us a comment. Don’t forget to like and subscribe. God willing, I will see you in another episode. May God’s peace, mercy, and blessings be upon you. [Music]
