UI/UX Design With Figma : 5+ Real World Projects(2022)

1. Introduction (UI/UX Design With Figma): Welcome to the UI UX design with Figma. This is the one of the best tutorial on the planet. By limited than I am UI UX designer, YouTuber, freelancer, content creator, and programmers. To date either taught or tons of Turin in-person and online. And I am so excited to be your instructor on this course. As a student on this course, you're going to get access all four hours of HD video content. Which contents? Step-by-step tutorials, interactive projects, exercises, and mode. I will walk you through the entire process step-by-step as you follow along with me through this course. In this course, we are going to talk about principles and fundamentals of graphic designing, all the way to creating withdrawal products. Learning about UX, UI and interaction, and creating a full design process for you to use with all your future projects and clients. We are going to learn all the modern tools and soft tissues by top companies to lay like Figma. Now design is the valuable skill that doesn't get outdated easily, like most technical skill out there. I'm using Figma for four years and I know every tick and tips for this course is going to cover every exit of the Y if X from the beginning to advance. After walking through the interface, I will guide you step-by-step through creating PHI cool real-world projects, like building apps, social media app, I'm sorry, for auditory platform, music player app. And the last one is surprised. I designed this course for all the loads up designer, whether you're just a beginner in designing thrilled audiences and design, I'm looking to learn this new field, Martin. So why do we still waiting for this course has everything you needed to master in Figma. So join the class and let's start designing. 2. The difference between UX and UI: What sort of really severe Welcome back with another video. So in this video we are going to learn about what is the y design, UX design, and what is the difference between UI and UX? Ui design and UX design are two of the most often confused, conflicted terms in the web and app design and understandably so they're rigidly placed together in a single term like UI UX design. And the wound from service there seems to be describing the same thing. And it's often hard to find the solid discretion of the two that dissent too far into jargon. But fear not by the end of this video, you will have a good understanding of what differentiate them and how they relate to each other. So let's dive in. So first thing we want to discuss is that what is the white is in the urine you, I didn't stand for user interface. The user interface is the graphical layout of an application. It consists of the button user click on the text, they read the image, slider text into field and all of the rest of the item you turn into x we get. This includes screen layout, transition interface animation, and every single micro indirection much all be designed. This job was to UI designer, did decide what application is going to look like. They have to choose color scheme, but then shape the width of the lines and the fonts used for texts. You are designers create the look and the Philip and applications, user interface, UI design asset graphic designer. They are concurrent with aesthetics. It's up to them to make sure the application interfaces attract to visually stimulating, tempted appropriately to match the purpose. And they need to make sure every single visual element fill, United both acidic and inputs. So the next thing is, what is UX design? You extend for user experience or user experience of the app is determined by how they interact with you. It is the experienced, smooth, ER, entity or chunky or confusing. Let's narrating the app philological or does it feel confusing? Does interacting with people to send very efficiently accomplishing the task they set out to achieve? Or does it feel like a struggle? User experiences is determined by how easy or difficult it is to interact with the user interface element that the UI designer how created. So USD is another also concur with application user interface. And this is why people get confused. Our difference between the two. But whereas if I did on our task, we're deciding how the user interface will look. Huge debt and are in charge of determining how the user interface operates. The determined the structure of the interface and the functionality, how it is organized, and how all the parts relate to one another. In short, they design how the interface works. If it works well and fully seamless, the user will have good experience. But if navigation is complicated, then a lousy user experiences likely US designer work to our second scenario. There are also certain homeodomain data analysis in all in UX design, designers will create wireframe rendering of the interface in direction and get user feedback. They will interact this into their design. It is important for us desire to have a holistic understanding of Pauser preppers to interact with the application. So how they work together. So you have designed, decide how the user interface works while the UI designer decide how the user interface looks. This is a very collaborative process and the two design teams tend to work closely together as the UX team is working out the flow of the app. How all the buttons never getting you through your task, and how the interface efficiently serves up to information user needs. The UI team is working on how all this interface element will appear on the screen. Let's say at some point in the design process, it decided that extra buttons need to be added to or given screen. This will change how the buttons will need to organize and could require changing their shape and size. To UX team will determine the best way to lay out the button while the UI teams add up, they're designed to fit the new layout. Constant communication and collaboration between UI, UX design a help to assure that the final user interface look as good as it can. While also operating efficiently and intuitively. There are some risky, like researching vital for both UI and UX designer. It's important for both discipline to gather as much information as possible to assist them in crafting appropriate design. And both follows a similar approach. What will research, what the user wants, what the expert from application of the sort of being developed. The citizens is often interactive interface usability session, where real user will interact with scaled version of certain functionality or visual design being textured and determine whether the design are moving down the proper path. For the bag is integrated with each interaction. This process involves scattering low fidelity prototypes like wireframes, entering of the interface element in order to gauge a user response quickly to functionality being tested. This can also foster visual prototype of different possible origin of the look and fill out the interface to determine which one user prefers. In all cases, research helps guide to state designer tick as they build their contribution. However, the information UI and UX debt and R are looking for is very different. So this is all about what is the why designers UX design and notice the difference between them. And we also discussed some research keys. So that's it for today's video. And I will see you guys in the next one. 3. Intro To Figma and Download & Install Figma: Whatever it is, if you ever come back to it another video. In this video we are going to learn about Weber general Figma, and also how to download Figma for your PC. So as you can see, I opened the Figma browser version. Just go to your browser and type figma.com like this. And after hitting Enter, this page will be open. So as you can see, the space looks really cool. It already has some animation on this front page. Also some, I think these are the reuse. Lets see one by one. So at the top we have this logo. After that, we have product. In products, we have design, prototyping, design system and downloads from here, we are going to download our software. We will download it to my letter. So let's see what is in the enterprise. In enterprise We have all your customers and contact sales. If you click on pricing, there will be like three options. We're going to use free version. And if you want to buy the provision of origin or all NIOSH and you can do that, but I will suggest you to use free version. Let's say the Community tab in community, we have filed and templates and plugins. And we also have some options like event and livestream, best privacy practices and nutrition program and user groups. So we are interested in file and 10 bits in a file and Tenbrunsel, we have 1000 plus templates. We can use it in our project. We also have plugins. So I will show you how to use plugins in our project in future videos. In company, I think they held blogs, career, our story and Help Center. If needed, help you can contact from here. I know you are new here. So click on Sign Up button and you can connect your Google account. And you can also use e-mail and password for creating the account on Figma. But I will suggest you to use Google account because if you add your e-mail and password, you have to remember password. So if you connect with your Google account, you don't have to remember the partial of Figma. And if you click on Sign Up button and it will show you your Google account and you can type in to it and just connect with it. So I'm not going to do that because I already have the Figma account. So I will just lock in my Google account because it is really simple. Okay, this is my account. After logging into our sign-up into Figma, this is the dashboard you are going to see. So in this dashboard we have some reason, dogs community and your project and your team, your profile. And you can also see the options from here. So we're going to look those things in the next video. So I have to, I think I had two logos to show you how to download Figma. So let's go into product and just download. Okay, after clicking on Download, this page will pop up. You can see you can download Figma for MacOS or Windows. You can use your Apple or Android device for the preview. And we also have found a torus, but we are interested in desktop apps. So I am currently using Windows, so I'm going to click on Windows. If you're using Mac, then click on the macOS. So I already installed at the most optimal, so I don't have to download it again. So you have to just click on the Save button. It will, it is going to dominate for you. So that's it for today's video. And I will show you more things in next video. So stay tuned for that. That's me signing off. Thanks for watching and I will see you guys in the next one. 4. Figma InterfaceDashboard: Welcome back. In this video, we are going to learn our dashboard up Figma. So when you install the software, you can see the interface is gonna look like this. If you log into Figma, we're voyage. And then also the interface is same. After installing when you login into Figma, then the interfaces look like this. Now we are in recent times, in recent EP, we have some files from figma, prototyping in Figma from obesity wireframing, and some colors. You can choose for your team. But you are working for yourself, then you don't have to create a team. As you can see, I created one project. This project is about web design. So the next option is drafts, interrupts. We have non project files. If you just say, let's click on this project one. And if you want to move this file into project, you can do that. Okay, the project is open now. So what do you have to do is just click on this down arrow button, and this menu will pop up. And from here you can move this file to project. And you can also search your project from here. Or if you want to create a new project, can also click on New Project and MOOC. So it is showing your project gets moved. So this is now project file. Now if we go into Home and you can see the file is not in D drops now. The file is in first project. You can see here. So the next option is community. Community is one of the biggest feature of Figma. From here you can download plug-ins, fixed gem, design system, wireframes, illustration, icon, and much more. As you can see, we have already created templates. You can use these templates in our project. So let's take this one. So you can see this web page. So this is the webpage for the e-learning platform. And if you want to know more about this web page, you can click on it. And it will show you some more things, our webpage. And you can also know the who is the creator. Opioids can also follow them from here. If you want to come at, you can also do that from here. So for now, we're going to do leakage it. And we can also like it from here and just click on it to litigate. After duplicating file, then you can see the project is open in the drafts. But if you want to move this project to your project, you can just click on to MOOC project and select your project. Like I'm not created any project here, but if I click on Default and it is going to move into first project, if you want. You can also read this page, but for now, we are going to learn our things. So I'm going to close this tab. So let's go to home again. So if you are new here and you want to create a new project, you're gonna go into first project can click on this plus button and just click on the design file. Let's even say it is untitled, but if we want to rename it, you can also rename it from here. Let's say it is an app. So I'm gonna, I'm gonna type Enter. So let's clear the frame and just choose anyone like iPhone. And we can add elements from you, like a line. Or if you want to add another shape like a triangle or ellipse Polygon. Okay, you can do all kind of Tokyo, but let's look at the interface. And you can see the pelagic you created. It is, it is not indeed drops. And if you want to delete this file is just right-click on it and just delete it. And if you're working with your team, you can just click on Create a new team and the team name and just click on the Create a team. But currently we are just working solo, so we are not going to create a new team. Let's close this page. So there are more options like there is this notification button. You will get a notification here. And this is the profile. From here you can access like plugins. Currently I floated this photo plug-in. And if you want, and if I want to uninstall it, I can just click on this button and it is going to unfold for me. And you can also download as many as complaints from the community. And in community I have my name, molarity profile Beecher Stowe, in my own style. So I have the same name immediately. Libraries and connection apps and all that. If you want to add more to accompany, can also add them from you. And you can, if you want to logout after completing a project, you can also login form here. And I think that suit, that's all about the Figma dashboard or the interface. So in the next video, we will learn about Figma tools and more. So thanks for watching this video and I will see you guys in the next one. 5. Import Figma Files in Figma: Welcome back. In this video we are going to learn about how to import files like Figma files, sketch files, and templates. So as you can see, I have this team. Let's go into it. And I have some files in it. So I'm not going Newton this one, so I'm going to do this one for importing, fine. Go to New. And you can see we have Import button, so click on it. And I have a Figma project. And you can see the extension is fill. So click on it and click on open. So it will take some time. Our final leads in border successfully done. So if I go into project. So you can see on this project is open now, so I can make changes if I want. And in page 1, we have like four frames. And for two frames are webpages and, and these two frames for the app. And this is also webpage. If you want to make some changes, you can also make it from here. So that's how to import a project from local file. Let's say if you want to download like our templates, so you can just type into Google, download Figma templates. So I found this website really helpful, figma.com. So in this website we have lots of projects. So you can just click on it and download it from view. And the next step size is like, let's say this is the Figma template.com. In this picture we had like lots of template and all these templates are free to do so we can retain, you can make changes. And you can also take inspiration from this project if you're not getting any idea how to make your next project. So I downloaded this project from you. Let's say if you want to like import sketch file, you can also do that. And for resources for this sketch file, you can use this website called Sketchfab dot, so says. So in this website we have a large soap resources like free templates and you can say wireframe. I also keep also for the Android Icon and all that. So they download this one. And you did already in the file, I already downloaded this one. So you can see you. So I'm not going to only listen. And you can see this exercise file we downloaded and extracted. Click on it. You can see the sketch file. Go to Figma, click on New and import. So currently the same DEM file limit as g. So I have to do something. So I want to do in this one. Again, click on New Import. And this is a sketch file. And click on Open. So our file is importing. You can see the name and the file is imported successfully. Done. So click on it. So after offering file, even see the app is looks like this. So we're just telling me to falling phones are not available so we can replace them with any other forms. So there's a problem with Sketch file, so we have to earn those forms. Again. Let's go to home and get this one because I have to show you something. And just when I created this only full order, a big UI, let's say I want to move this project to like my new project. So you can see we have options like multiple. So if I click on this and in V8 options like drafts, and this is my team. And if you want to create a new team, you can also do it from here. So currently I want to move in. I go imaginary programs team. So I'm going to click this one and move, I think is mono 2 first project. And we can see our project is 0. So that's how you can import from a file, sketch file and download those templates. So that's important. And I will see you guys in the next one. 6. Tools in Figma: So we are really severe. We'll come back to it another video. In this video we are going to learn about tools. Let's create a new project. Let's click on the New and you can see the options like design file, Figma, jump file, import and, and browse templates. You can see from here you can choose Templars like for iPhone 11 Pro Max, or you can choose like another smartphones. Or if we want to make our webpage, you can also choose a desktop, or you can also choose 16 years to nine slide. And if you want, you can also choose from here this pre-made templates. We also have preserved design system presentation and wireframe. And if you click on the CMO community, then it will redirect you to the community section. And it also has a fig manager templates. Currently it is beta version. So we are interested in the blank space. And you can see here it is currently an imaginary programmer teams and first project. And you can see it is the first project. So we need a blank screen. So I'm gonna go with design file. After creating new file, the interface is going to look like this. And if you want to rename it, you can just click on this drop-down menu and you can just rename it from here. You can also move to project, delete, lubricate and export, and you can also view the origin string. So for now, I'm going to just rename it. Let's rename it into tools. And as you can see, there is a Figma logos on the left-hand side. And if I click on this Meno, then you can see the options. From this quick section option, you can search anything like I want to search like polygon. I can directly use. And you can just draw the polygon like this. Bird. Let's look to the more options. And, and from here you can also go to File Edit, View, object vector taked Ahrens plugins. Currently I installed the only one plug-in that is photos. And you can, we can also add there is more options like integration and performance libraries. And you can also see the hairpin account for using web version of Figma then option could be different. Not all the options, some options like in this section it you will get desktop app. Okay? Okay, This is the move. From here. You can move your vectors, objects, images, and all that. And there is also scale options. Okay, the next one is frame. As you can see in from the shortcut is F. If you press F on the keyboard, then it has some templates like phone, tablet, desktop, presentation, watch people's social media and Figma community. But if you want to create like web-based, then you can choose these options like desktop, MacBook, MacBook Pro, and iMac. Most of the time I choose MacBook Pro. So let's click on it. Then the template is on the screen and frame we also have a slice option. I think Slice tool is not used that much, so I'm going to skip this. Okay, in the next section we have like shapes like a rectangle, line arrows, ellipse, polygon, star. And if, if you want to place an image from your local media, you can also do that. And let's choose a rectangle. You can just drag it on the frame. And you can see in that rectangle is create here. But if you want to draw square, the perfect square, then you have to hold Shift on the keyboard like this. And you can see the square is drawn, drawn the frame like this. But if I remove my finger from the ship, then you can see the shape is changed now. And it is happened with all the shapes. Like I want to create a circle. Then you can see I choose the ellipse and I'm dragging this. And I'm dying the circle on the screen, but it's not the surveys is the ol. So I want to create the circle. So I'm going to hold Shift on the keyboard. So as you can see, it is now circle like this. And here is like really cool tree. You can see there is a four dots on the east side. And if I drag it inside, you can create a circle like this. And if I want to create an icon, then you can use this option to make you sharper edges into rounded corner. I think I already show you how to use these things in previous video, but I think I not show you how to do Likud the item. Like if you were to duplicate this circle, just click on it and hold Alt on your keyboard and just drag it. Whenever you want like this and leave it. And you can also change it into another shape already found to make this circle into small. You can just hold shift and drag it down like this. Make it smaller and less plates explicit here. It could be our logo, like this. Okay, The next option is spin from pain. You can make shapes, random shapes like this. We can also make wheels from it. Let's say like this. Like join together. Like this. You can see if you want, you can also add a color in it. Just click on the fill and this plus button. And you can see and the color, and the color is gray. And if you want to make some changes, and then you can choose, or you can just press V on your keyboard and just go on this red dot. You can just drag it like this. Shape is going to change. Like this. If you want to change this gray color into another color, then you have to just press this icon and just, and just drag it on this color section. You can also use gradient if you want. You can see the color change now on the frame, like this. Okay, The next option is pencil. From here, you can just draw like anything like this. And the next option is text. Let's add some text on the screen like this. Anything like random. The size of font, it is very small. So if we want to make it bigger, just select the font using Control a. And you can go to this text section and change the font size into P2. I'm going to keep you up to 48. So we can see the font sizes increased now. And you can also change the type of font like this. My favorite font is VCR. So I'm going to choose this one. And you can see the font like this. If you want. You can also add strokes, effects and all that. And the next tool is Hand Tool. Let's say if you have more than one frame, Let's duplicate this frame. Press Alt and move it like this. And currently if you are working on like first frame and you want to move one frame to another. You can use this slider bar to move to another frame. But it is not that. But if you have lots of frame, like three or four frame, we can just use hand. And the shortcut for the hand tool is edge. And you can see the hand is on the frame. And yes, you can just drag it like this. Second frame. The first frame. And the next tool is command. Let's say you are working on the project and your own way I recommend on the frame like this is the logo. So you can tell me what do you like. This is the change. Like this. Okay. I've made lots of spelling mistakes. Then you were to mess with know that this is the logo so we don't have to make any changes. So you are another partner or a teammate can reply to this message, okay? And just click on the reply. Okay? But you can see when I go into Move tool, then it is going to be invisible. But if I go into comment again, then it is visible now. And again, you can see this is the logo cannot change. And your teammate, sir. Okay. Those are all the tools in the Figma you can use to make any project like this one would be Mary likes really weird project on screen. So that's it for today. And I will see you guys in the next one. 7. Figma Layers Panel: Welcome, welcome, welcome. And this will be around learn about how to make layers, pages, and components. So this is a project from previous video. So as you can see, we have two lists that is MacBook Pro to end my MacBook Pro V1. And inside it it has like vectors, ellipses, circles and all lead to the text. And if we want to create a new page, a blank page, I'm going to just click on this plus button. And if you want to rename it, you can just rename it whatever you want. For now, I'm going to choose pairs to press Enter. And you can see the space is completely empty now. But if I want this frame, do move from page 1 to page 2 or I just want to copy. You can just press Control C and just go to page two and press control V. And you can see our frame from page one. It is now into frame, and we just copy it in one frame. Let's say if you want to copy all the things from page 1 to page to go to page one and select all lean friends by using Control or Command D on the Mac. And Control C for copy. Now go to page two and press control V. And you can see all the things from page one. It is now on page two. So it is our D pages. And you can see these are the list, the MacBook Pro 21. So these are the layers. And let's say I have this circle, but it is logo, and I want to use it again and again. I can make this logo into components like select this circle, go to DOE Department. And you can see this middle icon. That is create a component and the shortcut is Control Alt, and click on it. And if we go into assets, you can see the MacBook Pro V1 and the component is Ellipse tool like this. And if we want to use this and just drag it on the screen like this. And we want to help when you are working with lots of friends. All big project. So those are all the things about layers, pages and SSRS. So that's your photo. And I will see you guys in the next one. 8. Figma Components: Well, so it really needs to be a welcome back to another video. In this video, we are going to learn about components. In previous videos, we'll learn about how to create components and how to use them. But in this video, we're gonna learn about more on components like what kind of things you can do with the components. Let's say you are designing an app, Hub browser app. And you have multiple pages like this. And you have icons like this. And you have to use these icons on this boat top page. Like, let's say I want to add this YouTube icon. So I'm going to just select it. And let's move this frame. Like I said, most of these icons. And we also want this semi-colons on the next page. This duplicated using alert on Mac, it's Option key, like this. But I want to change the color of this icon like YouTube icon. So I'm going to go into fill and change it into trade. Okay? The colors change. Now. You can see the real color. But at the same time, I also want to like gender color of this icon also, but I have to do it again. So, so in this case, the components is going to help us. Let's move this hype on Sunday. This blank space, also, this one. And select the icon. And I alluded to earlier how to create a component. So go on the top bar amino, select this diamond button and click on it. And you now have a component. So how will you know this is a component or not? So if you zoom on this, you can see the little diamond icon on you. And also there is a component. And this is also called as after component or pattern component. So if we go into asset Pentland and you can see our YouTube logo, it is now component. You can just drag it like this and place it on working very well. You want like this. So let's make this Instagram also a component and this PayPal icon. So this is also the component plus button. So these are the components. Now we can just drag it like this, place it wherever you want, like this. So what I wanna do is that displays this icon on, also on the next frame. Press Alt and drag it on the next frame, like this. This is the master component and these are the children component. And what I want to do is that I want to change the color of this and this. So what I'm gonna do is that I'm going to click, I'm going to select this master component and we're going to design panel and click on this selection color. So currently this black color and I want to change, you're going to like read. So I'm going to just drag it to the burden on the red. And you can see the master component and also the child component color is also changed on the frame of one and also on different too. So because of this, you don't have to change the color again and again on the different frames. Let's make the navigation panel. And we can just add all the elements on it. And we are going to create that navigation panel into components so we don't have to like drag it on the second pen panel again and again. So let's create a navigation panel. Let's choose a rectangle. You're going to press R for the shortcut to create a simple navigation panel like this. So we created this navigation bar. So you can see in the later section in the first frame, iPhone 11 Pro Max, the rectangle is on the top. So v will, if v, if I drag this YouTube, YouTube icon on disbarred, then it is not going to display. You can see. So if I move this rectangle on the downside, like this at the end of the frame. And if I drag this YouTube icon again on the navigation panel, and you can see the logo is visible now. So let's drag this icon one by one. Okay, the navigation panel is creator. So let's select this and you can press on the Component button to create component. So now this is a component and you can see the component in the Asset panel inside iPhone 11 Pro Max 1. Let's say if I move this outside of this frame. So it is not universal component. And you can just drag it on the frame like this. Okay? So these components, and these components are totally different. We made this on the navigation panel then after we created a component. So these are the different. If I delete this one, you can see the master component from the Asset panel isn't deleted now, but not from this navigation panel. So this kind of stuff you can do with a component. So that's 24. And I will see you guys in the next one. 9. Design Tab/Panel: Welcome back. In this video, we're gonna learn our one of the most important penalty that is designed panel. So let's open this project. So if I click on this top one, so you can see design panel and you can see the x and y position. We're tired angle. And if you want to make the colonists round, you cannot spend them from here. If you want to add auto-layout, you're going to do that from here. But if I click on this, you can see if it's messed up. So I'm not gonna do that. So press Control Z to undo things. Okay, It is normal now. And if I want to add a column, you can do it from here. Currently it is ingredient. So let's choose color and you can set how much column do you want, like currently, devoted is five. So mostly in industry, they used fail. So we're going to stick to it. So you can see we can adjust these texts like this according to this columns. So it will look more better. Ok. And we have options like layer, silicon colored stroke, effects and export. So let's look one-by-one. So let's remove this. Okay? So if I click on this logo, you can see the x and y position. So if I want between like a boy, I can generate from here, like currently it is 100 ohms, so I can do it well, it's like a 100. So you can see it is j now. And if you want, you can manually move this like this. You can also change the width and height. Like currently the opiate is like 1906. And you can see it is kind of the word district stretched. And let's trace the hydrolysis. So we can see it looks really weird. Make it normal. Okay. So from this option we can make like constrain proportions. So let's say if I change this into like 200, so it is automatically going to add just EPR into height. Let's look at another example. Let's say I make, I'm gonna make it up to 250. So you can see the voltage change according to height. So I'm gonna make it normal. So if you want to change the angle of this logo, you can do it from here. Let's say 45. You can see dangling chain now. So if I move my most towards the logo and you can see my cursor, you change. So I can just move like manually. Or you can just go here and type 0. And if you want to like make it this round, so it is a, it is already round, so I'm not gonna do that. So let's say if you have a square like this and you want to change the sharp corners into like round. So from here you can make that happen. Let's say, let's give value. And you can see sharp corners are changing to town. So from constraint we can begin our logos and navigation buttons. For example, if I click on my logo and let's go to constraint. Constraints. Okay? So currently it isn't left and top. So if I change into like a right and Morton and if I decide my let's say this frame, you can see the logo, it's moved out from that frame. So what I wanna do is that when I resize this phase, the logo has to stay here. So I want to pin this logo at this position. So what I'm gonna do is that I'm going to go to intervention and position 4, this is lived and it has to be on book. So let's say if I select this frame again, had decides it, you can see it spin now. And you can do the same thing with this home contact and about. Let's say I want to pin a home contact and about but I want to do it at the same time. Not again and again. So what I want, so what I'm gonna do is that I'm going to click Home and hold Shift, click on Contact, and click on our own. So this home contact about are selected. So I want to pin at this position. So I'm going to go into constraints. And currently it isn't right side, so I'm going to choose bright and policing should be taught. And if I click on this frame and less resize it. So you can see it has been. So that's how you can use conscience. So next thing is layers. So from this you can choose different blend modes like dagger Modibo, collarbone, like that. So guarantee I selected the square. Let's say I want to change it to multiply. So I'm going to click on multiplying. So you can see the effect. It has become transparent. And it also has the color gray. So if you want to change the color, you can also change it from here. But currently I'm gonna leave it as it is. So my favorite one is like this exclusion. You can see the magic. So this becomes a negative film. For now, let's just multiply. If you want to use another options like large screen color dodge, you can use it. Just play with it. Okay? So if you want, you can also decrease or increase the web obesity. So currently it is a 100 percent, so I'm going to degrees up to like 60. So you can see it has become literate transplant. For to hire. You can just click on this button. It will automatically. So let's make it normal to a 100 percent like this. So let's change the color. You can see, we can change the color like this. So let's choose this one. Okay? So from here you can also, if you want, you can also add the hex code and paste it here. And we can also decrease one enqueued is opacity 50 percent. Or if you want to hide, you can hide like this. And let's say you don't want color, you can just press on this button and it is going to remove. Let's undo this. So the next one is stroke. So stroke, you can add a stroke. So you can see when I click on the stroke, which already added the stroke that is black. So I want to change to another color. So I can just click on this box that is color. And I can just drag it on the color palette whenever, wherever I want. So let's choose this lesson, this red one. Okay, You can see the border is red. And if you want to add like gradient color. So you can just go to this box. And from here you can choose linear. So you can add two pillars. So currently it is raining. So I'm going to add the second color, like gray one. So you can see the hub become the red and the hub become nuclei. So let's make it solid for now. Okay? You can also increase or decrease the opposite. You can also add the hex code. And you can also choose different formats of pellets like RGB, CSS, as SSL is SB. So if you want to increase the stroke, you can just add the number like less air into fine. And you can see the stroke is increased by five. And let's say if you want to, stroke should be in centered, you can choose center. And you can also do it for outside like this. So from these three buttons, you will get more options. Like I don't strokes, like a stroke style should be solid or dash. So currently, currently mandatorily the solid. So I'm going to choose dash. So you can see it become detached. So if you want to add how much debt and how much Gabby want, you can already familiar. So by default I think it is 10, so let's make it up to 15. Okay? And what should we Desk app? So by default it is like Satan to none. So if you want, you can make square or round like this. So desktop become around. So you can adjust the join like this is a millimeter bevel and I think this one is it around. So you can also add this delta angle from here. So I'm going to leave it as it is. It looks really good. But only this square root is looks good. So that's how you can add a stroke in shapes and objects. So let's choose the effect. So from effect you can add, let's add the effect on this emergent programmer text. So I chosen this text and the playground blood currently. Lets remove this one and add new effect. That is drop shadow. And you can see this text is kind of like rotating. So if I want, I'm going to also add just the how much shadow I want. So currently, it is like why is full and blood is 4. So when x increases, y. Let's increase too much. So you can see the shadow. So let's spend the next 40. So you will get that cool drop shadow effect. So by this is too much, so I'm gonna make it up to like lists, fine. And should be 0. Now it looks really cool. So if you want, you can change the colors like effective alone. For now I'm going to leave as it is, because it looks really cool. So I just like how much oppositely you want from you. If you want, you can also choose different blend modes like multi-part dark brown color blends, soft, light and outlet. Let's use multiply. Okay, Let's look. I didn't normally. Let's say if I click on another element like a list, I click on this frame. Then the only design options like frame layers will be different for that element. Same for this element, this element for all the things. I think I forgot to tell you about more on effects. So I'm going to do, and let's add another square. Okay, like this. So if I go into effects, so currently I'm getting optional and drop shadow. So if you want, you can also choose like options like Inner Shadow, layer blur. So let's see one by one. Let's use inner shadow. So we can see the inner shadow is added. You can see here. If you want, you can also include is the, the blood. Like let's add the 20 and 20. So now you can see the inner short of it. So let's choose it again. And let's make it. So you can see the layer blur effect is added on it. We can also add micron blood on it like this. So those are all things you can do with effects. Let's say I have this frame, desktop three, and I want to add like one image on the background opposite. Let's add this pizza image. Drag it and drop this on the frame like this. Okay? I think it is kind of like really messed up. So let's choose the desktop screen and you can see the image on the images on the top. So what I want to do is that I want to see all the options like the shapes, text on all that. So I'm going to move this at the bottom. So you can see, we can see all the options. So let's decrease the opacity of it. You can see on the design pendant image and the opposite, it's a 100 currently, so we are going to choose up to 20 percent. Then our navigation buttons and all the things on this frame will become visible. If you want. You can also choose the different blend modes like Monday by collarbone, exclusion, difference, difference, and all that. So I'm going to leave as it is currently pass through. And if you click on this image, then you will get this mineral. Like exposure constraints, saturation, temperature and tint highlights and shadow. And you can address it what image from you, like, like this. So just totally depends on you. So I'm just like messing with it. So if you are working on the like really cool project, so, so let's make sure you've got a certain should be perfect. So there's kind of thing, you can do it with the design panel. So that's unfortunate. And I will see you guys in the next one. 10. Text Tool and Fonts: Welcome back. In this video, we are going to learn about. So as you can see, I have this frame called desktop one. And to access the text, we can place P for short code. I will consider genuine 2k plus icon. And if I click on the frame and type text in it, like this, if you want, you can also copy paste your text by using control C and control V. So this is the first method that is selected in the text and click on the screen. And you will get discussed and you can type whatever you want like this. And the second method is you can select text and you can draw the dimension according to your project like this. You can type whatever you want in this box. I want to just copy paste like this. If you want to address this text walks again, you can access them by clicking on it. And there's this added this according to your project, like this. Let's say if you want to like increase the font size of this text, you can select on it and then go to design panel. And you can see the text menu. And from here you can adjust the font. Like, what kind of phone do you want currently does in Roboto? So if we want to change another font, like let's say coffins. And you can just type in it and click on it. It doesn't want to change for you. If I want to say four different forms, you can search in it. So for now I'm only in the Poppins. So let's increase the size of the font up to like 50. Let's say if you want to change your font, regular to bold, you can change it from here. Currently it is in regular. We can go into this menu and I can just select Bold. And you can see your text each genuine board. Now, if you want, you can also use the shortcut called control and B to change your normal rotation too bold, too on board like this. We also get other options like extra line, thin, light, regular, medium, semi bold, extra bold and black. And you can also choose this option if you want. The text is born now. So as you can see, I have this paradox and let's increase the font opposite. So select this paragraph and canonically the font size is like dwell. So let's make it up to like 30. Okay? Font size is increased. So let's add just this one. Like this. Let's say I want to align this text at the center so I can go to this menu. From here, I can align my text tools, the left, center, and right. So currently it is live to this avenue center. So you can see our test is alanine to center. And we can also align our notation to write. By doing this, we're done. So I like this, the nephron, so I'm going to leave it like this. Let's say we want to add a letter spacing. You can do that from here. And country did 0%. So I'm going to increase up to like phi. And again see how a letter spacing it's either in this text. And if you want to add like a distressing, you can add it from you currently to 0. Let's add up flex grantee. And you can see how parallel spacing is added or here. You can also adjust this text according to your frame. Currently this is on the top. I want to edit this text in the middle so I can choose this option called align middle. So my text will be aligned, anchored onto this text. And currently it is in Milan. And we're going to also align Oberlin tote and also the weapon like this students this one. From this Add-ons menu, you can choose different options like Element Division, paragraph, indent, list-style. Later cases like if you want to make your guesses high or bigger, you can also do that from here. And you can also see the preview of your text. So let's say I choose this center one so you can see the proof for it. And the apparently it is in the left. So let's choose them. Center. And this is the right one, and this is the justified and the front recursion. If you want underline to your taste, you can do, you can add it from here. You can see the underline is added on your text. You can also add a strikethrough in it. Choose this font declaration minimum. And you can see the text is now strike through. And we can also add the parallel venation. So connected at 0, Let's add up to like 20. And you can see the indentation is added in our prevalence. And we can also add the bullet points like dots and the list like this that you can see the dot is added over here. And if I choose the number one, so you can see 12 is added over here. Let's say you copy, pasted some text from the internet. And the alt-text is in like a lowercase. And if you want to increase the all text into like uppercase, we can change it from you by going from this later gets Meno, and press this uppercase button. So you can see our text is now in the uppercase, and you can also make them into lowercase again. And if you want to change into title, title case, you can also do it from here, much using this title gets Meno. And from this section you can also add this the numbers. And we get lots of option from here, but we are only interested in these options like alignment, declaration, parent organization, list-style, little case, case n. Let's select this text. Let's add some color in it. So currently it is in solid. So we found you can also make them brilliant by using this linear. The first color is red. And let's make this color into like a book like this. And let's increase the opacity up to full unless I do this bar. So you can see the gradient is added on our taste. So gradient effect is added on this text. So if you want to increase or decrease the opposite, you can adjust it from here. Let's say I want to decrease the opposite of liquidity wasn't. So you can see the opposite is decreased, make it 100. And if you want to hide the text, you can like hybrid form here, like this. And if you want to remove, the effect, can click Minus button. So the text is gone. Now, let's press Control Z to undo this thing. And you can also add a stroke in it. So if I click on the stroke, you can see the stroke is added on this text. If I zoom on this, you can see the stroke. And we can also change the color of Destiel. And you can also increase or decrease opacity and you can also increase the homage. We want by default it is one. So let's choose to find. And you can see the stroke is now phi, and you can also change the position of your stroke like currently it is outside so you can choose inside. Our central hygiene downside is looks cool, so I'm going to choose outside. So let's add some effect. So if I click on this effect, you can see by default, drop shadow effect is applied on it. You can see he tutored drop shadow on this text. If you want to make some changes, you can do it from here. Like currently y is four. If you want to add just this explosion of that drop shadow, you can do it from here. So currently y is 4, so let's choose a lectin. The drop shadow is our district according to the Y position, that is ten. And you can also add just the opposite, the formula. By default it's 25. And I think it looks cool. So I'm going to leave as it is. And we can also add other effects like Inner Shadow, layer blur and vegetable. Currently I'm going to choose drop shadow. So those are all the option we get with the text. So that's affordable, Julia, and I will see you guys in the next one. 11. Images in Figma: Welcome back. In this way, we are going to learn about image. So let's create a rectangle. A simple rectangle like this. And currently it is filled with gray color. So it is solid now. But I want to replace this solid veto image. So I'm going to click on the drop-down menu. And I'm going to this image. And you can see we get this pattern like chessboard. So from here you can choose an image. So if I click on this, it will be direct to my folder. So from here I can choose a different images. So let's say I will choose this one. So this is the image from us Korean. Currently it is very popular all over the world. If you want to watch this series, you can audit on the Netflix. So you can see that by default it is infill. So what is filled? So let's say I have this shape and when I resize it, you can see images adjusting according to this shape. Next one is feet. So what it does is that, let's say When I like resize my container, then you can see the shape of the image is not changing. The only the Scheppach continuity is changing. So this is how you can use it. The next one is crop. So from crop you can crop your image like other subjects like Photoshop and all that, like this. And if I close this, you can see the images crop now. And if I go into again this fill, so I can crop this image again like this. And the next one is title. So what tidily does that it will repeat the image according to the shape. You can see. Let's say I resized my container like this. And you can see the image is repeating itself according to the size of that container. Like this. It kind of looks cool. You can see the infrared pattern over here. Okay? So those are some option you can play with it. So next option, currently less subject into field. You just feel numb. And if you want to rotate this image, you can do it from here. From disrupted button. If I click on this image will be routed at nitrogen. And remember one thing, only the image is gonna rotate, not the ship. If I make a shape like this, if I rotate it again, you can see only the images rotating, not the shape. If you want to adjust your image. We get options like exposure, contrast, saturation can preach alerting, highlights and shallow. If you use the Adobe Lightroom, then you might know all lists. So there are three ways you can import your images on your project. Let's create a one frame, a data frame like this. And if I move my this image on the desktop, then you can see the images. Plus now I have to adjust it manually. So let's clear some shapes like ellipse profile. Let's say you have to add image in this. So you can do that using less image. It can go into shape. And you can choose option called Place image. And you can also use short course like conclusive. So I'm gonna select this one. Let's image. Click on Open. And you can see images on my cursor. And if I click on the circle, image is going up. So images going to place on that circle. And also the same with this polygon. And if you want to make changes energetic and select this circle and go to fill. And you can change all the options like crop by turn, feed and all that. Let's say this image profile is kind of portraiture bit upward, so we can do it like this. And the next method is to import your images that just drag-and-drop, select our image and just drag it on your Figma software like this, and you can libertarian address it wherever you want, like this. So those are all things you can do with images. So that's your portfolio and 0's in the next one. 12. Boolean Operations in Figma: Welcome back. In this video, we are going to learn about Boolean operations. So what are the operations from Boolean operation? You can create customized shape. Like if you want to design a logo, you can do that using Boolean operations. Let's do some chips like an ellipse. Let's take another ellipse like this and select both of them using Shift. So you can see on the top bar we have with an operations. So the first one is union. Let's say you want to combine two shapes together so you can select this union selection. And it is now combined. And just me undo this Control. D or normal again. Let's round to subtract that I can do it. From here. I was trying to select both shapes and go to Boolean operations and subtract selection. And you can see the subtract operation. Okay, Let's undo this one. Okay? So the next one is introduction section. So you can see in your jurisdiction, only the middle section is remaining, n All things are gone. Now, you can see this interaction section is only remaining. So the next one is acute section. In exploring only the introduction section will be cutoff. And all the things are going to remain as it is. So let's click on the section. You can see only distinct is cut out. So you just need to play with it. You can edit mode shapes, like, let's say rectangle, like this. And let's all of them. And let's choose excuse section. And you can see the Boolean option is performed on these three shapes. Just limited. You can make customize shape. If you want to make a logo, you can also do it from here. It kind of level. So you can just place it on the top, like this. So that's how you can make customized ship using Boolean operations, so Deci forth. And I will see you guys in the next one. 13. Alignment & Distribution Figma: Welcome back. In this video, we are going to learn about how to align things in Figma. So as you can see, I have this project open, Let's call later hurdle. So as you can see, I have this login page. Let's say these icons are quite math.pi like this. And you want to align them together like this. So in this way, we are going to use this alignment buttons to select multiple things. In Figma, you have to hold Shift. So click on the Twitter button and hold Shift, and then click on facebook and then Google. So you can see the multiple things are selected now. So now go into design panel. So currently these three logos are not aligned vertically, so we are going to align them at home to vertically. So we have special button for it. So you can see this is align vertical button. So if I click on this, you can see our logo is aligned vertically, but there is a problem. And the problem is that you can see the spacing is not matching over here. So we have to add those spaces. So we can add spaces using this heroines minimum. So we have options like in the More option like tied up distribution vertical spacing, and distribute horizontal spacing. So we are going to select distributed horizontal spacing. And you can see our logos are aligned together and the species is also same in between them. So that's how you can align things in Figma. So that's important to you and I will see you guys in the next one. 14. Figma Team Libraries: Welcome back. In this video, we are going to learn about Team library. So what is deemed library? If you go into like any of your file and if we want asset, you can see the options. You can see this book icon. And if we click on this, this will pop up this menu. So you can see and we represent in libraries. And the current file is untitled. You can see this is the untitled. Like if you want to use this components in mini-project, so you can use them, but currently I'm using the free version. And if I click on this, you can see it. It is telling me it is only for the professional account. It is not for the free account. So there are many other options like I don't really need this filter icon, our file from the Figma community. So again, use this. So let's switch on this. And you can see the icons like this. And I can just drag it. So I can use these icons in my projects. And it is also showing me my creative team that is imaginary programmer. And if I open this, it will just tell me what kind of colors they are used in this remaining programmer team. So let's go into Home and we'll go into community. And in this icon section we have this bezel icons. Click on it. And if you want to use this, all the icons, you can just click on this duplicate button and it is gonna duplicate for you. And then you can use this, all the icons from this team library. And we have to just toggle this option. And we can just drag it on the project or frame like this. And it will also show you what kinds of icons that we use in this project. We use this honest woman speaker and also this warning sign. So this kind of thing you can do with a team library. So that's it for today's video. And I'll see you guys in the next one. 15. The Code Panel in Figma: Welcome back. In this video we are going to learn about inspect panel. So if I click on this inspect panel, you can see options like coal. You can see also the CSS. And if I click on this, you can see the options like iOS or Android. And this is the code. And if I click on this, this is the table. From here, you can see this the background-color, my non-color up this project that is green and currently I'm not selected editing, it is in background. If I select this, my first frame as a desktop one. And you can see options like currently I'm selected desktop one frame and all the properties like weird height, top lip, and blend. The color. Currently, we're totally white, so the color reads, the hex code is FFA for 16. And you can see the core part also. Let's say you are teammate is a web developer, a front-end web developer, and he's working with CSV. So it can just copy this properties and you can just paste it into his call. So you don't have to write emitting like only these properties like height or the height position and the background color. And if I click on this imaginary program model text, so it will tell me. You can see all the properties like we'd hide, left, blend, and only the text. And all is the content you can see into Photoshop, it will say, what kind of font I used, a hybrid size, length of it, or what are the colors I used like I used a gradient color and the like. When it's purple and one is like a lavender color. And in this course, and you can see CSS, iOS and Android option. And if I click on this IS button. And you can see we have iOS code, so we can just copy and paste it in our iOS application development core. And it is also same for under Android. You can just copy and pasted into development code like this. You can also view them. What is the table of contents for it? Like colors and type of deformed size, height, and all that. Or does the exclusion or does the y position. So you can see I use this monster, it alternates form to another with the 700 style is normal. If I change this into bold, then it will show me this is the bolt. So it will also tell me about what is the size of the pixel, currently 60 pixel. What is the line height and all that? So there's kinda option you will get in the inspection panel. So that's your folder. And I'll see you guys in the next one. 16. Prototyping in Figma: Welcome back. In this video, we're gonna learn about prototype. So let's create a frame. And let's create another one. Okay, we have two frames now. And you can rename it whatever you want for the move tool. And rename it like this morning too. Okay, let's create a square on this frame. And the shortcut is, and you're going to create a square. And you can see the square is on the first screen. So let's copy this square on the second frame, like this. And let's make this square into circle by using these dots. Okay? So now go into prototype. In product section, you have options like background model. This is the goal model of iPhone 11 Pro Max, and this is the device name and you can switch this no violin two horizontal, vertical position. So let's change the background to white, like this. See in the background to white. So what I want to do is that when I, when I'm going to click on this square, then it has to change into this circle. If I click on the square, you can see there is a white dot on the right side of the square. And if I click on this, you can see there is a wire like this. And if I move this on the second frame and artist to it, then you can see this introduction panel will pop up. So from here you can add options like on time, you have to do this action. Like if I tap on this, then this square root will be changing to this circle. So you can set all the things from here. So for now, I'm going to choose on tap. And now we get to the circle. We're navigating from this page. To do so, we are going to choose navigate and we are navigating from square to circle. From the first frame is squared and the second premise circles. So that's why it is saying the circle. Most of the time, the end mission option is in the instance. So we have to choose the smart and emission to have that cool effect. And you can also set the time. Currently does'nt 300 millisecond. If you want, you can change it from here. But for now, I'm going to leave as it is. And now let's click on this Play button or present button. And you can see the new window is popped up. And you can also see the background is white. If I click on this smart phone, you can see this is telling me this is the hotkey. And if I click on this square, you can see it is changing to circle. But if I click on the circle again, it is not want to change them to square. So we can make that. Let's go into project again and just click on this circle. And you can see this dot. And you can move these 2 first frame like this. You can see the interaction panel. For now I'm going to leave as it is like all the options like smart and emission and on-time outlet. So let's go into project again. And you can see currently it is in a circle. And if I click on this again, and you can see the circle is changing to care now. And if I click this again on the square, you can see the tangent to circle now. So I have a project like I made this random project for the demo purpose. You can see this navigation buttons like home contact about. So what I want to do is that I want to join these two connect button to this page and about our navigation to the last page. So you are really know what to do. You can pause the video and think about it, how we're gonna do this. So let's do these conduct. Currently I am in prototype panel, so you can see in this Plus button and less drag this into this second panel, second frame and lists. Click on this about unless join these tools. Third panel, like this. And if I play this, if I click on this frame, then you can see then the hospice kids are contact and about and if I click on this contact, then you can see the frame exchange into contact. And let's do it again. So currently on this page we don't have any host port keys, so we have to clear those things. Again. We only join this first page, so we have to do it for the second, third. So let's do it for the second page. From home, we have to go to the homepage and from so this is the contact page, so we don't have to do anything with this. And let's click on the about and drag it on the third frame like this. And the same for our pitch from home button. It has to go onto homepage and, and, uh, from contact. It has to go on the contact page like this. And if I click on this, one of these wires and you can see there's an introduction details like on-time. It has to go on didn't desktop tool like this. So for now we're just interacting with these pages so we don't have to choose any other options like Smart Dimension and all that. But if you want, you can do that like you can just use move out. You can see this little animation or here. So display it again. So as you can see currently on contact page and the hotkeys Alto home and about and if I click on this home, you can see we are currently on the homepage and lists. Let's change into contact. So currently on context. So let's, let's go on the frame. And if I click on this contact, you can see in this moving. So there's how we can prototype your project. For this project, I choose this hyper protocol 0.9. You can choose whatever you want, like. Ipad Pro elements are pro. You can also choose Apollodorus. But this is the webpage soul, and that's why I choose this. You can say the iPad Pro, because this has a bigger resolution. So I think that's it. So that's afforded to do video and I will see you guys in the next one. 17. Horizontal & Vertical Scrolling: Welcome back. In this video, we're gonna learn about how to add what deepest calling and horizontal scrolling. So let's choose a frame. Let's choose iPhone 12 Pro Max. Let's say we are designing apps like Instagram. And in that app we have stories. Okay, let's select them all. And less. Orange stroke. Stroke is going to be white. Let's make it a tree. Okay? Now, right-click on it. Go to Plugins. And, and I already told you how to add plugins in Figma. So I think we plugin called photos. So click on it. Okay, So from here you can choose different options like animal people argued extend into your city and alert. But currently we are going to add, Currently we are gonna choose random. Let's say there will be a pro habitual people. So I'm going to choose people. And it is automatically gonna do circle and count them all. And going to add all these images in the circle. You can see like this. So let's close this one. Okay, so images added. Now let's, let's group them. So right-click on it and make it group. Using, you can also use Control G to group them. You can right-click on it. Choose this group selection. Okay, I'll store in that group now. So right-click on it again and choose frame selection. And now just drag it on the iPhone frame. Like this. Sometimes it will be difficult to earn the story inside this frame. So I finally elevated after that. So the stories is added in iPhone 12 Pro Max. So now click on the clip content. Now we selected clip contents. Let's resize this algorithm to this frame like this. Okay, now let's create a field copying. I'm going to use some random dimension for it. So because it is only for demonstration purpose on this resolution. Okay, I think I selected six. So select them all right-click on it. Go to plugins, click on photos. And in photos you can see we have an option called random. Click on it and choose random. So if you want, if you want to add manually, you can use option called Place image and you can add images from your local files. Okay, now all the images are added in this first section. Now close this photos. Now right-click on it, make a group. You can also use shortcut Control G. So distinguished group now. And again, right-click on it and choose frame selection. Okay? So after Frame Selection and drag this field into our frame like this. Okay, now click on the clip content. Okay, Let's adjust this first section like this. Now go to prototype. And you can see the first section is selected. And currently there's no scrolling. Let's choose a vertex willing and forth tourists choose horizontal scrolling. And let's make this frame a darker because nowadays they're quite famous. And I also like to use dark mode. So let's present this one. So you can see the app is looks like this. So I think I have some Internet issue audience. That's why image is not loading. So if I drag my mouse on the left side and seeing the scrolling is happening or on the smartphone. And also on this first section, scrolling, this kind of smooth. If you scroll, you can see it is looks like this. So that's how you can add vertical scoring and a horizontal scrolling in your app or webpages. So that's it for today's video. And I will see you guys in the next one. 18. Masks in Figma: Welcome back In this rebel and learn about how to use mass. So as you can see on my screen, I have different types of blop on my screen. On desktop, one ion, it is color. But what I want to do is that I want to place the image in this globe so I can do that. The traditional way to do that is just to decondense. And you can go to shapes and you can place image or here. Or you can go to fill and choose solar to image than it is. For me. You can also choose an image, but you can also use mass to do the same thing. So let's take, emit some random image. Let's take this image and implicit or here that matches the layers or you, Okay, On the second vector that is our blown, I want to place this image. So let me like multi-attribute on the right side and just check it once again on the left side. Okay, so I can now plus 0 image audience. So to do that, sit at the vector v. We want to place your image and select your image. And now group them using control. So it is group now. So what we're to do is a DAG is go to group this group B, group two things, warrior. The first one is this image and secondary is our block. So select the blog, right-click on it, click on uses a mask and you can see the image is inside that blue area. And you're going to also address this blog. Like crop, this image attribute upwards, like this. So this is how you can use mask. I know you might be thinking lesson image can be more simpler like selecting the shape and go to image and using like image from your local disk and displacing already here. I know it very simple, but I also don't use masking that much. So it is totally depend on you. If required, some customization, then you can use this masking technique. So let's place this image on this. Let's place this image on this block. Placing images kind of masking. But it is like very simple process. So that's how you can use masking. So that's the fourth derivative. And I will see you guys in the next one. 19. Figma Exports | .JPG .PNG .SVG .PDF | Save Project into .fig: Welcome back. In this unit we are going to learn about how to export your project. And PNG file JPEG will have n is region. So as you can see, I have this clone up Instagram and I want to export this frame. There are lots of options to export in Figma. So let's look at one by one. The first one is go to Figma file. And you can see we have Export button. And currently we selected iPhone 12 Pro Max 2. This is the frame and it is in PNG format. And you can also see the resolution over here. Now click on the Export. And it will ask you for where we want to store your project. So let's create a folder over here. And let's say this project into this folder. Click on the save. This group downloads in the export folder and you can see our project is exported. The second method is the selective of frame. Go to design panel and go at the end. And you can see we have an option of exporting over here. And currently this one x and leave as it is. And if you want to export in different formats like JPEG, SVG, or you can choose these options. Let's say we want to export this into like a JPEG. Click on this EPEC and click on Export, iPhone 13 match too. And you can also see the preview of this app. So click on the Export and it is going to ask you where you want to store. So currently we want to store this in to download and export folder. So click on the sale. And let's go to Download. And you can see it is indeed in JPEG format. This one is into PNG format. And same with this SVG and PDF. Currently we like exposure on listing. And let's say if you want to export multiple frame, you can go to File and choose export frames to police. And your project is going to be export to PDF format. So click on this arrow. And let's open this one. And you can see our file is opened into Chrome. And this is our frames, four frames of our music app. So this is how you can export multiple files in Parliament. Let's say you want to share this project with someone and you want to export this into like Figma file. So go to files again and click on this C1 local copy. And it will ask you where you want to store. So we want to fall into export folder, click on the sale. And this is our Figma file. And if you want to share with someone with Gmail or you can share this file directly and they can open this file into their Figma software. So those are all the metals to export our projects. So this import religious value, and I will see you in the next one. 20. Mockup in photoshop: Welcome back In this rebellion and learn about how to create mock-ups in Photoshop. So I'm going to create a mock-up of this frame. It is an Instagram clone, but you can share or like someone's host, select the frame and go to design panel. Such for export. You can see the export is at the end of design panel. So what we want to do is that I want to export this frame into image, that is into PNG format. You can choose different formats like JPEG, SVG, PDF, but I want this into PNG. So I'm going to choose a PNG. And if you want to see a blue, we can also see a blue from here, this one. And now click on the Export. So it will export the newer local disk. Currently I selected this specific downloads, so it is going to save it into this folder. So let's click on the sale. So let's go to downloads. So you can see this is the image is exploited in this folder. Let's open your favorite browser and search for free mockups. Or you can go to this website called free peak. In this actually will get lots of mock-ups for free to use search for iPhone mockups and hit Enter. And we want this to be a GIF format that is Photoshop format. So you can see we can filter out in this category. So we have only one frame. So let's choose a one frame. This one. I think this one is looks good. So let's download this one. Setup the frame, click on the download and click on Free Download. After downloading currently does indeed format. So you have to extract this folder. You can use a surplus like 7 Zip or rubbing them to extract that zip folder where the file is downloaded. Extract that file, right-click on it. I have 7-Zip. So I'm going to use 7-Zip. You can see the Photoshop file and the image of that mock-up. So go to Photoshop. So click on the Open. This is our folder. We extracted and choose the file. The file is open now. So go to layers. And this is the smart image. So you can see the little image icon over here. So double-click on it. And I think we had to delete this folder, so I'm going to do this one. Now select your image that we export kate. So drag this image into Photoshop and paste it on this blank screen. And you can see the images bestial over here. Now save this image by using Control S. And it is asking in place the final before saving. So click on the place. Okay, The image is placed. Now let's go to our original file. And you can see we have our mockup, but there is a problem. You can see there is a text and I want to remove this text. So the text does delete this one, and it is diligent. Now. Now let's export this image. Go to File and go to Export. And you can choose Export As or you can click Export as a PNG. I'm going to click on Quick Export as a PNG. And let's save it into downloads. And click on Save. Let's go to Download folder. You can see our motto. Let's open this one. And you can see this is how our mock-up look like. So that's how you can create mock-up inside Photoshop. And you can go to this website. And you can, if you want to, like use a desk top mock-ups and just search for it and just download the desktop mockup and import it into Photoshop. And all the processes the same. So that's how you can create mockups in Photoshop. So that's it for the original layer. And I will see you guys in the next one. 21. Plugins in Figma: Welcome back. In this video we are on learn about plugins. You can see I have a frame or backstop. So I click on it. You can see we have option called plugins. So you can manage your plugins from here. If you install some plugins already. And if you want to Italian plugins, you can click on the browser plugin community. Now go to plug-in tab. From here you will get lots of plug-in. You can use this plug-in senior project. Let's say you want to install this plugin called blobs. So just click on this button, Install button. So you will also know about what is the function of it is. It will also show you who is the creator of this plugin and when it's created, and how much people don't relate this plugin. So we're going to install it. Let's go to reject. So right-click on it, go to plug-ins again, and you can see the plugin is installed it, so click on it. So what blood does is that it creates some random shares for you. The value of complicit 10 contract is fine. So let's click on the MEG blocks. So you can see it's created some random shift for us to use in our project. So if you want, you can give a different value, let's say 31. So our new shape is here. So this kind of team you can do with this plugin. Now let's look at a plugin current photos. There is one of my favorite plug-ins calls. I will show you why. You can see this is the plugin. And this plugin we get lots of websites that has stock images and Julio, but we didn't have one plugin. So you can see the plugin is installed it, so right-click on it plugins and you can see in the photos. So the photo blogging is open. Now, you can search of photo like if you want to like search any specific for but you can search area. We also get album give files and numb and library. And you can also choose different types of categories like technologies, port city architecture and all that. But I like this random option. Like, let's say I have these two shape and I want to place image on these two shapes. So I'm going to go into tandem. And I can choose different options like animals, City, Beach, people. But there's also an option called random. So it automatically gonna choose any two forecasts and won a place on this shapes. So if I click on this random, so you can see the two photos is inserted in this shape. And it looks kind of cool. It will help you when you are building a social media app and that app, you have a study session and you want to place all the images at a time. So you can use this feature are random and you can choose people. So in that story and ultimately one of the faces of people, now we know the how to install plug-in, how to use them. So let's look at how to uninstall the plugins. So right-click on it and go to plug-ins again and click on Manage plugin. And you can see we currently infected these two plug-ins when you're first one is lobes and segments focus. So just click on this three.me. And it will, it will give you options like shortages and uninstall. So let's click on the uninstall. And our plugin is uninstalled it. And from here you can also browse the different plugins. In next year, I'm going to tell you top five plugins to use in your projects. So that's your water is. And I will see you guys in the next one. 22. 5 MUST HAVE Plugins For Figma Designers!: Welcome back. In this video, I'm going to tell you the top five plugins to save your time. So in principle, we learn about how to install plug-in, uninstalled plug-in and how to use them. So I learn now how to access plug-in, right-click on your frame, go to Plugins. And you can see in the infrared plug-ins over here, one of my favorite plug-ins photos I use a lot for days ago, one of my friends recommended this Unsplash plugin is also great and it's kind of, the interface is kind of same. We get all the categories like technological or for abstract and all learn. In this editorial we get lots of photos, preserves. And if you want to search in a specific folder, you can search here. Announced place. We also get this random option, like photos. Let's say, let's say you are making a field Instagram freed. And in that you have to add multiple photos. So you can just add it by locally, but it will take a long time. So you can select them all, all this rectangle and just click on the insert random. And it ultimately going to add all these photos in these shapes. So you can see the 34 plus is added in our shape like this once. Let's talk about next plugin. That is blush. Let's say your client wants to add institution in his projects. So you can use this plug-in called blush. And from less you can see we get lots of illustration. We also get to know our creators and what kind of illustration we have. I like this intrusion called open doodles. So what we have to do is that, let's say you want to create a meditation app. So we'll just click on this meditation illustration. And it is automatically going to add that image on your frame. You can resize it like this, and you can add some text over here. In this illustration, we don't get option to change the color because you can see if I click on this color icon, we need pro agent. So it totally depends on you want to buy approach and you can buy it. But there are other administration, they are totally free and you can also change the color a bit. I think this one power moves. Let's do it, this one. And let's say I have an image of this. You can see we get options like skin color. Contain the skin color wheel from here you can choose eyedropper tool to the different color. You can also change the closer warrior like lower, upper head face and all that. Kind of like Bitmoji, Snapchat. We get, we get lots of option to change our clothes faced the shipper phase and outlet. So let's say we want to 10 lower into this flower is shorter. If I click on this, you can see the close side chain now. You can tell the gender of muscle tone like this one. That's how you can use the blush. Let's talk about the third plug-in that is mock-ups studio. And it is also one of the like. My plug-in. It is paired but you can use some free template. So you can see this iPhone and iPad. Let's, let's use this frame is frame. And just click on this mock-up. And you can see our interface is on the screen like this one. So if you want to export, you can just click on the Export as a file or as a document. So current language document. And it will save you in your local files like in desktop or in your C drive. You can save it wherever you want. So you can see a mock-up is our story in my local file, in the download folder. So I can open it from that follow. So the mockup is kinda look like this. You can share it with your friends or your colleagues so that we'll know how your app looks like. The last plugin is I use a lot that is called wireframe. So in this plugin, you will get lots of options like if you are making a website, you can choose wireframe for web, Oliver making, making an app. You can choose mobile diaphragm or we can get lots of options over here, like different kids, like 360 degree wireframe kit for web and mobile. If I click on this 360 degree wireframe kit for mobile, I would get like different options over here. Let's say I want to use this one. I'm going to just drag it on my frame. So it really is going to add on my frame. I can add just shoot like this, like this. You can also stretch it out. Before this plug-in our lives to do is that I use to create all the elements for wireframe manually by using shapes. And after making that shape, I wish to group them and get into components. I use those component into wireframe. But managing this plugin, we can still a lot of time like a list, say I want to build a music player app. So I can just do a search over here, or I can just scroll through this window and you can see them into wire-frame element. I can just place it over here. And we can add like this one. And let's add just a little bit. So you can see within a minute we created a wireframe for our music player app. So this image is kind of black list and make it point. I would like because in wire frame we use only bicycles like these ones. So this is the wireframe for our music app layer. By using this, you can save a lot of time. I think I forgot to tell our plugin called for the icons. In our R&D projects. I use this icon pack, but in different way. I used to go into acid, into Tim library. And from that I used for the icons. And from that I use icons. But by using this plugin, I can just click on, let's say I want to use this button on my app. I can just click on it and then add just some dimension over here. And this over here. With this plugin, you can save lots of time. You can see over here. So those are our five plugin to use in a project to say a lot of time. So that's it for to relativity. And I will see you guys in the next one. 23. What Is Wireframing?: Welcome back to another video. In this video we are going to learn about what is wireframe types of wireframe and the best spectrum spot while women. So wherever you know, the website is the simplified resolution of the basic structure, or perhaps we may call it the skeleton AAP, website or app. Wireframes of devotional. Something that gives a clear picture regarding the usability. Styling is very important, but at the beginning of the design, it can be a bit distracting. So it can shift the focus from functionality to something fancy like color or pitcher. Because wireframes is so simply it keeps focus on the important issue like website functionality and usability and user experience. There are considerably two layers of wireframing. The fortunate is low-fidelity wireframing, and the second one is high fidelity wireframing. In low-fidelity wireframing, developments are presented with gray shapes like a rectangle and circle, or just simply lines. And in a high-fidelity level, the UI guess a little bit more detail, like brand logo, actual text texture, or shadow also. And so in the case of texture and debt, always try to be real content, which will finally be on the main website instead of May person. Might this, you can get a real perspective of design. Now let's talk about the best practice forward from. So the first rule here is about aesthetic. And that is to keep it simple. I mean, really simple. Issued not use any color rather than white, black and gray uses at most two forms all over the design. And of course use a simple font like Roboto or plateau. Nothing fancy. They represented graphics and image boxes. Wireframe is the stage where you consider screens wireframe all the version of the design for different types of devices, either for desktop or mobile or tablet. Also, you have to consider the orientation of this model. Devices like phones or tablets. You also have to keep in mind context of the user of the particular device. At the end, whatever technology or software you use, there are much better than a simple pen and paper. If you want to design a UI modal originally, I will start on the good old paper with a pencil. So there you go. So that's everything about wireframing. Like what is wireframing Pi. So wireframing and best practice for health. So that's a photoresistor there, and I will see you guys in the next one. 24. Wireframing with Figma: Welcome back. In this video, we are going to learn about how to do wireframes. But let's open new file. You can click on this plus button and click on Design. Fine. Okay, Let's rename this file. So let's choose a frame. I'll literally what is the wireframe? So in this video, we are going to make low facility by reframe it as a support as a low-fee wireframe. Let's say we are making simple portfolio website. And we just want to add some information in it, like navigation, buttons, images, text, and the logo. So let's start with the logo. For logos. There's draw a circle. Okay, let's make some navigation buttons like home contact and about. So slip the text menu and click on the screen. First one is home. Let's increase the size of the font up to like 24. Okay? Syllabi text and hold Alt and click. Okay? And the last one for about like this, this would be contact. And last one is about so we made a reasonable doubt. So let's align them together. Hold Shift, select Contact, and select about random forests at the bottom. After that, Alan them together vertically and less Alan them to distribute horizontal spacing. Okay, so this navigation button is aligned together now. And let's add some pitchers. Not exactly pitchers. So it will tell you I did upon, we have to put image here. And for that we can add some lines in it. You are durable, you will know. So this space is for the image. Okay? Like this. And let's make some boxes for text. First, select the rectangle. And this could be our main title box, so it could be your name. And then select another rectangle. And in this smaller rectangle, we can retrieve that information about you. Like what do you do, What kind of work you do? And I'll let, and let's say you want to add some link. And let's name them one by one. So this could be titled. So this is the paragraph. This is the Join button. So after making wireframe, you can like make a project like this I made over here. You can see this project. So you can see this first page. It is exactly like our wireframe. This is for the logo, is for the lower sum navigation buttons. And this space is for an image. You can see this is the image and despair it off. And the last one is Join Now button. So that's how you can make a wireframe in fema. Let's make simple wireframe about like login button. Let's choose phone. There's draw circle. Let's make a rectangle. Login input or a text input. Let's make another rectangle or you can just select this box and this Alt and drag it downwards. And let's change the color on this. So user will not. So in this box we have to fill our inventory and like login, and let's put some text username. So let's decrease the font size is going to be utilities. Let's make it up to like 14 O K. Like this. Scientists, like this. This is the login button, so let's add text over here. Let's increase the size of the font. Select the current is 14 lists make reflecting is moved into Miller. And we can make like forward Password button here. So let's make this forward a little bit small. Like ten. Okay, like this. And we can make some boxes. Or here, Let's say user wants to login through Google, Facebook, on Twitter. So he can do that. Let's choose a rectangle like this one. Drag, drag. And in this box, Let's add, this is for the Facebook. This includes the forms. And this is for Google. Currently I'm aligning them manually, but you can use this burden, how to use them. So next last one is Twitter. I'll be like this. So let's align them. These buttons are aligned together now. And you can see our login pages creating like this. And you can add another option like sign-up button over here. So let's choose another triangle, or you can just select this box. And this computation, like this. Text could be sign-up. So this is the wireframe phone login. So this is the wireframe for our sign-up page login page. So you can see I made a project that I use this biofilm for a reference to create a project. So you can see this is our login page. So you can see this is the login page and this is the signup page. But this wireframe, I made two things in one place like login, Bayesian sign-up page within a one-page. So if you want, you can do like this or you can make login pages like this, like separate for login page and separate org sign-in page and auditing like Google, Facebook button. Down here. You can see in the logo wireframe like Facebook, Google, and Twitter, then this is our logo. So in this project what I want to delete then I made this logo bigger and I added some image also in the background. Some effects and all learn. So this is the low-fee wireframe. So in this wireframe, so in this way from Vienna, important things like virtual be our logo, which will be our login box version of our sign-up and the username, password and all that. So that's how you can do wireframe in Figma. So V made a simple webpage over here, and therefore also the smartphone. Okay, you can see you in next video. I'm going to show you how to do wireframe in which I called wireframe dot cc. So stay tuned for that. So this is what religion. And I will see you guys in the next one. 25. How To Create Wireframe in wireframe.cc: Welcome back. In this video we are going to learn about how to do wireframe, wireframe dot cc. So in provisionally we'll learn about how to make wireframe in Figma. And from that, I also created some projects. You can see this webpage and this login page and sign up page. So let's make a wireframe in this website called wireframe CC. It is one of the simplest way to make wireframe for your projects. So go to this website, can see the link or here. When you like, go into this website, it will ask for like signup. So if you want, you can sign up, but I will suggest you to skip that process. And after skipping this possessed, the interface is gonna look like this. So you can see on the left-hand side, we get options like from here we can choose different devices, like for the desktop or software. We can use this template or V if you want to like, make some apps for your tablet, you can choose this format. And this is also for the smartphone. You can choose this one, but I like to choose this one, the fourth one. So let's make simple login page for our smartphone. So after releasing the mouse, you can see I get this option. So I want this portion should be a box. So I'm going to choose this box and the box now. So you can, if you want, you can look at like I just dislike this. So let's make, like, let's say I want to add in this section. And you can see this image button. So from that hour, this is the image section. We have to put image over here. And we can make simple logo icon over here like this. If you want, you can put this into mid-level or in the left or the right. For now, Let's put 0 here. Let's make boxes for our login page. Straw. So simple box. So this is the box for our userInput. Draw another box and we can just select this box and copy paste like Figma by selecting the box and hold Alt and drag donald like this. And if you double-click on it, we will get color palette. From here. You can choose different colors. So this is for login buttons, so we are going to choose this color. So let's add text in it. So this is the text button. So and this is the login button, less address 200 here. And then let's change the color op-eds. Or you can make this login into bold or italic. And if you want, you can underline this text like this. And the less change the text color here. So currently it is green, so let's make it white, like this, and let's increase the font size. This is our login button, and this is the username text field. Let's make another texture or forward possible. Hold and drag it downwards. Let's change that color into black and stick with the font size, bold and underline, rename it into forward password. And we can login through like other options like Facebook, Google and Twitter. So we can add those boxes over here also. So let's add them. And if you want to blend them together, you can also do that. Select the box or achieved. Setup. The second one, the third box. And you can see we have, we have this Element button. Click on it. And you can adjust according to your requirement. So I want to align them together at the bottom. So I'm going to click bottom. So it is aligned. Now, let's add text in it. So this is the Facebook or Google button. And we can like macos, simple text. Over here. Select this text, hold Alt, and drag these tools downward. And we can add text width like login. User will know, we can login with Facebook, Google, and Twitter like this. So this is the simple wireframe with Katelyn, this wire from your FCC. And if you click on the Save button, it is going to save for you. And you can just, if you are like working with your project, like this one. So you can take a reference from it. Like where should be logo, where it should be image, box, where should we login button and forward postural button and all that. So that's how you can use wireframes or CC website to create simple and beautiful wireframes. I think it is more simpler than Figma. Or you can see we created in Figma some wireframes. But I think it is quite like us, similar experience, but I like to use this website called Y from North Jersey because it is really simple to use. That's why I prefer to use this website. So it is totally depend on you. If you don't use, you might even use Figma or if you're going to use this website. So that's how you can create wireframe, wireframe door system. So that's it for today's video and I'll see you guys in the next one. 26. Team setup and creating a team project: Welcome back. In this video, we are going to learn about how to create a new team. So as you can see, we have an option here called create a new tomb. So click on it. And you can name it whatever you want. So let's name it Test, and click on Create a team. Okay, now you can add your team members and you can add them by using e-mail ID. Currently I'm working solo, so I'm not going to add any image ID. So I'm going to skip for now. So I'm going to leave it as coming for, choose a plan. So we have options like startup professional organization. So I'm working solo, so I'm going to choose the free one. So as you can see, weird alignment files in drops to the Figma files in team, ultimate fixed gem file and the one team project. So let's choose the free one. So you can see our team is created, that is test. So let's create a project. You can click on this plus button and you can add files like this m file. If you fixed gem file, you can, if you have a file, you can also import it. You can also browse the template and you can add to your project. So far now I'm going to choose design file. Let's rename it first. Apk. Okay, if I go into like project again, in team project, you can see how taste epic is created. So in Teams we can add as many as files we want. Like, let's say I want to create a simple object but in the website form. So I'm going to click on this New and design file. And let's rename it into Taste. Sorry I misspelled. This. Go to home. And you can see we have test web and test. So there's the benefit of using Teams. Okay, let's go on this team. And from here you can also add, what is the project is about like if you are building like food delivering m, you can add a description for it. And if you want to invite a member, you can also invite from here. And from here you will see who has the axis of this project. Like currently I'm working. I'm the only one who has the access for this project. And you can also have this some settings like we want to change the name. You can also change it from here, icon, profile handle. And if you want to do it this time, you can also delete it. And if you want to enable some libraries, you can also do it from here. So this is plan and billing is for professional. You can buy it from here. So let's go into project now. If you want, you can also mark this project as a favorite project by clicking on the Start. And you can also share your project by using the molarity. You can add multiple email IDs from here. Or you can just copy this link and paste it on your WhatsApp group or on Gmail. Let's say you want to delete this team, you can just go to this team that is taste and right-click on it. And we have options like renamed, change, icon, and delete. So we are going to deleting. And we have to add that team name. That is tests. And click on Delete team. So that's how you can use teams to create, project multiple files, app, website and all that. So that's important to Julia and I will see you guys in the next one. 27. Collaborate in real time(Teams): Welcome back, improves worry. We'll learn about how to create a team. So in this way we can use the power of team. So what I mean by power is that fema is a platform where team design together. It unites everyone in your query process. It brings your idea to life. Let's say your team mates leaves on the other side of the globe. He or she can work with you at the same time on the same project. So there's the powder team in Figma. I'm going to show you how to do that. So click on your team name. Let's say currently I'm gonna choose this imaginary programmer team. And you can see we have an option called members and less invite some of our teammates. And from here you can also share a link with them from the gmane or you can share it on the WhatsApp group. And you can set some settings for them. Like, let's say if you want to share this project to client and you can set the setting like he can just view like this and you can share the link. And you want to share this link with DVR demand than you can choose, can edit. And if you want to add a melody, you can also add it from here. Let's add a one-off my teammate image ID. You can hit Enter or you can press comma. Comma and you can see you can add another e-mail ID from here. And you can also set some settings for them, like you can make them mean by default it is can edit. And if you want to share this retail trend you can choose, can be less give up admission of airman and send the inward. You can see the noise is sent. Now, close this one on his laptop or PC, he will get notification for the invitation. So from there he can accept our invitation. So you can see on his busy he got our team. He can see all the projects. And let's say we want to edit this project together. So you can see it goes up on the screen. And you can also see is our total warrior. If I click on this outer and you can see what is he doing and what is the up-to-date on which panel he's working currently? Let's say you have a 20 or 30 frames and you don't know where he's interacting with by clicking on his outlier. We will get to know on which room he's working on. So we need to fix this project like disjoint now button. And I want to also add an image. So I'm going to add the similarity. So we fix this project. This is how you can collaborate with your teammates. So that's how you can collaborate your team mates is one of the best feature of Figma. He can access your project. Can you get you can view you when he losing other side of the globe. He can make ten days to work on projects at the same time. So that's the foreknowledge view, and I will see you guys in the next one. 28. Wireframing For LattoFatto: Welcome back. In this video, we are going to make wireframe for our project that is that off at the online full order application. So you can see the application is looked like this. Is it the final project? So let's create a wireframe for it. This create new page. Click on the plus icon. Design a file. So let's rename it. So first of all, we are going to need frame. You can press F or you can go into this section and choose frame. And let's select iPhone 11 Pro Max frame. So in first frame, we only want to show the brand name that is led over two. So let's create some components for it. First, let's make some more frames. Okay, our five frames are created now. So first frame is going to be our brand name page. And the second one is sign-in page LAN, third one is sign-up page. And in full frame we want to add like fools, we can order through this app like burger pizza and fried chicken and all that. So I think we don't need the fifth rim, so let's do this one. Flip the frame M. On your keyboard. The frame is digital now. So we have four frames now, let's make some components. Select the rectangle, draw the rectangle like this, add our text. So it is going to be our brand name. The font is too small. Font. Go to this end panel and increase the font up to like 36. Okay, let's i just the font and the center. So this is our first component. So select the, both the rectangle and the text to select a multiple things. You know that we have to hold Shift and press the text and the rectangle selected now and you have to press Control G to make a group. So if I move like this, then both things move together. Let's say you don't make a group on its first of all, I need to ungroup this. Okay? So if I move this, you can see the brand name is not coming with this rectangle. Let's five V, group them. So far, grouping, select the rectangle shape, hold Shift, select the text, and press Control G. And this is now a group. So if I move like this on the screen, you can see the both things are moving to get them less make curves. So I already told you how to make components. Select your element and go to top bar menu and select this diamond button. And now this is your component, so you can use them multiple times in your project. And you can also access through this asset panel. You can see the brand name. Let's make a second governor. That is going to be our image. Let's choose rectangle. The shortcut is r. And let's make a perfect square. Hold shift like this. And let's add some. Are you on edge? You can see the color polygon and the square is a tree, so we have to change the color of the polygon. So to do that, select the polygon, go into design panel, click on the fill, and let's move this cursor tools white like this. The smallest one like this. Okay, Let's duplicate this one. Okay. Let's make some, does have the mountains and let's make a small sum like this. We have to, as we change the color of that sun onto white, like this. Okay? So this is our image. And select all the things and press Control G. So this thing is group now. And let's make this element into component. So this is our second component. So let's make a profile picture component. We're going to use circles. So you can press o or we can choose this ellipse button. Let's add this image into it. First of all, we need to make it small. Now let's add this image into the circle. But you can see the image is not visible because it is in the image selected. Click right on it. And you can see the option called Bring to Front. And you can see the images now in front like this. And select all of the things and press Control G to group them. It is now grouped and let's make a component. Okay, this one is a component now. So this element is for profile, which are, Let's make sign in and sign up bar, navigation bar. For that, we are going to need a rectangle. Let's make sure it just with our frame, so it perfectly matches with our screen. I think we had to decrease a little bit. Now let's add a text image. First one it's sign-in. And the second one is sign-up. So let's align them together. Set all the things. Firstly, the sign-in, so the rectangle now select the Sign Up button. Now go to design panel and lesser fault Alan them bottom. Now let's align them vertically. Okay, it is online now. So next thing we have to make is that login button and sign up button. So necessarily discretized, duplicate it by pressing Alt. And photon is going to be our login. I forgot to make this navigation bar into component. Select all the things, Control G, and select on this LeBron button. So this thing is now component. Let's make this page also component. Duplicate this burden. And let's rename it to sign up. So this is our last component, and we are going to need some menu buttons like hamburger, some icons like Facebook, Google and Twitter. In Tim library video I really showed you. We started some icon packages so we can use this, use them in this project. So to access those things, go to asset and click on this book icon. You can see for the icon plus extra, click on this toggle button. You can see we can use these icons. So we need this humble amino icon. So let's move this one. And you can also search like first, second, third 1 is Google, but it is not available. So we can use other icons like okay, this globe, Okay, we now have this four icons. Let's make our wireframe. So we created all the components, so we are going to use them in our biofilm. So in front-page UP how to add a brand name. So I'm going to write this like this. And let's address it vertically. Okay, it is, I'm just now, let's rename it to into like a brand. And second reframing is going to be signing. And the third one is our sign-up page. And the last one is minimum. Okay, so we have four pages now, the first one is done. So in second Prim, what I want to do is that I want to add an image on the top. So let's stretch it like this. And I also want to put a brand name, this image. So let's drag this and let's add a random name. So our UI developer will know. So this is imaged and this is the brand name. I think the color is same, so we have to change the color of the brand name. So let's select the master component. Let's make it more darker like this. And let's make sign-in page. So we're going to require this navigation button. So next we want to like username. So let's draw a line. So we need two lines. The first one is for username and the second one is for password. And we have to add a login button. Hold towards the second frame, like this. And let's add our login with buttons. Those are Facebook, Google, and Twitter. So let's align them to get up first. So let's make them bigger. Fourth is one over Facebook. Second is going to be Google. So let's align them together. Select Facebook, hold Shift, select, and select Twitter. First, we have to address the bottom and less address them vertically. Okay? And let's add some horizontal spacing. Okay? So these things are Alana. So in this case we have problem. So our u I do not know this is the sign-up sign-in page because all things are same. So what we can do is that we can make the signing little bit bolt. So connectivity is regular. Let's make it bold. Okay, now our data per belong, this is the sign-in page. So next page we have to make some things. Those are like this brand name. We also have to use these images. So I'm going to copy this, both the things. We are almost done. The only thing is remaining. So users login now. So it's Profile icon. Add a hamburger is one like this. So let's select the plus button and let's call. This makes some categories. So let's add image for you. Let's make it smaller. And let's align them together. Hold Shift select the second and the third one. Let's add is the bottom and then vertical. And let's add some horizontal spacing. Okay? So let's edges like this, okay? And let's add some texture in it. Select categories, hold Alt. And let's say an image into bogus. Let's decrease the font size. Hold Alt, drag towards the second category. And let's rename it into pizza and terminus. So let's align the font together. Now it is aligned together. Smooth them upwards, so okay, this is perfect. And so currently we are on like let's say, currently we are on bugger Minow. So let's make this image a little bit blue. So currently in Bogle, currently we are in bulk a section. And let's say we have only two options for the bogus in the first page. Just make another one like this. And let's make this image bigger. Because the user with a known, currently we selected this bull. And we can also make this text a bowl. So our developer will know currently the customer is on the bogus section. And we can add some prizes for it. Like, let's say this Burger is for $15. Listen, give the font sites. For the $15.1. Let's make it up to like 244 seconds. Let's make it up to like, I know these are quite expensive. This, let's make it normal. Because he was or is selected the first burger. And this enters the text upwards like this. Okay, so let's add some section circle. So our user will know we have more options. And select the first circle. Let's change the color for it. So our data can we know our customer will belong currently he or she is on frontpage. So if he swipes, then is going to be on the second page like this section. So this is the wireframe for our first project. That is a lighter photo project. You can see our final project. This is our brand name. You can see brand name plus image, login, sign-up, username, password login, and login with buttons like rid of Facebook and Google. Same for here. You can see we also made this login into like pink color because our user will know currently he's on the login page. And in this page, you will learn he's on sign-up page. And we can see the categories piece out Bogle the chicken. And you can see we made this burger highlighted. So user with long currently is on bubble category and he selected this logo. The first one is pre-print audible. And you can see I also added the card so he can check out the profile picture and Hamburg amino. And we can also add the search bar. So this is the wireframe for our first project. So in next video, we are going to make this wireframe into this project. I know this is the very low end the video, but we just have to drag and drop things. And I did the sum position of the element like this. So once you make your wireframe, you can make your project more faster. So I'm going to divide every video in the separate part, like in first video, I will add this plus 2 and n login page in the first row. And the second video, I will add a sign-up page video. And in turn, I will add this Meno page readability become more shorter. And it will also going to be easy to understand so that you've got to literally, and I will see you guys in the next one. 29. Brand Name Page For LattoFatto: Welcome back. In previous would have we made this wireframe. Now let's make a UI for our app. So go to Home, create a new team. Let's name it. You can name it whatever you want. So currently I'm naming it led to her to app project one, create a team. So I'm currently working, so I'm gonna skip on now. So currently I'm using a free version. That's why I'm going to choose, choose data. If you have prohibition of plants that you can choose them. So let's click on to startup. So you can see our team name and the color of our team. Let's go to wireframe. And let's move this wireframe to our team. You can see in the color of our team and the team project. Okay, our file is click on team projects. You can see our wireframe. I think we saw the delete this one and click on Team Project and click on Plus button and create a design file. So you won't be thinking the wireframe is look different because I accidentally deleted that previous biofilm. So that's why I created this wireframe again. So that's why it looks different. So let's rename it. Let's choose a frame. Press F, choose iPhone 11 Pro Max. So in wire frame you can see the first page is for our brand name. So that is lead to fat ones. So let's create that first frame and let's rename it. Okay, You can name it whatever we want. So let's choose a text. Okay, let's increase the font size of this text up to like four. Okay? And let's choose the font in to sensitize explicitly in the middle. Okay, Let's align this font for the vertically and then horizontally. Okay, it is aligned now at the center. Select the frame and let's change the color of it. So currently the color is white. So I'm going to choose the red, so currently the solid. So let's make it gradient. So choose linear second color into poeple. Or we can choose any color you want. Let's increase the opacity of the second pillar. Okay, now it looks cool. So if you want, you can add just your gradient like this. Okay, that looks cool. Okay, I think I select a different font. So save the font. And this is the one we required for this project. Okay? So I need to give them vertically and horizontally at the center. Okay? Now, let's make it white. So it will look no better like this. Okay, our first frame is created now, that is brand name page. So you can see in the wireframe, this is the brand name and this is the page. In next video, we are going to create this sign-in page. And I will see you guys in the next one. 30. Sign In Page For LattoFatto: Welcome back In previous would have made this random page. So in this video we are going to make sign-in page. So let's choose a frame. Iphone 11 Pro Max. Like this. Let's rename it into like signing. So as you can see in Wireframe, we place the image so we're going to replace image, but in different format. So let's make a circle and the shortcut is 0. And the centroid on the frame like this, Let's make it up to 450. I think I have to make it bigger. Let's make it up to like 70, Okay? Okay, let's add this, the edges so you can see there's a gap. Move towards the right, like this. Ok, select the circle. Let's change the color. Let's make it gradient to the linear. And the first color is going to be our red color. And the second color is going to be like this. Let's close this tab. Okay, now we have so-called, so let's duplicate the circle, select the circle and hold and drag it. Like this. Hand select the circle, go to our shape tool and choose image. And let's choose this image open and let's place it on the ellipse. So after blessing image, select the circle, this one. And let's move on the frame. Like this solenoid together. Okay? And the center of the circle. So let's decrease the opacity up to like 70 to 80 percent. Less ticks, 70%. Okay, this looks good. And you can see in Wireframe, we bless the brand name. So that is lighter fare to select the brand-name. Hold Alt on the second frame, like this. Okay? Okay, let's decrease the font size up to like 15. Tutoring center. Like this. This looks cool. Okay, now let's make this sign-in navigation bar. So I'm going to use the different method for it. Let's add a rectangle like this. I think I have to introduce a little bit. Okay, and less alanine and decenter. It is in the center. Now, let's try it a board. So let's turn the edges up to like 35. And now let's change the color to white. So it has some effect like drop shadow. Let's add this some settings. Let's make blur of two. Spirit of two to be fine. Okay, Now this looks cool. So let's make a login and sign up button. Let's choose a rectangle. I read some dimension, you can see the width is 264 and height is 45. And the x and y position you can see here. So let's make it sharp, corner into round. Let's make it up to 13. Let's duplicate this shape. Make it up to hop. And let's change the color of it. Let's make it like let's choose this bone and less on the top of this. Okay. Like this. Okay. Let's change the color of that. Let's make it white, grayish, like this. Okay, Let's add some effect. Click on effect. So you can see the drop shadow is adding. I think it's looks okay, so I'm going to leave as it is. So let's make a text. The first one is going to be login. Okay, The currently the font is sensitive one, so let's change it into like four pins. And let's make firmed up to, let's add just a font according to this hip is in the center now. So let's duplicate this text. Make it sign-up. So we're going to just totally white. So that's why it is not visible. Select the font. Let's make it black. Or if you want, you can choose this color. We'll also look cool and let's align it. Let's address it manually. At the center. Like this, citing, this is OK. Now this looks cool. Zoom out, you can see the interface of the sign-in page. It looks like this. So let's make username password. So I'll go to Shapes, choose the line, unless make it here. And let's add just, let's turn the angle into 0. So let's add this into middle. Okay, it is in the middle. And let's duplicate this same line. Hold Alt, drag it down. Let's add some text, like email. Okay, let's decrease the font size up to like 10. And the less edges the text. Let's change the color of this text and also the colorblind. Just make it like this one. And let's change the color of this line also. Go to stroke. And let's choose Select tool. Let's make it like this one. Select e-mail and user folder, drag it downwards, and let's send you into password and also change the color of this line. Now let's make forward password, this password text alert. Place it here. Okay, let's add just like this. Let's make login button. Let's copy this shape. I think this is gonna be fine. Okay, Let's turn the color object. Currently it is kind of gray. Let's make it like this purple color. And I select this font, which you align it together. Sake, but the things hold using shift, horizontal, okay, it is in the center now. So let's check the type of font. Current rate is regular, so let's make it semi bold. So it will look more cool, okay, like this. Okay, What else happening? So you can see it in wireframe fee made everything. So only thing sedimenting like this, login with buttons, okay, Less add them from the local files. Okay, let's import those SVG files, okay, necessarily the tutor for this group them together. So why are we are grouping them? Because these are the SVG files. Let's say I wanted to move somewhere. So you can see that if I select on this icon, you can see the vector we selected. So there's going to be a mismatch with our project. So that's why we are grouping with it. If I said if this whole thing and group them together using Control G to group now. And if I click on this, you can see I can move it wherever I want. So let's do this one. A less address the height of all the logos up Twitter and Facebook. Wish to 15 height and the weight. Also for Facebook and also for Google. So we're adjusting the width and height, so it is edges. Now, one of my one, The one thing is remaining is that we have to add or text, that is R. Let's choose this text and hold Alt and move it in the center. And let's make it less addressing to center. The Figma is really smart. It automatically gonna tell you where is the center of it and also the spacing in-between there. Think let's increase the font size up to like 12. Okay, our sign-in page is ready now. So in next video we are going to create a sign-up page. So that's your portfolio and I will see you guys in the next one. 31. Sign Up Page For LattoFatto: In previous videos, we made the sign-in page. So in this video we are going to make a sign-in page. So let's select this frame sign-in page, and to begin to speech like this. And let's rename it into signer. So in sign-up page, we have to change a few things. You can see in the wireframe though, things like we have to change the sign up button. We're going to add some extra lines like confirm password, and also we have to change the sign-up. So let's make those changes. Okay, Let's first, let's change the color of this font. Currently it, it's kind of lemon nebula. So let's make it white. And let's move this rectangle on the right side. Okay? Now, so let's turn the color of the login. So currently it is white. The scholar. Okay? Okay, now what we have to do is that we have to add one more line. That is going to be our confirm password. So let's move this forward password that would be downward like this. And let's copy this line. Let's copy this password and this line. Hold Alt, drag it downwards. Okay, I will confirm password is greater now. Okay, let's align them together. Select him and hold Shift. Select all the things that password, password and the slashed line, and go to Align setting and click on More Options and choose. You should be vertical spacing. Okay, it is aligned now. You can see here. So let's move this forward password to be upwards, like this. So currently we are on a sign-in page. Let's change into signup. Let's align it horizontally. We can see it is aligned in the center now. So one thing is that some icons, like you might seen some apps where you have the eye symbol area. Okay, let's add those. Eisenberg. Go to S8, click on this team library and toggle this feather icons and search for I. Ok, you can see the eye symbol. So let's use this one. So let's decrease the size of it up to like this Q. So let's change the color of it. Currently it is black. So we are going to choose this color up. Same care of this password. And select hold Alt, drag it on sign-up page. Only, confirm password. So the only the last thing is remaining, that is the main page. You can see the wireframe of it. So in the next video, we are going to make that menu page. So that's your photo. And I will see you guys in the next one. 32. Menu Page For LattoFatto: Welcome back. In previous year we made the sign-up page. So in this video we are going to make this main page so you can see the wireframe for it. Let's choose a frame. Iphone 11 Pro Max. Okay, let's make this page. Because we're going to add some elements like search bar and older. So the sidebar is going to be white, so it is not going to visible in the background like this. So our Meno page will be more visible. So for this minimum wage, you can see in the wireframe we require this hamburger menu icon, the profile icon, and text, and some images. So let's make those things. So in my folder, I have all the resources. So let's move them into a whirl figma. Okay, the images are like to be held to answer them. So we have all the resources like this hamburger menu icon, the actual humble, the profile picture, and some elements like this feasible. So we're going to use one-by-one. So let's talk. So unless question. And the second thing is provide returns. So let's make that profile. For that we are going to need ellipse and hold shift and go to Shape tool and this one, you can choose your own image also. And I'm gonna paste it on this circle. You can see it is placed. But you can see the photo is kind of on the right side and go to design panel. And you can see in the field option, we have this image, click on it. And let's choose crop. The image like this. Okay? So let's add some stroke in it. Click on the stroke. Let's make it up to two. And let's change the color of the stroke to white. And let's resize it. Like Okay, so let's add some text that is C and Control V. So you can see I used Poppins font. For this. I use the regular end of N For this cool yellow, I used the semi bold. So let's address it according to this hamburger icon, like this. So what is the next thing we have to do? So we can add categories like this. You can do that work. Let's add a search bar so where user can find his items. So select the rectangle. We can just copy this shape. The shape, hold Alt and drag it in the spring. Okay, so let's change the color of it. And you can see we already have some drop shadow. So we can see it. I'm going to leave as it is. So let's add a text. So let's select this text and imagery to search. A search icon. Current it is black. So I'm going to choose. So text like this and just decrease the size of which it is aligned now. And let's make the search bar a little bit bigger. Let's make it into center. And the scientist is search and the icon. Okay, the next thing is to add categories. So let's add some categories. Okay, let's add some categories. So choose a rectangle and draw it like this. Let's make it up to like with up to 110, 1, 1, 0, and height of 70. Some edges. Let's make it up to like codify this one again. So let's align them together. So Let's make it white. If you want. You can also add drop shadow in it. Let's turn the color of that background. Currently the white is visible, LACMA, this Icons. Okay, these are the SVG file, so let's Control G. Second one spins out of control. And control G. So when we are working with the mismatch, okay, The first one is going to be Bogle, add the burger. And the first section is gender dimension of it. Up to like 45 and the center. Okay. That's okay. What is his remaining? So we have to name it like logo design. So let's turn them in. So let's name it the first one. So I'm going to copy this text. So click on the burger. And pizza. Allow align them vertically like this. So we have to change the color of this bubble because currently we are debugger section. So we can change the color a bit. So either we know is in the section. So let's move these categories. This section, which will be, of course, currently we are in Boulder section, so we're going to add bolus. So let's choose a rectangle and draw a rectangle like this. Let's give the dimension of the leg and height of 2, 1, 0. Let's add some rounded edges. Let's add up to 35. Okay? So this one is going to be our first logo. This one. So I'm going to increase the height of it because currently the user selected is Bogle. So let's make it a 199. Like this, and let's change the color. Let's make it into for the second color. And you can place it wherever we want as per your requirement. So I'm placing it all you like this. Okay, now let's add the image of that book. So currently this is the first logo and name them. So the first one, I don't know what is the name of the embolus so we can name it whatever you want or you can search on the Google was I can cope with them over here. So let's change the color of this font. It is black, Let's make it white. So it will look more better. Sites. Let's make it a symbol. And let's end the price of a dollar sign. Let's make it up to like 20. So if you want, you can also add in it. So unless that rating I think I have introduced. Let me check. Okay. I have this project. Okay, you can see the color of it. Like this. Previous customer had good experience with this logo, selling them together. So let's name this logo currently district wide, so there's fight is not visible, so let's make it black. Or decrease the font size. Let's copy this one. And let's change the value of each. So what is remaining? Everything is done. So I think distinct sedimenting. So let's add those things. Choose ellipse circles. Let's make it like Save the first dot. And let's make it. Or we can choose this color. Let's make it a little bit bigger. So user will stamp like this. I think we have to align it together. And I think one thing is to add a card. So let's select the Ellipse and short run into in acid for love we have that. You can see. So let's add this back shopping bag and the center. So let's make it white center, okay, so everything is done. So our Meno session is done now. So the only thing is remaining in this project is then to do prototyping. So in the next video we are going to do prototyping. And I will see you guys in the next one. 33. Prototyping for Lattofatto: Welcome back In privilege or a movie made this menu pet. So one thing is the remaining for this project is done to do prototyping. So, so I already showed you how to do prototyping. So you can pause the video and do on your own or if you don't know how to do it, so you can continue the video. So I assume you done that part. So let's do the predominant for this project. Let's go to prototype panel. And you can see this white dot. And when I hover over it, it becomes a plus icon. Click on it and drag it on the sign-in page. So you can see this menu will pop up. So this is the interaction detail panel. So you can see we have options like R-type. So currently less set it on tap and navigate to sign-in page. So we're navigating from fanpage to sign-in page. So it is, it is okay. So if you want, you can add our animation in it. So currently, let's go with instant and hiding desert. Now, click on the sign-in page. So you can see we have options like login and sign up. Let's say user is installed this app called first time. So he wanted to go to the sign-up page so you can click on the Sign In button. So let's do it interaction. So we can see in the integration details on tab navigate to sign-up page. And the animation is finished. And let's say user is like a heavily upon accidentally touch on Sign Up button. So he wanted to go back on the login page or sign-in page. So he can go back by using this login button. So let's give a introduction and navigate to sign-in page. All the things will be same for it so we don't have to change anything or here. Then let's say the user put his e-mail ID and the password and he wanted to go to the main menu page. So let's give the introduction to this button. Okay, from Logan BIG will go on the main page. And also the same, the sign-up button from sign-up and will go on the menu page appropriating all legit like a username, password and confirm password. I think we're done here. When I click on this blank space and we will get this options. So from here, if you want to change the device contingent from here. So currently I'm choosing this iPhone 11 Pro Max. So select this one. And if you want to train the model, or you can do it from your current your goal. You can choose silver space, gray, midnight green, like this. And it will show the preview. And if you want to change the background color property, we can do it from here. So currently this black, we can give it any color you want like this. So let's go with white. So it doesn't matter. You can choose any color. So you can see here we have horizontal or vertical orientation if you want to change it into horizontally contingent like this, our portrait. So let's go with a portrait and let's click on this Present button. You can see our app is presenting and the present icon over here on the top bar. Okay, you can see the first brand name page. If I click on this, we will get on the sign-in page. After that. If I click on this blank space, you can see we get to hotkeys. Those are like signup page and login page. Let's say I'm a new user and I want to sign up. So I'm going to type the sign-up button and I can put my details like username, password and confirm password. And after that I can sign up. So I can also back on the login page if I want like this. And let's click on Login. So we are on meno page. So I can order these bugs from here if you want. You can add animation to these pages. If we click on the sign up, you want to give animation like move in or move out or push. So we can do it from here. Let's choose movie. And you will see the little indirection over here. And you can also gender dysphoria. Currently this 300 milliseconds and the animation is in exact format. Okay, Let's present this one. You can press R to the start, this application from the beginning. So I'm going to press R on the keyboard. So you can see our brand name page. Okay, so let's click on sign up. You can see that moving effect audio. Let me show you one cool thing. So let's go to brand page, random page. Click on this arrow, prototype arrow. And currently we are on on tab. So let's give smart animation over here. And let's live up to like gender milliseconds. And we can change it like argue and adduction like on Taiwan and drag while holding and all that. Let's choose like a while hovering mouse enter. And let's put it in the press R to restart. And if I hover my mouse over this app, you can see that animation. Let me do it again. You can see that animation. So let's change a little bit like our depth. Let's include the name up to like 50 milliseconds. Unless presented again. To restart. And on tab, you can see the animation become database slow. Like this. So because of this art smart and measurement, we get that cool effect. So I will like you to our like while hovering. And let's make it up to a 100. Looks really cool. And let's go to present. When I like NDA, my mouse on the list brand-based, you can see the indirection. The brand name goes on the top. And if I live this app, you can see this again comes to the brand name page. And I can do in direction over here, like sign up. You can see that moving effect and you can go to their sign-up page. If you want, you can add the animation to this main page and imaging on the mini-batch. So click the sign up page, select this arrow. And let's say my animation. So let's try this disorder and the spirit and this one. Let's hit our login. Okay. Sodium hit our sign-up page and from from sign-up page v, given that effect. Okay. It looks really cool. It is feeling afraid. I think it is fairly in effect, does give you that animation to the login buttons. So let's hit our long beach. You can see that dissolved if if you only went also use other animation like smart and emission. So let's choose a smart animation and let's present the screen. Hit our logging. You can see that cool animation, audio, smart animation. Let's look School. So you can like say, any animation you want. So it depends on you and it is also depends on your project. So this is where we complete our project one, let's say if you are struggling with this project, if you have to watch a video again and again to do this project. So if you made this project that we can share this project on the Instagram or Twitter, and you can also tag me or there. So in the next project we are going to make a movie website. Or you can say like streaming service application like Netflix, Amazon Prime. So that's means I knew OFF. Thanks for watching and I will see you guys in the next one. 34. Wireframing For OTT Streaming Platform: Similarly, to be able to come back to another video in this unit, we are going to create a wireframe for OTT platform like Netflix and Amazon Prime. So let's create a new team and let's name it. Greater team, skip for now to start. Okay, Our team is greater. You can see the color optimists L0 and discrete design file. Okay, let's rename it. So I already show you a follow-up from we have to clear some components. So let's create components, or you can just copy paste components from your previous projects that is led to fertile app. You can copy these compounds like this image, this login and sign and veterans and the brand number, turn the hamburger Meno and all that. So far, this wireframe, I'm going to require this image, so I'm going to, so I'm going to select this. So right-click on it and you can see here, so we are optional copy. So you can also use shortcut Control C. So I'm going to copy this one and let's do to help him MCU. Okay, now press Control V to paste that image on our wireframe. So we are making Audrey perform. So we're going to create another one. And the screen image. You can name it whatever you want. And 31 is one of the TV show. Okay, let's add a brand name. And let's add some text. Let's increase the text size. Group, control G to group them. So in the movie frame, we need this image over here. And let's make it bigger. So in this part, we are on a display, the movie image. And let's create some buttons like pinup. Listed decrease the text up to like, let's say 24. And let's address it or you sign up. And let's create some text for movie. Martin. And the last one is for TV shoots. So currently we are in motion, so we are going to make these movies take two into Bolt. So user is going to know, or our UI developer with no, he's in currently these movies action. And if you want, you can add underlain to this text. So let's add a movie nim. So first of all, we are on a required rectangle. So plus r. So select Text, and let's add text over here. Is make it bigger. Let's say up to Lycos 48 tutorial. And after that we have to create a description for our movie. So let's create a rectangle again. Now here is going to be our description for our moon. So let's add text over here. Okay, And after this, we're going to create a play button. And in front of this we're going to add, I think I made this more description. I'm going to industry. Let's move this mole, things like movie Play now antilog button. Okay, let's create a bar where all the movie's going to be changed, the color opposites. So we're going to add more rectangle on it. So the color of those rectangular is going to be same. So we have to change the color of this rectangle. So let's choose rectangle. That dinner for our widths to bigger this one, we'll hold Alt and drag it. Drag it. I think four is going to be enough. So now let's align them together. Hold Shift, select them all. And mortar move vertically. So where it some spacing over here. Let's say user is currently on the second movie, so, so he will know currently he's on a second movie, so we have to make some changes. So let's make this rectangular region bit bigger, like this. And let's add a stroke. Make it ripple effect. Only those two things is remaining is the ad we had to create. So we have to add a search button and bell icon button. So go to Teams library and double this feather icon button. And let's search for surgery. And let's drag it on this page. And the same for bell icon. We're going to do this. So let's drag it like this. Okay? So let's align them together. Select all the things aligned and bottom and align them vertically. Okay, they are aligned now. And random is going to be overused. So let's add a brand name, select rectangle. So it could be branding or it could be logos. Like this. To center, not going like this. So this is the wireframe of for the hour movie section. And this is going to be so exactly same for our TV show section. So we have to make changes like we have to make this into regular and make TV show into Bolt. And let's rename this frame into TV show. And all the things is going to be same. Like this movie name and all that we can get into like TV show. So let's copy this and let's rename it TV show. And here also do visual description. So this is the wireframe, so we are going to reference from it and we are going to create our final project. So our final project is going to be look like this. You can see the brand name page, movie section and TV section. So name of that movie description for it, the plane Now button, the trailer button. And I also added this ratings over here. So you can see this movie fiction. So from here, user is going to be choosing what to watch. Same for the TV show section. And I will see you guys in the next one. 35. OTT Streaming Platform: Welcome back. In previous when we created this wireframe for our MCU or to the project. So in this video we are going to create the actual project. So let's go to team that is MCO 2D and create a new file, the design file. So this is an image. You can rename it whatever you want. So for now I'm going to rename it. Okay, so let's create a frame. Desktop one. You already know the desktop one is going to be our random page. Now select the frame and let's change the color of pigeon to read like this. And this added text in the center. That is going to be too small. So let's make it bigger, like up to 60. Let's add decision to center. And let's change the font. Type. A search on the Google font type 48 is like effect Pro something, but I'm not able to download it. So I'm going to use the font called impact. So it is similar to that font. The font size is too small, so let's make it took to like 96, or let's make it up to like 120. Okay? Like this. Let's add this it into center. Another text that is going to be our cinematic universe. So far this, I use this Baba's new font. And this is regular and the font size is 45. This and just hit downward like this. So if you want, you can add a rectangle on the outside of this text. But for now, I'm going to leave it as it is because it looks cool. So our second page is going to be moved page. So let's make that movie page stream image into movies. So let's look at our wireframe. For pH. So the mouseX and Jewish section, the brand name, the search icon, bell icon, n sign-up button. So we have to create those things. So let's create a rectangle first. Because when we are going to add that image, then the test is not going to be visible. So we are going to place our text on this rectangle. And let's change gender type of this rectangle, color the current, it is solid so I'm going to make it until linear, like this. So our team for this project, it is kind of crazy. So I'm going to make it like a red. And a secondary color is going to be like this one. And this edge is the length of the rectangle. Like this. I think the second color is like become too dark. So let's make it like this. Okay, now let's add some texture here. So firstly it's gonna be movies. So currently the best new. So I'm going to change it into like us who grew this one. So I think this font is not available in the fifth most operators. So you could download this font from the outside, from the like Google. You can download those fonts and install it in your PC. So the problem with this font is that we can't make it bold. So I have a trick for it. So what you can do is that you can add a stroke and it will become a bolt like this. So let's decrease the font size. Currently it is 45. Let's make it up to 30. Okay, like this. And second is gonna be our TV show. And so this is going to be a normal. So let's remove that shock like this one and just added the brand name. So I'm going to copy this one and drag it towards this page. So let's decrease the font size up to like, let's say 80 degrees the font size up to 30. So if you want to contain the color of it, like, let's make it red. Like this, or even like you can choose any color you want. So I'm going to make this into the red. Next we have to add is that the search icon and the bell notification icon. So go to S8. So good today in February. And toggle this further icon. And let's search for search icon and just drag it over here. And we also need a bell icon. And last one is going to be our sign-up. So let's align them together first and then bottom and vertically. So they are aligned now. So we can add one more thing. We can add underline to this movie. So we can add underline to this movie text. So user will long section now. So let's choose a rectangle. Let's create a simple bar like this. Like this, and let's change the color of pits. You can like make it white or red. So I think white is going to be look more better. So I'm going to choose a white one like this. So let's drag it little bit upwards. So let's say if you want to move something little bit upward so you can change it from here, or you can press the upward button in your keyboard like this. Okay? So okay, our manufacturing is created, so let's add an image into this page or into this frame. I have this image of Avengers Endgame. So let's drag it into Figma and paste it over here. So let's address it like this. And right-click on this image and send this image to black. And a little bit better, the problem with images that you can see, this heads some text. So we can just like Zoom like this. And let's address it like this. Now just look perfect. Okay, now let's add some texts like movie name, movie description, labor done, and all that you can see in the wireframe. So we have to add movie name or description, play now button and this movie. So I think for it to be, I want to create that movie bar. So let's create a movie Parts. Choose rectangle. So let's make this rectangle into transparent. So choose linear. So you can see it become transparent like this. So our new section bar is greater. So let's add movies. Let's choose a rectangle and just create a rectangle like this. So let's align them together. I'll shift select all the frames, and also the rectangle L and M bottom and I lend them politically. Okay, let's add this, the spacing in between them. So let's say user is currently on this movie. So let's make it bigger. So let's add a arrow. So we are going to create the arrow using square like this. So select this rectangle and let's rotate about like minus 45. Like this. Double-click on it and you can see the dots over here. So click on that and hit the Enter on your keyboard. So we have only two parts of that square. So let's add a stroke in. It does add up to eight. So we can make it little bit bigger so it will look more natural. So let's add 10. The 10, the color to white. Now click on Done. So let's move it into this frame. And unless n distribute curve on these edges, have to add more stroking it. Currently it is 10. Let's add up like flipping. Okay, and let's make it smaller or collect 50. Okay, let's add this agent to center. Our first by just created. So let's duplicate this page for TV show. And let's rename imaging to TV shows. And smooth this underlying tools, TV show. And let's remove the stroke of it. And let's add the stroke into tissue. And we also have to change the image of it. So save this frame and double-click need. So we have to change the image. So you will get this image menu and click on this button. And air-filled. Then go to Shape tool and place the image. And let's add this image. Let's say two over here, like this. And let's add this image. Okay, and now let's add the image on these tiles. Hold Shift, select all of the sections. Go to Shape Tool plus image. So these are the movies too. I'm going to place those image on these tiles. So first image is going to be Endgame. And second is going to be, Let's say, thank you. And Black Widow and Spiderman. No way home. Select open. So I'm going to place the endgame image on this tile. Second is going to be, I think, warrior and inspire them and is going to be on the fourth style. And the black widow is going to be on the lifestyle. So let's add a stroke to this image so it will look more cooler. So let's take that a little digital can be white. Or you can like a change agent to read. This, make a stroke up to five. Or you can make it a little bit bigger like a protein. So it totally depends on u comma stroke you want. So let's add image to this TV section. Select the style, hold Shift, select all of them. Go to Shape Tool. Let's image. So first I'm going to place this image from motif. And the second is going to be hope I. Third is going to be lucky. And the last one is from one division. So for writing the photon is loopy, so I'm going to add loci or here into first into third one division. So let's add the movie name and description for it. So let's duplicate this one. And let's rotate it 90 degrees. And just adjust it for here. And let's make it bigger like this. And go to Effects. Add their group. And let's make this layer blur up to 80. So it totally depends on how much blur you want to add. So in this case, the, it will be perfect for me, so I'm going to add that. So let's add the movie name. So select the text. So the movie name, It's arranges Endgame. And you can see the font is Oswald, and it is regular. And the font size is 11 Pi. So let's anticipatory here. Like this. Let's add another texture. And it's going to be any game. And let's add a movie description. So formula description, you can go to MDB and copy paste that MO description and text. Let's create a rectangle. And it's at text-to-speech Control V, like this. So for this, I choose a font called Sofia pro, and the font size is 22. So let's clear that Play button. Go to rectangle. Create a rectangle like this. And let's add. So let's make this rectangle into round like this, or here. So let's turn the color a bit blue to red. And let's add the text. Object is going to be play now. Currently the font is Sofia pro. So the font color is going to be white. And let's add a stroke and gender color of the stroke into white. Like this. Let's increase the font size up to like 40. Like this endless NTC over here. And we have to create that Play button. Go to Shape tool, choose this polygon. Truong a perfect triangle using Shift. And let's rotate this into minus 92. Okay, and let's add some rounded corners. So I think we can make this a little bit bigger, make it up like 15. So I think less smooth display went on to work for them. Ok, and let's add this display now. Okay, this looks cool. Let's change the color of the play now into white. So let's make it group so we can use it on the TV show page. All the things using Shift and press Control G to group them. Now, select the plane, our button, hold Alt and drag it towards TV show. Okay, Let's created that trailer button. So let's duplicate this one. So select Display. Now, hold this trailer. And let's add underline, underline tweet, like that movie button. Okay, let's turn the color of that underlined in red over here. So those buttons are created. So let's add the reading over here. So first we have to like this downwards, like this. So go to Shape tool and hold Shift to create perfect star. Let's duplicate this task to phi times. Let's align them. We're going to hold Shift select them all. First Allen, bottom, then vertical. And horizontal distribution spacing. Okay, I'll change the color picker. Let's say look like this. Select the last star and remove the fill from it and add a stroke like this. If you want, you can change the color of it. You can make it white like this. And one thing is remaining is that to AD curve in it. Let's add corner radius up to like 200. So let's group them together so we can use each into another frame, select them all, and control G to group them. So you can see the movies, TV show, sign-up, the search icon and bell icon, the color is black and it not lose that. Great. So let's make it white. Also change the stroke color to white, like this. Same 40 visual search icon. And the last one is sign-up. So we're done with our projects. So one thing is remaining is that to add prototyping. So initially we are going to do that. So that's it for today's video, and I'll see you guys in the next one. 36. Prototyping for OTT streaming platform: Welcome, welcome, welcome. So in this video we are going to add role-type to this project. So select the first page, go to prototype. You can see why this white dots. Click on it and drag it on the movie page. And currently it is navigate to movies. So it is an onclick and then imaging instrument. So in previous project we choose this smart animation smaller school with smart dynamic and disclose this one. So second, it's going to be our TV show. So when the user is going to click on the TV show, so he's going to redirect to this TV show page. So you can see all the things like onclick. And we said the animation into smart animation. And from TV show page, user wants to go on the movie page so we can go to Moodle page like this. So things will be same like onclick, navigate to movies and smart animation. Okay, now let's present it. Click on this button to present. Okay, so you can see our bases look like this, but so currently this fit according to my display. So I have to it, you can see in this, despite full size. So I'm going to choose scaled down to fit. So we can see all the things. Press R to restart. And I want to click this one. You can see that cool animation, smart animation. So if I click on this movie page, you can see the hotkeys is TV show. So let's click on it. And you can see the animation effect over here. So you can see that smart animation effect on this movie. So if I click on the TV show again, you can see the changing effect like this. And also the same smart defect on the this TV show. So that's how you can prototype your project. And this is our final project. So I'm a big fan of power. So and that's why I treasure this page form our, let's say if you're a DC fan of tau of n, a Star Trek fan, you can create this kind of project for them like this. So after creating this project, you can upload this project on the Instagram. And you can tag me all the so you can see my instrument ID over here. So I will know or you are a fan of marijuana or DC or Star Trek or Star Wars. So that's the Federal Reserve. And I will see you guys in the next one. 37. Design Your Music App: Welcome back with another video. So up until now, we created projects like this, or did you perform for malware? And the first one is our word, the food delivery app. So for this project, I heard task for you or you can say or taste. So in that test, what do you have to do is that, so I have this wireframe. So this is the wireframe for a music player. So they can transform it and make your own music player using these wireframes, you can name it whatever you want. You can place your third songs over hill and take inspiration from like Spotify or the YT music. And you can use any color you want, or if you want to like make a clone of Spotify it you can also do that. So it totally depends on you. If assumption we're not able to do this, I'm going to also create that project after this video. So stay tuned for that. So if you are confident, then go for it and make this project. So this is what religion and I will do as in the next one. 38. Musify app UI: So in previous video, I gave this wireframe to you. I know some offshore might done that project. So if you made that project, you can share that project on your story on Instagram and you can tag me, oh dear, you can see my Instagram ID also. And you can also share their projects on our discord server. Then aldosterone can take inspiration from your project. Those will not be led projects, so let's make a project for them. So let's create a new file. So I'm going to read it is it sounds like so Spotify. I know it does sound like Spotify because I do paying for inspiration for 45. I already told you it can take inspiration from Spotify, auto ID music or any oil or any, your favorite music player. So let's choose a frame. Currently we have iPhone 13 max, so we're gonna choose this one. Let's look at our wireframe. So we have things like profile, picture, logo, the hamburger minimum, and some Picchu insomnia. So will this create those things? Okay, now let's create a logo for our music player. Now what do we have to do is drag to create this section for our image and also for our song name. So let's choose a rectangle. So next thing, we have to use that to add these icons like a heart icon, dislike icon, labored and pause button and forward and backward button. So let's create those buttons. Now, what is the dark mode is really famous and lots of people are using them. I'm also one of them. So let's create that dark mode before we make the top node. So let's change the color of these buttons. Like if I apply the dark mode on the prim, so everything is going to be black. So our book does like Les Paul Bourdon hot-button and dyslipidemia is not going to be visible. So lists make some changes over here. If you want, you can just select these three things like play, pause button and forward and back button. And you can change the color of the heart button and this Dislike button. You can make them white and and these three things will be blue. So it totally depends on you seeing the color of the hamburger and also the color of these. Low tells me. Now we can see our logo at the hamburger icon and the Spanish were done. And this. So let's make those things. So V This is music. Music. So, so let's create the songs. This one. So the next one. So this looks like the next one. 39. Prototyping Musify app: Welcome back. In this video we are going to do for our music app. So let's start prototyping. As you can see, I have four frames on my screen. Let's start from the first stream. So select the frame going to prototype panel. So I'm going to join the first-principle second frame. And let's add smart animation audio. Navigate to our tab, navigate to iPhone 12 Pro Max 1. And an emission is an instrument. So let's choose Smart Dimension. Okay, now to second frame, let's say user wants to change the song. So if you click on this button for burden than the song is going to change and the firm is going to be this third rim. So let's choose Normal. And from third frame, user can go on the second frame like this. And all the settings will be same for this. And from here, the playlist is going to open. Let's choose Martin mission over here. I think we are done with our product mix, so let's breathe into it. So let's use this app. So on tech smart admission, you can see, you can see the logo is on the top now. And I don't pretend the song. So I'm going to click on this forbidden. This is the second song. And from here I can go back to my first song. From this playlist button. I can access playlist like this. You can see this cool animation, but I can't go back because I didn't say prototyping for this playlist. So let's do that first. So from this, it has to go onto the second frame and lesser smart and emission. Now, let's play it again. If I click on this button and you can see playlist is going downward and open it again, close. And you can also see the animation effect, Oreo. This looks really cool. So this is the protein for our music player app. So that's your derivative. And I will see you in the next video or in next week. 40. Wireframing for social media webpage: Welcome. So in British would argue task to create a social media app. So I know some of my competitors with that task. So in this video, I'm going to create my word for it. Let's create a new design file. Okay, let's rename it. So in Bruce, really allude to earlier, you can use like iPhone frame. Or if you want to make a web application, you can do that. So for this project, I'm going to move it. So let's first create a wireframe for it. So in this section we are going to have a group like so. Let's say the user is currently in the charts section. So the user will know from this bottle, the user will know he's in charge section. Okay? So this is going to be our groups. So let's add some texture. Okay, So in this section we are going to add a group. So let's edit text over here. And in this section we are going to have a message from personnels. And over here we are going to have like a message from a group or from personal. Add a Call button over here. Let's also add a video call button. And let's create that chat box. Here we are going to add a microphone. And in this section we are going to have some chats. Okay, So eliminating slight iron in Berkeley. So in groups we are going to hell, like some groups, groups, school groups from friends. And also in the person's personal message from your friends or your teacher or your colleagues like that. So this is going to be our wireframe for this project. So this is how my version is going to look like. So I know you might be done in a different way. So I took inspiration from like worst apparent discord. So in the next video, I'm going to design a UI for our social media app. So that's me signing off. Thanks for watching and I'll see you guys in the next one. 41. Social media website UI design: Welcome back. So in Bruce, we made this wireframe for our social media app. So in this video we are going to make the actual UI for that. I think I have to remember in this wireframe. Wireframe, Let's choose a frame rectangle. And just to center. And this is fun. Okay? So you can see the colonists are sharp, so let's make them hold shift and select them all. Let's make up to 20. Accidentally use this relational to I have to use the corner radius so the background color of gray. Let's make a white color like this, and let's add a drop shadow. So it really depends on you which color you want to use. So let's say for working on an app and you don't know what color to use, then you can use this website called Color Hunt. And in this website you will locate lots of color palettes like this one. So for this project I'm going to use this color palette. So I already downloaded it, so I'm going to just drag it on my Figma project. This one, or this one. For this section, I'm going to choose let's say this color. You like, Discord wipe. And let's add a logo over here. Okay, Now it's time to add our icons, like in our further icon, we get like two of them, like this random normal D square one for this project, this one. So it totally depends on him setting. So for now, I'm important these icons, so let's add them one by one. So first of all, let's make them a little bit bigger. So I use like 35. So let's make it 40. So it will look more metal or cool. I think I'll make it white. Make them why? This is not select. Okay, let's enter them one by one. Cloud is going to be over here. Is going to be setting. Okay, let's enter them. Hold Shift, select them all. And the center align horizontal spacing. So I read the spacing also. Okay, let's add a profile now. Click on it. Go to Shape Tool. So let's place it on this logo. You can see in this place now. And also look perfect. Stroke. So it totally depends on if you want to add stroke, you can add. You can leave as it is like this. So we are in currently chair section, so rectangle. I'm going to use this. Look at this one. This one. Let's bring that to front. Or click on it and bring to front or even use that right square bracket to push up. Good. You can see how it looks. Okay, so currently it is like this. Okay, so let's make a group. I want to make. So let's change the font, font color. Let's make it more like this. Edge groups. Okay, let's add a group from your colleagues. Let's make it a regular line. Like this. 1909, I'm gonna kinda like okay, like this one. So let's say someone dropped a message or something like that, the firm size, like this. Okay, unless a time. So user will know when this message is delivered. King quote from someone, say 38, 130, record a message from that group. Okay, let's make it a 10. I think I made up like ten. Okay, Let's let's make it a group. Because we are going to use this thing multiple times. Press Control G to make them a group. And let's copy a sentence like this. Select all of them upwards, like this. And you can turn that time OB. And also the name of that group is like up to like 21. So let's copy this exactly same thing on our first class section, like this. Okay, so first of all, less than the group name. Let's say you have k-mers in this group. So let's add image on this group section. Okay, so first one is, the first image is our console. So I'm going to add this second one is students. Let's say the imaginary students are programmers. So I'm going to add a word here. It does not make sense for this image, so I'm going to choose a different image. Let's say our rumors out of the file. So I'm going to add that image up like loci. So let's add the leukemic chorion. Okay, like this. Let's say you edit the image, but the image is like very well, so you can double-click on it, go to Fill, select the image. And you can choose a crop, that image. Or you can like Moody's and this, cancel this one. So now I'm going to add some images. I think in Windows, the shortcut is for Windows plus r dot key. So it will open the emoji panel audience. So you can add images like this one. Okay, This sum is saying, thank this. Over here, like this. So it totally depends on who you can add whatever you want. So we're done with our group. So let's say the name of this girl is ritual. Like I'm a big fan of like friends. So nemo is written. So you can add whatever you want. Even arity run GF name, audio takes name, DO deliverance on you. And the last one is going to be Chandler. Thank you. Let's add some random diction. Okay, so I heard some random text over here. I have retained that time. Also the message from Rachel, actor 46. So let's add an image or images plus now. So in this section we are gonna copy this one. Okay, on the test section. So you can see the problem over here. So I copied this group, but the group is not visible, so I have to add a text. Again. Let's add a simple rectangle. Over here, is going to be 20. So let's make it a little bit bigger. So let's add, if I drag it over here, it is going to be added back. So we have to bring this up front or click on it and choose Bring to Front. And now let's place it over here like this, so we have to make some changes or add a stroke. Let's make it white. Is going to be white and also increase the font size. And currently she is online. And we have to remove this one. So we have some icons audience that is going to be the bottom layer, drag it over here. And the color of this background is white and also the color of that Taiwan is white. So it is not visible. So let's bring it into front. Bring to front or 40. And explicit here. So track, video icon. Okay, Bring to Front. Let's align this call and this call. So it is lambda. You might seem that three.me icon, we don't have that Minnesota, we have to create it manually by using three ellipse. An ellipse like this. I think we have to make it a little bit smaller. So maybe like okay, so it is done. Now, let's move this over here. Be easier to move from one place to another. So chats. So let's copy this one. On the color palette. There is no color on the color palette. Let's make it smaller. So let's create like this. Let's import that my proton over here. The camera. Okay? First of all, let's make it bigger. Like let's say let's make it like this. This chapter sections, this is going to be here. I think, is why this movie here. Okay. Let's align these things. These things are aligned now. Like type your message. I think it's 14, is going to be fine. Like this. So things are happening is that only the chat or anything? So I'm going to add some random chance for you. Let's say I recommended a game to Rachel. Let's give the corner 20 polygon. Okay? So let's kind of look like this. So let's make a group of them so we can use it multiple times or Shift to select this arrow over here, this edit text. So let's make it. And you can use your favorite font like this. So let's make it smaller. Sites, little bit smaller, like this. And we're going to end on time. So I'm going to copy this one, drag it over here. So let's create another section. I can copy this one, but, but I want to this polygon into left side. So I have to create the new one. That's why I have to create new one. Or you can use the same one. So I'm going to describe this polygon. So this is where I finish my social media app project. So I know you might use different way or you took inspiration from different applications like Facebook or Instagram. So it totally depends on you. Might look different or better than me. So this is the single-page application, so we are not going to use the prototype. So if we had multiple pages like music app, so, so in that photo pages. So that's why we connected those projects. So this is the single page. So this is how my social media app looks like. So and I will see you guys in the next project. 42. Project 5(Test your UIUX skills): Welcome, welcome, welcome. In this one I'm going to tell you about project file. For this project, I'm not gonna do any wireframe or any idea. You have to do it on your own. It is kind of your test. You might be thinking what we have to build or design. The onset is anything you can design, app or web page. It is totally depend on you. Let's say you have to build our pitch for some brands like Nike, Puma. Then you can take inspiration from Nike or puma. Or you can just search on the Google, or you can also search on Dribbble and try to make this project. And remember one thing, it should be unique. And you have to be creative. And some of your own creativity. There are some steps you have to follow. Like step one is taken inspiration. Second one is make a wireframe. Third step is design app or web page. The step forward is cleared at this three-page app on a webpage and stiff fines prototype. And the last step is share your project with me and also with your friends. So those are the steps you have to follow to make this project. I know you can do it. So that's me signing off. Thanks for watching and I will see you guys in the next one. 43. Grid Systems in Web & UI Design: Welcome back. In this unit we are going to learn about what is grid. Grid are the skeleton of design declared alignment help you to create, order and organize the content top you are design. Whether you are creating a layout for print like magazine, or combining images and texts to design a landing page, you will use grid to help you make design decisions and create a good experience for the user. Using a grid elements, random decision-making. Instead of placing elements in random places. By using real properly, you will know exactly where to place elements like logo, menu items, headlines, Body Copy, Image and mode. It will help speed up your design process. Why grips matter in digital design? Grills help shape and heritage you do digital design. Without them, you will have no idea where to place elements. We need them to create good user experience. So user know how to navigate through a website and find what they would need. Grids also help what it comes to responsive design. While the desktop experience of the landing page might use multiple columns to spend text and image across. The design needs to be flexible enough to condense down to two to three columns on the table and one column on the mobile device. Notice how the mobile Greer becomes a stack like one column or little grid in the example. There are five main types of grids. Some are better than others for web design. But do you have likely used all phi at 1 in your design career? The first one is baseline grid, The second one is manuscript grid. Column, third one is column grid. Photon is modular grid, and for the last one is heretical. Create those five groups are really important, but I think the column grid is really important to us. Columbia does help break up the text for posts and illustration. For websites you can have anywhere from Goodwill or even 16 columns. Let's Spend the vertebra, the lending page. You can please text and image within just a column, or they can span across multiple columns. The space between column is called girders. They should be same size across all, not all columns grid hair to be symmetrical. For example, you can utilize an assimilator column grid where some are thinner while others are wider, which can be useful depending on heirarchy of your design. A cemetery column grid are commonly used on blogs, websites where you have the main content enlarge do third container of the layout. While the smaller term may be the sidebar that interests information about the blog and the writer. After you have done your research, maybe you want to explore some low-fidelity wireframe on paper. Create a Greer for your landing page is one of the simplest step. Once you've created it, you won't have to think about again for all subsequent landing pages. Before we start, does anything covered the grid first rather than leaving it to the end and try to make your design fit into a grid. New designer might feel confined by the idea of using group, but you shouldn't. After you have created a grid, it is okay to break it. But at least you are doing it intentionally and they are written for design decision. The more you use grid, the more you realize how is guide and it will actually help you design better and faster. So those are all things our groups. So that's means signing off. Thanks for watching, and I will see you guys in the next one. 44. 15 Things That Make Your UI Design Lit!!: And juries will all driven by denser fruiting or app screen. Some of them are simple, some of them are only, but a few of them are lit. Might award lead. I mean that the UI that look attractive as the user wants and the UI that listens to its user. Thereafter, printing that makes you live. If you learn all these things, you will successfully learned to make a UI that listens to it. User looks attractive and delightful to the user. So let's learn about those things one-by-one, starting with typography. Every UI with buffer WTP is lit because more than 60 percent of the application is either text or completely depend on texts. For example, an article application just like medium, has more than 60 percent of application for it with detection. And on the other hand, in application which has the button checkbox, Dropbox can't be effective without text, as the user might not understand which button for the sign-up for login takes place as important role in application UI design. Therefore, it is a crucial to use it properly and to use text properly. It has to be styled accurately. Colors. Colors are the most important and very delightful part of designing. Just like the artist, nothing without colors, the UI is nothing without colors. Therefore, it is important to put colors inside the UI design. Colors in UI design provides attraction and use a lapel. By using colors, designer can put life into its design as a fact, but also work as a psychological trigger for humans. Therefore, for a better experience and app interface designing, you should use color inside your design. But sometimes if we'd done some mistake while using colors so that our icons, icons out that one of the most frequently used element. Now what a designer low using the because user understand it quickly rather than reading the text. As humans understand visual easily, or the best way to use them for your benefit while designing a UI design, I can start the new things as our ancestors to use them to define their kingdom and areas. The kingdom where you find line held of flag with line symbol. Illustration. Illustrations are one of the best ways to add an attractive visual that you can also customize accordingly. Usually illustration is much better than using simple for illustration are low in size and never looked blurry in any app screen size. If you use SVG illustration, illustration to make the content more understandable for the user. Image is one of the most popular and the old visual inside the white design. The images are all but they are called as usual works tenants, but at then the plain text. As humans are visual creatures, the load to see images. Images show emotion at that attacked sentiments of the user. And it really helped to attack and make the user customer. What if not used correctly, can make big trouble for you. And emission, emission is the most used thing inside the white designed to boost user interaction as where user look at some of the cool animation, they feel good and like interacting with the application software or website. And emission is also used to provide feedback when users click on something or to achieve something. For example, as a successfully treat message when you transfer your money to another account. Migrant direction indicates some simple animation using the app that makes the normal function appear to be attacked by Anna highlighted, for example, double-tap image to like Migrant Protection in Instagram. This simple animation, how to be used perfect lists as ordering animation makes the user feel bored by your animation. Personalization. Personalization means recommending the content related to user choice they made previously using application. By storing the data and his team fit the permission of the user, you can easily make your application personalized. User loves to see something more personalized as they feel important and make the app more interactive. For example, if the user load to cart wiping videos, he would love to see your other CAD. Why we will use in this YouTube recommendation rather than a showings, swiping video, navigation, nourishing. And one of the important feature of the application without which the user can't use the application. Therefore, it is better to make the navigation cooker and smarter. Flex 45, YouTube, Amazon uses navigation bars, menus, and other buttons to make the user easily navigate through the home screen of the application. This one's Eunice, making user UI is one of the most important tasks and interface designers should do in 2021. And for the responsiveness basically makes your UI design being able to fix inside as many screens as possible. Because we are now in the age of gauges where 70% of people have more than one guys yet owned or used. Which inquiry why design? Minimalism? The lead UI design focused on minimalism. Using minimalism is basically subtracting less used elements from UI and putting most important element on the screen. Minimising doesn't mean removing useful buttons just for the sake of making the app screen clean. It's all about styling and spacing. Parity. You why is formed with the heirarchy of the element, which means the most important things must be on the top of the UI design and the rest of the things are arranged accordingly. Heterotrophy is really important in UI design because it focused on ward important and less important, and the help designers to arrange them in a particular manner that helps you to navigate the app easily. Consistency, maintaining consistency is the most important. It means using the same styling of the element across the application. If you use different styles of element or dilemma, makes your work Lord High and app quality low. Using constituency bit basic but crucial. Some elements of the app might be the same in the function, but different in the colors, scheme, and test identified them and change them by your APTT him as exhibit a. Distributed basically means the designing the designing for people different than normal. They might include left-hand people, disabled people are handicapped people. Further back. The most critical thing that makes any way different from the leak is pretty bad. The designer who knows how to use her back is the designer who knows our designing. An actual UI. For defects are the most critical things as some user for you back with good reviews and other with bank, just tried to understand their problems and then resolving it. And resources. The better tools and resources you have, the better your application will become. As if you have better resources of icons, this MCU UI look more attractive as well as designing tools also matters to some extent. Tool for designing u1 must be high in performance. Have Plugin Support also supports companies requirement and how all basic things required for you I designing resistors are the collection of the things that designers use for better UI creation, like, like icon success, illustration resources, image resources, and mood. So here we comes to end of my list, filtering things that makes UI lived. But because you stayed together with me, some bonus for you. The bonuses follow the trend. You strands are part of it. If transfer value to your user or just improve the quality of your UI design. Lead designers know where they are, how to use tense and we're not. And you could learn about it by reading and understanding the trends. Sometimes like noodle morphism are unique and can't use in, but sometimes like a rock can be used in any part of the way with basic functionality. So those are all things you have to know as a UI UX developer. So that's it for today. And I will see you guys in the next one. 45. 5 WEBSITES YOU MUST SEE! Web Design Inspiration: Welcome back. In this video, I'm going to tell you the top five websites to take inspiration from. The first one is, and also my favorite that the Drupal from gribble, you can take lots of inspiration. You can see lots of people upload their work in inspiration type, we get all the options like web-page animation, branding, illustration, mobile, print, webpage, topography, product design and all that. So let's choose the web design so you can see all the webpages. Let's say your client want to build a website for cryptocurrency, then you can, then you can take a look at these websites. You can see all the things like wheat color he used in this website. You can also follow them from here. You can also comment on these pages. I can also like them. And you can also see the similar webpages for cryptocurrencies. And if you want to filter out some specific webpage or app, you can click on this filter button. And you can also add tags. Let's say you want to build a like health texting app. You can type here a head tracking. You can also select a color. And it will recommend you all the websites that has that color is pink color. And you can see the option, we get options like figma or a base di escaped on flesh and our leg. And from download, you can download for our different softwares like Figma or a big city for a shop I know leg. And you can also upload your own design from here. We have to first sign up for this. Okay, so the next website is Behance. So it is kind of similar. From here, from creative field, you will get all the options. Or if you do like clear to you what language you are reading, order, poster design, then this website, it will help you a lot. You can see, Are we good options like art director, branding, illustration, and alert? And also. So we are interested in UI waves ever designed. So getting those things. You can also click on this web page to see more details. Like it is building out obesity. You can follow the Creator. You can see how the description for it. If you want to filter out something, you can also do that. Let's say if you want to search for only for Figma, you can also choose it from me or you can substitute here. So it will show only the Figma files. Like this one is a Figma file. You can click on it and you can see all the description for that app. Like Dribble, you can also choose a color. And it will show you all the website that has this color. You can also filter out by your location as cool and all that. And you can see in the sidebar we have options like a group, project images, prototypes, people, and moodboards. Let's say you want to shoot, let's say you want to see some products, you can click on it. And it will show all the prototypes. And I'll let you can also upload your own webpage or app on this website, but you have to sign up for this. The third one is Greenland. From this website you will get everything like you can see the categories like e-commerce held and I'll let you can also click on Show More to see auditing, like fitness, music notation and all that. So it is not for the app. You can see Are we get options like landing pages and user flows. If we, if I click on this, I will redirect to the webpage section. So you can see we get this all webpages from here. You can also filter out from here. Like what kind of website do you want? Let's say you want to build a website for e-commerce, you can select this option called e-commerce is also a very good website to take inspiration from. The fourth one is side c. This is also same website like Dribble Behance. So if you want to search something, you can search it from here. And you can also filter node from here. Like, what kind of color do you want? Like, let's say you want to a website in curriculum. And we can choose gray. And it will show you how lopsided that has a curricular unit. And you can also filter out some like if you want to build a blog, can also choose a blog, e-commerce and alert. So there are some honorable mentions like slips, it's called hours a week. Three W's. So in this chapter, we have all of our winning complex like this. Three are I think our winning templates warrior. You can also submit your own web design audio. And in this hamburger menu, you can see the windows and nominees and collection. This is also great to observe, to take inspiration from. So the next honorable website is sight inspired. This absurd, especially will for inspiration. From here you can also filter out like jubilant Behance, like title types, like what kind of types you want. Let's say you want to build a website for agency and consultancy, you can choose this option. You can also see all the options from here. We also get option called subject. From here we can choose different subjects. Also the platform and also the surge body. From search bar, you can search a specific website, it like e-commerce. And the last honorable mention needs one page. Let's say you are a client. Certainly. We have to build something like one-page application. And you can take a look at this website called one-page low. So on this website we only get single page, web page like this one. You can see, this looks really cool. Warrior. Do know that u to be the single-page application. I also got to know from one of my friend. He's also UX designer. So he told me about YouTube is a single-page application. So those are all the websites to take inspiration from. Let's say you wanted to build something but you are not getting idea how to build it. You can take a look at all this website to take inspiration from. So that's a portrait. And I will do it in the next one. 46. 50+ free tools and resources to create awesome user interfaces: Welcome back. In this video, I'm going to tell you free resources to use for your projects. This article is available on the No.2. This website is really helpful if you are a programmer or web developer. But he would do things like our technology literate things, then this website, it will help a lot. So in this website I bought the article. In this article we get 50 plus free tools or resources to use for our projects, like photos and video, electrician palette, topography and emission effect, iconography in pattern shapes and mutilating. So you might see, I use DOE website called pixels for my projects. So it is a really helpful website to use stock videos and photos. I also use this website a lot to make my videos. And you can see other options like coal and for the theater and all that. You can take a look at other websites from here also. And if you want, but if you have a like a page or a image of person and you want to remove the background from it. You can use this website called onscreen and also this absurd card, remote grand round. Sometimes clients provide images but we only need the image of that person. I use this absurd Remove BG. So it helps me a lot. So this absurd is also really cool. This is the EHR-based website. So what website it does is that it will create a random people's faces. So if you want to use, like, let's say you are building a social media app. And that app, you have a story section. And you want to put images of people, then you can use this absurd called gendered people. So let me tell you one thing. These are not the real people. These images are created by AI. So it is really helpful to use these images. The next free resource, it's illustration. So I don't use the illustration lot. I only used illustration in my, I think on, let me show you my project. So I only use the illustration in this website. You can see the illustration over here on the second page and else on this third page. So for that you can look at this absurd card, open paper, smash illustration of the illustration are free to use it. We will get options like SVG, SVG and PNG. You can download in those format. And also the control nutrition. I used this images from this website, from this control illustration. We also get other websites like ouch and the auto-generated. So next free versus says is pellets, those. So if you want to build a website and your client does not produce any color palette. So you can go to this website to choose a color. You can create your own color. And I like a website called Color Hunt, so I told you our website, so you can also go for it. I use this exactly same color palette in our social media app project. You can look at all the websites like color space, valid app, colorable, and outlet, and the next day. So this tomography, Let's say your client says, I want only the specific font. Then you can go to this side and you can search for that font. And you can download it and you can use it in your projects. And we can get other options like Fonda, Arianna, be fonts, fonts girl, enjoying, timescale, and how LED. So next, resources for uses, iconography. So from these websites you can download a specific icon for your project. Let's say you are building a social media app. Then you can go to this website and you can download all the icons from here. And those all icons are free to use, then you can use them in your project. So we get options like icon stole, CSS, icon, icon, translation generator, tired icon. You can see here adoptions. So next resources is patents on ships. So you are applying to 12 like some specific button on in your webpage or app, you can go to these websites like CSS baton, gateway from disruption. Or you can create a customizable. You can see I used of waves like this webpage and BS1. But I created this using Figma. But if you want to create a customer, then you can go to this website called ghettos. And if you want to create a customized him, then you can also use this website called vol Mecca. Okay, this is a really cool website called red lines. You can clear the really cool looking patents from this website. So those are all free resources to use. So I will give you the link of this website in the resources, you can check it out from there. So those are all the free resources to use for your projects. So that's it for today's video, and I'll see you guys in the next one.