Figma Tutorial For Beginners 2026 | Figma Web Design Design Tutorial | Figma Tutorial| Simplilearn

Key Takeaways

[music] Hey everyone, did you know that Design 2026 is moving faster, smarter, and more efficiently than ever before? If you're still using the old methods, you could be missing out on gamechanging tools that save you hours of work and take your designs to the next level. In today's video, I'm going to show you everything you need to know about Figma, including how to use Figma AI to create stunning designs effortlessly. Stick around till the end because I've got a bonus tool that will help you design like a pro in no time. Let's dive into the future of design. So, first let's talk about what we will cover in this video. [snorts] First, we'll dive into the basics of Figma. That is what UIUX design is, why Figma is essential, and how it compares to other tools. We'll also explore real world Figma use cases. Next, we'll walk you through Figma's interface, how to create a project, and the difference between design files, Fig Jam files, all in a simple, easy to understand way. Then, we'll explore essential tools like frames, shapes, layers, and tips on color styles and typography. I'll show you how to create components and variants to make your design reusable. We'll also cover auto layout to help you design responsive layouts easily. Then, we'll create a simple food delivery app UI from scratch. Next, we'll make your design interactive by adding prototypes and transitions. And I'll show you how to collaborate and hand off your work to developers. To wrap it up, we will go through pro tips, shortcuts, and top 10 Figma plugins. Plus, I'll share a bonus AI tool that will save you hours of design time. And by the end, you will have the skills to design like a pro. So, let's get started. Now, before moving on, just a quick heads up. If you're looking to level up your design skills, check out this advanced certification in UIUX design with generative AI from triple IT Bangalore. Now, this course is perfect for anyone looking to break into industry and advance their career in design. In this AI powered UIUX design course, you will gain hands-on experience with 25 plus design tools including Figma ARVR prototypes and generative AI tools. Plus, you will get six months of free Figma premium access to help you dive straight into your projects. What's even better, you will work on 15 plus portfolio ready projects that includes AR, VR, and XR prototypes, making you job ready no time. And with live interactive sessions and mental support, you will get all the guidance you need to succeed. And at the end of this course, you will have a certificate from Triple IT Bangalore and an impressive portfolio to show off. Plus, you will learn how to use 10 plus generative AI powered design tools to streamline your workflow. The course also features a bonus AI tool that will help you create stunning designs faster. So, what are you waiting for? Hurry up and enroll now. You can find the course link below. Now, before we move on, here's a quick quiz question to test your understanding. The question is, what is the main purpose of Figma? Your options are to create websites without coding, to design and prototype user interfaces, to manage design projects, or to analyze website traffic. Let me know your answers in the comment section below. So, first let's start with the basics. What exactly is UIUX design? Now, you might have heard these term thrown around a lot, but let me break it down for you. UI stands for user interface. Now, this is a part of a product that users interact with directly like buttons, menus, sliders, icons, etc. You can simply put UI design is all about making things look good and ensuring that everything is visually appealing, organized, and intuitive. Next, we've got UX, which stands for user experience. And this is the secret source that makes users love or hate your product. Now, UX is all about making sure the experience is seamless. Can users easily find what they need? Is it intuitive to navigate? Does it make their life easier? The goal of UX design is to create an experience where users feel confident, comfortable and happy with interacting with your product. So when we talk about UIUX design, we are blending both the look which is UI and the feel which is UX of the product to create something that is not just visually attractive but also functional and userfriendly. Now since this video is about Figma, we should now understand why should you use Figma. Now basically to use Figma there are three main key reasons. Figma is the tool that everyone in the design world is buzzing about. First reason is realtime collaboration. Now in today's remote world collaboration is very important. Figma allows multiple designers, developers and stakeholders to work on the same design file in real time. You can imagine working with your team on the same project at the same time, seeing each other's updates instantly and commenting on things as they happen. It's a total game changer. Next reason is cloudbased convenience. Now, Figma is completely cloud-based, meaning no more worrying about software updates, file saving or losing your work. Your designs are automatically saved and you can access them from anywhere. Now whether you're on a Mac, Windows or Linux device, no downloads, no installations. Just log in and you're good to go. Next is design to prototyping in one tool. Now unlike other design tools where you have to switch between apps for designing and prototyping, Figma lets you do both in one place. You can design beautiful user interfaces and then instantly turn those designs into interactive prototypes to test and share. No more switching between tools. Figma handles it all. All right, now you might be wondering how does Figma stack up against other design tools. Well, let's compare Figma to some of the popular tools you might have heard of. First one is Adobe XD versus Figma. Now, both are great design tools, but Figma's realtime collaboration is something Adobe just can't match. With Figma, you and your team can make life changes, comment in real time, and easily review and edit the design in one shared space. Now, Adobe XC has collaboration features too, but they are not as fluid or integrated as Figma's. Next one is Sketch versus Figma. Now, Sketch has been a favorite of many designers, but it's only available on Mac. Whereas Figma is a crossplatform, meaning it works seamlessly on Mac, Windows, and even Linux. So if your team is split across different operating systems, Figma is your best bet. Next one is Envision versus Figma. Now Envision is a fantastic prototyping tool. But Figma does everything In Envision does and more. You can design and prototype within one platform and easily share interactive prototypes for feedback all without leaving the tool. Figma takes the heavy lifting out of the design process. Now let's talk about some real world use cases of Figma and how do actual companies use Figma to make their products better. First is startups and small teams. Now Figma is a great tool for small teams working on a tight budget. Its cloud-based nature means that small design teams can collaborate seamlessly without worrying about costly software or lost files. Startups use it to create everything from landing pages to app interfaces quickly and efficiently. Next one is design systems for large teams. Figma help design teams in larger companies to create design systems a collection of reusable components like buttons, icons, typography. Now this ensures consistency across projects making collaboration smoother as the team grows. Next one is prototyping and testing. Now companies use Figma's prototyping features to turn static designs into clickable prototypes. They can test user flows, get feedback from stakeholders, and make changes on the fly. Now, this is an important step before development begins. Next, we've got remote collaboration. Now, teams spread across the world rely on Figma for real-time collaboration. Designers can easily share their work with remote developers, stakeholders, or clients, making the design process feel as if they were all in the same room. So, let's get started with our demo part. First thing is just head over to Figma. You can search it in your Google or you can get this installed in your desktop as well. So just click on the first link from here and then you can just uh remove this. Click on get started. You can click on continue with Google. From here then just select your account. So now that I have logged in from my account you could also download this in your desktop as well. So when you just click on the profile icon from here, you can just click on get desktop app or also you can use it in your browser as well. So right now I'm using it in my browser but if you want you can also get this on a desktop app. Next, you can also change the theme of your uh the settings of your uh interface however you want it to be light, dark or whatever the system theme. So I'll just prefer the dark version. I'll click on dark theme from here. And yeah this is a community. So from here what you can do is you can search for any uh template if you want. Let's suppose you're creating any food delivery app. So you can just click on food delivery app from here. See you will get the UIUX version of all the so here we have the food delivery app UI kit food app design food mobile delivery UI. So from here you can just open this in Figma if you prefer to use this particular template which has got 75 screens from here and it has also the preview version. So from here you can just click on the page cover and have a look at all the UI UIX the design. If you prefer to use this particular thing we also have this plugins plus widgets where we will explore this later in this video. I'll tell you how to use this. So right now when we click on recents you see here it says describe your idea and make it come to life. Now this is the AI version where you can just uh click on the Figma make design. You can just give the prompt like how you want your design to be and it will create such type of designs for you. We'll explore it later but first let us see how you can manually use and create designs in Figma. So right now we've got this design button. And from here you can see just click on the plus icon and then from here you can just start designing your app whatever you want your app to be. Then you've got this fig jam as well and you we have a new feature added here which is the site. Now Figma sites where you can design websites using pre-build blocks responsive layout AI chart and many more. And then you have this buzz as well. in the slides where you can create presentation text for your uh company or for your startup pitch idea whatever you want. So we'll just look at each feature one by one. So let's suppose I just click on site. I'll just show you guys how you can use this thing. So from here it says you can design and publish your website all in Figma. So just click on get started from here and then you can use a blank site or you can also use any particular template from here. It also have a variety of categories as you can see which is by use case, by event, landing page, personal, portfolio, business. So let's suppose I want it for my portfolio. So when you just click on this particular icon, you get this portfolio templates from here. And if you want it for your business thing, just click on business and you'll get this. So many templates available here. Minimalist art gallery, modern brand, design studio. So uh from here you can just select any template you want and you can start creating your site. You also have this feature of connected to CMS. So where you can actually create such um templates built with CMS which is idle for content heavy websites. The creative travel blog modern clean SAS company vibrant designer portfolio. This looks good to me. So you could use they have multiple templates. So from here you can use anything you want. Now when you design here you've got this responsive by design where you can create web pages for multiple devices with break points that stay in sync. So this is one of the feature. Next you've got the CMS option where you can quickly insert readymade embeds hero section full pages and many more. And from this uh build content with CMS you can manage content for blog like content heavy sites studies product categories and many more. So uh from here you can just start designing. So you can just click on insert from here. Then you get this option the pages navigation heroes. So you get this option to select. So you can just select any template the landing page however you want it to be. And then from here you can just start creating your site. Then you've got this slides option from here. So let us just check this out. Okay. Just click on get started from here. Now it says you can also start from scratch or you have the start with an outline where you can summarize a fake jam board. Then you've got the basic templates from here. The light slides and you have the dark slides. How to use Figma slides the vibes. So you can see it has multiple plenty of option. It's very good if you're creating a pitch deck for your brand or for marketing purposes. Now you can see from here the startup pitch idea digital content themes. It has got multiple multiple option from here. So let's suppose I click on any of the given template from here. So I have this one digital contrast. So I'll just click on view template. So this is a template from here. You can see it. So you can just click on add all slides if you start creating presentation. If you want all the slides to be added. Okay. So it says you can find slides from any situation. This is the first slide, the second, third. So I really like the quality and the design it has given to us and it's really good if you're creating a good presentation for your company. So you can just click on this and start editing from here. Right? So this is the templates from here. You can see headlines. Now if you want to put any change you can also put screenshots of your app website logo which whatever you want to show it to the other audiences. Okay. Now this is really cool. So we have seen how to use the slides as well. Let us just check this out the buzz option from here. Okay, it says meet Figma Buzz which is the asset production made easy get beautiful templates or create your own to keep work in brand or you can use advanced tools powerful plugins and more. So just click on get started. Okay. Now this one is specifically for your Instagram post, for a Facebook post, Twitter post or Google large rectangular ad purposes. So you get the so many plenty of options from here. So let's suppose if you're creating like how you use Canva for designing your post, you can similarly use the buzz option by Figma where you can uh design your stories, your post for your social media purposes. So just click on social from here and here you see plenty of options available the Instagram ad the expost. Now this is really cool if you're using for your marketing purposes for your brand then you've got this ads option as well. So from you can just select any template from here. These are for the products as you can see there are so many templates available here. Then you've got the print businesses sales and promotions events. Now let's suppose if you want to design a letter, portrait card, Pinterest ad. So you can get all of those templates available here. You've got this Instagram story, portrait card. Also it has option for celebrations as well. As you can see the portrait card, landscape card. So however you want it to be, you can use it for your happy birthday, for your marriage thing, whatever you want. So now that we have explored our buzz as well, let's go back. Okay, now we have seen almost everything. Just click on fig jam from here. Now before opening the main design tool, it's very important to understand the fig jam. As it is often the first step in the design process. So what exactly is fig jam? The fig jam is an online collaborative whiteboard. You can think of it as a giant digital wall where you and your team can stick post it notes, draw rough sketches and map out ideas without worrying about perfect pixels or design details. What is it used for? It's specifically used for brainstorming ideas, user flows, mapping out the logic of how a user moves through an app. Example, login screen, click submit, home screen, team meetings. If you're running retrospectives or planning sessions, it's very useful for that. So, let me show you how you can actually use it. So, this is our whiteboard from here. So, let's suppose I have to create a workflow. So, you can just select any shape available from here. And then you can add a text here. Let's suppose it is scrum plan and then just move this box here and then you can just see the arrow right. So when you just click on this arrow it will automatically create the next workflow of you in the same uh shape which you're using right now. So let's suppose if you do not want this, you need to change the shape from here. Then you can just click on shapes and I want to add this square uh shape from here. So I'll just click on square. I'll just add it from here. And then from here you can just add this particular arrow from here to connect it. And then you can just um mention let's suppose it's team planning. So it's very useful if you're like planning for your team or creating any workflow. From here you can also add colors from here. You get this option uh just okay. So from here you get this option right just click on this and then you can just fill any particular color. Let's suppose I'll go with the light pink one because I really like this. And then you can also change the outline. You can also change the font of your uh text from here. You can just click on the small, large, however you want your font to be. And then you can select your type face from here. If you want it bookish, technical or scribbled, you can take it in this way. Now, one more very cool thing which I wanted to show you guys is the sticky notes feature. Okay. So, from here, you can just click on any sticky notes. Let's suppose I want to add this note feature from here. And I want to keep this color. Let's suppose as yellow so you can just type any particular heading if you have you can just keep it. Let's suppose I just mention it as notes. So I'm just showing you the random template how you could use this fake jam for your purpose. So you can just select you can just type any important notes if you have and if you want to connect it with this you could also do that. So let's click on this thing from here. And yeah this is how you can create it. And one more thing is its flexibility to use it. So you can just randomly move your shapes from here in this canvas. Now you see how easy it is to use and how great it feels. Now if you're planning any workflow in this order. So this is how you can do it. Now if you want to add any workflow from here, you can just click on this and then again from here you can add it. Let's suppose if you want to add here right at the bottom you can also do that. So this is really great because the interface here it makes it really user friendly for any person to use it. This is how you can use fig jam from here. It's not the important uh process as I can see but it's really useful if you're creating your um wireframe as in you're creating the steps and all. You can just show it through this automation process from here. Okay. You can also pinch zoom in and zoom out using your cursor from here. Now let's go back to our main dashboard. Now from here we'll just click on design and then click on next. It says design faster with UI kits or start with a frame. So I'll explain you later what this frame actually means. Okay. Now you can also add layers text. These are the UI kits which are always here for you. It says and if you would like to save time or feeling stuck, add pre-made UI whenever you like. So if you want to add this, you can. But let me show you how you can start from scratch. Okay. So just click on the file option from here. Now you get this pages, right? Just click on this button. Now if you click on uh plus you can add more pages if you want. So uh this is actually the canvas. From here you can add frames, right? You can also add pages. And this is the layers. Now if you're used to using the uh Adobe and all then you must know what layers actually mean. I'll show you in the later video how does this actually work. So the prototype feature I'll show you guys later in this video. So first we'll be designing our simple app. So uh let's get started. So here I have a reference template for me to create a food delivery app which I'll be using this particular reference template and show you guys how you can create such engaging UIUX design for your app. Now before we move on let us first understand some of the complex terms to understand the tutorial you need to know these specific Figma definitions. First one is frame. So when you just click on this a frame icon from here. So this is how you can actually create a frame. Now when you just click on this, this is the frame right here. Now in other tools, this might be known as artboard. Now frame is a container for your design like a screen for an iPhone 16. Unlike a simple rectangle, a frame can contain other elements and has special layout properties. So I'll show you how you can use this frame option from here. So we can just select uh anywhere in the frame from here. So this is my frame and from here when you just select on this you get this option of phone like where how you want your frame size to be adjusted in which phone. Let's suppose I selected as iPhone 16 and this is the aspect ratio for it. So I want it for my iPhone 16 and this is the frame it has given for me. Yeah, you can also adjust it just by moving expanding this particular um slide from here. Okay. So let's suppose let's go back to our original frame. Yeah. So this is the frame we have selected. Next thing is the styles option from here. So when you just click on plus styles, you get this text color effect and the layout guide. So a local style is a way to actually save a specific color or font setting so you can use it everywhere. Now if you change the local style then every element using it updates automatically. I'll show you how it actually works later in this video. Next option you've got this component option from here. So when you just right click you get this um option known as create component. So component is actually a reusable master element where you can turn a button into a component. You can also make 50 copies of it. Now if you change the color of the master component, then all the 50 copies changes instantly. Now when you just create component from here, it will have this particular icon from here and that's very obvious that yeah, you have actually created a component. Now when you create a component, you also get this option of instance. Now instance is basically the copy of a component. You can change the text of an instant but its structure is linked to the master component. You also have this option of add auto layout where you can actually automatically adjust the container property. It automatically calculates the distance between the items. So let's suppose if I'm just creating let's suppose I'm adding a text here and it says hello. I'm just showing you a demo, right? So I want to just make it add a layout option from here. Add auto layout. So when I click on add auto layout what it does it it will automatically adjust this particular font from here. So let's suppose I'm resizing this it will automatically adjust this particular font from here itself. I would not need to do it manually but it will be fitted as per as the aspect ratio of the size and the frame. Next, you have this prototype which is like a playable version of your design. It allows you to click buttons and transitions between screens to simulate the real app. So, I'll be showing all of this later. So, now that you have known all the complex terms and what it actually is, let's move on on creating our simple app design which is a food delivery app. So, I've already showed you the reference file. So, I'll be using that for creating my design. So, we have a frame selected here. What you can do is you can change and rename this and name it as splash screen. So this is the front screen which we'll be showing you guys. Now if you want to change the color, we can also do that. Let's suppose I want to add a color here. So from you can just click on fill from here and add a color. Let's suppose I want to make it in red more like a zamato kind of thing. but not exactly copying the Zamato UI UIUX design. First step is adding a logo from here. So we we'll just go to this image option from here and we'll be adding this image. You can also drag and drop from here. Now just cancel this and we need to just adjust the uh radius and the size of our image. Now this is a size that suppose you want this particular size, you can just select this and adjust it accordingly. So here you have this uh grid line. You can see from here you can adjust your logo according to this grid line. So let's suppose if I want to expand this more, you can also do that. Uh we'll keep it here. So now that our logo is ready, next step would be adding some title tags or font design here. You can also adjust the settings just by clicking here. And if you want any fill for your image, you can also do that. You can also increase and decrease the opacity of your image from here. Then the corner radius as well. You can also add few effects if you want to add it to your logo. So you have this drop shadow icon. So let's suppose you want to make it layer blur, background blur, noise. You can also do that. So let's suppose I want to add inner shadow or I want to make the background blur. I'll just do that. Okay, this looks good. Next thing is adding the text icon from here. So we'll just click on text from here. Select anywhere in between. Now that I've showed you how you can add the local styles, right? So when you just click on the styles option from here, you have this typography. So you can just select any text. So let's suppose I add this particular font from here. And then you can just increase the size. I want it in like maybe 24 because this would be my tagline. So I'll just copy paste my tagline which I've already created. And now I'm going to adjust this. So I'll just bring this particular text here. So with this cursor you can actually move it. Okay. This is too big. If you feel it's quite big then you can adjust it accordingly. Okay, now we'll just put this a bit down. Let's suppose this looks better to me. Burger bus save with the flavor share the bus. So I've selected this as white color because it looks better on this particular background and I keep it here. So [snorts] now see this is our tagline for my u for my brand which is burger buzz and this is how it would look. Now for the styles part when you just click on styles. Let's suppose I want to add a local style from here. Now you just need the local style. Let's suppose it's the uh content I name it because I'll be using this in my content. And then you can just describe what this style would be used for. So I'll be using this style for my entire descriptions for using in my uh creating the app in the homepage and everything. So for I'll just click right here creating homepage descriptions and then you can add more properties here which is the uh font. Let's suppose I want some other font. So I'll be selecting it from here. So I really like this particular font. I'll just select that [snorts] and keep this as regular, medium or bold. You can also keep it at medium. And then I'll be increasing the font size. So let us keep it as 20 from here. And then you can just create style. So in this way our style has been created. Again you could also create it for your uh color as well which is adding the color effect which then we also have this layout guide. You can add your own personalized layout guides for your creating your designs. So now that we have created our styles from here, let us now add a button from here. So again we'll just go to the shapes option. Click on rectangle. Click the plus icon from here. And you can just adjust the corner radius. Let's suppose I want to keep the corner radius as 30. So this is how it would look like. And you can just adjust the opacity as well. And let me just change the color. And I'm going to keep it as yellow. So the yellow one looks a bit interactive on my this color thing. So let me just select yellow from here. Now this is our button ready. And guess what we'll be using in this button? Obviously sign up. So again we'll just click on text from here. plus and it says sign up. Okay, now this is the new uh thing added here. The new font size I can see. So let me just keep it in this way and it's 32 size. I'm going to reduce the size to let's suppose 24 again I'll just adjust this icon. You can move it. So I'll just keep it in between. You can see the guides. So it's in center line. So I'll just keep it here. Sign up. This is how it would look like the first splash screen. Now if you want to add uh if you want to just add more corner radius. Let's suppose I want to keep it 100. You can also do that. So this is how it would look like then. And um you have this layout option from here where you can just adjust the flow. Let's suppose I want to keep it at down or if you want to keep it towards the right, it would look like this. It's not even visible. And this is the layout. It will give you the guides how it is adjusted. Right? So I'll just go with the normal one which we were using before. And then you can just add the dimensions from here. The hug content, adding the mean width, add max with the width you want. You can also apply variables from here. Want more gaps between your content? You can adjust it accordingly. And here is the opacity. Opacity actually means like fading a bit of your uh colors and designs and positions is like keeping it right, left. You can also pad your uh content from here like adjusting the spacing and everything. You can add strokes from here. You can add it as green, orange, yellow, however you want it to be. Then you have this layout guide. So let me show you how this layout guide actually works. So let's suppose I want to keep this as 50. And you can see the grid lines, right? So the grid lines would be more in yellow color because it's visible. And this is the option which you can select it. It's applicable on this particular page. So you can just adjust it accordingly. This grid lines will help you to actually adjust your uh icons and everything. It's it's really useful when you're creating your icons and adjusting according to the spacing and all. Then you have this columns. You can adjust it in this way using the column. You also have this rows which which would be in the row wise. So you can just see the spacing right and if you feel that this needs to move a bit upward then you can adjust this. So let's suppose I want to move this a bit upwards right it looks a bit downwards and it's not being adjusted according to the guide. So I'm going to keep it here and the burger bars a bit more up. So now that our layout has been done we can just remove this layout because now it looks irritating to me. So let me just remove this. You have this I button from here. So when you just off it, you see the layouts won't be visible. Right? Now let me show you how you can actually view it in your screen. So you have this play button from here where you can actually preview it in your system. So just click on preview. So when you click on preview, it says the prototype needs to have at least one more frame. So let me add one more frame from here. So that time we were using this icon right? So we're just going to remove this and we will be using this particular frame from here. And let's suppose I want to keep it as 100. [snorts] And you can just adjust this accordingly. So I'm just removing it. And again I'll be changing the color of this frame. So click on this fill again from here and just select the yellow one and keep it towards up maybe like this. Yeah. So this is done. Now let me now preview it again. So we'll just be previewing our file from here. So this is how it would look like in my iPhone 16. Okay, so this is a preview of the interface, the splash screen on my iPhone 16 and this is how it would look like. Now, it looks pretty cool to me. Now, this is the feature from here. You can just actually click on the signup. We cannot do that. But if you want to just adjust it, you can do it accordingly. Now, you can also view it in other mode if you want. If you have any other phone, you can just view it from there. Now, this is the actually preview version. So we'll be creating more uh frames and more screens pages for our app design. So let us go back. Okay. So now that our splash screen is ready. So we'll just duplicate this particular uh screen frame from here. This was a frame one, right? So I don't know why is it frame one. Again I'm going to put it as splash screen. Okay. And then I just click on this frame. And then you can actually click on copy. And then you can control V from here. So we have one more frame ready. Now let us start designing this one frame as well. So I'm going to remove this burger and everything from here. Before removing this, I wanted to show you guys one more important thing which is the auto layout one. So when I just click on this and from here I can just click on add auto layout which is shift + a. So the auto layout has been added. Now when I just adjust this accordingly you see how it works. So let's suppose I want to make it okay this is the frame right? So let's suppose I want to make it like this. Now this will be automatically adjusted right the signup which is not in the frame yet. So I'm going to put the sign up in the frame again. Now you see when I'm moving it, it is actually moving again from here. The signup is still there. So let's suppose I want to keep it maybe in this format and this I'm going to keep it here. So I cannot actually select this right now because it is in my auto layout thing right now. So from here you can actually change the position and the layout features from here. If you want your flow to be in this order, just select the frame from here and then adjust it accordingly. So it's actually frozen right now. We cannot move the alignment because obviously it's an auto layout thing. But you see the difference, right? When we are using this frame and we are just adjusting it. [snorts] Now you see this when we are adjusting this particular frame from here and I want to maybe minimize it a bit. So it will not be adjusted. It will be somewhat like this. But if I want to adjust this particular frame which is in auto layout and I want to keep it maybe like this, it will be automatically adjusted. Right? Even if I'm increasing and decreasing the size, it will automatically be adjusted which is really cool. And this is where the responsive design and the auto layout thing actually works. So this is how you can uh start creating using this auto layout feature if you want it to be in this manner. So we'll just remove this thing from here. This as well. So it has already adjusted the spacing also. So when I just click on this, you get this select layer from here and the group selection where you can actually select all the frames which you have created here. The plugins, I'll be showing you how to use plugins later. And then it says go to the main component. So right now I told you guys how you can create components for your thing. Now this is not the main one but when you just click on the main component this is the main uh the master frame which we had created before and with this we had created the second one right. So this is the main component from here. So when you make any changes here the instances the second one which we had created will also have the changes because if you create any edits in the main the master frame the second one the instance would also have the same effect. Now next we'll be just moving on with our signin features from here. So we'll just remove uh the auto layout as well. So we just uh detach the instance from here and just click on remove layout and maybe just removing this thing. Now this I'm creating for my signup feature. So I'm going to keep it maybe white because the white would look more better. This is my frame here. And let's suppose I want to add effect from here. So I'm going to keep it maybe white because I think the white would look more better. Okay. So now again we have the second version of this the frame which we have created. So we'll just go to the text option from here. Just click on the plus. Okay. It says it can't add new layers because the template creator has set edit restrictions. We're going to remove that again and we'll add one more new frame from here. Click on plus. And this is a new frame which we have created. Okay. And now again from text we'll be adding new text which says sign up. And this text we will move it upwards. Okay. So, we're going to move it here. And I think this one is more in capital letter. So, I'm going to keep it in small. All right. Now, I'll add one more text from here which says login via your email. login via your email. You can also change the font but it's better if you use the same consistent font in all your u app while creating the content in your app the app design specifically. So you can use the same font it would be more readable. Now I'm just going to put it as a secondary text frame here. So I'll just go and I'll just click on opacity. I'm going to make it let's suppose 60%. Now this looks better. And I'll just adjust it here. Login via your email. And now we're going to add some emails, the buttons and all especially the logos when you are just entering in your uh signing up your account. So we're going to again we're going to select a frame from here. Click on plus frame. Make it like this. And here again click on the text. We can maybe add it here. So we don't we can't add it here specifically. Now let's suppose I want to add a text again. Here we'll just add a text. And it says enter your email. Okay. And since the text is a bit long, so I'm going to reduce the size of my font from here. Make it let's suppose 20. And again I'm going to add it as my secondary text from here. So the opacity I'm going to make it as 60%. Enter your email. Okay. I'm going to add it again. just went off. So just adjust it accordingly. Put it here. You can just add uh colors here. So in the fill section, we'll go to this and add a more grayish color from here. Okay. So this was this could be done reducing the opacity as well or also you can do it from this. So now that uh this thing has been added which says enter your email from here and I'm going to adjust uh the sides. So I'll just click on corner radius and I'm going to make it maybe 40. So it's adding a bit of radius from here. Now if you want to add icons what we'll use is we'll use plugins here. Now in Figma plug-in is actually a third party extension or mini app that you can install to add features that don't exist in the core software. You can think of them like apps for your smartphone or extensions for your web browser that will help you perform repetitive task faster or connect Figma to the other tools as well. So plugins are basically designed to automate your workflow. So some of the common plugins we'll be using here is I'm going to show you. So we'll just go to this actions button from here. Just go to plugins and widgets. Now for adding the icon we just use remixer. So just search search for remixer from here. Just click on this remix icon from here and click on run. So from here you can just select the mail option from here and then you'll be getting this particular icon. Add it here. You can adjust it accordingly. Again, I'm going to reduce the opacity of this. So, I'll make it 60%. And maybe put it right here. You can also zoom in to check how you can adjust it accordingly. So, let's suppose I'm going to make it here. This looks better. You could also do it manually by using this text thing from here. But then it takes a lot of time. You can add shapes from here. Like let's suppose you add this rectangle option and then you've got the triangle one. So you can just invert it. Put it like this. Okay. And you can just adjust the appearance of this. Maybe make it more white or black. And in this way, you could have created this, but then it takes a lot of time. So it's better to use the plugins option from here. So I'm just going to remove this thing from here. And then maybe this is not aligned. So you can just put it more in between. And this one you can just shift it here. Yeah, this is done. Now you can again create the duplicate for this. So just you can maybe drag and drop from here. So when you drag and drop you could create a multiple the duplicate version of the previous frame which you have created. And again here I'll be adding login via email. This is enter your email and the next one would be your password of course. So I'll just put it a bit at front since there is a lot of space available here. Yeah I'm going to put it here and this one right here. This looks better. Now again I'm going to add a text here. Now this one it says enter your password. We'll go to the opacity one. Make it at 60. Select this text from here. Put it in between. And then you can again add a logo from here. Go to actions. Now we already have this recent plugins which we have used before. Click on remix icon and search for maybe lock and this one you can use this thing. [panting] Again this is a secondary text so we're going to reduce opacity of this. We'll make it 60. Put it here. Okay. Yeah, this is done. It says sign up. Login via email. Enter your email. Enter your password. And next, what we're going to do is we're going to add more uh buttons from here. [sighs] Okay. So, I'll add one more option, the check box, which says remember me and forgot password as well. So, let me add that. So again I'll go to this plugins click on remix icon search for check box and put it here the opacity again 260. No let's suppose I want to keep it as the primary one itself. So, I'm going to put it here and add a text. Remember me. Put it here. Next one would be of course forgot password. Forget password here. So now I'll add one more button here. It says sign up or I could just drag and drop from here itself. Copy this and I'm going to paste it here. text is not here because it was not uh grouped together. So again I'm going to copy this text as well. Now this one looks good. It says sign up login via email. Enter your email password remember me forgot password and the sign up option is there. Now one the user could also login via their Google right. So let us add one more option here which is login via your Google account or maybe Facebook as well but let me just add the Google thing here right. So again I'm going to add a text here and it says sign in via your Google. And then I could add again one more icon from here. So uh in this remix icon I probably won't be getting the Google icon here. So we'll be using one more plugin here. So we have one more plugin known as better logos. Just click on plugins and widgets. Okay. So you can use logos from here. Click on run. And then just search for Google. So we'll be using this logo from here. Drag and drop it. It will be automatically done right here. Adjust it. Make it a bit small. I guess more small, right? So this one looks better. So it says sign in via your Google. And this is your Google icon. So this is how your second frame would look like. Just me let me just rename this and add it as sign up option. So I've just grouped all the elements together. So let me just play this again. Now this is how my sign up option would look like. Login via email. It says enter your email. This is my password. Says sign in via Google. I don't know where the Google icon just disappeared but then I had added it before. So this is how the preview would look like. I might there might be some glitch in not showing the uh tick icon from here as well as the lock icon or it might not be grouped. Let me just check it. Now this is the uh preview how it looks like and this is the first splash screen. Let me go back to my Figma page again. So I've grouped everything together now. Next uh I'll be showing you one more important thing. Now when you just click on this enter your ID and password it will hover right you must have seen those animations coming. So how do you do that exactly? Now uh let's suppose we are creating this button. So let me just drag and drop it right. Click on copy and then I'm going to paste it here. Now this is the actual button of this. So we had so previously we had talked about the components thing. So let me show you again how it actually works. Now when I just click on create component from here [snorts] which was already done in the previous frame as well. Let me show you how I can do that. Let's suppose I create a component of this. All right. And I make it as auto layout. So I'll just click on add auto layout from here. Yeah. So when I just click on this it's already auto layout. Yeah. Okay. [clears throat] Now we can just go back to the main component. So let me just create one more instance of this main component. Now when I click on this uh okay so when I click on this it says you can just go back to the main component. Now this is the main component. Now we can add variants in this feature. I again I told you before what are variants. So let me create more variants for this uh same button. Just click on add variants from here. Now we'll just adjust this opacity of this. Make it 50. And I'll just change the color as well. Now why am I changing this color? Because when the person clicks on sign up, it hovers and this color will come automatically. So you can do it by creating more variants of the same button in the same component. And again I'm just going to copy paste this signup from here and then paste it here. So this is how it would look like when you just click on sign up. Okay. So this is how it would look like when you click on sign up. And this is how you can create more variants and components of the same feature. You can add it to the same group as well. You can see some layer has been added here in the box format. And this is how you can create more variants. Now when you create a variant, it will be shown in this the rectangular format from here. And you can just click on that and adjust it accordingly. So now that I've showed you how variants and components actually work, let's move on and just continue with our design. So let's continue the design now. I'll be just adding my logo again from here. So I'll just go to this shapes option. Click on image video. I'll add my logo here. Again it's a bit we need to adjust this logo again. So just shorten this decrease the size a bit. Want to make it more circular format. So we can do it in this way. And it's a bit tilted. So we'll place it here. Now this is a search bar where the user will come and they can search for the food items. So, I'm going to keep it right here, the logo. And then I can add a text saying uh order your favorite food. So, I'll just add the text from here. Select on any area in the frame. and say, "Order your favorite burger." Okay, since this app is about burgers, I'm going to add burger, not food. And then maybe place it here. Or you can also add it here. But I think this one looks better. And I want the user profile to be here. So once you just sign up in using your Google credentials, your profile will be shown right here. Now I'll just uh insert my image from here. So now this would be the user profile which is shown right here. Now we'll be adding one more sheet from here. It says search where you can act the user can come and search for their food items. So just go on shape tools from here. Select rectangle and uh let's suppose I want to put more corner radius. Put it 30 and add a text here. SGE search your food. Then I can just adjust it to put down. So I'm going to place this text right here. Say search your food. And now I can add a logo as well. Again we'll be using the same plug-in Remixer. So we have this Remix icon. We can search for search. So we'll be using maybe this one. So we can place it right here. Yeah. Search your food. Yeah. So now this option is there to search your food as well. Now you can add the pictures of your food images. So now what I've done is I've added different images of my burger here and I've mentioned at cheeseburger, hamburger and uh I've also mentioned this star rating as well. You can just use the uh plugins to insert such icons from here. And for this shadow effects again we have got again the plugins to put this effects option from here. Just create on shape tools add a shape or create a new frame. Add the same image from here. write this text, add uh add this icons using the plugins from there and you're just good to go. So, let me just adjust this image right now. This is how it would look like. And we can just add So, at the bottom, it looks quite empty. So, we're going to add some text box here or maybe some shape to make it look more better. So I'm going to add a rectangle. And then just you can change the color of this. Maybe click on the fill option from here and just select on this red color from here. Now it's good to go. So this is how it would look like. Now something which is empty right h