From Zero to Web Design Hero: Conquer Figma and Craft Jaw-Dropping Websites in 2024

1. Introduction to Class: Hi, welcome to my Figma and UI UX design bootcamp. The only class you need to create, web or app design. My name is Peter, and I am so excited that I had the privilege to be your instructor on this course. Over the last few years, I have had thousands of people learn how to code and upgrade themselves. This class covers all the concepts and topics that you need to learn and master about Figma and web design. We start off with basics of Figma, like toolbar, layers, panel, grid system, color theory, typography, working around with images, wireframes, animations, and prototyping, and a whole bunch more. We'll also create a real-world project. Now you can add in your portfolio. This class is for anyone who wants to learn about Figma as a UI UX designer, or someone who just want to have some general understanding of designing websites or application regardless of previous experience, it's a one-stop shop. It's the only class you'll ever need to learn about Figma. By the end of this class, you can expect to design not only mobile applications or websites, but also work around creating thumbnails or infographic content for social media handles. Thanks for checking us out. I'm super confident that you'll love this class. 2. Introduction to Figma: Hey everyone. Welcome to the very first lecture for our Figma course. I'm going to introducing you all to the topic Figma. And we will also learn the difference between our UI and UX. So without further ado, let's just start with today's lecture. So what is sigma? So Figma is actually a Cloud-based real-time collaboration design tool. Well, cloud is just a virtual space on the Internet. It acts like a server. You all must have used Cloud-based applications like your Google Drive and stuff. So cloud is just a virtual server which is present out on the Internet. This Figma allows you to collaborate with other people in real time while you are making your design. So don't get confused from the very first go, okay, You'll learn each and everything step-by-step. So don't worry, just follow along the course. And if you have any questions, you can always comment down below. Alright, so what are some of the features of Figma? So Figma basically gives us designing tools. We can design your mobile project. Let's say you are trying to create an Android application. So before you actually start coding any application or any website that you're trying to develop. It always has a front-end and back-end. Front-end basically means that you are trying to emphasize on the interaction part, what the user will see, what the customers or your users or the clients, we'll see what it will be displayed on their screen. That's the front end part. Basically like your items, your buttons, your text, images, graphics, typography, all that stuff is included in the front end part. So if you guys are familiar with web development, you all must be knowing that there is a front-end and back-end. Front-end basically means that you are actually dealing with the design stuff, like your thumbnails, icons, buttons, topography, graphics, and all that stuff. So that's the front end part. That's the part that the users are your clients will see. So any application, any website has a front-end and back-end. Back-end deals with the server part. What will happen when the user clicks on a specific button? What is the function that it needs to run? What is the functionality or what are the things that it needs to display, how it will display, and all that stuff is dependent on the back-end part. So all the front-end and back-end is to be coded. Now you can go to with any of the languages, okay, There are so many different languages, like for your, for your web development, you have your HTML, CSS. There are some of the frameworks for CSS, like your tailwind, CSS Bootstrap and all that stuff. So you don't need to worry about it because this class does not focus on all those different components or frontend, we're just emphasizing on the designing part. So before we even try to code the front end code, before we even tried to develop the front end part. Obviously, whether it's front-end or back-end, everything has to be coded. So before we actually jump into coding part, we want to actually form a layout. We want to form a blueprint based upon which we can develop our front-end. So that's the reason why UI or UX part comes into the picture. There we have our Figma and other design tools with the help of which we can actually design our project any application. So with Figma, you can not just only create a mobile project, but you can also create a tablet application or a tablet project. And you can even design how a desktop application or a web application would look like on a laptop or a computer screen. So those are some of the features of Figma. Alright, another feature is that there is a prototyping feature of Figma. Now what does prototyping actually mean? Well, imagine that you are creating an application, alright? Now when you are trying to develop the application, wouldn't you just like to actually have prototype or somewhat like, let's say, not a perfect stage for its deployment, but other attesting stage, a prototype like you're still dealing with that stuff. You're still, you're still testing out that stuff. So that's your prototype. So even in your Figma, when you create your own design, you can use the prototyping feature of Figma to actually look and see that how will exactly my application will look like on real time. When I click on this button, how it will interact and all that stuff will be done in Figma. And the best part about Figma is that you don't need to code a single stuff. Everything is GUI based and you need to just click on some of the things. And there are some keyboard shortcuts that you can use. So all that stuff is very easy and very simple to follow along. So don't worry, this course is very easy and I will explain you all, each and everything step-by-step. Alright, another feature of Figma is that a collaboration tool. Like, just like I mentioned at the very first start, that collaboration basically means that you can collaborate with your colleagues or let's say your clients. Let's say you are a freelance developer, you're a freelance UX developer, right? So you want to showcase your ideas, your design stuff to your client. So how will you show them? Will you just kinda got all this stuff and send them the video file? No. You can just share your login ID or rather you can say you can just share the link of your project. They can login and then they will be able to see what have you been working on. And they will be able to see that on real-time. So let's say if they leave some comments on the project saying that they want to change the color of their skin color scheme of your project. They want some different font style. They can do that and you will be able to see that in real time. So that's the most fantastic feature of Figma. Now, Figma is not just the only designing stool that is available out. There are also other tools like your Adobe XD. So the question arises that why are we not using Adobe XD? Adobe, such a great brand? Adobe has different products like your Premier Pro, After Effects, Photoshop, Lightroom and all that stuff. So instead of using that pretty premium software and a very reliable software, why are we using this Figma? Well, the reason behind that is figma is completely free to use Adobe XD. You need to pay some price. Adobe has its Creative Cloud subscription. You have to pay the monthly or yearly subscription fee in order to access those applications, otherwise you wouldn't be able to use it. Alright, so that's the main, main part about femur that it's completely free to use and it provides a collaborative tool. Alright, now, that comes to collaboration part. Let's say you are situated somewhere in the United States and you want to show your project and your belly is somewhere in Europe or in South Africa. So how will they see your project? You can just share your link. So that's the flexibility your Figma provides. Now coming to the part about UI and UX, are those things the same? Is there any difference? And if there is a difference, what is the difference between UI and UX? Ui basically stands for your user interface, whereas UX stands for user experience. Ui deals with the visual design. How will the application or a website or any of your project would look like. And with the help of Figma, you're not just dealing with the application designing part. You can even develop thumbnails for your YouTube videos. You can even create infographics. You can even create slide templates and all that stuff. So with Figma, you can not just only deal with the application part, you can also design your content. That's the best part about Figma. So UI basically signs that you are going to deal with the colors, the layout, the typography, font styles, how would the phone would look like? That's the topography part which were designed. Whereas UX basically means that you are going to deal with the user experience part. Now how will you actually determine that? That user will have the fantastic experience while using our application. So definitely there will be some user research going on. Like let's say you are conducting a survey and you are asking your customers or clients that how would you like our application to be? So your clients would respond something like, let's say that I want a very clean User Interface and I want things to be simple and very sophisticated way. I don't want any complex animations. I don't want any complex stuff to be in front of my screen. So I don't want any technical terms. I want the things to be displayed on front of my screen in simple and layman terms. So that's what your user researchers. So before developing the UX part, you need to have a proper user research. We need to emphasize on copywriting. So that's what you're going to fit the content of your application, right? So that's your copywriting part. Then you have the workflows that let's say if you click on a button, what other things should happen. So that's your workflow. But what are the different stages that will happen once you interact with the buttons or your icons on the application. So that's your workflow. And also how would the user interact with the application and what psychology you will be using in order to engage your audience, your clients, to the application or a website as much as possible. So that's your UX part. But although these are the differences between UI and UX, there are some of the things which overlap UI and UX and that's your wireframing. Now what does wireframing actually mean? So although we do have a dedicated lecture on wireframing, let me just give you a brief introduction about wireframing. So before you actually, let's say I'm a client comes up to you and say is that I want to make a portfolio website. Now the client is actually a chartered accountant and he's been in this industry for last ten years and he has great clients. Alright? Now, if you have to develop a portfolio website for this client, than what content do you actually fit on the page on the first page, on the homepage About page Contact Us page and all that stuff. So just forming a layout is your wireframing part. Alright, Then comes the usability. Usability is another common similarity between you and UX. That that means that how would the user use our application? So that is not just part of the UI, it is also part of the UX part, then comes up prototyping as discussed. Prototyping is just an application which has developed, although not in the final production stage, but in the testing stage, in a feature like you are actually using the application. So although the application is not completely ready, but you are actually testing it out. You are actually simulating in a way that it looks like the application is completely ready. So that's what you're prototyping actually means. So yeah, that was all about the sum of the introduction to Figma and all that stuff. You can just open up any of your browser that you are using. I prefer google Chrome. You can just open up any browser and tie figma.com. Once you go over there, you will see this page and you can just create your own account. So after logging in and this is what you will see. Now, once you've come to this page, you can just tell your team name. You can just form a D or else you can just do this later on. Once you form a team, what happens is that you can just share your team link and the members can join that group. And they will be able to see your projects which you are creating for that group. Now, although I said that this Figma software is completely free to use, there are some limitations to it. It means that you can have unlimited files. Like let's say you have some of your own assets like your images, some videos that you want to embed. All that stuff is completely unlimited. You can upload N number of files, but you can only design three files and you can only create one project. So that's the a setback of using your free plan. Although the free plan might seem like, you know, might not be enough for you to utilize all the features. But for this particular course, you don't need to pay a single penny to start with Figma. Alright, so let's just start with the free plan and we will continue in the next lecture. 3. Figma Overview: Welcome back to the course. In this video tutorial, I'm gonna be giving you all a quick overview to Figma as workspace. And we'll learn some of the things that we have in Figma. Alright, so as soon as you sign up and you create your own account, you'll be sent a confirmation e-mail to your e-mail. So just go over there and confirm that it's you and you're trying to create a Figma account. Once you do that, just kept all the things that it prompts you to do. They will also try to take you to a quick, they will try to give you a quick tour to Figma, but don't need to worry about it. I do the exactly the same thing over here. Alright, so now, once you actually come to this Figma as homepage, you will see that you have two options. You can either create a new design file or a new fig jam file. Now what is this big jam file? So think of it as a whiteboard where you brainstorm your ideas and explore some ideas. Alright, so that's your exam file. Whereas the design file is where you actually tried to design and create prototypes for your application. As you can see in the Results tab, in this particular left-hand side tab, you will see you have reasons. So the recent projects that you have been working on, you will see drafts. So the things that you have not saved manually will be saved automatically and you will see, and you will see it over here. So just like in your Gmail, you try to compose a mail and you don't send it, what happens over there? It automatically gets saved to the drafts part. That, That's what exactly your Figma is doing over here. Then over here you will see their teams. So how many teams have you created so far, and who are the team members? What is a team project that you've been working on? So all those things you will be able to see over here. Now, since this is the very first video of another, I should say that the very start of our course, I have not created any file so far. So all those things that you will see over here, these are the files that are already created by Figma team. And these are just so that you can take a quick look and understand how to use this and are designing tool. So let's just try to create a new design file. And once I click over here, you will see that this is how figma has workspace looks like. Now, they will actually try to give you a prompt that do you want to take a quick tour of Figma? So just click on this new tanks and continue with the workspace. So at the top you can see what you have is your toolbar. This is called as a toolbar because over here you have n number of options to work with. Now, besides this draft, you will see this as untitled. So you can just click on the drafts. But rather I should say that you can just click on this untitled and you can rename the project. So let's say I want to give this a title as test. So the title of my project is test. And once I click on this drop-down button, I have the option to show the version history. That means what were the other things that I had done previously? If I want to export this in a PNG or JPEG file format, I can do that. If I want to duplicate this project, I can do that. If I were to rename this, I can do that as well. If I want to delete this, if I want to favorite this file, if I have, if I want to move this project to another team, or let's say another folder location. I can do that as well. So these are all the functionalities in my toolbar. At the top we have toolbar, so you can see the toolbar. I have this cursor icon. Once I click on this drop-down, I have the option to move or scale. So move, you can just click on some of the competencies that you might have on your workspace and you can move them from one location to another. The scale part will actually try to scale your size. So let's say you want to scale by 1.5 times. So you can do that with the help of the scale. Then you have this as frame, section and slicer. If I click on frame, if I click over here, you can see a frame has been created for us. Now what does this allow us to do? On this frame? You can actually draw shapes. You can actually draw it using the pen tool. You can actually add some and all that stuff. So let's say using this rectangle box button, I have the ability to create any shape that I want. So there are some of the predefined shapes that you can create by just dragging out. So you have rectangle, you have lined arrow, the ellipse, the polygon star, and you can even place an image or a video if you would like. Now you can see there are some shortcut keys that you can press on your keyboard to actually just draw your rectangle. So let's say I click on this rectangle and I have to draw this. Now let's say instead of clicking over here, if I want to draw an arrow, so what can I do instead? I can just, let me just delete this. As of now. I'll just delete this using the delete key. Alright, I can just hold my Shift key and I will press my button on the keyboard. Once I do that, you can see arrow has been selected. You can see arrow shape has been selected. Now I can just drag this and the arrow shape will be drawn out. Alright? So this is what I can do this in my frame. So this is my frame and you can see all the different shapes that I have in my particular frame. So on the left-hand side, this particular part is my Layers panel. You can see I have different layers and currently we are working on the page number one. So you must have seen on many websites, we have homepage, we have about page, we have Contact Us page. Like in fact, even in my website, you will see my homepage. About page the contact us page. How many courses I have and all that stuff, all that is there in my website. So there are multiple pages. So just like that, if you want to first design the homepage, then the white one are designed the Contact Us page. Then you might want to design the services that you offer all that page. So you can just click on this plus icon and number of pages will be created for you. Alright, so you can just delete this if you want. Let's say you want to rename this page to let say the About Us page. So you can do that if you want to delete the patient by three, you can do that. If you want to duplicate some of the pages, let's say in the patient of a one, whatever we have created so far, I want to duplicate this so I can just duplicate and a new page with page number two title is created. Same exact things that I have in my page number one. And if I want to make some slight changes, I can do that in my pH2. So that's what Figma allows us to do. Alright, now moving on to the next part, there is assets in the layers panel. Now those assets allows us to create some of the assets so that we can use and different Sigma projects. So let's say right now, this particular frame has a tangle and an arrow shape. Now let's say I want to create an asset of this, although this asset does not mean anything, okay, it's of no use. It's not even a design part, but just for the sake of it, I am creating an asset so that I can use it in my other projects as well. I can do that. I have the functionality to do, to do that. Alright, so that's what our assets allows us to do. Now, in this toolbar, I also have the pen tool. Using the pen tool, what I can do is I can click on one vertex, I can click on the other vertices. I can drag this so on to create one object. So let's say this object has been created. So this is forming like a triangle. If you can see a triangle somewhat, a triangle has been formed. And to exit out of this, I can, what I can do is I can just double-click on any of the vertices and it will actually form one. I can just click on this Done. And you can see a shape has been formed. That's what append to allows us to do. I also have the ability to draw using the free hand, so that's what my Pencil tool allows us to do. So let's say I'm drawing this using the pencil tool. Rectangle has been formed, but this time around, I did not have to actually map the vertices. I had to draw it using the free hand. So if you have a graphic tablet than perfect, you will be able to use the pencil tool very efficiently. Otherwise, using the mouse, it's not the best way to draw a shape. You can use the pen tool instead. Alright, then we have the text box, alright? So you can, what you can do, you can just click on this text or you can just press the T key on your keyboard and you can click anywhere on the frame. Now, you can type anything that you would like to give and you can even set some of the color to your text. You can form the text style if you have, let's say you want to give this as, you want to form this text as bold and underline format. So how you can do that? If you want to increase the size of this font, you can even do that for that emphasize on this design properties panel, which is on the right hand side. So we might not be able to see it completely. Just give me a second and you will be able to see this design property panel completely. So now I hope you must be able to see this design property panel. And over here you can see that I have the ability to actually give this text color. So let's say I want to give this color as so I can give this red color. Alright, I have the ability to center align this text or maybe right align, left align and all that stuff. Then I have the ability to export this entire thing in a PNG format. If I want to do that, I can do that. So in this design property panel, you can just select any of the element and you can see all the design elements that you can deal with. So over here you can design, you can create prototypes, you can even inspect some of the elements. Now what does this Inspect Element actually mean? So if you have worked on web development, you must be familiar with HTML and CSS part. So you can see all the designing part is done with the CSS, with the help of CSS cascading style sheets, that's what your CSS stands for. So over here, if you want to do this exactly the same thing in your webpage, then you can just copy this CSS styles and you can paste it in your file. You can even import this in the CSS format. If you want to develop an iOS application, then you can copy this entire thing and paste it in your iOS project. In Android, you can do that the same thing. So even though you cannot completely get this entire thing in your Android or iOS project, pretty much the designing part is done by Figma itself. We can just copy the code and most of them, most of the job is done for you all. That's the fantastic feature of Figma. And yeah, that's pretty much about it. We also have the hand icon which allows you to move from one part to another. So let's say you have this interface number two, you have this frame one. And let's see, you also create one more frame. Let's say you are creating one more frame. So now you want to move from one part to another. You can just drag this using this hand icon. Alright, let's say if you want to leave some special remarks for this particular rectangle box. So you can just leave over here a common thing that does, this rectangle box look cool. And you can just put it over here. Now, when you share the link of your Figma project, you can see you can share the link. You can just copy this link and you can share it via e-mail or any social media platform. And when they come on to this project, they can just click on this and they can see what comment that they have left. And they can even make changes over there. So let's say this is the question that I'm trying to ask and some other person, my other colleague or my client can apply it. That okay. The box size looks cool, but I want to change the color of the shape so they can leave a comment saying that just changed the color of the box. Alright? And that's what our comment allows us to do. So this was just a brief overview to our Figma and how all the different tools are there in Figma. What are we going to deal with this entire course and all that stuff? So in the next lecture we're gonna be focusing on the toolbar only. So we'll look at each and every feature of our toolbar offers and we will try to create some things using the toolbar features. Alright. 4. Toolbar in Figma: Hey everyone, welcome back to another video tutorial. In this lecture, we will be focusing on our toolbar in Figma. So although I had shared pretty much all about toolbar, but there are some things left. So we are going to be covering in this video tutorial. Alright, so as you can see, this is our workspace. And in this particular frame, and in this particular frame we have a rectangle box, we have a comment, we have drawn a shape using the pen tool. We have drawn a rectangle using the pencil tool, we have some texts, we have some arrows. Now what about this figma icon? What does it do? What can we do with the help of this main menu action button? So you can just go back to the files, previous files that you have been working on, and you can just jump over to another file. So this is the test file that we were, we, we were working on. So I'm just going to double-click on this. And this Figma project will be opened up for us. If you want to actually import this file. If you want to export, rather I should say export this in the form of a PNG or JPEG. You can just click on this figma icon drop-down menu, and you can just click on this file and you have the option to export this in the form of PDF as well. So depending on the number of rooms that you have created, you can create the PDF. So let's say you want to export the frames into PDF format then. Currently in this page, page one, how many frames do we have? We don't have any other frames. We just have one frame, as you can see over here, highlighted is only frame one in the page two, we have two frames, frame one, frame two. So now if I would like to export this in the form of PDF, then if I open up this PDF, you will see that this PDF has two pages, page one and page two, the page when it's completely empty because this frame does not have any other elements. Now, although we have created this frame, we had drawn out manually using the cursor. What if you want to actually design an application? Or let's say you want to design a mobile application which is suitable for your iPhone. So what you'll do is just click on this frame, select the frame. And in the properties panel, this design properties panel, let me just shift myself to the left-hand side. You have different options to create a frame for iPhone 14, 14, 14 plus, let's say I want to create iPhone 14 frame. So these are the exact dimensions in which I might want to work for my application. So this is how I create frame for particular hardware device. I can again click on my frames. I can. And I have the option to choose any Android device and Android large phone, Android small. I have the option to choose between iPhone 814 and so on. I have different options to choose between different tablets, like your Surface Pro, iPad. I can choose desktop like MacBook Air, MacBook protein inch Pro, MacBook 816 inch Pro desktop. And I can create a presentation as well. So let's say I'm going to create a slideshow of 16 is 29 ratio, so I can do that as well. I can even create slides of four is 234 by three ratio. I can create an application or a design for my smartwatch. I can even create the size of paper, Let's say A4 size, A5 size and all that stuff. If I want to create an image for my Instagram posts and I can click on this and it will create a frame for exact data size. So this Figma also allows us to create a Twitter post, Twitter header and all that stuff. Figma has so flexible that it allows us to create frames for different things that we might want to work on. So as you can see, this is my frame. I also have the option to slice. So what does this actually mean? So let's say in this particular frame, one, frame, one, I want to actually slice some portion of it. So I can just click on this slice and I can drag the portion of the rectangle box that I want to export it separately. So once I do that, I can just click over here and I can click on the Export. Now, I can export this in the form of JPG, SVG. Svg is basically your icon format, SVG. If you, if you export this in SVG format, what basically means that you can use this in the form of fab icon. You can use this as an icon for your website. So that's what your SVG actually means. You can even export this in the PDF formats. If I export this in a PDF format, what it will do, it will actually export this. And let's try to export this in the PNG format. And once I do this, and if I open up, you will see that a portion of my frame has been cut out, and now it is this particular image. Alright? So this is how you slice some of the things you have the option to move and scale as well. Let's say you want to scale this shape, or let's say I will actually rather I should say, I will create one. Let's say an ellipse. I'll draw an ellipse. Cool. Now let's say I want to enlarge this circle shape. So if I click on this particular vertex and if I want to expand this, I can do that. But you can see the shape itself is also changing, but I don't want that to happen. So what I can do instead is I can just hold my Shift key. And now. Even if I move my cursor from top to bottom, you can see it's not changing the shape with the help of the shift key. You can see even if, even if I move my cursor from top to bottom, from left to right, it's just trying to expand my shape. It's not trying to change the property of my shape. Alright, that's what our Shift key allows us to do. You can easily expand your any shape, not just your ellipse, but even your rectangle or your custom shape. You can expand this with the help of Shift key. So just hold your Shift key and click on any of the vertex and you can expand that. Alright, so that's your shape that you might want to create. You can also create a star. So let's say you want to create a star. So just like you can see, as I draw the star, you can see the shape itself is also changing. So right now the edges are like long, but the width is very small, But I don't want that to happen. So what I can do instead is I can just hold my Shift key and I can expand my star shape. Cool. We also have different components. We can download some plug-ins. Now what does this plugin actually mean? So if you've worked on WordPress, you might be aware about plugins. So plugins are basically some functionalities which are audited, developed by some developers. And they are now freely available to run. Now once you install those plugins in your particular project, most of the job is done by the plug-in itself. You don't have to worry about how you will do that stuff manually. So just like you can see about your flat icon, what does this plugin will do? This plugin will actually help you to import some of the icons directly from this flat I can plug in. So you don't have to actually go to another site, search for the plugins, download them, and upload over here. You can just directly use this plugin. Once you install this plugin for your project, you can just search the icon that you are looking for and that will be directly imported in your project. So that's the cool feature about Figma, that you have the ability and the wide variety of choosing between different plugins. Not just that you can even export your design form of Jeff or a video format. So normally you can see, you can either export your Figma project into a PDF format or in a PNG or JPEG format, basically just a static format, not in a dynamic format. So with the help of these different plugins, you can even export this in a video format. Alright, then we have different plug-ins and stuff so you can search and download the plug-in based upon your requirements. It's not anything rigid or fixed that you have to use this particular plugin. We also have different widgets that you can use. We also have the ability to integrate our Jira and Asana. These two are the project management tools which will allow you to deal with you workflows and your team. Alright, so these are all the widgets that we have. So yeah, that's pretty much about it. That's what we have. Otherwise, rest of the stuff like your text, your comments, different shapes, the frame, the move ability to move different between different objects and your frames has already been covered in the previous lectures. So I don't have to iterate through those things again and again. Alright, so that was all from my side for this particular lecture. I will see you guys in my next lecture. Take care. 5. Layers Panel in Figma: Hey everyone, welcome back to the video. In this video lecture, we will be looking into the layers panel. So although we have covered about the Layers panel previously, we have some things left to cover. So as you can see in this particular page, number two, we have different frames, alright? And in each and every frame we have different shapes and vectors that we have created, right? And by the way, this vector is nothing but the shape that you created using the pen tool. So that's what your vector is. Now, let's say if you want to actually rename some of your shapes, let's say instead of ellipse one, you want to give this title as you can just click over here or over here. And you can double-click on this particular object and you can just give any name. Let's say I'm gonna give this title as circle, circle one. Instead of ellipse one, I would like to give us circled one. Alright? And that's how I can rename any of my shapes, not just shape, any of the things that you might have created inside your Figma workspace. Now, what if you want to delete some of the things which you have in your, you know, your workspace. Let's say you want to delete frame three. You want to delete this iPhone 14 frame as well. How can you do that? Well, you do that manually, like right-clicking on this particular frame and then just looking for a delete or maybe just clicking on the delete button. You can do that, but there's a shorter way to do that. You can just hold your Shift key and you can select multiple things, and you can just delete your entire frame. So you can see all these things have been deleted so far. Cool. Even this frame will be deleted, right? So that's what we are left with, only frame number one. Now you can see right now we are at the Zoom. The Zoom percentage is 78. Let's say I want to zoom to about 01:25. So I can just hold my Control button and I can use my mouse scroll wheel. Using the mouse scroll wheel, you can zoom in and zoom out, but you have to hold the Control button. If I hold my shift key and if I use my scroll button or my, you know, my mouse scroll wheel to actually toggle between the left hand, right hand side of my workspace. I can do that. So instead of actually manually using my cursor and my mouse, actually moving from the left hand side to the right-hand side, navigating to the left light, right. I can just hold my Shift key and I can use my mouse scroll wheel. Alright, so those are some of the things. Now I can even group some of these things. Like I can just use my cursor, make sure that you have selected this move button. And you can select entire thing. And now using this, you can just group them using the Control G. So everything is now formed under one group. Now I can move them. You can see each and everything can be moved. This entire thing can be moved. Let's say I create another frame. Okay, I can create another frame. Like, let's say, I want to create a desktop frame. Alright? So for, let's say MacBook Pro 14 inch. So you can see MacBook Pro 14 inch frame has been created for me. I can just drag and I can place it over here or else what I can do is I can just make a duplicate copy of this and I can paste it over there. To do that, I can just hold the Control and I can click on D or Control D, and that will be replicated over here. Alright, I don't have to do that. Control C and control V. I can just do Control D and I can drag the duplicate copy of it. Alright, so you can see I have two frames in my page number two, and I can toggle between different pages as well. So I have different pages, but I want to delete other pages. So what will I do? I can just click over here and I can click on the delete, or I can just click on this right-click and delete it. Alright? So this tick mark basically represents that you are on page six or else you can even see over here that you are on page six. Alright, I'll just delete this. And now we are in page to page two. We have the MacBook Pro 14 inch frame and the frame one that we have actually drawn manually. Alright, Now, what about assets in the layer panel? What about it? How can we make use of it? Let's say, I want to actually create one asset of, let's say a car. You must have actually seen a car on a website. If you're not aware about it, let's just try to create a simple card. Alright, what I'll do is let me just click on this group too and I can delete this one. Alright. Now what I'll do, I'll create a rectangle shape with color as white. Let's just give this as white color. And I will give this as rather let me just move this out of my frame, otherwise you won't be able to see what I'm doing. Alright, so this box has been moved out of my frame. Now I will give this border radius. Now, I'll just click on this. I have the ability to give border-radius. So this is my corner radius. Now I'm from the web development background and I like to call this US border radius. You can even call this S corner radius in Figma, we call this S corner radius. So if I say, I want to call it a radius of about ten. So let's say 20. To zero. So you will see that there is some slight a bended edges. The edges are not sharp. This is possible using the corner radius, I can even change this to, let's say 50. 50 is what I have selected. And yeah, that's pretty much ****. And now what I'll do, I'll create one. I'll create one ellipse. Alright? I will create a textbox. I can give the name as do. I want the color of my text to be black. So let's just get this as Black. Joe. Bloggs increase the text size as well. So instead of just, Well, let's just give this as 24. I hope it would be visible for any four. Let's just enlarge to 36. Yeah. So the name of this person is Joe Bloggs. And what I'll do, the next thing we want to do is I can just say something like web developer. Okay, we need to change the text, color, and size statistics. Yeah. So web developer, freelancer and portals. We can see software engineer. Software engineer. Alright. Now, I can just select this entire thing. I can make use of the center line texts. Alright, I can enlarge the text box size so that it appears nicely. I can just click over here. I can enlarge this. Right? Yep, that's pretty much about it. Now what I'll do, I'll make use of the Unsplash plugin so that I can import an image. In the plugin section, I can search for Unsplash, and I can click on this Run button. Once I do that, it will take some time to actually run this particular plugin for you. And you can search for any anyone. Let's say you want an engineer? Engineer? I just search. Yep. I'll just click on this image. And I can drag it over here. So this image is too big, but we'll fit it according to our, um, you know, you can see once I drag it inside my ellipse, it, it had actually resize accordingly. Alright, so this is how my card looks like. Now what I can do is I can just select this entire thing. I can select this entire thing. And what I can do, I can group them using the Control G shortcut key. And I can use the control all ten K to actually form an asset. Now this group two is now my asset. Or else what you can do, you can select this entire group and you have the option to create a component. So you can just create a component and now an asset has been created for us. So you can just go to this assets part and you can import this asset inside your MacBook Pro 14 inch or any other frame or any page that you would like to use, let's say from page one to About Us page I would like to import that asset. So what I will do over here, I will just create a new frame, let's say, of my iPhone Pro. And now I would like to bring my acid. So now you can see that asset has been brought up, correct? Let's say this frame has a background or I can import this. You can see it is exactly the same way. Even the dimensions are the exact same. 5.7 by 616. If I go back to my page two, I guess. Yeah. So by here also we have 5.7 by 616. So that's my width and height. So these are all the things that I was able to do using the layers panel and the toolbar and all that stuff. 6. Alignment & Distribution in Figma: Hey everyone, welcome back to another video. In this video tutorial, we're gonna be learning about alignments and distribution in Figma. So as you can see in front of my screen, I have created a frame inside which I have a tangle box. Now, you can see as soon as I select my tangle box in the design properties panel, I have the option to actually align my box. So I can either align it to the left. I can either align it to the right, or I can even align it to the center. Now what happens if I choose this aligned left? So as soon as I click on it, it has aligned it to the left-hand side, leftmost side. You can see, now if I drag it upwards, you can see it is possible, although I can even place it somewhere in-between, I can do that. And as soon as I click on the Align Left button, again, it has aligned it to the left side. Again. Now, this is happening with respect to the x-axis. As you can see, it is happening with respect to the x-axis, correct? Now what if I actually want to align this particular box to, let's say, align horizontal centers. Now what happens in this case, it is actually, it is actually aligning our box in the center position with respect to the x-axis. Similarly, if I want to align it to the right, I can do that. As you can see, once I click over here, it has no aligned it to the right. If I click on this button which says that aligned to the top, it is now aligning my element in the rightmost side. Now why is that? It's because we have already selected that. We want to align it to the right. What if I want my box to be at the topmost position, but not in the rightmost side, but instead in the center most part. So I can select the center. And now you can see it's also centerline, but it's also at the top most position. So this is happening with respect to the y-axis. The alignment to the top is happening with respect to the y-axis and x-axis. Now what happens if I select align vertical centers. So it's aligning with the respect to the y-axis, not x-axis. So even if I put it this way, let's say I'm placing it somewhere over here. Now if I do this and you can see it's aligning it to the center with respect to the y-axis. So even doing the x-axis, my boxes towards the left hand side, it has align it to the center most part with respect to the y-axis? Correct. Similarly, I have other options to align it to the bottom as well. That means it's going to attach to the zeros and the y-axis, Correct? I can even align it to the otherwise like let's say I want it to be on the rightmost side, but also at the bottom. If I want at the top. And I want it to be Ireland, I can do that as well. So these are some of the things that I wanted to show you all. Alright? So that was an individual element. Now what happens when we have a group of elements? Let's say I have this box and a smaller box as well. What if I'm trying to What if I'm trying to group them together? Not exactly trying to group them with the help of control G. But instead, if I can just select this with the help of this move button, I can actually select them. Now if I tried to align this to the leftmost side, then you can see that my image has now been gone. My rectangle box has now been gone, but it has not gone anywhere. It is just behind or you can say it is just in the leftmost side with respect to my parent element. So once you try to group some of the elements, what happens is that Figma automatically understands that the smallest element, the smallest shape is the child element, whereas the element which is in the bigger shape when the bigger size is your parent element. Similarly, we also have siblings, which means that let's say I also create, let me create one more box. What I can do instead is I can just try to do this Control D. Once I do that, I can drag. And now a sibling element has been found. So both of these are acting as a sibling's, whereas parent of these two boxes is my big rectangle box. Now if I try to align them, what if I tried to select this entire thing and if I try to left align them, you can see both my boxes, this box and this box has now been aligned to the leftmost side with respect to my x-axis. It's because my parent is happening with respect to my parent element. If I try to select this entire thing again, now if I tried to align it to the rightmost side, then what happens in that case? You can see it's aligning with respect to my parent element, not the thing that I was actually hoping for. I was expecting that this Euro, my sibling elements would align it to the rightmost side with respect to frame. But now it's happening with respect to my parent element because now they are under that hierarchy. Alright? If I want to align them in the universe, this horizontal centers, then you can see it's aligning in the center. I can even change the color so that you can see that where exactly my boxes. So I can give this as red color, even this as the same red color. Now you will be able to see that they are now both being aligned in the center most part. Correct. Similarly, I have this text Figma inside my rectangle box. Now if I try to select this and if I want to align them, Let's say I want to align my text Figma at the bottom. My box is not moving anywhere else. The boxes at the exact same position. What is moving is my text box, my text element. Right? Now, it has been aligned to the bottom most part. If I want to align it to the center with respect to the y-axis, I can select this particular element if I want it to be at the top with respect to the y, I can select this. If I want it to be right aligned, then you can see it's happening with respect to x. So when you are trying to align it to the left or right, it will happen with respect to the x-axis, but you want to try to align your top or bottom. It can happen in both ways, XOR y. Alright? So this is what your parent and child element does, and that's why it's important for us to understand how layers are actually formed, how the hierarchy is formed. Alright? Even though you have not formed a group over here, you are trying to align them in a group format, but it's not a group. You have just selected this entire thing. And Figma automatically understands that this has now formed a group. Let me give you an another example. In my frame, Do I have different boxes? You can see all to the size of my boxes exactly the same. The alignment is pretty much different. What if I want to align them and group them together in such a way that it forms like a numeric keypad. You know how the structure of our numeric keypad is. So what I can do instead is I can just drag this entire thing and I can select all these elements. Now you can see at the bottom right, once I move my cursor over here, I have the option to actually align my boxes in such a way that it forms like a numeric keypad. Or the structure of it will be such that it will be aligned with proper spacing, proper alignment, and stuff like that. So once I click over there, you can see the first box, box number one. You can see it is now in such a way that it now belongs to the leftmost side with respect to the x-axis and at the top most position with respect to the y-axis. The second box is now at the topmost position, but it is in the center aligned with respect to the x-axis, not in the y-axis but in the x-axis. Whereas this element is aligned in the center with respect to the y-axis and also central atom with respect to the x-axis. So that's how it was able to do that. And this particular thing that I did just now was nothing but the ability to tidy up. You can see we also have a shortcut key to do that. You can hold your control Alt, Shift and D keys to actually tidy them up. Otherwise, if you want them to be distributed, horizontal spacing, you can see this is how it will look like if you want them to have a vertical spacing. This is how it will look like right? Now. Although we are going to cover about the grids and all that section later on. You can see that we have some pink highlights. What does this do and how will it help us? Now let's say I have this pink space, the space which is left between these two boxes. If I expand this, then you will see the equal amount of space, which is the value to 08, is left between my box one and box two. Similarly between box one, box three, box four and box phi and so on. Since leaving some exact an entire space, I can do that with horizontal as well. You can see I can leave the exact same space that I want them to have. Alright? I can even, you know, pick some particular boxes that I don't want it to be aligned. I can just hold that particular box and I can change the alignment of it. So yeah, that's pretty much about it, about your alignments and distribution. So one thing to remember is that Figma will always try to align the layer to its parent element. It could be your group, it could be a frame or containing the frame of the component. So that's what you need to remember. And based upon this knowledge, you will be able to create beautiful designs for your website or applications. 7. Grid System in Figma: Hey everyone, welcome back to another video. In this video tutorial, we will be learning about the grid system in Figma. So all the guys who are familiar with web development, they all must be knowing about the flexbox margins, padding, the grid layout in web development aspects, because we have learnt in the CSS, even if you have not watched my course, I'm pretty sure that any of the course or class that you must be enrolled in with respect to web development, you must have learned about your grid system. So the grid system pretty much stays the same in Figma as well. So what does that mean and why do we use it? So basically we use the grid system in order to make our application, or rather I should say, website and application Android application would not be so much responsive. Website definitely has to be responsive. Responsive basically means that, let's say this particular laptop that I'm currently using has 15.6 " of display. What if this website is being trying to access by a mobile device? Now, mobile device generally don't have a larger screens, correct? They are generally in the ratio of six to nine. And the size of the device is pretty much small compared to your laptop screens, correct. So over there, how would your website would look like? Well, some of the portions be cut or only some things will be displayed and some things will be hidden. What will happen in that case? Generally, if you just open up your phone and search for any of the website, do you see all this stuff? Yes, of course you do all this stuff. Alright. That's because the website that you are accessing is responsive. So any website that you're trying to build or even access has to be responsive because in today's date, there are so many different devices, not just your smartphones, but we have your tablets, we have laptops, we have desktops, we have smartwatches, we have cell phones. So these different devices have different displays and according to that website should be should accommodate the content according to the size of the device. So for that reason, we have the grid system. With the help of grid system, you will understand that how I can resize my elements of my webpage so that it can fit that particular size of the device perfectly. So as you can see, I have created a frame which is off MacBook 16th inch MacBook Pro 16-inch size. And make sure that you have enabled this grid layouts. Just make sure that you can see the layout grids. Otherwise, even though you might have selected the grids, but you might not be able to see it just because you have hidden this part. So just make sure that you have selected this thing. So just click on this plus icon and you can see grid has been formed. Now, this grid is in column and row wise. What if you just want to view the columns, the column grid? So now you will be able to see the columns only. Now the spacing between these two columns, this column and this column, the space that you have, the whitespace that you have is called as Godot. The gutter is the space between your columns or even rows. If I want to display in a row format, you can do that as well. What if you want to leave some space starting from your frame? When your column actually starts, a row actually starts, that's your margin. So if I say that the margin has to be about 50 pixels. Everything over here, margin or your border-radius, your corner radius, the size of the box, and all that stuff is all in the pixels format. There are different units like your pixels. In CSS, we have different units like your pixels. We have, we have EM RAM, we have percentage wise. So in Figma, to make things simple, we only have enough pixels format. So make sure that whatever you are typing, you have pixels unit in the mine. Alright? So if I enter 50, so you can see there is some space left, alright, now, if I want to actually adjust the gutter size as well, I can do that. Also. Let's say I want the gutter size to be 30 pixels, then you can see the column size has now been decreased. If I want the column count to be increased to, let's say ten, then you can see it has no meaning. It has now fit ten different columns inside of our frame. Now with the help of this layout of your columns, what you can do, you can arrange your elements in such a way that it leaves some specified space between these elements. Like let's say if I create a rectangle box over here, alright? And if I do the same thing over here, you can see it is leaving 42 pixels of space between these different boxes. Alright? So that's my space bar if you want to actually. And by the way, if you can see, if I select my rectangle box, you will see in the wet section, focus on the design property panel. Inside this width, W stands for this, h stands for height. This is the dimension in the pixels format, okay, 124 by 78. And this x and y position says that 62 pixels of space is left starting from my frame. If I try to move this box towards my, this rather I should say x-axis, then you can see the x-axis value decreases to 13. Initially it was somewhere around 62, now it's around 13. Alright, let's now around 13. If I move this upwards, then you can see the value of my Y changes. So this space, 47 is the space from the top pill where my actually box starts. So that's my Y position and this is my x position. Alright? So this is how you'll be able to create responsive design. If you want to actually figured out how much space has been left from here, from this point to this point. From this point to this point, you can make use of the rulers. So just go back to over here and select rulers. You also have a shortcut key which is Shift R to actually enable rulers inside your project. So now what will I do? I can actually, I can actually create the center. I can click this entire frame and I can bring my ruler. So you can see ruler is now placing, has been placed over here. So now if I click over here, you can see 62 is the position from my y. And if I move my ruler, if I move my ruler, you will see that it will also display the value 47. Let me click my ruler again. Why it's not showing the x-axis position. So if I want to actually bring a ruler which will measure from the x-axis or the horizontal way. I'll just need to drag from the top to where I want my ruler to be. So you can see it's now in this particular position. Alright? So this is what your rulers will allow you to do. So that's about it. And what are the what are the things that we are left with? By the way, if you guys want to actually have a look at all the different shortcut keys that we have for Figma. You can just click over here and you can go to help an account and you can just click on this keyboard shortcuts or else what you can do, you can just hold Control Shift and the question mark button. Once you click over there, you will find all the different shortcut keys to zoom in, to actually navigate between different tools, to actually select some of the elements and all that stuff. So you can just see all these different shortcut keys which you have in Figma. 8. Color Theory: All right guys, welcome back to another video. In this video lesson, I'll try to explain all about color theory. And I tried to explain all the critical information without making it very complicated for you all. Now when it comes to color theory, there is a lot of information out there on the Internet. If you've worked with any kind of design work before, then you are probably familiar basics of color theory. But if you're not, maybe you just need a little bit of refresh. So without wasting any time, let's just see how it goes. So first of all, let's look at some of the types of colors. The first one is your primary color. Now primary color involves your red, yellow, and blue colors. Upon mixing these colors, we get our secondary colors, which are green, which we get when you mix blue and yellow, we get orange. When we mix yellow and red, and we get violet or purple when we mix blue and red. Now upon mixing your primary and secondary colors, you get the tertiary colors. When you mix blue with green, you get blue-green. When you mix green and yellow, you get a yellow green. Green is actually your secondary color, whereas yellow is a primary color. So when you combine both of these colors, you get a tertiary, which is yellow, green color. Let's look at some of the color terminologies in Figma. So I'm just going to hop into my Figma. Now I'm going to create a rectangle box about the size. And I'm going to explain about US. So what is the you you must have heard about Q so many times when you might be using photo editing tools like your Lightroom or Canva. So u is just your color when you choose the color from here, this is your hue. Use just a color. So if you select this cursor, you point it to the leftmost side. It's going to say that you have the ability to choose between different shades of red color. So the purest form of any color is basically a you. Alright? So if I drag my cursor from this side to maybe let's say this side. So I'm going to get a proper saturated blue color. If I drag this towards this side, I'm going to get green. If I drag this towards this side, I'm gonna get a pink or purple color, right? So that's my u. Let's talk about tints, shades, and tones. Now what about tens? Alright, let's just imagine that the color of this particular shape is about blue. Alright? Now I'm going to create an exact same box replica of this box with a white color, right? White color with opacity of about 40 per cent. So I just modified the opacity by pressing the F4 button on my keyboard. And now you can see the opacity of my shape has been changed to 40%. Alright? Now, if I move this shape over this shape, you can see that the box color has now been changed to a light blue color, right? So ten is basically when you add a white to a specific color, that's your tendon. Alright, let me just make another box so that you'll be able to see the difference in the color. So the bottom box, this box is the purest form of my color, whereas this one is the tint of this particular color. So that's how I was able to achieve with the help of Tinder, right? What about shades? So, imagine that instead of this particular box of being black instead of white, you can see this is black color. If I drag this on this particular box, alright, I will get a darker blue color. I was able to achieve this particular color because I add black to a specific color. You can see the clear difference between these two colors. This one looks much more dull, right? It has some darker shade to it. Whereas this as a more pure and natural format. Let's talk about tones. Now. Tone is when you mix up your color with a gray color. Let me select this color, or rather this particular box with the gray, right? This is a gray, right? If I drag this or this particular box, you will see that this is how my shape looks like. Right? Now. If I want to match this color of this box with this box, then I will have to move my slider. I will have to move my slider towards diagonally. That means in the left, bottom left side, that's how I will be able to achieve this exact color. You can see once I move my cursor, the cursor, I'm able to fetch that exact same color. Somewhat same. Yeah, you can see somewhat same delay is possible because now I have added some gray to my natural color. If I want to make this shape a bit darker, right? If I want to make this color a bit darker or add some shade to it, I will need to drag my cursor towards the bottom right side. This is going to give me a darker and add more shade to my color. If I want to add more to this, I will have to move my cursor towards the top left side. Right. That's how I'll be able to get attend to this color. Let's talk about saturation. Now, saturation is another terminology that is used quite often when we're talking about colors and color theory. It basically tells us how rich or it could be. So imagine that this is the purest form of my color. So you can see how much amount of blue is added into this particular box. So this saturation level is at 100%, or you can see the saturation is at most. If I add more dullness to it. You can see this particular color is not saturated. It's done. Talking about brightness, which is contrast to this particular statement of saturation, is when color is closer to a white or a black on a scale. Say if I'm moving my color towards the rightmost side, you can see that the color blue is very bright. If I move my cursor downwards, you can see that the color is not that bright color. So that's how I'm able to say that, you know, that this particular color is not at Albright. Talking about color temperature, we have either cool colors are warm colors. Cool colors are those colors that we have which are pleasing to or cooler, whoever eyes, those are blue, green, and purple. Talking about warmer colors, they are given the terminology as one because they are pretty much warm for our eyes. So colors include red, yellow, and orange. If I move my cursor of the EU, who has left hand side, you will see I will get the warmer temperature, right? If I want to modify the temperature of my color too warm, I will slide towards the warm. And if I want it to be cooler, I will slide it towards the right-hand side. These are the cool colors. So those are some of the terminologies. Let's talk about some color models that we have. Let's talk about RGB. Rgb is a pretty popular color model that we have been using for quite a long time, even in CSS. Whenever we are dealing with assigning some colors to our elements, we generally use the RGB statements or RGB unit. So RGB stands for red, green, and blue. So all those PC gamers, much fascinated by RGB strips and RGB lights. Rgb stands for red, green, and blue. And it uses the additive mixing of light to create different colors. Now, all our display screens have different LED lights. Now, these LED lights have three intensities. Red intensity, green intensity, and blue intensity. Now, based upon these intensities of different lights, you are able to see all different colors. So even in my laptop screen, I have tiny transistors, diodes, and cumulatively, they form these different colors. If I say that I want to form a black color, the intensity of my red, green, and blue diodes would be the minimum or the lowest. So now, since the intensity is not being provided, naturally the color would be black. But if I want the color to be white, all the lights that those are red, green, and blue, the intensity would be set too high. That means all three colors are growing up at its maximum capacity. And now I would get the white color. So when you overlap red, green, and blue at full brightness, we get white. And this is how our screens work, not just our screens, but even, even my mouse over here. You can see this gaming mouse. It's able to change different colors. Let me just show you. So these are different colors on my mouse. So it's able to fetch these different colors because this has different light diodes, LED diodes. Now these LED strips, they do not have any other colors. They just have red, green, and blue based upon its intensity of light, it's able to visit different colors. So that's how RGB model works. Let me show you how we can work with RGB model in Figma. So as you can see over here, if I choose from hex to RGB, I have the ability or the option to add the values. Now I can add the values from in the range 0-255. The value to 55 is the maximum amount that I can give to either red, green, or blue. Now the first unit or the first value that I will enter will represent the red color. The second value represents the green, and the third value represents w. Since in this case, I have a cooler color. I don't have any red color to it. That's why we have zeros in red. As you can see, since this color is more towards the blue side, you can see the saturation of blue is at maximum, that is 255, although there is some shade to it, we have some green also. That's the reason why we get this cooler tone of this particular color. If I want to change this to, let's say red, then I will set to 55, 55, the others as zero. That's how I will be able to get up your red color. Alright, that's my RGB color model. Let's talk about different color models as well. Second one, we have the CMYK. Cmyk stands for cyan, magenta, yellow, black, and to create colors, this model uses what's called subtractive mixing. Now we're not going to go in detail about CMYK color model because this is mainly used for printing purposes, we don't generally use in Figma or any of the designing tools, whether we're designing an app design, website design, or any content creation, design stuff, we don't use the CMYK model. We generally use the RGB and other models that I'm going to discuss. Another one is your HSB. Now, HSB, it stands for hue, saturation and brightness. These three color terminologies I've already discussed. Still, if you're not clear about those, rewind back to those part and you can refer it again. Now, this particular color model uses a mix of these three attributes to create different colors. Let me show you in Figma. So instead of RGB, if I choose this HSB, what will happen? You can see the maximum value that we have is 100 and the lowest value that we can get is zero. So if I set this to 100, you can see the EU is 100, saturation is also 100, and the brightness is also set to 100. If I set the brightness to be zero, I will get this as black. Why is that? Because there is no brightness to it. The color is completely done. It's black, right? If I set the saturation to 50%, Let's see what happens. You can see still it's black because the brightness is set to zero. If I set the brightness to 50, it will be somewhere over here, right? If I set the hue to be, let's say 50, then this will give me this particular ocher color, right? That's how it's able to give me u, saturation and brightness. So you value depends on where you put your cursor on this particular scale. That's what might you say is, let's talk about other models. So hexadecimal is another color models that we use. Hexadecimal is a really friendly way of displaying your RGB colors, because the first two letters or numbers refers to the read. The next two rivers to green, and the last two refers to blue. Now all those people who are familiar with CSS might be using hexadecimal. Now generally in CSS we use the hash symbol before writing our hex values. But in Figma, we don't need to do that. So if I go back to my Figma, you can see I can select the hex value as well. Now we're here, as you can see, we have 40 AD and for the 40 value represents my red, AT, represents my green, and the four represents my blue. Now why do we have let us know via, because if you have learned about hexadecimal values, all the values which are in two digits, like you're 10, 111-213-1415. These are represented in the lattice format. Otherwise 0-9, we have numbers. So the letter a represents the value ten, because in hexadecimal value we cannot write ten otherwise it will be represented as one NCO. So that's why we have the letters as a, B and so on. So these are my hex values, right? And if I want to change this to, let's say, this particular value, you can see the hex value also changes. So let's take a quick recap about what we have learned throughout this session. So there are three primary colors, red, yellow, and blue. These represent the building blocks for all the other colors. The secondary colors are obtained by mixing the primary ones, like red plus yellow will get orange. If we mix red and blue, we will get purple or violet. If we mix blue and yellow, we will fetch green. Tertiary colors are operating by mixing primary and secondary colors. You is the dominant family of a given color. The CMYK color mode uses cyan, magenta, yellow, and black colors, and they are mostly used for printing purposes. That's why we don't incorporate this particular color model for Figma or any design tools. Lastly, we have RGB, HSB models that are used in digital media. And hexadecimal color format is more friendly way of representing RGB colors. So yeah, that was all from my side for this particular lecture. In the next lecture, we're gonna be learning about color harmonies, the psychology of using different colors and different tools that we can use to help us in our project making. 9. Color Harmonies & Psychology: Hey everyone, welcome back to another video. In this video lecture, we are going to be learning about color harmonies and the psychology of using different colors. Now when you're working with different colors, it can be a bit daunting, especially for beginners, because you know the color theory, but you don't know how to incorporate different colors into your specific project. So that's the reason why we have color harmonies, the color palette, and the psychology of using different colors. Now, let's just take this formula one website for an example. Now how did formula when come up with the idea of using red color in their project, in their website. Well, there are no as such set of rules when using different colors for your project. But there are some, some guidelines which will help you to actually choose a specific color for your project. So since they have used red, red is basically color of passion. It is used to grab attention of the users or maybe conveying your message to the audience. So Formula One is trying to set an example to say that there are so many different rates racers and they want to set that example. So that's the reason why they might have used red color coming up. We have the digital ocean website. Now, it uses blue color as the most primary color. You can see in this entire website we have blue color, right? Blue is the most popular and widely used color on the Internet. Most of the websites and mobile applications that you see, they have used blue color in their project. Most of them actually, because it conveys trust come piece, intelligence and security. So majority of the tech brands like your Facebook, Twitter, LinkedIn, they all use blue color. Even digital ocean is a tagline because it provides you servers, right? They are providing you a SAS application. They are providing you the ability to run your applications and websites on the server. So take brands usually, usually use blue color. Financial institutions also use blue colors like your Goldman Sachs. They use color. Then we have yellow. Now yellow is only used by your entertainment and children toys industry. Why is that? Because yellow generally shows fun and bold move. It's a color of sun. That's why it brings us joy, happiness. That's what movies do. That's what TV series do. So that's why yellow color is generally used for entertainment industry, right? It also conveys warm energy. So yellow color is generally used when you are dealing with the entertainment sector. Then we have the green theme color, which is generally used for nature, right? Green is the color of nature. It represents health, wellbeing, safety. So all the websites who are selling their supplement products, or they are related to the health industry, fitness industry, medical industry, or they are promoting some eco-friendly products, then it might be best to use green color. As you can see, they are promoting vegan friendly products, so they have used the green color coming up. We have orange color now. Oranges generally used to display happiness, joy, and confidence. So since Orange is a combination of red and yellow, oranges form when you mix red and yellow. That's how you get orange. So that's the reason why most of the properties of yellow and red, we get an orange. So orange is generally used by communication websites like Postman. Postman is an API platform, APIs, application programming interface used for communication purposes. So that's the reason why we have orange as this theme color in Postman. Let's say I want to create a website for my client who is actually setting up their own vegan products store, right? So obviously the color that we should use is green. But what exact color or what Saturation Brightness the EU or my tone should be for my green color. In order to find that what I can do is I can just simply copy the hex code of this green color. And I can go to color.adobe.com. And over there in the create section, I can make use of this color wheel. Now we can see I have, I can choose different colors and it will display the hex value over here. It even displays the RGB values. Now we can use different colors from the color wheel that it is actually showing us. You can see they have different color. How many tools like your analagous, monochromatic triad, complimentary and all that stuff. So analagous basically means that if you are dealing with green color, then it will show you the colors in the green segment. If I took the monochromatic, then it will show the contrast range like either the darker side of my green or the brighter side of the green. So you can see there's a contrast forming over here. Then I have the triad. Now traveled. Triad will actually show us or give us suggestions about different colors which will be opposite. So it can also give us green. You can see in the shade of blue and in the warmer temperature as well. So that's my triad. Then I have complimentary. Now complimentary is completely opposite. It will either show us green and some suggestions in the opposite direction. So we can use green, purple, pink. These are complimentary. We also have split, complementary double split, complementary squared compound shades, and we can even use custom colors. But generally, as a rule of thumb, I would always recommend you all to stick with monochromatic or maybe complimentary to develop your websites or develop your Figma design tools. So we have monochromatic, analogous and complimentary to use in our project. You can even move this wheel. If you move this towards the center, then you will see that the color is more towards brighter side. The color is not that saturated. It's brighter and not saturated. The more you move towards the wheel, it will be more saturated and it will be a bit brighter. It will be more saturated. Once you move the wheel, the color is also moving right? You can see the base color is also changing, the monochromatic. You can see when we have the one saturated and the one is less saturated. So these are different colors that we can use to develop our Figma project, right? Let's take a quick recap about what we have learnt in this entire lecture. So first of all, colors can have different meanings in different scenarios or different cultures. So there is no as such, specific rule set that you can use Read only to display passion or to grab attention of your viewers. It's completely up to the type of project that you're using. But just to maintain a guideline, I had I had given you a different examples of different websites where they have used these different colors. Now, color harmonies allow you to easily create a color palette. That's the reason why we have the concept of color harmonies. A complimentary color palette will give you the most contrast. That's what we saw in the Adobe color palette, right? While a monochromatic one will give you the least contrast. The Adobe Color tool is best to explore color themes or to create your own color. So, yeah, that was pretty much all from my side. In the upcoming lectures, you will learn how to create your own colors, how to actually create different linear colors, solid fill colors. And we'll also explored the topography part. 10. Fill mode in colors: Hey everyone, welcome back to another video. In this video lecture, we are going to be learning about the film mode in Figma. And we'll also look into the layers section that we have in Figma. So what is Fillmore exactly? So we have learnt about the color theory. We haven't talked about color harmonies, but there are still some things left to cover about colors in Figma. So not just Figma, but about designing stuff. So as you can see, I have this particular box, but green color right? Now you can see once I click on this fill on the Color Mode, you will see that this particular film mode is solid color. Solid basically means that the color will only have, this particular element box will only have one color. That's my solid color. If I change this to linear, what will happen? I will have two contrasting shades. That means one, I can either have green color and second, I can either have cyan or some other color. So let me select one green, the other color as sin. And if I move this point to this point and the second color to this point, then you will see this is how a shade or linear color has been formed. Two colors has been used into forming this one color. That's my linear filter mode. Then I have radial, radial, as you can see, it's forming like a circular shape, like how sun glows at how sunshine's, that's how this is showing us. You can see this is the radial Fillmore, right? Then we have the angular. That means I can either choose this angle to this angle. In that particular angle only, I will get that darker or cyan color, right? That's my angular film mode. I have diamond. You can see a diamond shape has been formed. Right? Then I have the image. I can either use image or video while creating a color and so on, right? So that's the different modes that I have in Figma. Let's talk about layers that we have in Figma. Alright, this layer way, Let's see how we can actually create our own color when we overlap different shapes of different colors. So what I'll do, I'll just create a new frame, right? And I will create different shapes. Alright? By holding the Alt key, I can replicate this exact same shape. Alright? So these are the three shapes, and all three shapes are overlapping with each other. Let's say this particular shape has a violet or purple color, right? A violet or purple color with a bit transparency. This one has yellow color. Let's set this to yellow. Yeah. This one as cyan. So you can see these three shapes are set to sign. Now when I overlap all three shapes, do I get the new color? When purple and cyan gets mixed? The overlapping part, do I get a new color? No, I don't. Why is that? Simply because the layer way, how it's layered, it's pass-through, not multiply. If I want to do that, I will need to drag all three shapes and I will need to set the layer as multiplied. Once I do that. Now you can see that when there's cyan and purple gets multiplied, the color we get is w. When all three colors multiply, we get black. When cyan and yellow multiplies, we get green, purple, or pink gets multiplied with yellow, we get red. So that was all about colors. We are done with colors. Now, in the next lecture onwards, we'll learn about typography and different textiles. 11. Text Styles & Properties: Alright, let's jump into typography. Now, typography is a really important concept in designing, whether you are designing a website or a mobile application. It would have some sort of text content. Now, when you write any content in a text-based format, you know your content could be images, videos, right? It could be text as well. So x needs some styling as well. Now the text styling could be the font style, the font family, the font weight, and the font size, the font alignment as well. Whether you want it to align it to the center or maybe at the top, maybe at the bottom. So that's all we're going to learn in this lecture. So for that, as you can see, I have created a frame inside this. If I want to write anything, I will need to click on this icon in my toolbar. This T I can represents the text. Once I click over there, I can now drag. I can hold my mouse button and I can drag the text box. Inside this textbox, I can write my text. Let's say I will write any random text. Now again, see, we can see this text. Although the text is very small in size, we can increase its size by going into the design properties panel. Inside the design properties panel, you can see I can change the font size to, let's say 30. So this 30 unit is in pixels. If you can't see any other symbol or any unit after the value, it's probably in pixels. If you see a percentage sign, that means it's in percentage. If you've seen didn't degree format, it's in-degrees. If you look over here in the design properties panel, this particular rotation is set in-degrees format. So the unit over here is degrees, whereas the font size is n pixels format. Over here, you can see we have the font-weight. Currently it's been set to regular. You might even change this to bold. You can see the text has now been changed to bowl. If you want this to have a little light weight, you can see this is how our textbook look like. I will set back to regular. Now, let's try to change the style of our font, but let's try to change the font family. I would like to apply some different styling to it, and I can choose between different stylings. Now, how do we narrow down to a particular font-family out of this entire list? Well, for that, you have other resources from which you can narrow down on which font family you would like to use. I personally use Google Fonts to actually check which font family would look best for my design. So you can just go over to the new tab, search for Google fonts. Once you click on Google fonts, you will see this page. I will go in, see available phones. Once I go over there, you can see I have so many different font families which I can choose from. Let's say I want to select Roboto. Double-click over here. And now you can see it's also showing us how it would look like if I said the weight of my font-family too thin, 100, how my phone would look like if I change that to a metallic, how it would look like if I said that to irregular, and so on. Let's say I want to actually look into my content instead of their dummy content. I would like to set my own dummy content to check whether it fits my styling or not. So for that, what I could do is I can write over here some of my preview text. Let's say I wanna write any random text. Alright? So this is how my text would look like. Let's say I want to use this Roboto font family. So I can just go back to my Figma. I can click on the font-family. I'll need to select this entire text. You can go over here and you can just simply search Roboto. And you can see Roboto styling has been applied over here and it's been currently set to regular. What if I want to set this to bold? This is how our text looks like. And this is how bold would look like. You can see exactly the same way. Correct? Now, this particular area where we have the value 35, what is this thing? This is basically my line-height. Now what does line-height basically mean? Let's say I have another sentence as well. Let's say any random text I am typing to test this. So in total, I have typed down three lines. Right? Now the height between these three lines is defined by my line-height. So I can change the line height to, let's say 30. So I can set 30. And you can see now the text is appearing closer. What if I want to increase this? So I can increase the line height as well. I'm just holding my up arrow key to increase the line height. And now you will see this change being applied to my text. Let me just select my entire text. I will go over line-height and I will increase the line height. You can see. That is more and more space between these different lines. What if I want to leave some space between these letters? For that, I will need to use the letter spacing, which is over here. Now you can see it's using the percentage unit, not pixels unit but percentage unit. Let's set this to ten per cent first, and then we'll try to increase it. You can see 10%. This is how it looks like. What if I want to decrease this? You can see the spacing between letters as how our format would look like. Right? What about this part? What does this mean? It basically means that the paragraph spacing well, we're not going to cover about paragraph spacing as of now because it won't be evident if I show you all. Alright, now, let's, let me just undo all these things to our initial state. I'm typing to test the font. Right? Now. This is the size of my text box. Although if I would like to add some more content, I can add, let's say after this, in my new line, I want to add line number for line phi. This entire text, line four and line five is outside my textbox. Right? So for that, what I can do, I can change that to this line height. That means that text box will adjust itself according to the height of my line. Now, this fixed size means that till this point, the point, my textbox is only till that point my textbox will be, it won't change if I add more words or more lines. Let me show you the example for that. Let's say this is the text that I'm actually adding. So you can see the height is not being adjusted. Even the width is not being adjusted only because we have said that to fixed size. So it actually fixed size previously, based upon the texts we had to line number five, and now the box won't change its width or height. What if I want to change the width of our textbox according to the text inside the text box. For that, I will need to select this, which is auto width. So now you can see this is how my text box looks like. What if I want this text to be center aligned? I can select this particular button which will align my text in the center with respect to my text box. If I select this, it will align it to the left with respect to my text box. If I select this, it will align it to the right with respect to my text box. This is selected, that means align it to the top. If I select this, it will align it to the bottom, or rather I should say middle. Let me show you what I mean by that. If I choose this part and if I choose, align it to the middle, let me reduce the next box size. So for that, what I can do is I can write, Let's say lorem ipsum. Alright. Now you can see the text box is adjusting itself according to the texts that we have. This is possible because we have set our text box to have auto vet. Alright? If I add a new line, you can see it's actually even accommodating its height, right? So I click on this text box and I will drag a new text box. Now you can see I'm able to write this text from middle onwards. So now it is aligning the text with respect to the y-axis inside my text box. If I select this to align it to the top, my text is appearing at the top with respect to the y-axis inside my text box. If I select this to bottom, that means my text is being aligned to the bottom with respect to the y-axis inside my text box. So these are some of the properties of my fonts. I also have one more functionality inside my design properties panel, which are the three dots over here. This is my type settings. If I click over here, I can preview the text before even applying the styling to my text. Now you can see if I apply this, which is fixed size. This is how my text would look like if I put it to auto height. This is how my text inside that textbox would look like. If I set that to automate. This is how might export look like. If I want the alignment to the left-hand side, I can do that if I want it to be centered. This is how it would look like if I wanted to be right aligned. This is how it would look like. And if I want it to be justified, this is how it would look like. Now, keep in mind that not all the functionalities like your alignment, you're resizing and the decoration is available for every font-family. Some font-family allows, some designing elements, sum does not allow. So keep that in mind. Now we are using Roboto. So that's why it's allowing us to have that justified alignment. What if I change this particular text from Roboto to let say Poppins? If I do that, now you will see that some of the styling is not available. Let's say which styling is not available. Alright, all the styling is available. Let's go to details. So even subscript and superscript is available. Alright, so yeah, I was talking about that some styling is not available for some font family. But in my case, Poppins is allowing us to format those things, right? So we can do justified alignment, we can do underline. We can even have a strikethrough, which means that a line will pass through our text. What I mean by that is, let's say I'm, let me put it this way. Alright. Let me write words which would make sense Like random text. You can see the text is having some underline. What if I don't want an underline, but rather, I would like to have this which is strikethrough. Then you can see a strike through line has been passing through our text. What if I want this? But just none, no decoration as such. So you can even do that. Now, if you have some paragraph indented, then you can do that. Now, what does paragraph indent mean? Let's say you have ten pixels of paragraph indented. That means ten pixels of space would be left. Starting from the textbox. Your first letter starts off your texts, right? So that's my paragraph indented. As I said previously, paragraph spacing would not make sense. If I explain, you all will look into that later on if it is required. We also have list-style. Lets say I have some other texts as well. Let's say one. First, second, third. Alright? And I'm going to select all my text. And I might apply some list-style, like let's say bullet list. So this is how our text would look like if I said that two numbered list, it would have numbers, right? If I have some line spacing, I can even do that. Then we have some cases. Now case means that if I want all my text to have uppercase, then all the letters in my text would have uppercase. If I want that to be lowercase, then all the letters inside my text would have lowercase. If I want the title case, then it means that every word, first letter would be in uppercase. It has all the letters in that word would be lowercase. Then we have this, which is not supported for small caps. You can see font does not support small caps, so this Poppins does not support this particular casing. So that's what I had said previously. Let's change back to Roboto and we'll see whether this is applicable or not. So now you can apply this which is forced small caps. Now for small caps basically means that although all the letters inside your text is in uppercase, but the size of it is smaller, such that it would look like that. It's not such a big and huge font, right? So that's what this first small cap actually means. Let's say you don't want to apply any, you know, any of these cases, then you can just select this none. You can go back to these details. If you want some superscript or subscript, you can even write that. Let's say you have this text something like two to the power of two. So you can put this in superscript. So now it's two raised to the two. What if I want to write, let's say log to the base ten. So I can write log ten. I can select ten, and I can add this in subscript. So now we can see it's now log to the base ten. If you are designing some content for your website, or maybe an application where you would like to use these mathematical expressions or maybe chemical equations, then you can use Figma to actually have superscript and subscript inside your design. Alright, so that was all from my side for this particular lecture. In the next lecture, you will learn about what's the difference between your serif and sans-serif format? 12. Serif vs Sans Serif Fonts: Now there's been a lot of confusion around between serif and sans-serif fonts. Well, don't worry guys. I'll try my best to clear the confusion around. And by the end of this lecture, you'll be able to pick perfect font for your design. What exactly is the difference between this serif and sans serif fonts? So Sons is a French word, which basically means without. So as the name suggests, main difference between these two type faces is the presence or absence of serif within the letters. Now what exactly is this safe? So assertive as a decorative line or a taper added to the beginning or end of letters stem, which creates a small horizontal and vertical planes within a word. So in a nutshell, you can say that serif fonts have those decorative lines or tapers, while sans-serif don't. As you can see over here, sans-serif do not have that strokes. Now, let's look at some of the commonly used Serif fonts. So those are Times New Roman. We have in our Microsoft Word. So Times New Roman is commonly used serif font. Garamond is another commonly used serif font. Then we have Baskerville, Georgia, and Courier New. Let's look at some of the commonly used sans-serif fonts. Helvetica, Proxima Nova, Futura, and Calibri. Now, what does a serif font say about your brand? If you're going for a traditional look and feel in your design, you should definitely go to the serif route. Since serif fonts have been widely used in books, newspapers, magazines. They remind us of more classical, formal, and sophisticated themes. Serif fonts are great choice for brands that want to be seen as trustworthy, established, and reliable. So serif fonts are a great choice for more traditional businesses like law practices, financial firms, or insurance companies. What does a sans-serif font say about your brand? So sans-serif fonts are more about throwing tradition out of the window and they are much more favor of more than sophistication. So sans serifs are considered more modern because you know the, our minimalistic, they provide modern look. They are more simplistic. So if you want your design to come across as more youthful, more accessible, right? So sans-serif fonts can feel more approachable than the stuff here, more corporate serif counterparts. So sans-serif fonts are viewed as more approachable, playful, and youthful because of its simplicity. So basically, new businesses, start-ups, online businesses, tech companies, use these sans-serif fonts. The current logo of Google is using sans-serif font. Earlier, back in, I guess, 2005 or six, when Google was pretty new compared to Yahoo, they were using the serif fonts. So that's about it. I hope the confusion between Serif and Sans Serif is clear and I hope you all are clear which font to use for your design. 13. Using Custom Fonts in Figma: Alright, let's have a look at how we can upload our custom fonts and Figma. Now there might be a situation where you might want to use some kind of font-family, which is not available in Figma. Not it's available in Google fonts. So what do you do in that case? To give you an example, what if I want to use Grand Theft Auto font-family? Like I really enjoyed playing rented out of games, and I would like to use this font-family, but this is simply not available in Figma. Let's say I want to apply this same styling to this font. So how do I apply that? So for that, I will need to go to figma.com slash downloads. Just go over there and choose the platform that you're using. In my case, I'm using a Windows machine, so I'm going to install this Windows installer in this font installers. So it's going to take some time and it will try to download the EXE application, just open up and install it in your system. So I'm going to install this. You can see this has been installed. So now I can go back to this font and I can click here to download. Now I won't download this again because I've already downloaded this in my system. So here as you can see, this is a zip file. So I'm going to extract this using 7-Zip. You can use any other tools that you have like your windpipe or any of this stuff. I'm not going to go in detail about data. So now we have this famous fonts dot TXT. Once I click on this, or rather I should say this, this one dot PDF file. You can see this Install button just click over there. So the Figma will download this particular font-family. So now you can use this font-family in your Figma. So let me take you back to Figma and I'm gonna go back to my tester project. So let's go back over there. I will apply the text, which is Grand Theft Auto. Let's apply the styling, which is if I'm not wrong, its price price down. And you can see it the same. Yes. Now you can see the exact same font family has been applied. Over here. You can see this is the font-family which is being used. Same is being applied over here. Let me increase the font size so that it will be much more visible. Now, I hope you all can see the same exact font-family is being applied. 14. Working with Images in Figma: Alright, let's continue with images in Figma. Now there are three ways to actually import images in Figma. The first and the foremost method is that you can go over these shapes icon in the toolbar. And you can select this option which is to place image or video. You can also see the shortcut key, which is Control Shift and k. So if you hold down Control Shift and K buttons, you will have to browse the image where you have located inside your folder. And you can select that. And you can just place it wherever you would like to paste. Alright, so you can see this is my image. This particular image is the thumbnail off my full stack web development course. If you're interested in exploring the web development aspects, you should definitely check out my course because this course is focused on full stack web development. It focuses on front-end as well as back-end. So we start off right from HTML. Then we cover CSS, some CSS frameworks like Bootstrap, entail and CSS. We also look at JavaScript in its entirety. We also cover JavaScript frameworks like React, which is a front-end framework. Then we also cover a backend framework, which is NodeJS. We also look into express JS. Then we cover databases like MongoDB and you will also see how to use Git and GitHub to actually upload your projects. And not just projects, but any website they do like to upload. And by the way, if you're interested in building real-world applications and websites, you should definitely check out this course because over there, I try my best to update the course regularly by uploading projects, videos, and tutorials on new frameworks. So enough of marketing for my other courses, let's focus back on our images and Figma. So this is the one way of importing image in Figma. The other way is to actually open up the folder and just use the drag-and-drop method to place the image inside your Figma workspace. Now, over here, as you can see, I have not imported this image inside my frame. If I would like to place this image and the frame, I can do that as well. So let me just create a frame of, let's say desktop size. And, um, yeah, I know where I can place my image so I can use the drag-and-drop or else I can even do Control C and Control V. Once I do Control V, you can see the image has been placed inside my frame. Now you will see that the images big in size compared to the frame size. So the image has been cropped, right? So if I would like to resize the image, then what I can do is I can hold this, you know, these four vertices. You can see if you think that you would like to resize the image. And if you do something like this, then you will notice that the image is not being resized, rather it's being cropped. So what do you do in that case? Why is this happening? It's happening because we have selected the move. Instead, we should select the scale button. So let me just undo. And now I will select the scale method or you can just hold the button on your keyboard. And now I will resize such a way that the image is not being cropped by any way. You can see the images not being clubbed. Rather it's being scared. It's been reduced down. The size of my image has been significantly dropped down and the image is not being clubbed anyhow. Alright, so those are the three ways to actually import images in Figma. Now, what if you want to place this image in a shape? How do we go about that? So let's say I want to place this image and the rectangle box. So let me create a rectangle box. And over here, I would like to place this particular image. So what I can do, I can select this particular box. And inside my fill. We have learned about fields and all that stuff in the color section. So instead of solid, I will choose Image. Once I go over here, I can choose my image, which is this particular image. Now you can see this is now, this has now been inside my shape. Alright, now I can even rotate this image. So once I click this rotate, it will rotate it by 90 degrees. Now why her, the image has been rotated, not my shape. So that's one thing that you should keep in mind. Alright? So I can rotate it as many times as I would like. Alright? Now, you will also see that we have some other adjustments that I can make. Rather I should say that in the film or I can even change from film mode to fit mode. Once I do that, you will see that the shape is occupying the exact dimension as my rectangle box. So that's possible because I have choose this FET mode. If I choose this to crop, then I will able to crop the image such a way that only that part of the image is visible. Let's say I want to remove myself from the image and I want to only place the logo, which is MongoDB Express reactant NodeJS logos. So once I've done cropping my image, so now you can just click on this cross to exit out of the crop mode. And now only this part of the image is present inside my box. Alright, we also have other options. By that, I mean, is that let's say I select this part, I would like to fit. That means let's take fit and let me increase the size of my box. Alright? I will increase the size of my box. And now I can make other adjustments as well. So like how Lightroom and Photoshop allows you to deal with other adjustments in your images like exposure, contrast, saturation, temperature, tint, highlights, shadows, all that stuff you can do in Figma itself. You don't have to use any other software to actually deal with the images part. As you can see, I've lowered down the exposure a little bit so the image is appearing more darker. So that's my exposure if I would like to increase the contrast and you will see more sharpness and all that stuff to it. We would like to increase the saturation. I can do that as well. So the customisation is up to you. There is no as such fixed rules as to what exposure should be set for this image or what contrast should be set for this image. It totally depends upon your use case on the image that you are working with. Alright? And the other thing that I wanted to show is that although I'm going to cover in detail in the effects section, let's say you want to create some darker tone or a glass type effect for this particular image. And it would like to apply some text to it. Now you must have seen some websites where you have an image. Now this image has some transparency to it and upon which some text width, lighter shade is applied such a way that the image is also visible, although not clearly, but some shadow of the images there on the web page and the text is also there. Let me show you what I mean by that. Second, select this image. I can go to the transparency panel and I can reduce the transparency. So if I change from 100% two, let's say 80, 80 per cent. And you can see that the image is transparent. It, alright, let's, let's bring it back to 100%. Alright, I can use the Alt. I can drag down so that I will get an exact copy of this shape. And now inside the film mode, Let's change from image to solid. That means I want to color not an image. Let me have some darker shade over here. And I will choose the transparency to about, let's say this about 22%. If I bring back to this part. Now you can see this is how my image looks like. You can see this is how my image would turn out. Now, I can even apply some text to this image. Let's say I want to write something like MAN stack. I will increase the font size as well. So let's increase the font size of this text. So instead of 12, let's make this 36. 36 is still not clear. Let's go with 48. 48 looks good. Let's change the text style to Roboto. And I can even change the color of this font to let's say black. Right? Yep, that looks cool. One stack. So that was all about images for this lecture. Once again, a quick recap. There are three ways to import images in your file. The first method is to actually hold down your control shift and K buttons on the keyboard. And then you can look at the file that you would like to import. The other way is to simply drag and drop the image from your folder to your Figma workspace. The third method is to actually use the Control C and Control V methods. What did we learn? We learn that there is a way to actually import or other place your image inside the shape, any shape, not just a rectangle, but rather if you're dealing with an ellipse or a polygon, you can choose the fill mode and from film mode inside the solid, from, you can change that from solid to image. Once you do that, you have other options as well. You can either crop that. One last thing that we were left with is that I can even change from FIT to crop. And once I do tile, then that means I can repeat the images as many times I would like. Let say from 20 I10, set this to 25, then you will see 25%. That means basically four times my image has been repeated inside this particular shape. So that's my tile. So you have different options to choose from. If you do fill, then that means the image will be placed inside your shape, but it will not be fit according to the dimensions of the shape. If you choose the fit, then it will fit accordingly. If you choose the other way which is crop, then you will have to crop the part of your image. If you choose the tile, then you can repeat the images as many times as you would like. Then you have the options to deal with the adjustments of the image, like exposure, contrast, saturation and all that stuff. I also explained how to rotate images. Okay? Once again, remember that whenever you rotate, you're rotating the image inside the shape, not the shape itself. So that's one thing that you need to remember. And if you'd like to decrease or increase the transparency of the image, just go to this layer and you can deal with the transparency of the image. If you'd like to use this kind of shadow or glass type effect, then you can just use another shape with a solid color, drop down its transparency, and place it with that particular image. And then you can use any other phones or any other shape that you'd like to use upon that layer. So that was all. In the next lecture, you will learn some plug-ins that we can use to actually help us import images. And also learn how to remove background from the images in Figma itself. 15. Unsplash Plugin: Alright, let's continue with images and Figma. Now, sometimes you are creating some sort of design for your client. You might want to use some stock photos. Now, if you are thinking that I can use any photo from Google, I can just Google up any image that I would like to use in my design that you can deliver it to my client. Well, you are wrong. Why is that? Sometimes the images are copyrighted. If you use for commercial purposes, you might face some legal issues like copyright issues. So you don't want to get yourself into any trouble. The best way to deal with this situation is that download copyright-free images from the sides, which provides stock photography. One of the sites which is very popular is Unsplash. So just go to unsplash.com, search for any image that you're looking for. Let's say I'm looking for abstract images. So I can just go over there. I can look for any of the images and I can download them. Another website is pexels.com. The third is Pixabay. And you will find EGN number of websites that would provide stock photography. Now, one way to import the stock photos into your Figma project is to actually download them from these websites, locate them in some folder, and import in your Figma. That's what we learned previously, that there are three ways to import images in Figma. But isn't there a shortcut way to directly import images from Unsplash into your Figma project. That's what plugins come, comes into the picture. So plug-in is basically an addition or an extension of your existing program, which will provide some additional features which are existing program is not providing. So you can download any plug-in, not just Unsplash plugin, but any plug-in that you would like to have in Figma by just going to this Resources icon in the toolbar or Figma, just click over there, go to this plug-ins and search for a plugin that you're looking for. In our case, since we are dealing with images, we would like to download the Unsplash plugin. So let's search for Unsplash. Right now. You can see that this is appearing in my recent, simply because I have already downloaded this in my Figma account. Just click on this. It will take some time to install and let it install. Once you do that, it will give you this option to run. Now you can run it from here and you can import the image, the type of image that you would like to use inside your project. So you can do that. Another way. You can see it's running my Unsplash plugin. Now I can select this abstract one. I can import this. You can see it will take some time to import, and now it has imported, right? Another way to download this plugin is to actually right-click on your Figma workspace. Go to this plug-ins and find more plug-ins. Once you do that, you will find Unsplash. Another way to actually use Unsplash plugin is to actually right-click on your shape or your frame and just go to Plugins, unsplash. And your Unsplash plugin will directly open up, select abstract or any other type of image that you would like to use. And in my case, I would like to use this particular image. So I'm just going to click on this. It will take some time. And now you can see this image has been loaded up. I can even change the font color. Right now, it's black and the image is also dark, so it's appearing not good, but no worries. I'm just trying to explain you all how to use this particular plugin. Now what if you want to import this Unsplash image Italy into a shape? So how do we go about that? Let's say I have a rectangle image. Let me just delete this particular image. It's taking some time to undo. So now I can create a rectangle shape of this size. Then I can create another rectangle of, let's say, this size. I can use the Alt and this is how I can deal with, right? Yep. Let's make another copy of this shape. And another copy of this shape. Now, I want to import the images such a way. And by the way, let's try to center align them. So now I can import the images inside this shape by just right-clicking on this shape. I can choose Plugins, unsplash, and then I can choose abstract. Let's import this image. And you can see this image has been imported. Same thing I can do over here. Over here. Over here as well. Over here, and over here as well. So this is how simply you can import copyright-free images into your Figma project. 16. Remove Background from Images in Figma: Alright, let's see how we can remove background from our images. Now I know you all must be aware about removed dot Vg website. Now, this is a really famous website which removes background from your images. Even I use from time to time to remove background from my images. So what you do over here is that you simply upload any of your image from which you want to remove the background and you can download the modified image. Now, can we just directly do that in Figma? Well, you can do that. And for that you will require a plugin, which is obviously I've removed or BG. But you need to sign up and create an account first or removed dot Vg so that you can generate your own API key. Now using that API key, you will then use that in your plug-in, the Remove Background From the images. So let me just quickly sign up and create an account over here. I will use Google. Just make sure that you select this. I'm agreeing to the terms of service. And if you'd like to receive the new features and special offers via e-mail. You can just click that, their e-mail marketing, email marketing, that stuff. So once you've done that, just go to tools and API. Go over there. And you can generate your own API key. Just go to this ABI and command line. And you will see how do I get an API. Just go over there. And they will show you that in the account profile, you will see the API key. So I will create a new API key. I will create this API key, and I will copy this. I'll go back to my Figma. I will select this particular shape where I would like to import my image. So let's go to Plugins unsplash. I will search for a portrait image. So let's search for portrait. I will select this image and I would like to remove background for this image. Use the old pattern so that I can make a replica of this image. And I will download a new plugin by searching, remove, Remove, BG right here. You can see I can select Run and it will try to run, but it won't run. Why is that? Simply because you need to set the API key first, as you saw, we need to set the API key first. Let's go back to plugins. I will click on this drop-down. Let's try to set up our API key. And now I will need to paste my EBIT. So I will just paste my API key and we'll click on Save. And now I can remove this background by just clicking on Right-click plugins. Remove background and run, and it will take some time to remove the background. Let's try to give them some time to remove the background. And you will see the background has been removed. 17. Masking Images in Figma: Alright, let's take a look at different masking techniques that we can do in Figma. Now you might be wondering that what is this masking? Masking is, you know, it's a way of manipulating your images without actually destroying the quality of your image. So let's say you want to actually show some part of your image. So that's your masking of the image. Just like previously what we saw, how to remove background from the images. That was nothing but a way to mask cover images. We remove the background from the image. We were only displaying the portrait, the person itself, as you can see over here. If we remove the background from the image, and this gray color that you're seeing is nothing but the color of our rectangle box. So essentially in this particular image, it does not have a gray background. Now the occupies the color, which is the color of our rectangular box. Let's look at different ways how we can mask majors. So for that, what I'll do, I'll just create a new frame of about desktop size. And inside this, I'm going to copy this image. And I will paste it over here. Alright, let's try to mask this image. So you must have seen in social media platforms that generally the profile pictures are in a circular shape. So how can we actually mask this image? And it's such a way that only the face or certain parts of this image appears within the ellipse or a circular shape. So what I can do, I can create a new ellipse shape. Probably of the size. It looks cool. And now I want only the part of my image, that's the face inside the circle. So how can I do that? Well, what do you need to do is that you can just bring your image to the front in the layer section, as you can see in the layers panel over here, right over here, ellipse is on the topmost layer than the rectangle box that we have. This rectangle is nothing but the image that we were talking about it. So this ellipse needs to go behind our image. Or you can say that image needs to come in front of our ellipse shape. So you can do that within the layers panel. You can just drag down and the image will come in front. Or else what you can do is you can just right-click on this circular shape. And you can just bring back or rather Send to Back. Just send to back or else what you can do, you can select your image, right-click on your image and bring it to front. You can also see the shortcut keys for that. So that's how you do it. And then select both your ellipse shape and the rectangle by holding the Control button and in the Layers panel, select both your image and the ellipse shape. Now right-click on the image and use that as a mask. You can also see the shortcut key, which is Control, Alt and M. Once you do that, you will see only the face appears within the circular shape. So that's how you actually mask your images and Figma. Let's also try to look at how we can mask an image in our text. That I will select this entire thing and I will move this somewhere over here. Alright. Now, I'm going to create a new text box, and I will read the text mask. Okay, so the color of this text appears to be, or rather I should say that this text needs to be not part of this particular layer. Alright, so where's my text? This is my text. Let's write mosque and it needs to be outside the stuff. So now, earlier what happened is that Figma automatically combined my text with the rectangle box image and my ellipse shape together as a single layer. Now since the image only is within this part of the area, you can see the one which is highlighted in blue dots are blue dashes. That part contains my entire image. If I bring my text within that part, then obviously you won't see my text. It's because the image is being occupied inside that text. Right? Now we want that this mask will have some image in a master format. So for that, I will actually rather, I should say that I will write everything in caps. Let's try to move this text somewhere over here. Let's make this bold, okay, it's already bold. Let's try to change the font type or font-family. Let's change it to Roboto. Alright? When 80 pixels look good. Alright, let's try to bring one image from Unsplash plugin. So I'm going to choose unsplash will make use of an abstract image. So let's go to abstract. I'm going to select this image or other. Let's try to choose this image right? Now. Let's wait till it comes up. Alright, let's try to scale this image. So I'm going to scale this. I selected the scale part. Alright? So make sure that you scale it down. Alright, This looks cool. And now we want our text to be behind our image. Now you will see that this Unsplash image is not part of my desktop frame. So how do we actually put this inside of our desktop, desktop to frame? So just bring this down. And now you can see that this text mask appears in front of my image. But we don't want this to happen, otherwise the masking won't work. So we want the text to go behind our image. That's how we will be able to mask of an image into our text. So whenever you want to mask your image, always make sure that whether you want to mask that into a shape or a text or any of the stuff, makes sure that the image is in the front and the other thing is in the back. So just send this to back and now select both your image and the text and right-click and use that as mask. Once you do that, you can see that this image is now inside my text. 18. Margin & Padding in UI UX Design: Now before we jump into the auto-layout part in Figma, it's important for us to understand the concept of margin and padding. Now what exactly is this margin and padding? So to sum up, margin and padding is actually the spacing between two different items or elements. To explain this, with the help of an example, I can just draw a rectangle box. So let's say that this rectangle box of, let's say red in color and another rectangle box of, let's say green in color. Yeah. So the spacing between these two red and green boxes is called as my margin. Margin essentially is the spacing, outer spacing between different elements or between two elements or two items. So the blue dotted line that you can see between the red box and the green box is my margin. Now, margin is applicable on all the four directions. That means whenever we talk about margin, if you want the margin to be of some specific height, then that could be from top, from bottom, from left, or from right. So margin is there on all the four directions, top, bottom, left, and right. So if I put another box of, let's say blue in color, let me just make this as blue in color. Another box of, let's say, yellow in color. So let me put it this way, right? And let's keep this yellow in color. And let's also try to bring one more box. We can keep this as, let's say, black in color. Alright? So you can see the red box is having margin from all the four directions, from left, from top, from right and from bottom. So if I want to actually check whether the margin or rather votes the margin from my top, bottom left, right. You can see that as I move these objects, I can see that there is margin from left and from right. You can see there is 88 pixels of length of margin from my left and from right. That's how I'm able to see my margin. Margin essentially is just the distance between my outer elements. Alright? The distance between two different elements, It's the outer distance between my two elements. Now we have padding. Padding is the inner space between two elements. If I place, let's say I'm deleting my other shapes like blue, yellow. And let me also liberate this black one. Alright, I only have two boxes, which is green and red. And let me expand this red box. So using the scale one, I am able to expand this. I will place my green box somewhere in the middle. Alright? So the inner spacing between my red and the green box is called as my padding. Let's call as my padding. Padding is, again, isn't all the four directions from top, bottom, left, and right. So before we actually go into the outer layer part in Figma, it's important for us to understand about margin and padding. So I hope the fundamentals of margin and padding is clear to you all. 19. Auto Layout in Figma: Alright, let's start with auto-layout in Figma. Now, auto-layout basically means that the layout that we're going to set for our design is going to change its properties automatically. So that's what auto-layout actually means. So if I tried to explain this with the help of an example, I can draw a frame, let's say, of about this size. And inside this frame, let's say I have a rectangle of about this size. Alright, let's add text inside this. So I'm going to draw a text box Of probably of this size. Let's insert our text. And I will reduce down its text size to about 32 pixels. And let's also adjust its height, or rather I should say, okay, we did not decrease the size of it. 36 pixels. That looks cool. And we have set the text box to have auto height. Alright, that looks cool. And let me adjust the text box in such a way that it has proper margin. That means the margin of this rectangle box and this should have the same from left. Alright? So this is what I have drawn so far. This is my design. Alright? What if I want to add one more rectangle box of, let's say about, about this size inside my frame. So what do you think will happen in that case? Will my frame adjust its height or maybe wet according to the contents that I'm actually adding inside it? No, I don't think so. It well, let's try to see if I drag this box inside my frame. One, you can see still this rectangle two is not part of my frame. So what I can do is if I want this rectangle box to be included within this frame to another frame one, I will have to increase the size of my Freeman, right? I'll have to select this frame. Then. I'll have to increase the size of my frame. Now, you will see that this rectangle is now part or rather I should place this over here. Now this rectangle is part of my frame one. You can see in the layers panel that first we have this text box. We have a rectangle, two, rectangle, one, right? So this is now part of my frame. What if I remove and I move this outside my frame, then you can see the rectangle tool is not part of my frame, right? What if I have one more thing? Let's say I create one more text box. Okay, Let me create one more text box. You can see if I drag my rectangle box inside my frame one. Now it's part of my frame when I had to do that manually and add to increase the size of my frame one as well. What if I want to add a text box inside my frame one? Let's say I create a text. Okay, let me paste the text and I will adjust its height accordingly. Alright. Let's say instead of this, all these texts, let's just keep it at this point only. Yep, that looks cool. Let's try to include this within our frame. What do you think will happen? Will it come inside? No. You can see it's not part of my frame. I have to increase that. If I wanted to include inside this, I have to put this inside my frame one by increasing the frame size. So auto-layout, what auto-layout basically does is that, let me show you what auto-layout does. So what I'll do, I will just place my rectangle outside this frame one. Let me decrease the frame size. So I will use my frame one. I will decrease the frame size. I will select this frame, and I will set this to add auto-layout. So this is one way. You can also see that the shortcut key to add auto-layout to your frame is Shift. Holding your shift button and pressing D on your keyboard. Or in the design properties panel will also see the auto-layout icon. And besides this, you will have this plus icon. Once you click over there, you will find that auto-layout has been added. So I can set this as auto-layout. You can see it has already been added. Why is that? Because I clicked over here on the plus icon. So now auto-layout has been added to this frame. And you can see, now you can see that the frame one icon has also been changed. If I undo using Control Z, you will see that initially the frame one logo was having this kind of tic-tac-toe box. You can see two vertical lines and two horizontal lines right over here. Once I set this to auto layout, you can see that the icon of my frame has been changed. This indicates that this entire frame has auto-layout. Now, if I try to add a rectangle box inside my frame, what do you think will happen? You can see the frame height has been adjusted automatically. What if I tried to add this text within my frame? You can see that the text box has also added inside my frame. Now you won't see the text itself because the text is in white-collar. Let me change that to black in color. So I can just go to Fill. I can select black. And now you will be able to read the text. Alright? So that's how you work around with auto-layout. Now, you will see that whatever elements that we are adding inside of a frame which has been set to auto layout. The height is being adjusted automatically. What if we wanted to adjust its width accordingly? How can we set our auto-layout in such a way that whichever elements we add another frame, the width gets increased instead of the height. So what do you need to do this? Select your frame, go to the design properties panel. Drop-down this auto-layout part, and you will see this icons. So this particular icon, say is that it has been set to vertical direction. If I change that to horizontal direction, you will see that the width automatically adjust according to the elements that we have. So you can see the elements are now being in a vertical or other horizontal format. So this is my horizontal direction, right? So if I add one more element inside this, the height will be adjusted accordingly. Alright, now what does this particular state, this particular icon mean? This means that the spacing between items, so currently it has been set to 53 pixels. Since this does not have any other unit. We know that this has pixels unit. If it had a degree or a percentage unit, you all must be aware that it's not a pixel unit. Right now, this isn't pixels unit. So if I set this from 53 to let say 60, then you will see that this box will increase and its size. You can see the spacing between this text box and this rectangle box has been increased. The red shaded area is the region which is the spacing between my different elements. That's my 60 pixels of space between different elements. Now previously you all have learned about padding and margin, right? What if I want to add padding from top and bottom? So how do I go about that? So let me undo from frame one. Right now, it has been set to horizontal direction. Let's change that to vertical direction. And you will see this is how it looks. Alright, let's try to drag out a rectangle box from the frame so that it's not part of the frame anymore. Let's also move our text box outside of the frame. So it's not part of the frame anymore. You can see the frame size has been decreased since we have set our frame to auto-layout and in the vertical direction. You can also see that the spacing between the item, say 60 pixels. Now, you have learned about the padding. What if I want to add padding, which is the inner spacing between my frame and rectangle box. If I want that to happen, then what I can do, I can just select my vertical padding over here. And I can change that to from 42 to let say 60. Once I do that, you will see the spacing from top, bottom has been increased. Let me move this text box right over here. Alright. Let me move this over here, right? So now we can see the text. Rather, the spacing between this part and this part has been 60 pixels. What if I want it to be equal size? That means from top, bottom, from left or right. Let's also first check out horizontal way. What if I want to manipulate only the padding from my left and right directions, then I can choose this to be 100. And you can see this size has been increased, this, and this region has been increased to 100 pixels. What if I want that? I want to set that all these directions should have the same padding. Then I can choose this to be 60 as well, and this one to be 60 as well. What if I want to only manipulate the padding area from the top, from bottom, or from left or right? Can I manipulate the individual padding? Yes, of course I can do that. Just select your frame, go to the this auto-layout and select this part which says independent padding. Once you click over there, you will find from left padding, top padding, from right padding, and from bottom padding. So you can enter the values that you would like to see in your design. One more thing that you might see over here is that this is set to top-left alignment. What does this basically mean? Let's say I increase the frame size. Let me delete this rectangle box and this text box. I will delete these two to show what does it actually mean. And also, I will also zoom out to about 50 per cent. Let's try to increase our frame. So as you can see, if I increase my frame size, you will still see that my content, which is the rectangle box and my textbox, it's still sticking to the top-left section. It's not adjusting accordingly because the alignment has been set to top-left. If I want my, this rectangle box and this part to be center line, then I can select over here. And now you can see that it's aligning perfectly to the center. If I wanted to be in the rightmost position, but center with respect to the y-axis. I can select this if I want it to be on the top with respect to the y-axis, but center aligned with respect to the x-axis. I can select this and you can just play around with other directions where you would like to place your elements. So this is about your auto layout. One last thing that we're left to cover for this lecture is that we can also have nested layout in auto-layout in Figma. Now what does nested auto-layout basically mean is that term, auto-layout inside an auto layout. So let's say I have this frame, alright? I have this particular frame. I can select this frame one. And I can hold, rather, I should say that I can select this frame one, I can hold Shift and a button. And now you can see that we have also formed a frame to inside which we have a frame one. So that's my nested auto-layout. What I mean is that let's say I create one rectangle box. And what if I want to place this inside my nested auto-layout? If I drag this into my frame two, you can see, alright, I will just drag this out and place it inside my frame two. So now you can see it's now part of my frame to it's now part of my frame to frame one. This part where it has this text box and the small rectangle box is my frame one, rectangle two and the frame one are both the part of my frame to which is itself set to auto layout and in vertical direction. If I want this to be in horizontal direction, you will see this is how it appears. 20. Formatting Principles in Figma: Alright, let's continue with formatting principles in Figma. Now there are four key formative principles that you need to keep in mind. The first one is grouping. Then we have, you know, framing, copying, and duplicating. So let's look into each one of them. E.g. let's assume that you have a frame, let's say, of about this size. And inside this frame, I'm going to create one, let's say a star. Right. Now. This is a star shape. Let me move the site. And I'm going to create a text saying that this is a star. Alright? Let me also increase the size of this text. So let's increase the font size to maybe about, let say 24 pixels. Let's try it with 32. This looks much more readable. So this is one text. Let's also create one more text, which would say something like, how many sides does this start have 1,234.5. So we'll say that this star has five sides, phi sides, and sheep is gray in color, something like that. And let us also try to decrease the font size to about 20 pixels, right? Yeah, it looks good. One more thing, let me rearrange. Rather, I should say I should align it properly. This one as well. Over here, I would write something like this. Alright, yeah, this looks cool. So we have three things in our frame. First we have our shape, we have this text, and then we have the description of this text. Now, if I have to group this element and this element together, how can I do that? I can just select this one. I can hold down my Shift key and I can click on the other element. Now we can see in the layers panel that these two texts has been selected so far. If I want to group them together, I will need to press down my Control or Command key if you're using the MacBook and control G. Once you do that, you can see a group has been formed. Inside this group, we have these two text elements. So now with the help of this group, what I can do, I can just simply drag and place it wherever I would like. This has formed one entire group. Alright? So this is one group. If I want to group this shape along with this shape, then that would be a nested group. Because it could be a group inside a group. So you can do that as well. Again, simply select this element, which is our star shape. Hold down your shift key, select your other group or any other element that you would like to group them together and hold on your control and G buttons. Once you do that, you will find that this has now been made entire group. Right? Now, inside this group two, you will find that this group two has a star-shaped and group when itself. This group one contains these two texts elements. So that's how you group different elements inside your frame or in Figma. Alright, so this is how you group them together. Now, let's understand how we can copy these elements. Let's say I want to copy my group one element, not entire group two, but rather just Groupon element. Let's say that I have other, another shape, something like, let's say a polygon. So I'm going to create a polygon. Alright? And I want this group one. So what I'll do, I'll hold down my Control key. If you're using Mac, it would be command and press C button, which is copy control, C is copy. Now I have copied this entire group, one, which has two text elements, right? First, the name of our shape and the description of our shape. If I want to paste this text below my polygon, How will I do that? Simple, I will use control V. Now, although I have press control V, and in the layers panel you would see that another group called Groupon has been formed with this text. Right? So why can't we see our text element that we just right now pasted? It's because it has pasted just about that. So if I drag this out, you will find that this is our copy of our group one. Right? Now I can manipulate this text by selecting this part. I can say this is a polygon. This polygon. Has three sides. And shape is gray in color, right? So this is how you form or other you copy different elements and paste them. So this is one way of doing it. Another way is that let's say rather I should say I'll create another frame. Alright? I'm going to create another frame. Let me create an ellipse of about this size, right? Let's give this a color in the fill. I'm gonna give this as a teal color, kind of, you know, aquamarine kind of color, light blue, right? And I would like to make a copy or a duplicate of this particular element. And how will I do that? I can hold my Control button and I will use d, which is control duplicated. D stands for duplicate. A duplicate has been formed with just single shortcut key Control D. I don't have to do control C and control V. I have done Control D to make a duplicate of my shape. But why can't I see my duplicate? By simple answer? It's just about my ellipse one. So if I drag out, you will see we formed a duplicate. Now, again, if I put this or if I do a duplicate of this particular element, then you will find that again, no duplicate has been formed. If I do Control D again, then now you will see that a shape, which is, although outside of a frame, I can increase the size of my frame. But now it's at the equal space, the space between this ellipse, this ellipse, whatever, whatever distance was covered, the same distances maintained over here as well, ANOVA as well. So now, with the help of control D, What happens is that you are making a duplicate of your elements or your shape. And it's also maintaining that distance that you are having between different elements, right? So I can, what I can do is I can increase the size of my frame. Right. Now you will see that we have the fourth ellipse as well. So that's how you make duplicate of your shapes are elements with the help of Control D, command. Alright, so, so far you learned how to group stuff, how to make a duplicate, how to make copy. Alright, let's try to see how we can deal with auto-layout. And although we have covered about auto layout stuff, let me also show you that what happens if we make auto-layout to the text, not to the frame, but other two are text. But rather I should say that. What happens if I create one rectangle shape? Alright, Let's assume that this is my rectangle shape. And now we have an ellipse inside this rectangle shape. Alright, let me give this rectangle shape as red color. Another, this ellipse has a red color and rectangle as white-collar. Alright, I'm going to select my rectangle, and I'm going to give this as a solid white color. Alright? Now, what happens is if I want to actually, if I actually want this rectangle to behave like a frame, then I can just select this. And I can create, which is frame selection. I can do this. And now you can see a frame three has been formed. Frame one of our polygon. This stuff. Let me show you what do I mean by that? So I'm just going to zoom out a little bit, right? Yep, looks perfect. Now, you will see this is my frame to this entire thing is my frame to, this is my frame one. Alright? So inside my frame three, I have my rectangle. So right now my rectangle is not acting like a frame. Rather my rectangle is now inside the frame. If I click this frame, you will see that tangle is now part of my frame, right? If I move this frame, you will see the ellipse is at its original position. It's not moving along with the frame. Usually what happens is that, let me show you what do I mean by that? If I say that, I want to move this frame which has our star of a polygon and all that stuff. If I want to move the entire frame, then the entire thing, all the elements inside this frame will also move along with it. You can see, but this is not happening with our frame three. Why is that? Because if you look at the layers panel very closely, you will find that the ellipse is not part of our frame three. If I want this ellipse to be part of our frame three, I will have to bring this inside of our frame three. Right? Now if I move my frame three, you will see the ellipses also moving along with it. So this is the concept of framing. So far we have learned about framing, grouping, copying, and duplicating, right? Let's learn the last thing that we have to cover for this part. Let me add a text. So what I'll do is let's say I have a text and it's not part of my frame. It's just in the workspace area of Figma. And I want to add frame to it. Then how will I able to do that? I can just add an auto layout, right? We have learned about auto-layout in the previous lectures. If you want to learn more about it, you can just refer those lectures. Again. Let's write a simple text saying that this is a simple. Next. Alright. Now you can see, although I have created this text, text is white in color and it does not have any background because this is not part of any frame. If I want to add this inner frame, I can just add auto-layout to it, right? So you can see a frame is rather, I should say that the text is now part of my frame. You can see over here. Now, what happens is that since this is now an auto layout, I can actually specify the auto-layout direction as well. Whether I want it to be vertical direction, horizontal direction. Whether I want this element to be aligned to the top left or in the center, I can do that. But one thing which is important is that this frame does not have a color. So I can add a fill to this. Once I do that, you will see a white color has been added. Now if I have to select my text, I can change this color to black. Now you will be able to see our text frame properly. I can add text or I can make some changes in it. Something like, let's say this is a text. I can just remove the word simple. And now the frame size also decreases simply because this entire text is now part of my frame and it's now a auto-layout it, right? So this is how we do it. Now, you can even add an auto layout to a shape as well. So let's see. Add an auto layout to your ellipse, then you can even do that. So I can select this entire ellipse. I can add an auto layout to it. And now the frame has this ellipse inside it. So that's how formatting principles in Figma actually work. 21. Figma Constraints & Resizing: Alright, let's continue with constraints and resizing in Figma. Now what does constraints actually mean? So constraints is a way to set our items in a fixed position. So let's try to understand with the help of an example. Let's say I create a frame of about this size. And I set an ellipse over somewhere here at the top-left position. And let me give a color to this particular shape, somewhere like this. Alright? Now, what happens over here is that if I actually change the size of my frame, if I expand it, you know, from the right side, the position of my this particular ellipse does not change. If I increase from this side, it's changing. Why is that? Why it's sticking to its top-left position? Because in the design properties panel, if you look closely, you will see that it constraints has actually been set by default to left and top. Left means that in the horizontal direction. That means whether you try to stretch, squeeze your frame from the right or from the left-hand side. Your shape, the element ellipse which has been selected right now, always tried to stay at the leftmost side. And in the y-axis, that means if I tried to expand or squeeze my frame from the top position or from the bottom position, it will try to stay at the top most position. Let me show you what I mean by that. If I tried to squeeze my frame from bottom to top, then you will see that the ellipse does not change its position. But if I tried to squeeze the position of my frame from top to bottom, then you will see that my ellipse is trying to stay to the top most part of my frame. So that's possible because of constraints. Right? Now. Let's try to mimic one, you know, website design. So what I'll do, I'm just going to create one hamburger icon. So hamburger icon, you know, hamburger icon is just those three lines. And once you click over there, then you will see your navigation bar. So that's what your hamburger icon does basically. So I'm going to make a replica of it. This line, hamburger has basically three lines, so we'll do that. Yep, this is how my icon actually looks like. Okay, let me group them together. Alright, I'm going to group them with the help of control G. And let me rename this to, you know, I'm going to rename it to ham burger. Hamburger. And let's also try to add some text elements. Let's say home. Then I'll create one about. So let's give this has about, Let's also try to increase our frame size a little bit so that we have some space to add our contact. Contact us as well. So contacted. Alright, let's try to group these three navigation elements. So let me rename this as well, saying that navigation, alright, navy. Alright. Let's try to move them so that it appears somewhere like this, right? It looks good. And let's try to resize of a frame in such a way that it appears like it's a mobile or a tablet view. Alright, let's try to fix this position of my hamburger icon to the left or to the top. And we'll put this in a way that in the horizontal direction, it always tastes with the rightmost side. And in the y-axis it stays to the top most side. Now once I do that, what will happen if I tried to increase or decrease the size of my frame? So if I tried to reduce the size of my frame, you will see that this navigation icon, this navigation buttons like your home about contact. They all are trying to stay to the rightmost side of our frame. If I try to increase the frame from the leftmost side, then you will see the hamburger icon is staying to the leftmost side. But this navigation elements, which is home about and contact, they are not changing its position because it's trying to stick to the rightmost side. If I tried to increase from bottom, then you won't see any change happening. They will stay at its position. But if I try to decrease from top or increase from top the size of my frame obviously, then it will try to stay at the top most position. What happens if I try to select my hamburger icon and if I change the constraints from left and from left to let say center, then what will happen in that case? If I try to increase the size of my frame in the horizontal direction, then you will see the hamburger icon also changes its position. Because now it's trying to stick to the center most position with respect to the expand in leftmost side. But if I undo that, and if I increase the size of my position or size of my frame. From the top or bottom most part, then you will see no change happening. It's trying to stick the most part because in the y-axis, we have selected that it should stick to the topmost part. If I change that to center, then now you will see the change. Let me try to decrease. Then you won't see the hamburger icon. Why is that? Because it's trying to stick to the center position. If I tried to increase, then you will see it's trying to go down. That means with respect to the y-axis, my hamburger icon is trying to stay to the center most position. So you can play around with other directions to see how our element would react. So let me just zoom out and where's my frame? So here we have our frame. Alright? So I hope the fundamentals of your constraints are clear. Let's try to understand about resizing. Now, resizing is pretty much the same as constraints. The only difference is that constraints are usually applied to the items or elements which are part of normal frame layout. Whereas resizing is applicable to those items or elements which belong to a frame which is in an auto layout format. Okay, so let's see how we can use resizing. So what I'll do is I'm going to create a frame. Alright, let me draw a frame of, let's say about this size. And I'm going to add an auto layout to it. So I will add an auto layout and I will add one element, which is rectangle inside this frame. Now, since this frame is now part of our frame to frame to itself is an auto layout. You can look at this particular icon. This icon means that this frame is in auto-layout, whereas this icon means that the frame is abnormally out. So now auto-layout, we all know what happens in that. It basically changes the size of my frame with respect to the elements inside my frame. That's what we have done so far. Now you will see that although I have added my rectangle inside the frame, and initially the size of my frame was way too small compared to what it is right now. But as I increase the size of my rectangle, the size of my frame also increased, but still we can see some gap between my rectangle and my frame. This is called padding. We have also covered that stuff earlier. But what happens if I try to eliminate all the padding from the positions? That is from X, Y position. What happens in that case? I will select my frame. I will go to the design properties panel. And over here you will see the padding from horizontal position and from vertical position. So if I change from ten to let say zero, x, y, and from y direction also zero. Then you will see that the rectangle is occupying no extra space. Or rather I should say that there is no padding inside the frame. And the rectangle is sticking with exactly with the size of my frame, right? So this is my way that I'm trying to represent. Now what happens in this case, if I select my rectangle, this particular shape? You won't see the constraints. Constraints way. What we used to see earlier. We cannot see it right now, because right now we have this entire thing in an auto layout format. We should see resizing panel, right, instead of constraints. So how can we see that? What should we do to do that? So what we can do is inside this rectangle, or rather I should say inside this frame, you will see right now the rectangle in the auto-layout part right over here where my cursor hovers. You will see that the rectangle is now sticking to the top-left alignment. If I make it to the center alignment and if I try to increase the size of my frame, you will see that now the rectangle sticks to the center most position, whether it's supposed to be with respect to the x-axis, are supposed to be with respect to the y-axis. The rectangle is in the center most position. This is possible because in the auto-layout part, we selected that our element rectangle should be in the center, aligned, right? That's what we have done so far. Now, if I want that, I want this to have one resizing elements, then how can we do that? So I can just select this rectangle element in the design properties panel. The fixed end, these horizontal is basically my horizontal resizing. This is my vertical resizing. So both of them are by default set to fixed. If I change from fixed to let say fill container, then what do you think will happen in that case? Right now, this fixed width basically means that no matter I increase the size of my frame, there will be some sort of spacing between my frame and my rectangle. Although we have not used any sort of padding, but still there will be some space because right now the size of my frame is larger than the size of my rectangle. And triangle has been set to fixed. Resizing. It has been says to set to fixed width. And rectangle is now at the center most aligned with respect to the y and x-axis, right? Now if I change that to this, which means that this rectangle has to be filled container, then that means container. What does container basically mean? Container acts like a box, a storage compartment. That's what container basically means. So rectangle or rather I should say that frame is now acting like a container. And now you are saying that rectangle should occupy its size according to the container. So no matter how much the size of my frame is, it will expand its size and it will stretch out. The element. Rectangular over here is occupying the maximum width that it can do, and it will try to touch the borders of my three. This is possible because we have done full container with respect to the horizontal axis. If I do that for vertical axis as well, it will do it like that as well. So right now we don't have any padding. Our rectangle is also center line. And the size of my frame can also decrease. Or rather I should say, the size of my frame, not a tangled, the size of my frame can decrease and still my rectangle wound decrease. It will occupy the size of my frame with respect to it. It will change its size. The rectangle will change its size with respect to the size of my frame because we have used the resizing that it should fill its container, right? So if I expand, then you can see the rectangle is also expanding. This is possible because of resizing. Alright, let's try to look at another example. What if I create, or rather I should say, Let's go back to our frame one where we have normal layout. Alright, we have normal layer. We don't have auto-layout for this fame one. Okay, we have a hamburger icon, we have our navigation tools, right? What if I want to add a text inside this particular frame? So let's say I want to add a text box. Alright, I've drawn it XBox. I will right-click on this frame. I will go to my plugins. And now you can see I have a plugin called as Lorem Ipsum. If you don't have this one, just go to find more plug-ins and look for Lorem Ipsum plugin. Just try to run this. Now what does this plugin do is basically it's tries to generate some random text. And now it will ask us to actually select some text layers. So I'm going to select this text layer. And over here, it asks us to whether you want to generate some random ten words and sentences, ten characters, ten paragraphs, whatever you want. So let's say I wanna generate ten sentences, or let's reduce down to five sentences. Okay, I'm going to generate this. And now you will see this is how it actually appears, but we don't want this to appear in this way. And other, I want this to take up auto height. Alright? And I want to change the size of my text box. So how would I do that? Let me just move this position. And what I can do is over here, I can reduce the size of my text box. Alright, let's try to reduce the size of my text box somewhere like this. Now it looks cool. And let's try to make this having auto height. Auto hide. That means, no matter how many different words or characters I add inside my text box, my height will also increase or decrease accordingly, right? That's what it basically means. Let's try to align this in such a way that no matter what I do with my friend, this textbox remains at the center most position. So we'll try to align it in the center. Alright. This is how I would like my textbox to be. And inside my constraints, I would like this to be in the center most position with respect to the horizontal or x-axis and the y-axis also, I would like this to be center aligned. So now if I try to manipulate my frame, let's say if I decrease the size of my frame, you will see that my textbox still remains in the center most position, right? This hamburger icon should be left and top. Alright, now if I tried to increase the size of my frame, you will see still this textbox is in the center, right? This is what we have done with the help of constraints, right? So this was about it. Let me go back to my hamburger. I hope it is in left hand top. Yep. Let's go the next part, which is aligning or other applying the resizing concept to our text. Let's say I add some text over here. Let me draw a textbox, or rather I should say that instead of first a blank text box, let me just right-click over here. Generate some random text of about five sentences to about this box. Alright, generated. So now you can see five sentences has been generated. And I will select this entire next box and I will apply auto height. Alright, cool. This is what we wanted. Let's try to add an auto layout to this particular text box. So I'm going to add auto-layout to this textbox. So just right-click and add an auto layout. And you can see auto-layout has been added to this particular texts, which means that now this frame three contains text. Frame three is not visible, but text is now part of my frame three. Alright? Now I can give this frame three when this color. So let's try to add a background color of, let's say gray, right? A greenish color. Gray color. And the text would have black, yellow, right? Let's try to give this a black color. Cool. This is what we wanted. Now, what happens in this case, if I select my text, you will see the resizing one. It has Hub contains, it has full container. It has a fixed width right now, selected and with respect to the y-axis, it has a contains. Now, what happens if I try to decrease the size of my frame? You will see that the size of my frame is being decreased, but the text is now out of my frame. The text box is not adjusting its size according to my frame size. So how will we change that? I can select my text and I can do the same thing, which is full container. Now if I try to decrease the size of my frame with respect to the x-axis, then you will see the size of my text box also increases in height because now it's trying to fit the container, right? That's what we wanted. So this is how we are able to do this and tie stuff. Now what if I add this entire frame three insight, another frame which is not a auto-layout it, what happens in that case, let's try to create a frame of about this size. Let's add this frame three inside my frame for what would happen in that case. What would happen? Let's try to find that out. So let me align it somewhere over here. I will select this frame three. Now one thing to note over here is that once we added a frame three, which itself is an auto layout inside another frame, which is not an auto-layout, which is normally, then what can we see will be C constraints or we're going to see resizing. Well, the answer is we will see both of them. As you can see once I select my frame three, I will get resizing options, which is either fixed width or height contains. And in the y-axis also I will see these two options, and I'll also see constraints over here. So right now, by default, it has been said to leftmost position with respect to the x-axis. And it is set to top position, top constraint with respect to the y-axis. So you can just play around with different directions to see how it would work and how it would look like for your design. So that was all from my side for this particular lecture. Constraints and resizing is very important concept to learn in Figma web design or app design, simply because when we are trying to make responsive designs, that is to actually look or a developed designs for different devices, then we should know that how our design would respond to that particular size of our device. 22. Figma Styles & Components: Alright, let's continue with styles and components. Now, whenever we are trying to develop a website or a web application, or it could be another application. We should create some styles and components for our design. Now why do we need them? Let's try to understand them first. So to give an example, you can just take a look at my own website. I have created my own website using technologies like reactant, tailwind, CSS. So over here, if you can see from the design perspective, you can see the text is black in color. The background or, you know, the main background highlight of this is not a pure white color. It's somewhere in the shade of gray, even in the top navigation bar, you will see that there is some tint to this gray, right? It's not completely dark, it's not completely bright. There is some gray shading to it. Whenever we try to hover around the navigation buttons like your home courses, contact me, you will see a blue color over there when we hover around that. And the same Teller is applied over here. When you scroll down, you will see that these cards, like the tech, I use, the HTML, CSS Bootstrap react, JavaScript, NodeJS, Java, all these stuff. All these cards have some shadowing to it. It has some border radius to it. It has some fixed style or fixed size of its width and height that has been consistent throughout the entire website. And at the bottom of my foot. Right. You can see at the bottom of my webpage, which is my footer, or via you can see my social links. If I hovered around that, you will see the icon colors, the brand icon colors. So e.g. that Twitter has blue color, grid up, has orange color. So when you hovered around those colors, hover around those items, you will see the brand colors. Initially. You won't see any colors because I have to maintain that consistency of my design throughout the website. So that's what we have done. Alright, now, whenever we are trying to develop a design for our website, first and foremost thing is to actually try to create styles, styles and typography styles. So what kind of colors that we're going to use in our entire website? What will be the primary color? What will be my secondary color? What do I need a gradient brand brand color? Do I need them? If so, then sure. Go ahead and include them as well. Then what about the text colors or maybe shadow or, you know, some background highlights to it. So those colors are also important. Then comes the topography part. That means what kind of text size you want for the title of your website. What kind of fonts, font family you want to use? What type of font weight you want to use. Do you want to use bold. Move on semi bold, new, normal. What do you want? How much do you want the letter spacing to be? How much do you want the line height to be? All those things would be formed in a formal style. Now, the advantage of using styles is that once you form a style, you can actually create multiple copies of those tiles in other components or other styles of your website. What I mean by that is, let's say in their home website, your homepage, you have created the center design. Now in the about page, you would have to actually maintain that consistency of the design. So we do try to actually manually try to paste those hex code for your color. Try to actually do each and every single detail. No. Why not just paste the styling that you are applied in the homepage. It will make your life easy, right? So that's what styling does. Let's say after developing the entire design, you show it to your client. Clients is that you know what? I don't find this color to be so much appealing. I would like to change the button colors from, let's say, pink, teal color. So when you try to go to every webpage, like homepage about paid contact page and find all the buttons and then manually try to change the colors from pink to know. If I have the style which I've applied to all the buttons, I can just simply change the color of my style. And the rest of the changes will be applied to all the buttons in my website, right? So that's the advantage of my style. Competence, on the other hand, is like let's say I want to create a button, or let's say a car like this, right? A car is just simply a display card, alright? Or icons to be like this, of this size. Then once I create a car with this particular weight, particular height, particular border-radius, particular text at the center. We have to define the height, width from which the text should be placed. Do we want it to be center aligned, left and right align all those things would be formed in a form of a component. Then you can replicate the competent into other webpages or in that web page itself, but at a different spacing. So that's the advantage of your styles and components. Let's try to look at how we can actually develop our own website or other. How do we develop our own styles and competence for our design layout, right? So first of all, we'll need a brand. Logo. So randomly I just picked out this particular brand logo from Google. So as you can see, this logo has two shades. One is purple or dark purple, violet color, and the second one is a pink, or you can say a burgundy shade, right? So I can pick these two colors and I can use them in my style. So first of all, you need to actually install a Chrome extension in your browser, and that's the color picker. So you can just search for color picker Chrome extension, and you can download them and install in your Chrome, right? Once you do that, you might see that this might be the pop-up notification that you might get that file access is needed. That means your personal file, like this particular image I downloaded in my folder and I opened it with Chrome. So normally what happens is that any of the images in our system gets opened up with the ImageViewer, like a photo viewer or I don't know what happens in Mac. So if you don't want to do that, you can just open with Chrome so that you can use the Color Picker extension to pick the color hex code value of this violet and Burgundy shade. Now you can go to the settings and scroll down and choose this, allow access to file URLs. Once you toggle that, you can close this part, you can come back to this logo, click on this Chrome extension to spec, and drag to the color where you would like to pick the color. So somewhere around this point, I would like to copy the hex value. So I'm just going to copy my hex value with the help of controls here you can just click on this button, which is to copy your entire X value. Go back to your Figma. I'm going to create a frame of, let's say desktop size. Alright? And once I do that, what I'm gonna do, I'm going to create one ellipse shape of 160 pixels in width, 160 pixels in height. Once I do that, I'm going to add color to this, which is a hex value. So let me add and just make sure that you remove the pound symbol or the hashtag symbol before your hex value and hit Enter. Now this is my primary color. So if I want to store this in the form of a style, you can see this icon besides your film or your plus icon. So you can see this particular four dots button, which is style. So just go over there, click on this plus to create your own style and give a name to this thing. So I'm just going to give this as primary. Alright, and I'm going to choose this as create style. Now I will make a replica of this ellipse, and now I will use the differentiate of that entire color. Now what if your brand logo does not have any other color? It only has one color, then how will you actually create a secondary color for your design? You can use Adobe Color. We have used this earlier, right? So you can just go to Adobe Color and slash created. Over there. You will find this analagous, go over there and paste the primary color that you would like to use. So I'm just going to paste my primary color. I will hit Enter and you will see different shades of it, right? You will see different shades of it. So right now it's showing us this color, showing other versions of it, not Burgundy versions. If you go to monochromatic or triad, complimentary, split, complimentary, double-slit, you will find the color scheme that fits your design. So it's all up to your design, what you would like to use in your design. Alright? But since this particular logo has two different colors and it does match to the design, I'm going to choose this burgundy color and violet color. So again, just go to your color picker, pick up. And sometimes this extension might not work. So in that case, what you can do is just go back to your extension or click on this extension. So I can click on these three dots and go to Manage extension. Click on this access to, I have access to file URLs. Refresh this, go back, refresh, select Settings. Again, try to toggle this, go back. And now you will be able to pick this burgundy color. Let's copy this hex value will go over here. We'll paste this. And first of all, I need to actually unlink this or detached my styling. What happens usually is that let's say you create one component or any not competent, but let's say a shape or an element or any of the item. And you pasted some styling to it and you made a duplicate of that item. Now, the duplicate item will have the exact same, same styling which are original item contained. If you want to actually apply some different styling, or you want to create different style from the duplicate item, you first need to match the style from it. So you can see this unlinked button or an icon just click over then. And now you can go back to the fill, paste, the color hex code, remove this ash icon, click Okay, and create the styling, which I would give the title as secondary. Click Create style and secondary color has also been formed, will also try to create another ellipse with a gradient one. So let's try to unlink them. Alright? Now what I'll do instead of solid. Make a linear, a linear gradient. And now this color will be burgundy, and this will be my, this color, this color. So let me copy this color. So I'm just going to click over here. What's the color value? Let me select the color value. I'm going to select the color value and undo this so that it has this primary styling. Let's go over here. Select Linear, go back, paste the value, hit Enter. I'm not sure why did the select green color? Ideally, it should select this color, right? So let's try to pick this. And yeah, that's what we have. And I want this to have in a horizontal way. That means from Burgundy to violet, I want the shape to go from left to right, something like that. So this is what we want and this looks cool. So this is my brand gradient. I can give a new styling to this thing. So let's give brand gradient. Alright, let's create style. So you can see we have created three different colors styles. Now, what about our next color? So let's unlink this. Let's give a dark black color. Somewhere, somewhat like this. Let's make a copy of this. Let's give this as another. Let's try to change the transparency of it from 100% or let's say 80 or other, let's say 75%. Alright, then from 75 to let say 50%. So let's change this to 50 per cent, then 50-25. Let's give this as 25%. Then from 25 to, let's say 10%. Then from ten to, let's say 5%. We have created these different styles. Let's try to save them as a style. So I'm gonna give this as black hundred. Alright, black and red. This one as black 75. So let's create a style called Black 75. This one has black 50. This one as like 50, this one as black 25. This one has black ten. And this one has black phi. Alright, so these are different stylings that we have created so far. Now, imagine that I'm trying to create my website. So again, I would create a desktop frame. Inside this, let's say I take the primary color as I can choose the document color or local colors. From documentaries to local close. And now you have the option to choose from. So you do want your primary color, your secondary color. Let's try to pick our primary color, right? I took the primary color. Let's say I have some, let's say let's form a rectangle box. Let's add a color, which will be the secondary color. Let's also add one button to this thing. So let's add a button over here. With, let's say, of a gradient. My gradient. Did we not create a gradient style brand gradient? Yes, we do have. And why can't I see it over here? Let's go back. Choose Fill. Or rather I should say, select your brand gradient, right? This looks cool and doesn't look so cool, like considering that the background is purple color. So let's try to manipulate around so that we get a desired output. Or rather I should select, I should select, you know, Let's create a button, one button. Button width, let's say about a radius of 20. Alright, let's add some text in it. Let's say I want this button to have black, like 25, black 50, black 75. Is that like 75 years? Like 75, somewhere inside over here. Yep. And I can also add some text inside this thing. So let me add a button next. Alright. Now, this button text, I would like to give this as 32 pixels. Two pixels. I want this to be semi bold. Have some Font family of Roboto with the center line text. I want this to have auto height. I want this to have some letter spacing. So let's say the lattice spacing is about five, 5% auto height. Okay, we'll leave this as auto height. And let's also give this as auto bit. Alright. That looks pretty much alright. So this is my button. I form this design kind of stuff. Alright? Now, if I want to create a button component, a component like layout, then how can I do that? If I want this to be at like a button. So that no matter how many buttons I have in my website design, I can use them. And what can I do in that case? I can just drag this entire thing. And at the top in the toolbar, you will see this particular icon, which is to create your component. And you can even see the shortcut key, which is wholly or control or command in your Mac, Alt in your Windows, or options in your Mac and K button. Once you do that, a component will be created. Alright? A component has been created. Now this component is actually a master component, or you can say this is a parent element and not a child element. Now what do I mean by parent and child? Let me show you. This is my parent one, right? If I want to use this exact same component in other web pages or in other frames, or let's say in this frame itself. But I want to make this, I want to make use of this component. Then how will I do that? Well, I make use of the control D or old, holding my order Options key and using my mouse to make a duplicate of it. No, I'll make use of the assets. I can just go to my assets in the layers panel. I will look for local components. I will find desktop too and button text. I can just drag and place it over here. Now, if, let's say for some reason my client finds out that I don't like this button text. I want the text at this button to have different color. Then how will I do that? Let's say my design contains hundreds of buttons. And the client says that I want to change color to this button. In all the buttons, I want to change the color inside my button. And that change should be applicable to all the buttons in my design. So how would I do that? I will just select my master or parent element. I will go back to this color. I will change this to gradient. And now you will see a Gradient button has been formed over here. You can see that this is my child. If I make changes to the parent one, all the elements will have or rather will reflect the same changes. Right? I hope this is clear to you all. Now what if I want to make some texting or, you know, some tech styling? So what will I do in that case? Let's say I create title text. Alright, I will select this entire. Next. I will increase the size to, let's say 40 or 40 might not be enough then 48. Alright, I want this to have, let's say Josephine Sans semi bold. This looks cool. And this is what I want for my title. So I can select this entire text. I can choose this one to create a style of my text. I can add. And I can name this as Title. I can create one. Another way is to actually create a body text as well. So I can just say body text. Now usually what happens is that body text is usually, usually has a small font size, right? It has some small font size. Where's my other? Now, for your body text, you might not see the font-family options. You won't see the letter spacing options and so on in the design properties panel. Simply because right now, Figma assumed that since we created another text box, it would contain the same styling as our title text. So again, now you have to unlink or detach the style which it previously contained. And now you can change the styling of it. So what I can do, I can just reduce the size of this text. Let me just select unlink, change the styling to 24 from semi bowl to, let's say normal or regular. And let's keep this as left align. So that's what I have done correctly. Let's go back over here. Let's say, I want to rename this to read more. Read more. Alright, Let's say that this particular frame in the layers panel, I can select my desktop to frame having the color, which is I can select the color. I can choose, let's say black 25. 25. You might not see this black 25 simply because the workspace area of my Figma is in dark mode. So you won't see the changes. So if I want to change to something like the black phi, ideally I should see because black phi is light in color. Let's see. Do we see? No, we don't see lag phi n black color, right? So I will have to change the Chrome, Chrome appearance from dark to light mode. So let me do that. Well, changing the theme of my Figma did not help. Basically, what you need to do is just click on the workspace area, go to background and change the color to gray. By the way, if you want to change your Figma from light to dark mode, or maybe from dark to light mode or vice-versa. Just go to this figma icon, drop-down, click on Preferences Team, and just choose whatever you would like, light, dark, or system theme. So that's what I did. And now you can see that this frame desktop too has gray color, right? Let me just zoom in a little bit so you can see it properly. So let's select our desktop, desktop to frame. Again, we'll select over this desktop to color as it's black phi right now, right? We can choose black 50. Yeah, like 50 looks cool. What about black 25. 25. So it looks good, but like 50 looks much more Good. So this is my entire frame. Alright, Let's say that I'm talking about this component. I have this particular next. Alright, let me add some text inside this stuff. Alright? I'm gonna do. What I'll do is let me add some text inside this. Let's say I'm writing that term. Full stack, full-stack web development. Full Stack Web Development. And I can add styling to this. So where's my text? I can add styling. So I can use title, I can use title, and I can just drag so that it fits somewhere over here. Where's my body? This is my body text. Let me add this to our new textile and we'll add body. Alright, let's create style. Alright? And let's add a styling over here. We'll give this as some random text. So for that, what I'll do plugins Lorem Ipsum. Okay, let's create a textbox. Generate phi sentences, that would be enough. Now, this has automatically assumed that it would use body style. Why is that? Because previously created this body style. So it has now using body style. So that's how it's actually using this anti stuff. If you want to replicate these two entire stuff, you can do that. You can use it over here, right? You can use it. If you want to increase the size of your frame, you can do that as well. You can even add auto-layout, you know that stuff. Let's change the color of this particular rectangle from secondary to, let's say primary site can choose from secondary to primary. It looks good. We can see this is how we actually work with styles and components in Figma. 23. Introduction to Figma Effects & Strokes: All right guys, let's start with Figma effects and troops. So let's try to create a rectangle box with color. Let's say green. This shade looks nice. Alright? What if I want to add some border to this particular box of maybe, let's say black color. Then in CSS we know that we can give a box, right? We can give about a box. In CSS, you must have learned about content box and border-box. So that's what we're going to look into. So let's say I want to add some border to this particular box, then how can I do that? Well, if you focus on the design properties panel, you will see an option to add a stroke. So you can just add. And now you will see a thin line of black color has been added as in the form of border to our green box, right? The color is black, opacity is red person. And there are about one lines. Now what does this one line actually mean? So if I zoom this, if I zoom this to the level where you will find that Figma at its core are these small boxes, right? There are so many different small boxes. Now, let me just scroll to the top so that you will see that how many boxes of a black border occupies, so that you will have an idea why do we have one as the value? So now you can see right over here, you can see we have one box. So this means that even though my rectangle box, rectangle green box has 622 pixels in width and 320 pixels in height. This border is now part of my rectangle box. It's not outside my box. It's inside my box, right? You can see we have selected inside. This is part of my rectangle box. If I increase the size of my border, then the rectangle, which is green in color, will try to appear smaller. So right now it's occupying only one box. If I change that to two, then you will see its occupant toolboxes with respect to y because that's our discounted, alright? The width, or you can say, which would be this height is the height of the box increases based on the number that you put over here. If I change that from two to, let's say 20, then obviously so many boxes would be occupied about 20 boxes. Now to see whether our rectangle box actually decreases in its size or not. So now you can see rectangle box appears but smaller than it used to. So if I change that to 60, you can see green rectangle looks so small. But if I change that from inside to outside, then now the green box looks bigger. But the rectangle, or rather the border, which is black in color, is now outside my rectangle. It's outside rectangle. It's not part of that rectangle box anymore. So that's what it basically means. If I change that to again 20, you will see this is how it looks like. We have one more option which is center. What does that do? Center basically means that it is a combination of inside and outside. So 20 boxes is occupied inside and outside as well. And the center is formed with this blue line. You can see this is what basically your stroke actually means. You can change the color of the border if you want it to have linear color, you can do that as well. Let me change that to, let's say this color, this won't look good. Let's change to read something like red and the other color to, let's say maybe yellow. And let's give this color. But this kind of linear shadow. Alright. Yeah, this looks good, right? This looks good. Let me put it this way so you can see the color properly. We want both the colors to have 100%. Because you can see over here, when IT person, yeah, now it looks good. And what else? Yeah. So that's how you can actually change the color of border as well. Alright, let's look into some effects. So let's see. I'm creating another box. Now. I want this box to have some kind of a shadow. In their design properties panel. You can see one button which is effects. Once I click on the plus icon, you will have a drop shadow. So it's now applying some form of shadow which you might not be able to see right now. But once I de-select this particular shape, you can see some shadowing is formed at the bottom of my box. If I select this again, I have the option to choose the inner shadow layer, background blur and so on. But right now, let's just focus on drop shadow. So I'm going to select this icon. I will see the x value, y value. What does that mean? It basically means the offset value. If I change the x value from zero to, let's say 12, then from x-axis with respect to x-axis, it's moving well pixels ahead. So that's what it basically means. Initially the X offset value was set to zero. So there was no offset in the right or left side? Correct. And in the y we have the value four. So at the bottom you will see some kind of a shadow. If I again change that to 12, you will see shadow appears, right. There is some blur as well. Let's try to remove learn from now. If I remove blur, then what can you see? You can see exact same shape formed, right? When you walk across the street where you have some streetlights and a shadow forms behind you. So what does that mean? The shadow is formed tight and shadow is exactly the shape of your size. So shadow in Figma, whenever you are creating shadow for your objects or your elements or items, what happens is that it's going to occupy the same exact size. You can even change the color of the shadow. Currently it has been set to black, 25% transparency. But if we want this to have some color, let's say purple, or let's say bluish tint color, aquamarine color. So you can do that. If you want some blur, you can add a blur as well. So you can see some blood has been added to this particular shadow. If you want it to spread. Spread basically means that how much do you want your shadow to spread a smudge effect? If you put it 20, you will see it has been smudged from all the directions. So this is what basically a drop shadow actually means. If you change from drop shadow to let say inner shadow, you will see the shadow is now appearing inside of our element. That's my inner shadow, will look into the layer and background blur later on. 24. Text Effect in Figma: Alright guys, let me show you one cool text effect that we can do. So what I have in my mind is that we can take an image peeking through our text. So that's what I have in my mind. For that. What I'll do, I'm just going to create frame of maybe about the size. The size is way too big. Let's try to drop the size from this to 1080 by 1080. And the next step we would like to use when image. So this is our frame. Let's try to bring one image using our Unsplash plugin. So let's try to bring abstract. Do we want an abstract or portrait? Let's take portrait. And let's try to take this guy. Alright. Essentially, what happens is this. Yeah, so that's what we wanted. We did not want this image to be exactly inside our frame. We want it to be manually done. So now I'm going to place this image inside of our frame. Now how do we do that? Simply by going into the Layers panel, you can drag the image layer below your frame. So now it's inside the frame. You can just move around where you would like SMH to be. If you want to manipulate with this image, you can do that as well. Just click on the fill. You can just drop the saturation if you would like, increase the saturation, whatever works best for you. Want to play around with contrast exposure, go ahead and do that. But this image does not require because it's simply your black and white image. So next step, what are we going to do? Let's try to create one rectangle. Maybe about this size. And let me just zoom this to about 50%. Yeah. And the next step, let me also increase the size of rectangle box, somewhat like this. Yes. Next, we want the color of this box to be white. Alright, let's also, let's also try to create one text inside this box. So we can say something like Figma. Figma is rather, Figma is awesome. Alright, sigma is awesome. And now I can make UI designs. Alright, something like that. And let's also make this auto height text box to be auto height. Okay, font style is good impact. We have 96, alright? If we want to increase the size of this box, we can do that as well. Alright. We can do it something like this. Yeah. And what do we want? Is that white rectangle box should remain as it is. But this text should have the image as well and some blur as well behind this text. So in order to do that, what we can do is we can place a replica of this image by holding down the Alt key, placing it at top. This is how it would look like. The next step, we want our text. We can select it and we can use this, which is to use as a mosque. And this is how our output looks like. Simple stuff. So what has happened over here inside this frame one, This text is now acting as a mask over our image. And this image is now, or rather this rectangle box is on the topmost layer of our top, not topmost layer, but rather on the upper layer of my image. You can see right over here, this is my image about that we have a rectangle box. Inside this rectangle box we have our text. And text is used as a mask to our image. That's what we have done. You can select this text. Go to the, you know, your effects, you can add, you can add some drop shadow. If you want some shadow, let's say black color with maybe about 50% of shadow. Blur to be about, let's say ten X, ten Y to be Phi. You can see this is how our output would look like. You can see this is how we have done with the help of Figma effects and shadows. 25. Sliced Text Effect: Alright guys, today I'm very excited because now I'm gonna show you some pro level stuff. So what are we going to do is that we're going to slice our text and we're going to add some shadow to it. So to do that, first of all, let's try to create a frame of desktop size. Alright? So this is our dimension. Let's give some color to our desktop. So I will give orange. Let's give orange, maybe dull orange color. Yeah, this looks good. Let's add some text to this frame. So I'm going to add the text which is sliced. And you can see that the font family I'm actually using is impacted and the font size is 300 pixels. Good. Make sure that the text is center line, both in with respect to the x-axis and with respect to the y-axis. So now our text appears perfectly center. Now, with the help of Pen tool, I will actually slice over text. And now I want the text in such a way that it has been sliced diagonally. And some distance is formed between these two diagonals, the top-left diagonal and the bottom right diagonal. And the space is minute, although noticeable, but not that game changing. And we want to add some shadow to it. So in order to do that, I will use my pen tool. Just select your pen tool. What I will do, I will place it somewhere over here so that I can directly slice it diagonally. Somewhere over here to the top. Go towards left so that it matches this position. Bring it down somewhere over here. So this part of my text has been sliced. Now what I'll do, I will select this vector which has been sliced along with this text. And now what I'll do this, we'll subtract the selected part. You can see this has now been subtracted. The portion that I actually selected has now been sliced connected. Now what I will do is first of all, I had to select this vector. Whoops. Let me select this part. And what I wanted to do is that this subtracted part, right? The subtracted part, let me choose this vector. I wanted to give this, remove the stroke and I wanted this to have, which is gray color. So you can see the portion has been de-selected or other that part of my text has been removed simply because we have removed the stroke part. Alright, so this is my subtracted. Alright, let's create a duplicate of our subtract. Alright, I'm gonna make a duplicate with the help of Control D. Now, we have to subtract the first which has been sliced and the second one which is duplicate. The one which has been sliced. I'm going to keep this as intact by locking it. And the one which is right over here. What I'll do over here, I will expand. I will choose this vector, I will choose this color. And now, with the help of this, which is edit my object, I'll make sure that I have my Move button selected. I will choose this topmost part, which is three, these three vertices, the first one, the second one, and the third one. So I'll just drag and select this part. Now, I will drag it downwards. Alright. Maybe this part, this part has been selected. I will choose this done. And now what has happened is that two portions of my text has been sliced. The first one was my the upper left and the bottom right. Alright. So to subtracts have been made. So now I will choose the vector one. Alright? I will change the value of my X offset value. I will increase the X offset value. So if I increase by holding down my up arrow key, you will see that it's moving slightly towards left. If I increase the size of my y-value. What's happening over here is that the part is moving and this is forming some kind of a blank space, right? There are some sliced action going on. Alright? Now what we want is that, let me just make it this way. Now what we want is that inside this one, this part will make a copy of this vector by holding down our old. Or if you're using the Mac, you can use the option key and just place it right over here. Alright, let's also create one ellipse of about this size. And we will group this, this ellipse and this vector, both of them, but right now we want this ellipse. By the way, this ellipse would be along with our vector. Alright? This ellipse should have a linear color with black hundred percent and black zero per cent transparency. So just make sure that both the colors in the end are black. This should have 100%, this should have 0% opacity. Alright, let's group them. So I'm going to select this part and this part holding down my shift key. And rather than actually grouping them, I will use it in the form of a mask. And now what I will do is I will select this. I can select this entire mass group or other just ellipse part. I will rotate this angle. So I will rotate this. Yep, I'll move this over here. Let me change the rotation again. Let me select my ellipse. Rotation. Yeah, this looks cool. Let's reduce the size of this shadow. Somewhat like this. If I, if I select my ellipse, again, this is exactly what we wanted. Such a cool design. So this is how you can make your design to look like 3D and you can have such cool effects using Figma. One last thing that is left to be added so that it would be like a cherry on top of the cake. So that would be to add some shadow to our shadow to this particular ellipse. So we have added this fill color. We can go to Effects, add some layer blur to it. And if I click on this icon, we can change the blur value from four to, let's say ten. If I do that, then you will see that this is how our text would look like. If you want to reduce down the size of our blur. You can do that as well. And perfect. This is how it should actually look like. If you want, you can change the frame name from desktop one to, let's say, sliced text effect. 26. Outline Text Effect: Alright guys, let's take a look at how we can create outline text effect. So for that, I'm going to create a new frame of about this size. And before we actually create a wireframe, you know what, what we will do? We'll just bring one image from Unsplash plugin. So let's just try to find an animal. Okay, this giraffe looks cool. So I'm going to bring this one and we'll try to remove background from this image. Using the Remove BG plugin, I'm going to remove the background from this particular image. Now once the background has been removed, what I'll do, I'll just zoom out a little bit. And next step, we want a frame. So let's create a frame of about size 1920 by ten ADP. That's your pixels, right? That's our display format. So 1920 by 1080 pixels, right? Once we zoom, and we want this image to be inside of a frame, that's what we want. Let's try to center align or other first, we'll try to scale this. Will try to scale this this particular giraffe. But do you know what this frame, instead of 1920 by 1080? Let's just also make this as well, the width zero by 1080. And let's try to bring this image to try to scale this down. Again. Let's try to scale this. Yeah, this looks cool. We'll try to zoom this so that it appears nicely. Alright. We'll try to center align with the help of this one. This looks cool. We'll also give our frame one color. So let's try to give this frame a color. So in order to give this frame one color, I'll make sure that it has been selected to move, select your frame, and then go back to Design properties panel, go to this color, solid, will find a nature color which is green obviously. So I'm looking for that forest color shade and a bit darker side. Yup, this looks good. Alright, next step, we want a text, so I'm going to bring my text box. The size. Looks cool. Alright, let's try to write down outline text. Alright, let's try to center align it. With the help of this, I have centerline, my text. Alright, know what I have in my mind to outline this two texts, make this outline type effect. What we have is that we want this image to be mass in such a way that it appears to kind of look like that. The image has been masked and text has this image inside it. But we're not using the masking method. Rather we're gonna be using the outline method and we're going to see a short trick. So as you can see over here, we have this text and I'm gonna make a replica of this. So I'm going to hold my alt button and I will bring down below my image. Now what happens over here is that there's one layer of texts, which is about my image, and one layer of text which is behind my image. So there are two layers. Another one which is in the front, we want to hide it. So for that, I will just remove the color. And once the color has been removed, obviously, you won't see the text character because now it's invisible. Although the text is present, there is tax return, which is outline texts. But since it does not have any color, how will you seed? So that's what's happening over here. The next step, what we want is that this particular text which is at the front. We wanted to give some outline. So I'll add some stroke. And as soon as I add stroke you can see, you can see the image which is inside my text. Now, I'm going to change the color of my, you know, the stroke to be also white will make this. Having a phi cells. We want this to be inside and this is how our text would look like. So at the front layer of the text, which is appearing at the front of my image. That's not having any text. It's having only border. Border. When it has border and it does not have any color. Obviously, you would see image. Now behind that image. What other thing you have? The same text with the same color. So it forms like, you know, like it actually gives you an illusion that you have made a masking of your image. So that's what's happening over here. Otherwise, it's pretty simple stuff. We have done nothing over here. Thus, simple two things we have done. First of all, we used our image inside the frame. They put a color to our frame. Then we used two layers of our text. One which is at the front of my image, having no color but only stroke, which is again the same color as my text color. And the text layer which is behind my image, is not having any border. It's having only fill color. So it gives an illusion that the image has been masked. 27. Glowing Icon Effect: Alright guys, let's look into how we can create a blue icon effects. So for that, I'm going to create a new frame of the Instagram post size. Let's make this darker or black in color. Now, we will import when Instagram icon. Now to do that, I will actually make use of when plugin, which is actually a font icon or Font Awesome plugin, you can just find more plug-ins and look for Font Awesome icons by I conduct. Just run that and look for the icon that you are looking for. What I have in my mind, we will use Instagram icon and we'll modify it in such a way that using the effects and shadow that we have learned so far, I'm going to make it appear like it's glowing. Alright, so let's just use that Instagram logo. Alright, let's try to align its center. Center line. This has to be center aligned. Select this somewhere over here. Alright? And let's also try to increase the size of it. Let's say 200 by 200. Or what else you can do is that you can just lock this so that if you change the size of your width or height, the other dimension would change itself respectively. So if you want it to be 250, you can do that. Looks good. Select that. And we will change the color of our icon from black to white so that it's visible. Next step we want is that, you know, the next step we will require is we'll try to use some shadowing effects. So we'll click on the Effects. Will use one layer blur first of all, or rather I should say first inner shadow we will use. Now inside the inner shadow, what we want is that there should be no offset, right? There should be no offset. We don't want the shadow to be outside the given range. It should appear as it is, like how our Instagram icon looks like the same dimension, it should not be offset from x or y-axis. That's what we want blood to be off about 20 pixels. And the color that we are going to require is purple or violet color. That's what Instagram uses right? Somewhere around this shade. And we want this to be 100%, 100%. And this is the color that we're going to use. The next step we will require is we will require another shadow which is your drop shadow. So use the drop shadow. Again. Make the offset to be zero. Make the blur to be 50. Let's try it with 50. Change the color to that same exact color, which is your color that we actually used. Send the document colors. You'll find that over here. And that's what we wanted and blur to be 5,000% right? Now what I'll do is I'll make a copy of this icon Instagram. So just make a copy of this. So to Instagram icons we have, you can see, don't click on this vector. Click on this icon, Instagram, which is group. Alright, this is the one that we actually used, and this is the copy. So inside the copy I'm going to remove all the shadows. What I will use this just my stroke. So just add a stroke, make the stroke to be white in color. Make this about five pixels of size. And the color that we're going to use instead of white. Let's use the same document color. And now you can see this gluey type of effect. Lastly, before we end this tutorial, the one thing that you need to do is just remove the fill color and also add some effects, which would be the layer blur. So just add a layer blur and make this about five blood. What happens if we increase this? You will see that the blur around the item is what we're gonna see if I increase it. Alright? So if you want this to be five, it would look cool. And that's how you create glowing icon effects. 28. Mini Project: Alright guys, today I'm very excited because now we're going to look into really good stuff. Because we're going to build one mini-project. Now, this mini-project that we're going to build is just a simple header. Or you can see a landing page for your website. And we won't go in depth about it. Dad, what kind of topography, what kind of font family, what kind of color scheme you should be using for your Figma design. But rather we will just look into how to place our items and how do we arrange those things with what we have learned so far. So for that, I will just create one frame of desktop size. And I want it to be off MacBook Pro 14 inch. So we can select that. And let me just zoom out a little bit. Alright, not that much. 50 per cent, that would be good. Yeah. The next step we want is that we want to make sure that, you know, we can add layout to this. So for that, just make sure you go over here. So just make sure you go over here and make sure that layout grids has been taped. Next step you want is that just click on this layout grid and you will see all the layout grid that is in the columns and rows as well, but we just want our columns. So for that, what are we going to do is we will just use this one, which is, I'm going to select this icon. I will choose from grid to only columns. Once I select columns, will change the column count 5-12. If you want to change the color as well, you can change that from, let's say, instead of red, you want something like light blue are like this color. So you can do that. Next step. What are we going to do is that we want some kind of margin from the first column of our grid and the last column of our grid. So we're going to add some margin. Select, say I want to add margin of about 50 pixels. So I can do that. Well, this doesn't seem good for our project, so we can change that to, let's say maybe 100. Now, it looks good. But what if I change that to again, 125, something like that. This looks pretty much cool. The next step we have gutter spacing. Now what does good spacing basically mean is that the spacing, the extra space between the two Layout Grids are between the two Layout columns. This space where my cursor hovers is my gutter space. I think gutter space right now it's 20. If we change that to, let's say maybe 30, it looks good. So we can make this as 30. Next step. What are we going to do? I'll just zoom this a little bit so that you can see. Alright, the next step, we want to create a navigation bar. So for that, I'm going to create vendor tangled box starting from this corner to this list so that attaches properly. Let me make sure that this touches this line as well. And we'll make sure that the height is 100 only. Alright, let's, let's increase that to 200. No, no, that would be way too much. So I think hundred 2,000 was good. The next, we want to extend this till this point. The next step, what are we going to do? We want to bring our icon right over here and the other menu items here. So for that, I'm going to use my plug-in. If you have created your icon, you can just bring out, or if you want to create your own logo, you can do that in Figma as well. So just use this Font Awesome icon. And I can look for any of the brands. Let's say I want to use some famous brands like could be LinkedIn. So let's use that. Use that. And we'll make sure that this icon is six pixels in height and 36 pixels in width. So I'm just going to use this 36 pixels in height and 36 B-cells and wet. Alright, 36 by 36. It's way too small actually. Let's change that from 50 by 50. Yeah, it looks good. What if I change that from 50 by 50 to let say maybe 60 by 60. Yeah, this looks good. So 60 by 60 is the ideal size that I would actually use in my project. Now it actually depends on your appearance of your design. There is no as such, hard rule that you have to use 60 pixels in height and width for all your icons in your web design. You just have to play around and see whether it fits your design on order. The next step, what are we going to do? We'll make sure that is, it is centrally aligned center with respect to the y-axis. So I'm just going to select this, which is align vertical centers. Alright, the next step we want is that we are going to make use of our menu. So by just pressing my Tiki, I can actually write down, let's say home. Home. Then I have about Dan services and contact us page. So these are the different navigation menu items. So home is one that I will select. The next step, I want the text size to be about, maybe let's say 36 pixels looks visible. So we'll go ahead with 36 pixels. Will use medium. Medium looks good. And the font-family that we should be using is that let's say, what if I use something like let's keep this intern. I don't mind using this one. Well, I'll do next. I'll make a copy of this. I will change the content from home to about ten, from about to contact us. Contact us. And lastly, I will use services. Services. Alright? Now the reason behind I have used these different text boxes and I'm aligning them in different directions. You can see this one is at the bottom, this is sitting at the top of home. This is again at the bottom. This is again at the top. There's no such proper alignment being going on. So we can do that. What do you need to do is just select all these one and form it into a form of a group, not exactly group. You don't have to use Control G or Command G. What do you need to do is that use this one. Once you do that, you can actually add an auto layout. Once you add auto-layout, your job is done. So that's what you did. Now, just drag out this entire frame and place it over here. Now, why did we place it over here? Why did we make sure that Contact Us stays at the this part of my layout because we want that the layout column last part should touch the last menu item. So that's what we did over here. And the blue icon that you saw previously and I clicked over, there was nothing but to just form a frame. So we just made a frame selection. You can do that with the right-click button and you can use the frame selection as well. So there's nothing such rockets and rocket science being going on. That the next step we want to do is that we want to hide our, this rectangle. We don't want this to appear in our website. So for that, if you want, then you can use that and you can just add some blurred shadow and you can use some transparency for this particular navigation bar. The next step, we want to make sure that this one and this one, both of them are vertically aligned. So we'll just make sure that both of them are vertically aligned and we'll just hide our rectangle box. Once you hide that, this is how our left side would look like. Alright, the next step, since we are actually trying to create one project, a mini-project will make sure that this is a responsive. That means even if the size of my wet changes, alright, if I move from MacBook Pro to let say, a mobile device, then the contents should not skip out or it should not be cut out. So to make sure that it does not happen, what are we going to do? We'll select our icon, this LinkedIn icon. And in the constraints part, in the constraints part, I should see the constraints part. So I'll add an auto layout. Once I add auto-layout, you will see this constraints and resizing elements. So in the y-axis, we want this to hug other items. And from x axis we want this to be in fixed to it. Alright? The next step, what are we going to do is that now to make sure that our design is responsive, that is, if I go from MacBook Pro screen size to, let's say a mobile device. I don't want some of my portion to cut out. Right now. Our design is not responsive. So what will happen if I reduce the width of my website? Then you will see some of the contents in my menu is being left out. You can't see the Contact Us clearly. Even if I reduce this wet from this part to this part, you will see the lumen icon to be outside my frame. Okay, this is not part of my theme, so we'll just bring this inside this one. And once you do that, you can see this has been left out. So what I will do is I will just undo so that we get the size. Again. It makes sure that icon is inside of a frame, MacBook Pro frame. And to make sure that our designers responsive, just click on this particular frame. Alright? Right now you won't see the constraints part. You will see the resizing part because we have used auto-layout. So just use right-click, use a frame selection and you can see a new frame has been formed. So I can just rename this frame to be menu items. And now you will see that this frame will give us constraints. So now I can say that in the x-axis, I want this menu items to stick to the rightmost side. And in the y-axis, it should stick to the topmost side. So now if I try to reduce the size of my frame, you will see the menu items are not being compressed. Rather, my icon has been compressed. So we'll see that how we can fix this icon as well. So again, right-click on this. Use Frame Selection. Change the name of the frame. We can change this to icon. Icon. You can see logo. You can just rename this to no-go. Alright, once you have done that, stick to left and top. Now if I try to reduce the size of my frame, you can see that my logo is not compressing. Alright, that's how we made it possible. The next step we want is some title text and a body text. And below that we want a button. And beside that, on the right-hand side, we want an image to be placed. So for that, I will use text. And you know what? I will just use a text box. Inside this text box, I will paste the stuff that I have already used. So I'm going to copy this text, which is start your own business journey today. Paste this over here, make sure that it uses this auto wet. And the next step we want is, I should say, the next step we want. That makes sure that it's 36 pixels. If you want this title to have 40, you can do that as well. To be bold. You can do that as well. You want some other font-style. Go ahead do that. I won't do. Just select this one. Makes sure that it touches this part. Alright? Make sure it sticks. This particular part. We'll create another text box. From this part to maybe let's say this position will paste the rest of the next, which is my body. So select this. Again. We'll use 36. You can use your styles, you can, you can save style, and you can use that in other parts of your design. Make this normal, regular. Yep, that is it. So I will just make sure that this textbox has auto height. So we'll do that. And let's just make sure that there is some spacing which justifies the distance between your title and body. Alright, the next step we will do is that we're going to make use of our button. So in order to create a button, I won't be using a rectangle box. Rather, I will be using a text box. So I will just use the texts which is start now. And to make it appear like a button. Why are we using? First of all, why are we using this text box as a button and not a rectangle box so that we can make our button responsive. So what I'll do, I will add an auto layout to this button. I will just select this. I will add an auto layout. Now you won't see the option to add an auto layout directly to the text works. First, you will need to add the frame selection. So just use frame selection. And now you will see an option to add an auto layout. Once you do that, make sure that it is center line. And then you provide some padding, whether you want it to provide or not. So for this design, I am going to provide some horizontal padding. So from the left and right positions, we want 30 pixels of padding and from top and bottom V1, 15 pixels of padding. I've done this. Now, let's add a color. So I want the color to be about this, a positive call to action button. So this color looks good, and the text color would be byte. So let's select that. If you want to add some border radius, you can do that as well. So let's try to add a border-radius as well. So let me add 20. Once I've done that, what I can do, I can just select this. I will place it. And you can see the distance between this body text and my button is 61 pixels, and the distance between my title and body is also 61 pixels. So we'll just leave it like this. And I will make sure that the constraints are left or right. It sticks to the leftmost part. And it, actually, it's, a constraint, is actually fixed width. Alright? Once you have done that, what do I mean by responsive? But then having made the responsive button, yes, of course. So if I extend this, let me just extend this. You can see that no matter how much the size of my button increases or decreases, the text, which is taught now, always remains at the center of mass position and the padding is maintained constant. So that's what it basically means. Alright, the next step, what we want to do is that if I, let me first try to rename this frame. So I will just rename this frame to button. This one as a body text. So rhenium two, body. Next. This one as title text. Alright, let's select all three of them. The next step we want to make sure that it is selected left and right constraints. Alright? And now we want to add a frame selection. Once you've added them inside a frame, what are we going to do? We'll make sure that it sticks to the left and right constraints. The next step, inside this frame two, we have our body text and title tags. So just select the title text. And inside this one. First of all, let's select this entire frame. Do. Let's also add an auto layout. We'll add an auto layout. Once we have done that, make sure that the constraints, now you won't be able to see this left and right. So just use left. Once you have done that, select your title. And in the constraints part over here, for my horizontal constraint, horizontal resizing, you should use the full container. Now, why should we use full container? So if I try to decrease the size of my frame, you will see that term. Right now. You won't see the change. So if I select this full container, if I make sure that, you know, it's, it is using this. Okay? Let's also change this to fixed width. Now if I try to decrease the size of my frame right now you won't be able to see this title text being adjusted according to the size of my frame. So for that, what are we going to do for that? We'll select our title text, will make sure that it's set to full container. And in the y-axis, it is set to hub contains. Now why Hub contains? I'll show you that in a minute. So this is what we want in the vertex. We want this to be, again, fill container. Once we have done that, make sure that this one is fixed width. Alright? Select the entire frame to left hand, right again. And then the next part, what we want is that select your frame, try to resize them. And now you can see the title texts and the vertex is adjusting itself according to the size of my frame. So it's reducing its size. That's how it would look like on mobile devices, correct. Now, what do I mean by Hub contains your resizing. What does that property basically mean? So let's say my body text, I copy this text and I placed that a few more times like this. And that to when it has a button as well, It's maintaining that distance, 61 pixels of distance from here and from here. That contains property basically does when you're talking about resizing. Alright, so that's how you actually make your responsive design. So far, we have done the only thing which is left is if you want to actually use an image. So if you want to use image, we don't have such space for image. So what we can do is we can select our title and we can put it like this. We can select our body text and increase the size of the height, the height of our textbox. Yep, that would look cool. The next step, we want to import an image. So with the help of my Unsplash plugin, I can actually use any of the image. So let's try to bring some image, let's say related to business. So I will select that. I will look for an entrepreneur. And hopefully I should see one who is actually trying to present them in front of their clients. So this one looks good. And this is a really good image that we can use in our design. So once this image has been imported, we can resize that using the resize tool. So we'll resize this. The size, just makes sure that it fits our content properly. Why am I not able to lease this within my grids? Alright, so this image needs to be inside of a MacBook Pro frame. So we'll try to put this inside of a MacBook Pro frame. It's inside that. Let's try to adjust again. And now it would look good. Yep, that looks good. Just makes sure that it sticks to this part. Alright. We can also make sure that this is center aligned with respect to the y-axis. We have done that. It's now at the center. So the next thing, I will just change this to image. And to make this image responsive, I will make sure that constraints are two, left and right. So just select this image, makes sure that the constraints are left and right. And we'll try to reduce the size to see whether it works properly or not. So you can see our image is also responsive and this text is also responsive. Now you might see some kind of overlap happening between this text and the image simply because the data space more than what we should have used. And that's the reason why you are seeing this stuff. So this is how it would look like on my GoPro 14 inch. So you can just, in the end, you can just remove the grid layout. And this is how your website would look like. 29. Animations & Prototyping in Figma: Alright guys, now that you all have learned how to build a mini-project, let's go ahead and let's see how we can build interactive flows using Figma. Now when you're creating designs in Figma, It's important that you actually give the client or the user the field that they are actually using the software, not just the design part. So we need some animations for that flows, right? So that the user gets the field that, okay, this design is interactive. When I click on this button or maybe when I do hover around those some elements, or when I slide on some objects, I get to see some other stuff. So that's what we're going to learn in today's lecture. That's what prototyping is all about. So for that, what I'll do, I'll just create a new frame of iPhone 14 size. So let's just quickly create some basic stuff. I'm going to create one text saying that this is prototyping protocol Typing. Let's try to align the center. Alright, with respect to my x-axis, not y-axis, because we want this to be on the top. The next step we want is, let's create one simple rectangle box of maybe about this size. And let's also make sure this is center aligned. Alright? If you want to add some stroke or some color to it, go ahead do that, but I won't be doing that. The last step we want some buttons. So I'm going to say that, let's say Click, click here, click here button. And we want this text to have some, you know, 2020 looks much smaller than that. 24 would work just fine. So 24, that's it. Let's add auto-layout to this text. So right-click add auto-layout. Make sure that we have some padding to this button. So padding with respect to my x-axis, I'm gonna give this as, let's say, I'm Wendy. And y-axis, that means from top and bottom I15. So let's go ahead and do that. Let's also add some color to this button. I might add something like, let's say a yellow button. A brighter yellow. Alright, let's also add some stroke to this. So I'm going to add a stroke and black stroke. Yeah, that looks good. And just make sure that this is aligned properly. Alright, the next step, this is my one frame of iPhone 14. Now, I want that whenever the user who arounds this particular tangle box, I want the color of this rectangle box to change. Now, if you're learning web development, you must be doing that in CSS, we have the hover effects, but we want to actually display that kind of stuff in Figma. Then how can we do that? So for that, I'll just select my entire frame. I'll make a copy of this frame. And I'll make sure in the copy frame, I have the rectangle box color that I actually want to display, let's say a bright red. So when I hover around this rectangle box, I want the color of my rectangle box to change from gray to, let's say red. So let's try to see how will it happen. For that. Focus on the design properties panel. At the top, you will see three options. Design, prototype and inspect. So just go to prototype. Select the device that you are actually using. Select the object upon which you want that if some activity is going on on that particular element, the change will be shown. So just, you can see over here we have the plus icon. Just drag around the frame where we want the desired change. So as you can see, we have the kind of action that this object should perform. So if I tap on this rectangle box, then the next frame, which is iPhone voting to be displayed. If I drag that object, if I slide from left to right or right to left, That's how my change will be shown. If I hovered around that object, the change will be shown. So let's just try to see what happens if I just tap on the object. So I'll just keep this as it is. I want this to navigate to my iPhone, iPhone 14 to frame. If you all are using some existing design project over there, you might be having some other frames as well. So just go to the drop-down menu and make sure that you select the correct frame. Once you do that, you can see the Animations tab, right in interaction details pop-up window. You will see the animation. So right now it's selected to dissolve. Initially, it might be selected to instant. That means if you just click or you can just tap on this a or this particular element. And B will be displayed instantly. Or there won't be any kind of special effects. If you want to show some kind of special effects, then you must select this drop-down menu and choose the desired animation. So if I choose dissolve, then this is how our animation would look like. If I select this too smart animate. This is how it would look like. If I select move in, then this is how it will look like. Let's try to look into each and every animation by actually hovering around this, or rather typing on this rectangle box. So once you have selected your animation, your frame, your element, all that stuff. Just click on this plus icon at the top. So you can just present. Figma will open in a new tab and you'll see the device that you have selected. So as you can see, we have this iPhone voting. Once I click on this rectangle box, right now you can see I'm hovering around this rectangular box. Once I click on this red color is being shown, right? That's what's happening over here. I can just go back to my interactions. I can choose, instead of tapping to let say I want to hover, then that change should we shown. So if I refresh this, and once I hover, or rather I should disclose this, I should reload this again. Now, if I hover around this rectangle box, you will see red color. Once my cursor goes out of the rectangle box, it's in its original state. That's what hovering actually means. This is an instant effect. Let me change from instant to, let's say, let's say I am changing from instant to dissolve. Now, you would see how the animation will look like. The color will dissolve from gray to read. Let me just show you. So once I go over here, you can see guillotine is to read. If I move my cursor out, the color slowly dissolves back to gray. That's what it basically does. Right now. We haven't done anything to our button. So once I click on this, although you might be seeing some color changing happening on the rectangle box, which is a light blue color. But that's basically just to tell us that you haven't provided any action to this element. If you would like to add some action to your button, which is click here, then you can just go back to select your element, drag it over here. And then you can say on tap. And then you can just choose which animation you would like. Let's say I want this sliding. Then you can do that. Alright? If you want that, instead of, you know, 300 milliseconds of delay, you would like to change the delay to about 100 milliseconds. Then even you can do that. Now sliding from which direction? From right to left, from left to right, from top to bottom, from bottom to top, whichever way suits you the best, you can select that and animation would be applied. So let's go back. And we can select from right to left. And let's try to run this. Now if I hovered around my rectangle box, you can see the color changes. Or what if I click on this button? You can see this is how the change actually appears. So that's how you work around these stuff. Alright? Now, if you want that, if I click on this button and it should go back to the original state, then you can do that as well. Just change the text instead of Click Here to let say you want to rename the texts too. Um, let's say go back. So what you can do, you can go Select, go back. And that would be just select this button. Drag back to the previous frame. And or rather I should say that this would be one interaction. This would be one interaction. And we can also add another interaction. Now this interaction is from this button to my previous state. So on tab, navigate to iPhone 141. If you want this to push. You can even do that. Now you have the curve as well. That means do we want the animation to ease in, ease out, ease in and out. Now if you have up their own CSS, you must be knowing about all the stuff. I don't have to repeat myself. These are just a way that you actually represent your animation. Alright? So there's also some other way that you can present your animation. And what is animation? Basically, animation is basically a way to represent your images. What is video? Video is basically images, you know, tons of images rendered in a second displayed on your screen, which gives you an illusion that this is actually a video. Video is nothing but a group of images, group of moving images, like a frame where a person is right over here. In the second frame, the person is over here, then over here. When these three images are combined and they are shown you at some particular speed, you would actually get an illusion that the person is actually walking distance one, distance b. So that's what your animation is. Basically. It's just working around the images and you are trying to figure out that what should be the curvature of my animation? Do you want it to be linear animation? Easing is out and all that stuff. So you can just select whatever works best for you. So I'm just going to keep it simple. I will select whatever I have selected so far and I will run my prototype. So if I go back, you can see, I can go back to my previous frame. If I hover, you can see I get the red, I get this red color and I get a different text box as well. If I click, you can see this is how the animation appears. So this is how you work around your animations and you do prototyping in Figma. 30. Wireframing in Figma: All right guys, now it's time for us to understand what is wireframing and UI UX design. Wireframe is a digital outline of a design. So as a UI or UX designer, you need to create wireframes so that clients or your company, or maybe your colleagues can visualize your ideas quickly. So wireframe only represents the big picture of an idea, and it's very important for you to learn if you want to design any website or any application. So all in all, in general, wireframe do not have any styling elements. When you try to approach to create an application or a website, you just don't directly jump into the design style. Vocal ischemia going to use what kind of topography, what kind of font family, and all that stuff. No, that's not the very first thing that you cover. The first thing is that you create a wireframe. Wireframe basically contains all the contents part what content basically you are going to cover in that webpage or in that particular section of your application. So that's what your wireframe basically means. To give an example. For this entire lecture, we are going to make an a wireframe of Instagram application. So when you actually go to Instagram and look at any of your friends profile, you can just select any of the picture and you will find the username at the top. You will find the location. If the person has tagged the location, the image itself, the icon, the user profile icon. Then below the image you will see the username, the comment, then their caption, the icons like you're like comment, send, save and all that stuff. So before we actually just go in directly, figured out that what kind of font family we're going to use, what kind of color scheme we're going to use. First, we try to visualize the content part where exactly we want the image to be placed. Whether we want it to be centered, whether we want some padding, whether we want some kind of different alignment. Where should my username be shown? At the top, at the bottom, where it should be shown. Alright, then we have other icons and Instagram like your home icon search icon reals. Then there's a, I don't know, what are the icons do we have? We have our own profile picture icon where it would lead us to our profile. Then there's a leak or a feedback icon, I guess it is. Then you have some other stuff. You also have the carousel images and Instagram, so you can just slide across and at the top-left, top-right, sorry, you would see that out of how many images, at which particular image you are at. So let's say the person that you are actually stocking on Instagram, that person has posted three pictures on the parasol. So you can just swipe and go to the first, second, and third. And it will display on the top-right section, and so on. So that's what we're gonna do in this lecture. So let's just quickly create a frame of iPhone 14 size. And the next step, what I'll do is I'll zoom this so that you all can see 75% looks good. The next step, whenever you're trying to create any design or wireframe, it's important that you use grids. So we're going to add layout grid. Now we'll change this from grid system to RO system now why row and not call them? Simply because we are making a mobile application. Now when we are dealing with mobile application, we don't have a lot of wet. We have a lot of height. So when we are dealing with a lot of height, we deal with rows. When we have a lot of wet, we deal with lots of columns. So that's what we're going to deal with. So just select rows, select well, counts of rows. And each and every mobile has their own notification bar, right? Where it would display time, the battery percentage there, carrier service that they are using the network, the network strength. And at the bottom of the mobile section, mobile display, you would see the home back and Task Manager icons. So we want some kind of margin for that reason. So let's leave about 50 pixels of margin. And the gutter size seems fair to me. So I'll leave this to 20 pixels and I'll just close this and we'll keep this as it is. Now the next step we're going to use this dot at the bottom most part over here where I'm hovering my cursor. At that part, we want the navigation icons. So let's just quickly create a rectangle box of exactly that size. So I will just create a rectangle box. And I'll make sure that the width also matches the layout grid. And that is the next step. We will make sure that we have how many acres the home search, the real Saigon, I guess there is a sharp icon, I believe. And the last one is your own profile picture. So five I can say require. Alright, so for that, what I'll do, I will just use my font awesome plugin. So if you don't have any icon that you're looking for in the Font Awesome plugin, then you can just use Pen tool to create your own icon. But Most of the cases, you won't find any icon that is not available in this particular plugin. So let's just look for whom I can, and I will search for it. And here you can see the Home icon. So let's just bring that icon over here. Where is my icon? Where's my going exactly? I can find that. Where is my Eigen? Alright, so it has been handed over here. We'll move this. The next step we want the search icon. Let's just bring our search icon. Now I don't know why it's taking so much time to bring this icon. So search icon. Alright, we have our search icon. The next we want. I don t think they would be Reels icon and this Font Awesome. So instead we can use the fence icon. So we would get real something like that. You can just type film. We can use this icon for now. The next, next step we want shop items. So sharp. This looks good. So we'll use this icon, shop item or this one, this particular one is used generally Instagram. So we'll just delete this one. And for profile picture will use a circle shape so you don't have to worry about it the next step, the other icons that we would be using is the icon, the icon, the comment icon, and the scent icon, and also the save icon. So let's just bring all the icons. Now, I have added all the icons. Next step we're going to do is that we will be using all these icons at equal spaces. So just drag around this part. Alright, Let's just drag this. Makes sure that the width and height of this is 30 pixels by 30 pixels. And this looks good. Alright, let's try to align this center with respect to y axis, not x-axis. Or sorry, we can just leave it right here. Alright, the next step, we want the search icon. So let's just click on this search icon 30 by 30. Just bring all these icons and then we'll try to, then we'll try to actually place at proper distances. So 30 T. Then this one, again, it needs to be 30, 30. Let's use it over here. And lastly, we want we want a circular shape. So we'll just use that. Okay, 38, 38. Revoke around that. So don't worry about it. Let's just create an ellipse again of 30 by 30 size. And we'll give a fill color of maybe a darker shade. This shade looks good. And we make sure that the distance of this ellipse from this point is the same from this position. So to do that, what I'll do, in that case, I will hold my shift key or other. I can just select all of them together. This one, this one, this one, this one, and this one. And I can align them in such a way that it occupies equal distances. Alright, now, I can just select 12 entire thing. Oops, I can just select 123, the entire stuff. And just move it so that it is vertically aligned. Alright, this is how our navigation, the bottom most navigation should look like. The next step, we want. At the top, we want the icon, which is the back arrow icon. The back arrow icon will also require that. So let's just bring that icon. So we can say Back arrow. Yep, this one, That's what I was looking for. Let's just place it over here. And the next step we want is, again, this would be 30 by 30. So just make sure that all the icons are 30 by 30. This one. Is also 30 by 30. This one is also 30 by 30, 30 by 30, 30 by 30, 30 by 30. Alright, cool. Although this one does not look so much great with 30 by 30, but we'll work around that. So don't worry about it. The next step, we want to make sure that the image fits the majority of the part. Alright? So, um, you know, there's caption, there's this caption, there's a comment section. View all the comments and caption part. Then we have image. So we'll use this one so that we know that this has to go. This allows the user to go back. Alright, then in this row, this row, particularly, well, make sure that we have the icon, the profile picture, the username. Below that we have the location and the three dots. I believe it would be. Then from this point to maybe, let's say this point, or maybe this point, we will keep our image. So this point to this point from this to this. So let's just create a rectangle box. From this point to about, about this. No, This looks good. This one looks good. So let's just keep it like this so that we know that this is what we are talking about. This is our image. Alright, the next step, we want this line to have our like comment send and this save button. Alright, so we'll just use this one. Make sure this is properly aligned. This one is also properly aligned. Heart icon. Select that said over here. Alright. Make sure you select this one. Right here. Select this one right here. Alright? Now this one looks good. All right. Just make sure that it's center aligned. So I can just select this one. Heart icon. And now my heart icon is also properly aligned. Cool stuff. Now the next step over here, we want, we want the person name, the caption name, caption and comments and all that stuff. So we'll do that. And at the top over here, V1 term, what do we want? We want that term. Let me copy this. Make a copy over here. Now I can please set so that it displays that I'm talking about the person. Right? Alright. The next step, this has to be properly aligned center. Yeah. Let's, let's walk around the text, which is inter, looks good. We'll say Username. Username should be semi bold. So we'll change from regular to semi bold. And below this text, we want another text, which is the location. So when we talk about tag, tag your location. And we'll copy this, change this to regular, right? Yep, This looks good. The next step we want is the three dot icon, the Options icon. Um, we tried to find for the plugin, if we have, okay, we don't have options. Maybe we can say three dots. We do have three dots, so that's what we're going to use. Let's make sure that it fits properly. And with respect to other icons as well. It's properly aligned. Yep. And just make sure that this is also 30 by 30. 30 by 30. Oh, whoops. This has to be locked out. 30. 30. Okay, This does not look good. Let's try to use the original size. This one looks good. 30 by 8.7, whatever it is. And it makes sure that this is the distance it covers. Alright, cool. This wireframe looks really good. The next step, if we want this to have, you know, we'll, we'll keep this as black color. And inside this image at the top right. In this part, we will also create one more small rectangle box, which will say out of how many images we are on actually. So just make sure that this box has this color. This color, right? Um, make sure that it stays in this line. Or rather I should say that let's just delete this one will bring text box, and we will see one by 31 by three. Let's add an auto layout to this. Once we added auto-layout, we'll make sure that the padding from all direction is just 55 from all these directions. Still, it's way too big. So let's make this three. Alright, and we'll give this a fill color. So fill a gray color. Yeah. This one looks good. If you want to add some border-radius, go ahead do that. But wireframing own necessarily require any border radius. So we'll just keep this as it is. Over here. We can add three dots again just to make sure that we are seeing that this is a parasol. So we can just make a copy of this. And we can change the color. I can just place it at the center. Just make sure that instead of black, we have blue color. Just to display that they're are using cortisol. So blue color. And that looks good. In the end, we want. Over here we can say Instagram. You can use Instagram on font-style. And over here, what are we going to do? We'll say, first of all, we'll have this, right. Let me just align the center, something like this. Then we'll use textbox. Alright, textbox, liked by this portion will be seeing that this is liked by this person. And let's just bring this somewhere over here. This part. We can use the same text. So just copy this and place it over here. Alright. See, liked by username and let's say 20 others, right? Wendy, others. Cool. This is what we wanted. The next step, we want the caption. So again, let's just use this username, font-style, right? We can just place the username over here. Again, copy of the text. Now for the caption, we can use the Lorem Ipsum text. So I can say caption hyphen and then I can use the Lorem Ipsum. So I will just use the Lorem Ipsum plugin. So let's just generate phi sentences. And it hasn't rated five sentences. Just make sure that it fits the auto hide this stuff. Rather I should say that. I'm just zoom this out. And I'll change the size of this. I'll change the size of my text box. This text box sites needs to be shortened. And just make sure it occupies auto height. Again, zoom this. Some of this stuff might need to be deleted in the caption part. You can just resize this part. You can place the caption over here. Let's delete this part of the caption, this much part. And we can say read more. Read more. And also we can add some ellipsis to just make sure that this is what we actually mean. We can just select Read more part. We can change the fill color to gray color, something around like this. Alright. Read more and at the bottom, we'll use the comments section. Alright? So we can say View all phi comments. And lastly, we want to specify the date as well. Alright, so for that, what I'll do, let's just decrease the size of these icons. I feel that 30 by 30 is way too large. So let's reduce to 2020. No, this would be way too small. 25, however, that 25 looks good. So just make sure that this one fits properly. Alright, let's select entire stuff. Move it somewhere over here. And in the end, we want the date. So we can see right here that we can select the date. So let's say two days ago. So two days ago, something like this. And this is how your Instagram wireframe would look like exact replica of it. How cool is that? In the end, you can just select your frame. You can just remove the grid. And this is how your Instagram wireframe actually looks like. And before we actually end this lecture, I would just like to add few other things that I feel that could be, could make some changes. That would be to add some horizontal lines. So just select all these stuff. Please sit somewhere over here. Alright. Now, let's add a line, just a simple line, which divides this section. Alright? A simple horizontal line. Just make sure that the stroke color is gray. This color. Alright, I'm just please sit somewhere over here. Alright, Let's make a copy of this. And where are we going to paste it? Right here. Alright. Somewhere here. And one more, which would place, which would be pleased to hear that desert. This is how your Instagram. Let me just zoom out so that you can see properly. And this is how your Instagram wireframe would actually look like. 31. Exporting Files in Figma: Alright guys, now that we have learned how to make wireframes for our design, Let's also see how we can export them in different formats and which format particularly to use for our use case. So I will just select my frame whenever you want to export any of your design, just make sure that you select that entire frame. So just select that. And in their design properties panel, just scroll down to the bottom most part over there, you will find export. Initially. It would be like this. So just click on the plus icon and you will find the export method. Now there are different formats in which you can export your Figma design file. Now, that is PNG, JPEG, SVG, and PDF. Now, what does P&G actually mean? Why should I export my design in a PNG format? So PNG stands for portable network graphics. It's a bitmap image format used generally for transferring images via Internet. So just don't go into detail about what is PNG, what is this bitmap format? Just understand that it's a lossless file format, which means that quality of the image is not reduced whenever the image is compressed. Alright, so if I tried to send a PNG file via email, let's say, and you all know that there is some cap, There's some size cap to the files that only about 25 mega, 25 mb of file can be sent using your Gmail or any of the e-mail service provider that you're using. So in that case, P&G comes into the picture because you can reduce the file size and the quality won't be reduced. So P&G makes it good use when you want to share your files on the Internet. Second comes the JPEG format. Jpeg stands for Joint Photographic group. Now, when you compress this joint photographic group image, it results in smaller file size, but also reduces its image quality. So it is not an ideal way to actually share your JPEG files via Internet. Generally, what happens is that if you have a file, JPEG file, let's say it's of about one megabytes in your system. And you are trying to send that using some instant messaging software or instant messaging application that you're using. Something like, let's say WhatsApp. So if you send any file, there are chances that WhatsApp generally reduces or compresses the file size so that it's easier for data transmission. So in that case, if you're sending JPEG files, the files will be compressed format and the receiver will receive a poor quality image, and you don't want that to happen. So JPEGs are generally used when you want to print your entire design or whenever you are using in a photographic purposes. So use PNG when you want to send the files on the internet, use JPEG when you actually want to print some stuff. Then comes the SVG format. Now, SVG is actually your Scalable Vector Graphics. Now, graphics aren't tied to any specific resolution. Like this particular frame could be 1920 by 20 pixels wide, but SVGs are not tied to any specific resolution. It's an XML based vector graphic, which means you can make any element large or small without losing its clarity. Now when should you actually use SVG? So let's say you're trying to create any new icon using Figma. So in that case, SVG becomes a great use y. So because when you pass this SVG format to a front-end developer, then when the front-end developer is actually coding that stuff in, let's say HTML or react. Then in that time, when the developer wants to use your icon, then SVG format becomes a great use case because SVG is a really light in size and they don't have any specific resolution. And in the end we have the PDF format. Pdf is quite popular because it does not require any specific hardware or software it runs on any system. Pdf basically stands for pitcher documented format. So generally we use PDFs to share our assets, which we have saved in Figma. And I'm over here. You might also see that we have different scale options when x 1x2x, you might be wondering what does that mean? So generally it has been set to one x by default. If I select to x, then the quality will be doubled. If I select two for x, the quality will be highest, but the file size will also be a large. So if I tried to download this, let me export this iPhone 14 frame in for x and then the PNG format. Then I'll just show this in the folder. And let me just show you that. How much file does it occupy? File size. So about 100.103 kb of space is being occupied. Let me show you how does the image look like. So this is how the image actually looks like and this is an improper way to actually send any file we are interested. So that's how you actually work around. You're exporting systems whenever you want to, actually send your files to your clients and maybe colleagues and stuff like that. So in that case, you use these different file formats.