Figma Master Class: Design & Prototype your First Mobile App Idea

1. Intro to Figma Master Class: Welcome to my course. Harder land fig marvit. In just 14 days in the schools, you are going to learn all the different tools and techniques and tips on how toe wire frame than design and then prototype your APP idea from scratch. I'm going to share with you all the commonly used Sharper case so you can speed up your workflow within figment. Similarly, we're going to share with you all the different prototyping tools and tips and techniques on how to use different transition affects different an emissions so you can convert your static designs and boring designs into something awesome. We're going to design together food recipe have called germs. We're going to design its logon screen X search filters. It's different menu animations there where the menu is going to transition from one scheme to another and how you're smart. And he made how to use overly effects. How to use all these kind of stuff Within Sigma. There are many assignments along the school, so I'm going toe. Keep an eye on your progress, and I'm going to give you timely feedback on how you can improve your you accentuate design skills. I believe that anyone can learn any design tool within just two weeks, that is enough. So let's get started and dive into figment now. 2. Download and Install Figma on Win and Mac: in this video, we are going to go head to figment dot com, and we're going to download figure MMA, and we will see what are different features and how we can use them. What is the pricing model off Fig? Mom, what is the free version gives and what is the paid version? Differences. So let's get started. No. First you are going to go to figure dot com and this is their website, and you can see here they say strife Igman for free. So you have to create your account over here, so you are going to go to sign up and create your account. This is the first step. Now the second step is, once you have created your account, you're going to go to downloads sigma dot com slash downloads. As you can go from recess role resource is and go to downloads and here's you're going to download desktop app. For if you are on a Mac OS or Mac operating system, you're going to download this desktop app, and if you are on Windows, you're going to download the desktop app for Windows. Now, if you try to use your fig MMA on your browser than you are going to use this map. Quest installer, Windows installer. Most of the people I think 99.9% they're going to download these do. So we don't need to worry about this. Fort installers just download the desktop app and install it on your PC or Mac. Now here, I'm going to show you what is the pricing model. And what are the features that are in different pricing models for this fig model? First is free so you can create after two editors. Would you just mean that two people can edit a single project? You can have a team off to designers and three projects, and you can create three projects. Maximum off three projects, 30 day version history. So this tow this actually saves your, um, design versions. So whatever the changes you are doing to a design file, they are going to be saved for only 30 days and unlimited dollars storied. You can use our upload, any file or any size off file. That is not a problem. Unlimited free viewers so you can share your projects with unlimited people that they can view your project. Now you can see here we have professional and organization. Now, the main thing that we will be looking for we're here is unlimited version history. This is the first thing, and second he is invite only private projects. So, for example, if they are companies or enterprise is they want to work on just private projects, they can create invite only they can send, invite only private invitations, toe different members, shareable team libraries So you can design your design libraries and share them with in your team. That is another profession feature. So, um, these are the differences. So if you are a very big organization, you can opt for this one. Now, what are the different features? Why've we are thinking that stigma is the next big thing? No. The reason is that first thing is that it is a cross platform. You can use that design even in your browser. So this is the first thing Whenever you look at a design tool, you have to see whether it's it can be used anywhere on any platform. That is a plus. Point second is that there are a lot off tools that I can think that they are next generation tools for designers. There are a lot of things you can do a lot off features, but in this stole utterly hours, responsive designs. Then we have plug ins. You can see you can download different plug ins and extend the functionality off Sigma you can see over here. Here we haven't splash, so you can download any image and its stock image that is free. Similarly, we have this, I quantify, and you can use any different icons like material design icon Scougall icons. Four awesome icons that are very popular. So these are the features off Sigma, and this is how you are going to go over here. Sign up and down load fig, MMA desktop app and we're going to get started in the next lesson. So let's move on to the next lesson. 3. New Figma Interface 2022: In this video, we're going to look at Figma, new interface because the old one was two years ago. So now this is the new one. So let's dive into sigmas interface. Okay, so once you login into Figma, you are going to see that this is going to be the interface, although you will not see these are top, these are the files I have opened. So these are not going to be there. If you're using it for the first time. On the right, there will be a profile. So if you click over here, you can see this is my e-mail. Also, you can go to community profile I internal profile plugin settings. So these are the settings. So you can see over here, you can change your name, email, password, other things from here. And you can also go to community profile from here. So this is my community handle as an addressee and you can change it if you want to. These are the plugins you have installed. You can click over here and uninstall or show details from here. Also, you can to plug-ins from here. So whatever you have installed, which is going to enhance the capability of Figma, this is going to be over here. So you can see I have all these plugins. So these are too many plugins anyhow. So this is going to be your account. Community profile is necessary because you are going to go to community to download a lot of different things. So you can see now I have switched to my community profiles. So here you can see it says community. So if you want to go back to your main profile, you have to click over here, switch to the essence or whatever your name is in your Figma as profile, you will be back to the interface. Okay, so let's start with recent viewed. Recently viewed. So whenever you start it is going to be over here. So we have three buttons. Previously, the buttons, but not very good designed. I would say. This is really easy. New design file. Click over here. New fig gem file, which is for whiteboard diagrams and collaborating different sketches or ideas. This is another tool by Figma. So this is their file. If you want to import file from figma sketch or any image, you can click over here and you can click on the fig file. Let's see if I have something in downloads. Okay, so you can see I have this dot fig file are also dark sketch files, so you can import or both of these. Just click on the fig file and open it like this. And it will take some time to imported because it's an online tool. So it is going to show you can see done. And here I have this file over here. I'm going to double-click on it. To open this file. You can see it is basically at Clay mock-up from high for academy. Anyhow. So let's go back to our main interface, which is going to be this home. And we have, you already know that this is new file. This is the config gem file. So we will be creating mostly these new design files or maybe importing some files. Okay, so down here we have all the recent files I have worked on or I have opened. So you can see there are some design systems, vector hand-drawn shapes, forms, a lot of stuff. And if you vote to remove any file from here, you can just like, let's click over here and right-click and remove from recent. You can select multiple files. For example, let's, let's, let's, let's select multiple files like I have this one, so I am, I'm pressing and holding Shift key, this one and this one. So I have selected all three, remove three items from recent. So I'm going to remove it like that because these are a lot of my student assignments. So they keep on submitting. Okay, so we have covered this area. Filter by all files, design files, fig Gem files are prototypes. We normally have all files. Then we have this viewer switch list of files with small icons if you liked this. Because it is going to show you how long ago you created or open this file. You can see some of the files I have opened like two months ago. And this is going to be your grid view. So this is two views for your recent files. Also we have fig jam templates over here or information architecture diagram, all these diagram, if you want to use them, you can click on this one and just start building whatever you want. Okay, so then we have this community profiles. So if you've go to community, you can download icons, wireframes, design systems, all the free stuff, plugins everything. So this is a very nice feature of new feature of Figma witches. You can go to search any plugins, maybe. Let's say size, let's say size, and see if we have event C, icon sizes, races sizes. So these are all different plugins. So here we have different creators who are actually creating those plugins. These are plugins and also if you go to Files, you can see we have different files that have this screen says for example, you can see iOS 14 screen sizes. So the periodic table of iPhone. So these are all different screen sizes. So you can download different files if you want to download. For example, if I want to download this file, this is A3, A4, A5 size for designing. You can click on this duplicate and it is going to duplicate in your Figma has interface. Here, we have it. Okay, so let's go back to home and you will be in the community the same. You can click on like or love this, whatever. And you can also zoom in, zoom out. You can go full screen and see what others, other things have created this author. Let's go back. Let's go back over here. You can click on wireframes and you will see a lot of wireframes over here, plugins, files, all everything. So you can see over here like this one. I really loved this one. So I'm going to replicate this one here. Love it. Okay, so this is about communities. So let's switch back to my main profile. Okay, so here we have it. So we have discussed recent and community. You can also set your files from here. See, we have my first design figma or Figma class. This is a project. You can see what here. These are files and these are from community files. Community. Okay, So this is how it is going to show you a search, very advanced, very nice search. You can search file themes or people, even people. So let's select Chris, we have it. Shift one people. Okay, so I have to enter to see. So this is one of my co-workers. I'm going to hide the e-mail over here. So this is the person who is working with me right now is a developer. Okay, so we have search bar covered. We have this main profile switch from community to back. We have covered this section on the right. This is going to be your updates. If you have some notifications. So these are going to be your notifications. Then we have drafts. Drafts are actually projects. So you're actually project and everything. You create an editing, you create a new file. Whenever you are going to create a new file, it is going to be in a draft. So once I click on this, you can see over here. So let's press E for art board and let's click this one. Okay, So you can see once I create anything, so it is going to be in the drafts. So at the top we have the hierarchy. Drafts is the project. This is the file name. So if you click over here, you can edit the file name, my Figma file. Okay? If you want to move it to some other place, you can click on this arrow and you can see move to projects. So I have different projects like these. We're here in Figma class foodie app. I can click on that and I can move this over there. Also, there are few more options renamed lead, favorite this file. So favored this file means if I click on this favorite, this file, it is going to show over here. You can see favorite fires. So these are my favorite file. So if I want to open any favorite file, I can do that easily. Even if I close, is this one. Okay? So if you want to change the background, click on the outside and we have this background, you can change it to anything you want. Then we have on the left we have you can see pages. If you have to click on this to see the pages, you can add more pages over here. Before going into that, let's study the Figma hierarchy. So on the top we have teams. So this is going to be like over here. So land you XID shared products. These are my team. So if I collapse it, you can see this is shared projects. This is another team. Land you excited, this is another thing. So if I click on Team, you can see it says two members over here. Then these are the projects that have been created inside that team. These are the members. Okay, so these are the people who are actually watching the access to this because these are all my students. And then we have settings over here. So you can change the name of the team. Team libraries enable plan and billing, upgrade your plan if you want to. Because some of the features, like library sharing or asset sharing is actually a premium feature. You have to pay for that. Okay, so let's go back to the Figma hierarchy. So this is my team. Then we have projects inside that team. You have already seen that these are the projects, this is team. Figma class is a project foodie app natural. These are all my projects than we have files inside that projects. So if I open up any project, Let's open, for example, like we have this. So we have this drafts, which is project, and then we have a file inside it. So this is actually my file. You can have this. These are actually file, this is the file name, my phosphate HTML file, and then these are the pages inside it. So let's see, we have pages. So files and file inside that files we have pages. We can have ten pages, 20 pages, how many pages, whatever you like. Then we have multiple artboards inside a single page. So let's go back over here. So we have this page. Let's zoom out. So this is an art board. This is an art board. And if I want to create another art board, click on a. And I'm going to have an iPhone art board. Again, press a on your keyboard, iPhone SE. And again a, let's use some tablet or here 11 Pro. Like you can see over here, these are all my art boards at the bottom. So, or you can say frames. So these are my different art boards or frames. I can have maybe 50 or 60 in each page. So like right now, I have selected this page. If I go to the second page, that it is nothing over here. So this is the Figma is hierarchy team. Then we have projects and we have files. Then we have pages, multiple pages. And then we have a lot of frames and art boards. So we have single team, we can have two or three teams also. So normally we normally have one or two teams, MAX team than we have multiple projects inside that team. Like you can see, I have shown you over here. So this team has 12345 projects. This one has one project. So inside that project, if I open up this project, my glass, you can see we have multiple files. I have left 1234567891011 files in this Figma class project. If we open up this Figma class projects, so you can see we have multiple files over here. So we have like, let's go to the ListView. We have like ten different projects, so ten different files over here. This is a project I've selected. These are the file. So if I open up any file, Let's select this file. It will take some time to load. Okay, so here we have the file. This is the page, a single page inside it. And then we have the art board or single art board inside that file. So if I click on this empty section over here, I can see this project name and then the file name over here. So let's go back. And if you want to create a team, you can create a team. You can steam. Let's create a team and you can add your collaborators after that. And if you try to continue, it is going to ask you for the payment because it is a premium feature. So you can have just one team I think for normal version skip for now. So you can see it shows me choose Professional. $12 per liter per month. Fig jam is $1.3 per liter per month. I think it's annually. If it's monthly, it is around $15. So let's, let's try to close this and go back to our theme. Oh, whoops. So it has created a team actually. So let's try to delete it right now so you can change the icon, anything you want. Let's UX teams. So I have to type the name to delete this team. Okay? Okay, so let's see if I have missed anything. Okay, so inside this area over here, so if we have left panel which is layers, assets and pages, and then we have the artboards over here at the bottom inside that page. And you can see it says pages and this is art board. On the right. You can see I have this over here. Start conversation if you want to collaborate with someone, share, if you want to share this link with someone, copy link and paste that. Or you can email, type the e-mail over here, multiple emails cam comma separated. If you want to share to multiple people, I normally copy the link and share it with anyone I want. Okay, so then this is the present or prototype. This is actually missing fonts. So if you have some missing font or typeface is it is going to show you here root and this is missing from this file. Then we have this zoom level, zoom in, zoom out a 100 per cent control 0. And then we have pixel preview, a pixel grid, different options layout grid. And these are at the top. We have different tools. You can see over here, this is the menu. Over here. In the Mac, the menu is at the top, over here, at the top over here. And in Windows, it is placed over here like this. Again, you object vector text, arrange plugins. And if I go to plugins, you can see at the bottom I have managed plugins. So managed plugins, I can uninstall or installed different new plug-ins or whatever you want, why you can manage it within there. These are my libraries. These are actually the styles that I have shared with different team members are designed design files. These are actually, you can say color styles, textiles, and we are going to study about that a lot. Ok, So at the top you can see these are all my open file. So if I want to close some of the files fitbit hierarchy, so let's close this one. Icon x. These are the ones I'm working right now. So I'm not going to show you those because they have sign an NDA anyhow. So here we have some, some file. You can see these are different pages. So if I click on any page, I have different layers. Assets over here. Layers are over here. So you can see these are actually frames. This is the frame icon. So these, these are different images. Icons are different. So whenever you click on any page, it is going to show you all the art boards or images or layers inside that. Let's go back to the home. And I think that's it. This is more than enough for you to understand the new interface of Figma. I hope you have enjoyed this lesson. Make sure you keep on learning and we will meet another video till then, take care. Bye bye. 4. Different Panels and what they do in Figma: in this lesson. We're going toe deep dive into mawr about the interface off Sigma and what we can do We're here Different panels, different layers asserts frames things like that. So let's get started now You can see I created this team. This is my team than you. Exciting You can see over here. If you want to create a new project, you can click over here New project and I'm going to name it Food De And these are different sharing settings. Everyone that land you excited can address. For example, if I invite one more team member, they can addict this file. So I'm going to click on a dead create project so you can see your hair I have already created You can add the description over here Yams, app for us, things like that. So now you can see my file. So if we go back to fig hma recent files, you can see this is my app So I'm going toe double click and open it and it will take some time because it is stored on cloud. So here is my yum zap You can see over here and on the right. You can see, we have never to open up a file. We have designed prototype and could So these are the three things three panels you're going to see on our hair on this side, we have layers and assets. So layers are basically our all these frames. And inside these frames, we have different objects, so you can see it. We're here also. You can see we're here. We have pages. So inside pages, we have wire frames, yams, app and style guy in components. So these are the three bitches I have created within this project. And you can see within this file and you can add new pages if you want to. You can add new bitch. And, um, let's delete this right click delete. So this is yams are these are the wire frame. This is style guide component. So these are three pages, then we have these assets. So assets are basically of a component. So if you create a component, you can use them again and again. We will get back components in the next few lessons so you can see right now we have a lot of different components. So if a drag component I can easily drag and drop it anywhere inside my project. Similarly, this shows you you click on this arrow, it is going to show you pages again and sometimes it is hidden. So if you have something like this and don't find where are my babies? You are going to click over here. Then we have on the right. We have a few local styles thes air. The textiles I have created. These are few color styles I have created. You can use them again and again. And this is the court panel. This is prototype and this is design. So in prototype, you were going to prototype your app like this one. You can see what? Here They're a lot off different flows that it is going to flow from one to another one. We can also, if you click outside off over here, you can see we have device options. You can click on iPhone pro, uh, Max iPhone 11. All these different devices you want to show your prototype in. And what is the moral? You're going to use the background color for it? Um, starting frame. We're going to start from logging. So these are the options than we have on design. We have local styles, background color. We have already discussed eso. These are different things You're going to get in court. Gord is actually showing what is the cord on this item? So if we click over here, you can see this is a CS escort for webs, Website's R us and right for Apple Devices. This is Android Court for this object I have selected on the left. You can see this is the icon. This this'll icon is going to represent frames. So whenever you have frames, you are going to see this icon over here and everything inside it over here. So this is actually ah components. So it has this diamond shape. So all diamond shapes are components than we have this these These are different groups. You can see we're here. You can open them up. You can also open these components. We're going to get back to components later on. But this is how this is a shape for examples. All these icons that show that this is this type off layer like you can see profiling settings is a text. Leah. So it has to you were here. So these are different settings. For example, like this logo. It is a factor. So it has a vector logo over here. Eso all these different things. So if we click on image, let's see, here is the image icon so you can see this is your image you can instantly find where your file is. Your images, your your text is so you can recognize them by these small icons on the left. Now, if you want to move this project toe another project, for example, right now it is in jobs. I want to move it. You're going to click over here, move to project, and I'm going to move it to foodie app. So now you can see it has been moved to foodie app and now it's so say's foodie ab slash thumbs up. Okay. Similarly, you can show version history What wasa version history? How I edited all this fire you can see over here. And these are this is a version history off my previous 30 days I can switch back to anyone . So if I click over here, it is going to Swiss back toe on the last one. So let's Let's not try it. You can also hide version history, published styles and components export. These designs duplicate this project. Rename or delete, mostly we have to rename. So you click over here. Uh, I can bring him to yams. Recipes, recipe Be at something like that. So you can see this is how you're going to rename. Okay, so that is some off. The familiarity with this interferes. Let's move on to the next lesson where we're going toe dive into these tools and see what are these tools and how we can use them. So let's move on to the next lesson. 5. Using Frames and Artboards: Now in this our first lesson, we are going toe, create a new frame or art board, and we're going to manipulate it and see what we can do with it. So let's get Stockett now. I'm going to move to my practice project and I'm going to create a new file and it is going to be untitled by defiled, so it will take some time to Lord or here like that. So now we have this blank canvas. If you want to change the background color, let's use like this one, and you can see here we have layers, assets and pages. If you you can see by the file their Hizb age one. And if we click over here is going to show me more pages so you can add more bitches over here like this. Right now I'm in page one, and the first thing I'm going to do is I'm going toe slack. This frame do not click over here because we have slicing over here, another tool hidden. So click on frame and you can draw your own frame, for example, like this one. So this is actually the victors 3 42 by 5 80 And if we again click on frame or press F key on the keyboard, it is going to show us phone different options or design different sizes and frames and art boards for iPhone. Then we have. And right over here, for example, if we click on it, this is android standard size. And if we want to create more are more screens. Over here, we're going toe your frame and let's create a tablet frame over here. So tablet many so you can see this difference between the sizes and that's cleared another one and again, F and I am going to go toe gas stop, and I'm going to design a website. So I'm going to click over here on a desktop. So this this is how you can create multiple different frames or art boards. You can double click over here on the top, and it is going to show we're here, for example, that stop art board. You can rename them or you can, um, domestic Or here, uh, this is Android. Our lord. Make sure you always rename them, because sometimes there are multiple or many art boards, and you forget what waas the art board you were working on what it does. So I bared are book. So you can see here we have three different art boards and if we click over here, you can see we have different options on the right. This is our design dab. We are right knowing designed tab. And on the left we have pages and within page one, we have three art books. So if we click on place to this is empty, we don't have anything over here on. If we click outside off anyone, anything, this is our file. So let's rename it toe Let's call it frames and art books. So this is how you can create different artworks. Now, if you want to create something for which is not listed in the frames over here, so it is not listed. For example, we have this apple watch. We want to create something for Motorola G watch or something like that. So we are going to go head to this material design material or are you re sources slash devices Now, over here, you can see we have platforms. We have screen dimension aspect ratios can hide in DP's. So this is what you are going to use. So, uh, in the platform, if we click over here, you can see this is windows. This is was X on. This is Mac. This is Apple watch. You can see or hear 38. 42 women. Then if we go toe here so you can see this is LG G watch. So it is 1 87 by 1 97 and then we have 2 13 by 2 30 So if we If I'm designing for something like that for a watch that is not elicit over here, for example, like you can see Moto 3 60 I can use these sizes to 41 by 2 44 So I'm going to go back and I'm going to kick over here. Onda set of it to 42 by 2 44 Something like that. So it waas 2 40 one bite of 44 to 41 by 2 44 2 41 by 2 40 foot. So you can see now this is your art board for this blue LD watch or Motorola watch so you can use this one toe design something So this is how you create different sizes and frames and art boards for your design work. So if you click on or here you can see, we have different options. This is the X value, which is? It shows that it is what it is away from over here. If you move over here like this, you can see X and Y values are changing. We know what on. We're not concerned about accent values off this art border frame. We're mostly concerned about this weight and height. You can also lock the constraints. So now it is going toe grow in proportion. Okay, so 4 50 for example, If I your 600 is going to go like this, it is goingto grow in proportion. Let's school back. Come on and or control Z So these are options for tradition. I think we don't need to read this anyhow. Still, we can use these are corner radius If you want toe use corner radio. This is clip content. So whatever you are going toe have over here, for example, this you can see now it is clipping my content. So I have drawn a rectangle on this and it shows Haftar attended. And if I click over here and remove this, you can see I can see beyond this art boards right now, it is not clipping my content. So this is about clip content. This is very important and I think that is all. We don't need toe very much about it. If you want Want to align these art boards? You are goingto press shift or hold your ship key and click and select all these art boards by selecting their names. And you, Can you stop a line like this? You can also use the study up they are going to use have some space about around it. So if you have selected more objects you can see more than two objects you can see we have this spacing options multiple option Um, in fig Ma, this is a really cool feature. You can adjust the space, for example. I want to have something like 80 pixels gap between them. So this is how you can have that. So this is all about frames and our board, how you can arrange them, how you can manage them. What is this clip content and what it does? I think you haven't assured this. Let's move on to the next lesson and dig more into figment 6. Figma UI Design Tools: this video is going to be about fig mottos. So let's get started and learn what are the tools over here and how we can use them. So first, we're going toe, create a frame. This is our art board. So let's call it, um, practice frame. Okay, so we have this frame, and if you want to root, move it around. This is your selection tool or moved all. You can move it around over here. So whatever you draw, for example, I have drawn sec tangle over here. If I want to move it, I'm going to use this move. Told this is actually the default will add a little lower here over here. So if you want to scale something by proportion, you are going to select this gay or scale Dole. And now you can see you can scale it down or up whenever you are importing some icons within Sigma AB. I think I preferred using scale dole because it is going to keep the proportion and not going to mess up your icons over here. So make sure you use it when you are going to scale something in proportion like this. For example, images or something like that, which you want toe scale in proportion. Now here we have again frame dual and slice to slice is I will go back to slice once I have something over here. So we're going to first discuss thes shape. Does we have rectangle, line, arrow, ellipse, poorly gone star and place image. So start by rectangle so we can place a rectangle here. Just click on that drag and leave over here. You can also see we have radius over here. So if you want oh, select corner radius you can select dragged by over here. Or you can also put radius over here, for example. I have put eight exists right now and you can change the color exchange the color over here physical. That's fill it with the color. So here we have a nice big button And here again, these same all these are actually options. Standard options at X Y positioning Britain High Tradition Gordon Radius. You can see if I try to change it over here it is going to change your head. You can also drag like this to change the corner radius. And again if we click over here we have independent corners. You can have different corner of AIDS 20 for example, Like this or CEO like this. And you can also have one more option, which is our US corner smoothing so you can have corner smoothing like this which you have seen in a lot off a mac O R us. Our iPhone APS you can see over here. This is a good option. You can also add effects different effectual here. If you want to add drop shadow, you can see we have different effects. We will go around these stroke effects, stroke and effects, literal. Right now you need to worry about this. Feel colors you can see or hear. We again are going toe go deep into Phil and solid lenient all these greedy ints. But right now we are discussing this rectangle tool. So here we have the sect angle tool and, um, you can I have already showed you all the options we can have with this. So once we have the sec tangle Dole, let's scared And another rectangular here like this one, and it's overlap it like this. So this is how these leaders are arranged. So you can move them around. Okay, so let's change your sculler toe something like this, something like this. So I'm going toe something like that anyhow, So now I'm going to move back to slice tool. So if I want tohave an image or something on it is going to be we're here like this so I can use the slice tool, and I can click on export, and it's going to export Onley this slice. So whatever is inside this slice, I'm going to export it, and I'm going toe. Um, let's save it on the desktop. Let me show you what it means. School. It is ups. So here we have sliced so you can see this is slice. So this is, uh, abortion I wanted here. So this is the function off slice tool. It is not very handy, But sometimes in web design, you can use something like this. Let's delete this slice over here. Okay? Now, let's delete these two. Then we have lying to you can drag your line like this, and you can changed your thickness toe. Five. It is going to the center, inside or outside. So these are different settings with new center and let's, uh, make it 50. But this exchange its direction and breath shift holding breast shift, tohave it in different street angles like this. So if you want it to be straight in some angle, you're going toe hold and press shift like this. So we have this and let's move to this ad. Vast strokes you. We can have different round corners. You can see what hair around, cap a square gap, and then we have lying. Adel's and then we have triangle arrows. So all these different options and we have Dash and Gap. So, uh, do come on. What? So this is Actually, 1st 1 is dash and second is gap. So let's we have to coma. Let's see we if we have, we want to increase the gap. So I have used 25 for the gap. You can see there's a lot of gap between these dishes. Metal is actually the angle over here. This is joint Angle Middle is actually very sharp angle. And if you want to have around angle over here, so this is actually the line, and it has a lot of different options. Let's civilities and go back toe Simple line. Okay. So you can also save this style and you, Congar styles and adequate style for the stroke. And you can reuse it right now we are going toe. Discuss on adoptions That related line. Toe. So, Lyinto, this is our line tool. You can change the color, whatever you want to. For example, like this one, I normally use it in links. For example, if I have a tax or here on this is a link something like this. So you can use lines for separators or anything. Similarly, we have total It is again a very nice tool. And you can see right now if you draw a row on the far screen, it is going to be very small. So rather than using one, you can use four. So this is a thickness. So if you try to reduce the thickness, it is going to be something like this. So if you want a bigger animal, you can use more thickness like this. So I think around four or three is good. Good looking. You've been changed at all. Anywhere you want to like this again. If you want to go with advanced options you can always go over here. Triangle Arrow Oh, are lying at all. Oh, are none Something like that. It is a game going toe disappear everything around ah, square lying at all on Not so you can see it is converted to say simple line and there is no arrow on one end. So this is very strange for me because I wanted to go back to the interstate and now it is a line. So we're going to create another Arrojo here like this and not Sam the thickness like this . So this is our arable. So options are almost the same, like this line tool, and that is all. You can change the direction whenever you want. Oh, this is the arable. Then we're going to go toe ellipse elections basically circle. So if you want to get it in a proportion, hold your shift and it is going to be perfectly around like this. So I'm right now holding and pressing shift key. So this is my lips, and you can see if I click over here. It shows arc so you can click over here and keep dragging like this and you can create a chart. You can see we're here. Graph or chart. Similarly, you can also change this to create a graph a circle, A graph. So this is very easy in fig. Miley loved this feature. This is really, really interesting. So get going here on arc and keep on moving like this so you can change the start also. So if you want to have something like over here like this, you can have something like this. They're sculler it like this. This is really cool feature. And also this ratio it is going toe Change it like this. These options are also we're here. So this is the angle. Start angle minus 90. Uh, this is, uh this is also the probation, I think, and this is the tech necessary issue. So I'm going to go back to something like this. Yeah, and let's use 100 corners over here. And this is how you create a very nice circa graph using just eloped stool. So this is a lip stool. This is really great. Really powerful. I really love it. You can see over here you can create a lot of things. For example, like this one, huh? Any hot This is my omelet. Okay, so we have polygon. A polygon is again going to have different corners. You can increase the corners. 10 56 Whatever you want, eggs are gone up gone whatever you want appeared. And you can also change the corner radius over here. You can change the count from here. These are really good controls. I haven't seen these controls in any design toe. This is really cool. Sigma have a lot of features that I think other design tools are lacking on. Maybe they will have in one or two years and Sigma has a dried Now, uh then we have startled this is going toe. Create a star holding shift key. You can have a star off. Four gardeners, three corners. This is a ninja tool and, uh, five corners, six corners. So I'm going to stick with five corners and this is going to be, I think, the angle of the corners. So let's increase it. So this is going to be a very nice star for my daughters. I think they're going to love these this star because it has some you can see on. You can also change the radius or here like that. So this is a really nice being started. My doctors are really going to love it anyhow, so this is actually the angle, like you can see where Here. This is called a car. This is a ratio. So this is actually how you can make a big you can see fat fact style or a slim star whatever you want. No, it looks like a starfish. So this is a great tool. So this is a star. You can create them. So about a place image, we're going to look at place image in the next lesson because it has a lot of options. So let's move on to the next lesson to discuss, place, image and fume or figment toads. 7. Type tool in Figma: in this video. We're going to talk about text tool over here. So just besty or text, click this text and you can drag something like this to create a text box Over here. Tokyo, The paragraph. This is a paragraph, LA, blah, blah, blah, blah, blah. So you can see now it is going inside this container. Similarly, you can also use something like this over here, so you can see these are the options on the right. So we have text options. This is formed typeface, which is Roberto. You can create change to whatever it is you have on your installed on your system. This is ah, type size. Um, so right now we don't have any options. Let's clear. Drew's this one. Okay, so here we have, she was this size. Okay, so we have regular medium board. These are different styles off this text. Then we have auto. This is basically line height. I can change it to 1 30 Or I can put for example, 200% over here. Something like that. So this is basically the difference in between the two lines, the sex between the two lines, and you can see what had these blue lines? This is actually the distance between these blue lines below your next, which is scored baseline. Then we have letter spacing. You can have 5% better spacing or anything you want. We're here. Then we have paragraph spacing. So if we have more than two paragraphs, for example, let's change it. 100% hopes. Let's change it. 100% and excuse 2%. And we will have another paragraph. Or here. Like this? Yes. Here. This is another girl. This will this cap and no, If I try to use this, it is going toe. Give some gap between these two paragraphs. It is already detected that I have breast and drawer here. And this is going to be the next paragraph so I can have more space within two paragraphs and, uh, escape. And this is how it is going to. This is actually my container. So I can moving around like this to have more information inside it. Okay, so this shows that it is a fixed size. This shows that is auto height. So it is again blood to this bottom off this text over here. And then we have out of it. So when we click out of it, it is going toe Move around this it is going to have its own verdict. So it is good when you are creating some buttons but in a paragraph you're going to use fixed like this. So let's school back, Kamanzi. And now we have different options off alignment middle align top align Bottom line it is going to have. For example, if I have something like this, a bigger container, I can drop a line this I can middle align it inside this container. You can see this blue line. This is container and I can also align it at the bottom of this container So it depends how I won't get your line. Then we have center left and right a line off the text. So there's a stakes alignment, right, left Incentive. So this is basically the alignment within this container and this is the alignment off the text out of weird, different order height settings. How this how this container will be here and then we have a few more options like you can see where here few more options are like we can justify it over here than we have underlying on. Then we have this none than we have. Strike to something like this. Paragraph in Dent. If you want to indenture paragraph like this and the starting of the paragraph, uh, then we have different cases. Upper case. Lower case. This is title case, and this is as tight I know about these gates sensitive forms and capital species is spacing. So these are different options that are the fort. Advanced options are open type options. So right now you can see I have selected this rasa phone and you can see this Typhus has capital spacing and case sensitive forms so you can have these options click if you want to use them. For example, if I try to use capital spacing over here, war is near, for example, like this. So now look closely if I try to, uh, use this capital spacing so you can see capital spacing turn on Capitol spacing off. Similarly, we have these style number styles. So if I try to use 123456789 to you, something like that. So you can see we can have this friend number styles. These are again different options, so these are actually options off open type type faces. You can see there are stylistic stylistic options. Horizontal spacing, cunning fraction denominators. I think we don't want to use all these, but I think you should know that these are the options available were here. So if you are a typographic geek, you can use these stylistic sets or options over here. So that is all about this tax tool. And, um, I think you will understand what it does and how you can change your four style sizes. Different spacing between lines. Different spacing between paragraphs, how it is going to behave. It's auto height. Weird things like their tax alignment inside the container or decks alignment off the text itself. So that is all about Dex layers. If you have any suggestions or any improvements in the course, you can always commend, and you can always discuss with me. If you don't understand anything, you can ask me questions. I hope you have enjoyed this lesson. Let's move on to the next lesson 8. Using Pen tool to make shapes: in this video, we're going to learn about Sigma's Ben tool and how we can create different icons of shapes or different types of things using pen tool. So this is basically for trying so you can press B and here we have the span and just click and dragged withdraw straight lines like this, and we're going back toe the first one to have this shape it was ship, and you can see right now it shows we have stroke. And this is the stroke wit. So this is click on done. And this is your shape right now you can expand it. You can change its thickness line thickness. You can also add fill, color, fill. Do it like this. Okay, so if you don't have any color fill, you can double click inside this shape on this ship, like over here, and we're again back in the pen tool more so you can see where here we have been. This is actually Ben Tool and this is Spain buckets. So if you click on pain bucket and you can click over here, it is again do the same thing which we did to fill this ship and If you go to this Bendel, it is actually going toe bend these corners. So if you click on it, you can see Now we have upended corner over here like this. So we're here like this over here, like this Command or control z to go back so you can see now we have bended corners. So if you want to change any corner over here, you can again click over here. Once you have selected this and it's going to go back to the shape it waas. So let's go back to the span Tool. Let's go back to the move tool. So we're going to click this move and we're We can also move this our, for example, we have this Joffe or something like that. We can also move these handles toe have the shape bending to our needs, for example, like this. And, um if we want to move, does just this handle, for example, I want this handle. I don't want this handled toe move like this so you can see right now if we move it in this direction, it is moving. But if I try to move it in destruction, it is going to move along with this second handle. So you are going to press and hold Archy Archer option key to move this around without moving the 2nd 1 you can see or hear like this, for example. I want to have something straight like this you can see now again, If we want to do same, I can go back with here like this again. If I try to move this handle, it is going to move. Bought off them. So this is how you can move these handles around. You can option hold option or are to move the single one. You can also move them around this whole handle. So this is one anchor point so I can move it around anywhere I want. I can create any kind off factors like this. I can remove the stroke. I can add different effects like shadow and everything. Anything I want. Oh, I can change its follicular. And that is the mean thing you can do with Bendel. So let's delete this whole vector and what I'm going to do is for example, I have this ship, for example. I have lips. So I have I heard this Ellipse. Okay, So if I want to go into battle mood and want to change something in this ellipse, I'm going to double click on it. And you can see now we are again in this ah vector moored. So we have this pen to lower here. And if I want to add more anchor points over here, So if I want where one over here, let's press escape. And one, we're here Press escape because we're just adding and goodbye solo Hit one over here, Skip. And one over here and the skip. Now I'm going to go to move, Tool, and I'm going to move them around, for example, like this one, I'm going to move it inside. Similarly, this one Oops. I'm going to go back to move, Tool. It's like this, like this. You can see what I'm trying to make over here. So in this way, you can create different icons if you want to. For example, if I go back to handle, I can create and others line over here. Move it like this. This, this, like this. Like this over here, like this. So here we go and let's move to the field goal again. Go to the bucket tool and I'm going to select other color. And I'm going to fill this one too. So one more thing, which I think I forgot over here, if you want to have something curved, for example, if you have a pen tool, you can click over here and don't leave your most just drag and you will have occurred angle. So if you want to have occurred angle, you can do something like this. So whenever you want a card girl angle, you can some do something like this. So these are the basics off this plan to you can create icons. I don't recommend that you keep on creating different icons using the spent all. It is a waste off time I think you can use. You should use already build icon that are standard for any US or android device. So are on your websites. You can also purchase premium icons. It is a really waste off time if you keep on creating icons using this pen tool. Eso won. I gone. I mostly cleared with my students. Is this this shape like over here? This one. So let's move this first we're going to build a rectangle like this, and we will have rounded corners off 50 like this. Then we're going to use our pan tool and create something that's double click on it. So we have no handles over here. Now, create Pento. You spend tool, and we will have going to add a small ad over here. Hopes What is happening? Mm, like this. Like this. This. Okay, so we have created an ad over here. Let's fill it with the same color. So right now you can see here we have corner radius set to 50. So I'm going to use it to to have something like that. Let's use it. Okay, So let's click. Click Escape, Breast Escape key. And this is how we have a very nice icon off speech bubble. You can see speech, but well, let's use discolor. So this is how you can create and manipulate different shapes and different, different. You can create different simple icons using fig MMA. I think that is all. I don't want you to create a very unique icon over here, but I would really add some exercise where you can create something like that and get familiar with this mental. I hope you have enjoyed using this ban tool, and if you have any questions, you can always ask me, Let's move on to the next lesson. 9. Place Image tool Update: in this video, we're going to look at how to use place, image, tool and Sigma and maybe few mortals. Now go over here and slack place, image or command ship ke or controlled ship care. And you can see I am going to select all these different images or here. So let's like this one. This one I'm pressing or holding Commander Control Key to have multiple selections. Looks like this one, this one. And let's select, um, this one and I'm going to press on open so you can see now I have five images and just keep on dragging like this wherever you want to place something like this and Sigma is actually filling up everything by its own. I really love this feature. Just keep on dragging and that is all. So you can see this is how I can create on image colledge like this. This is really cool feature And one more thing. So this is how you can place images. And if you have something, for example, within a frame, for example, I have a lips, um, different every dollars off different people and for example, I have like this And now if I want to place image. And, uh, let's select any of these again. Four one, Duke 34 Really good. Really, really cool feature. So you can just drag and drop anything you want on. This is a really cool feature. So we're goingto go again by placing all here like this. 1234 Okay, so let's leave this one. Let's do it. This one registry this one and focus on this one. Now, if you click on this or here, you can see on the right. We have Phil as image, and it shows 100% so you can reduce the opacity over here. This is opacity. And if you click over here, you can see we have different options. For example, we can change the exposure or we can reduce exposure. We can increase the contrast, and we can increase the saturation, which is going to enhance our colors temperature. This is, uh, warm temperature. There's a school temperature. This is a bit controls off photograph E. So if you want toe go back, you can go back, and it is going to click on this. 0% are the normal settings like this. Let's make it a little bit bigger like this. So I use shift key and use this adult to expand it. Okay, so if you want to change the image, you can again click over here and for examples like this image like this. And now you can see here we have Phil options. So these are the options which shows that how it is going to fill this object. So this is filled. It is going to fill the whole object. This is fit. And if you click on foot, you can see it is clipped inside, and you can also you can see this is not because it is not a rounded picture or image. So it is not fitting inside it. So Okay, so we're going to use Phil right now, and you can also use crop. So crop is going to help you change on the size off this. And you can also change the placement off this image. For example, this image we're here, and you can also change size off the image press and hold shift. And for example, I want toe have something like this. Okay, so you can also move the image around like this X close this and you can see here we have the image where we wanted it. So again, we're going to go to image. This is crop. So in crop you can drop the image. For example, I want to have something over here like this and let's go out and you can see this is actually cropping damage. So it is basically changing the frame off the image. And if you want to again goto crop, this is actually the crop area. This blue section we're here. If you click this image behind you can see we have different adults. These are black. So if you want to change the size off the image behind this crop, you can do that by like this music like this. So this is a really good tool, so you can also rotate it. But I think that's not going to help Over here. It is going to deform this image, so that is all. So this is a really nice feature off this crop off the image. Then you can use style so tile is actually going toe. Help us style this image. So actually, I'm reducing the size of this image because we have to see the tile effect. So let's move it like this and X click over here. So this is how it is styling over image. So these are few options with image feels you can also hide the image feel you can also move it. You can also add the image field from over here. Do so if you go to image, it is going to tell you that Select an image. So you construct any image from here. And these are different options. How it is going to fit, fill, fit actually make Try to use 100% of the image and try to fitted inside this container. For example, if we have a container off like this one and we want to fill it with an image so you can click if you want to fill something with image, you can click over here it's filled and you can click over here this and go to solid, solid and move to image. So here we have it shows that try to choose an image over here so you can choose any image , for example, like looks like this one. Okay, so now you can see it is filled. And if I try to fret, you can see it is trying to fit the whole image into this rectangle. Now it is leaving something on the right and the left. So if I tried to reduce the size Okay, so this is a perfect fit. If I want to crop it, you can see I can crop this container. And I can also move this image around like this. So I hope you haven't destroyed this image. Phil are placing your image and how you can use this place. Image tool within Sigma. I hope you have enjoyed this lesson. Let's move on to the next lesson. 10. Hand, Comment Pencil Tool: This is the last part off your figment tools, and I'm going to share with you some of the tools we left over here. For example, this pencil tool. Then we have this hand tool and disk a mental, although these are not very helpful. But if you click on this pencil tool, you can see you can draw whatever you like. So if you have a tablet or Ben tabler device, you can easily sign, or here you can easily pinpoint design areas like this. Over here, you can use whatever you want. You can draw freely on this screen. These are almost my signatures were here, and this is all about pencil tool, so you don't need to worry about it. So if you want to change, you can double click, and you will have different options like over here like this, and you can also increase its skip so you can see these are almost my signatures. Not very perfect. But if I had a pen tablet, which I'm going to buy in near future Aiken, use something like this so I can draw factors. Whatever I want, I can draw some. You can see cartoons or something like that. So this is all about this pencil to then we have this handle which is going to move anything, anywhere you want. So let's move back to move Tool, which is V And if you want to quickly go to this hand to you can press or hold your space bar like this and now you can move around. So this is the short cut key for this hand tool press space bar, and you can move on your canvas. Similarly, we have this comment tool and you can add your command show here. This is for basically for example, I love you're sick natures. I'm going to add a smiley or here Smoochy and most so you can see in this comment section I'm seeing that one command from me and home address. And you can see this is my name in few seconds. I love you signatures. So if you have a whole team, they can reply back and they can say that really, or something like that. Whatever you they want toe command over here. So this is you can say, a bit off collaboration tool for collaborating on your design and improving it So these are the rest of the tools over here. A few more things which I think I forgot, is that if you go over here on rectangle, for example, I have drawn one rectangle And if I can draw ellipse over here and if I overlap these, I can slack both off them both off them. I'm selecting them by clicking shift, shift, holding down shift and clicking on both of them. So let's dilute this one. Also, this one also this one. So here we have two different shapes. And if I want to combine them, you can see we have different options over here. Union selection. So now they are combined and they are one shape over here like this. Still, you can address them. You can click over here, double click, and you will have to shapes in the union. You can move them around, for example. I want to have it here. And I, for example, I wanted duplicate it. I want to have another shape like this. I actually pressed and hold my archer option key to duplicate these. So click on this. It's like this press and hold Arden option. You will have the Bellerose and you can have something like this. So you can see this is a union off this ship. Similarly, we can have subject selection. So now you can see all the top ellipses they subtracted from this rectangle over here. Then we have this excludes selections or whatever is, um, overlapped. It is going to be excluded. So, for example, the overlapping areas, they're going to be removed. You can see where Here. So you can see now these overlapping areas have been removed. To understand this intersect selection, we're going to have new shapes. So let's delete this one. We have one rectangle over here. 2nd 1 more here, which is going to be a bit darker. That's like boat off them. Inspect intersect. So Intersect is actually whatever is common inside them and everything is removed. So the common area is going to be at the end and everything is going to be removed. So this is how this, uh, this combination or this union tool actually works. If you have any questions or didn't understand anything, you can always ask me. Let's move on to the next lesson. 11. Fill Colors and using Gradients in Figma: in this video. We're going to look at this fellow here, and we're going to explore different ways to use this field. How you can use different colors like solar, linear rainier, angular diamond, an image. And we're not going to look at this image we have already discussed Stared. So, um, let's start by creating a rectangle over here and let's create one ellipse over here. So I'm holding shift. Let's use some 300 corners like 16. Or here and now you can see that the file Phyllis C. Four c four c four. This is its capacity. How much the colors should be transparent or north, something like that. So if I try to use, for example, like this color over here and I try to add another field and I want it to be, um, some ingredients like this and let's change the color for this one, so the bottom one is going to be a killer. Next, use this color, or now you can see the top one is actually a greedy int. So if I tried, when I click over here, it says linear. So here we have solid color than we have linear Kenya has two points to off these points over here, which is actually going to show where the sculler is going to stop and start. So this color is going to start from here. If you want to add one more, you can click over here like this and you can use some color like this. For example, if you want toe, change it and you also want to change the top over here, for example, like this and you want the bottom to be very dark. You can use something like this. Now you can see we're using one linear ingredient on top off this blue colors. If you want to highlight this even see, we try to increase its capacity. It is going to show more beneath this Grady in. So this is kind off like a C green kind of radiant. And you can always you can also hide and show. For example, you have feel like this. I can add as many fills I want, for example, I want to add a radio. Radio is going to be in destruction. So for radiant we're going to use this one. So that's I used radial and you can see now it has just regular and then it has vital er or transparency on one side. So if you click over here, you can see we have two settings. One is this color. One is this capacity. So for every point off colors, you can have two things. For example, if I try to increase the opacity, you can see now we have Ah, radial color with the boundary is actually a bit transparent and inside is a pick. So you can create many effects like this. For example, if I try to use something like this and I try to use white color over here, you can see we have this kind off effect. You can see so outside is white, which is blending with this background. And inside is this killer so you can have more stops. For example, if you want to change the color on this section over here, for example, like this'll, you can see now what is happening over here. Similarly, you can change the opacity off this one toe. So now I'm trying toe move circulars and there spacing. Let's dilute this one. So I am. I have selected this oneness has boundary press delete, and we have one color gone. Now you can see this is looking good. Similarly, for this one, we are going to remove the real one. We're going to use linear now. A lot of things you can go over here. For example, if you click on this linear, you can change the direction off this creedy int like this. So if I try to change the direction, I can change the direction like this press cross and you can see here we have another. So what I'm not going to do is I'm going to remove this excuse. Um, dark over here, Onda, Let's increase the opacity off this section or here. Let's try toe. Move it like this. Next. Move the colors around, like this. Exchange this one toe something like this that drag it out a bit more. So we have less color for this drop or this, uh, point over here. So we have three points to the killer points. So this is you can create download button like that and white color over here. Similarly, you can do the same for here. If you want to create something for these, Uh these text over here, you can do the same. So exchange like this. So now you can see we have a lot of options. You can add as many feels a warm even in the text over here, even for these shapes. Over here you can act 234 Whatever affect you want to create, you can create a similarly for radio. You can have these kind of things for angular. Mostly we don't need this. But maybe if you want to use, you can see you're here. This is and will it? Actually, it creates something like this, which we mostly don't need. Maybe in some car interferes or something like that, we might need your diamond is going to have something like this. And the last one is image. We have already discussed this. So these are different color options thes are different. Phil options over here. You can also create styles for this feel. For example, I have this a greedy int over here. I'm going to click over here and use the screen, Ian, and save it inside ingredient second or something like that. So if I try to use any of the rectangle I can just click over here and press this and this is going to be applied to this rectangle over here. So this is all about colors and different ingredients and how you can use different creedy INTs, different effects, for example, this transparent fund. You can have it blend with the background over here to use the same color as the background . You can see if we move it inside colored rectangle over here, it is going to show its boundary, but on a white background, it is not going to show. So that is all about colors. If you have any questions you want to ask me, you can always ask me. Let's move on to the next lesson. 12. Project ► Gradient Buttons: Now you have learned all about radiance, Phil colors Everything. Now is the time for your assignment on your assignment is that you have to create a linear burden. Lini Ingredient Burden Like this I have created and always mention your name that Grady in Britain by Sarah by Julius or Whatever your name is, because it's easier for me to, you know, feedback. Give feedback so it's easier for me to give feedback. So Gedeon Britain's create two buttons with any colors you like. They must have some colors that the text is visible on them. So don't try toe create a burden. The were the text is difficult to read. So this is your next assignment. Brilliant burdens by you. So I'm looking forward to seeing this assignment. You can see this on the screen, right? Noise? I there is no explanation needed, so make sure you create them and I'm reading for your assignment. So start reading now. 13. Using Masks in Figma: in this video, we're going to learn about Sigma and how we use different mosques and masking techniques and sigma. So masking is basically you have a container like you can see this rectangle. This could be my container and all the elements. For example, images or buttons. They are going to be inside this container. So if something's is bigger than this container, it is going to cut off. So it is not going to show outside off this container. So to better understand this example, we're going to drag and drop an image or here. So let's get this image and drop it over here. So this is very big. So I'm going to hold my ship key and just have some sizing over here. You can also quickly size using something like this or here. So now we have this image, and here we have the container. So containment is at the back and image is at the front to create a mosque. We're going to select both of them, so let's select and drag some selection around them. So both are selected and we're going to press art control, control all M or command option and to create a mosque. So you can see now we have created the mosque successfully. Now, if you look at it over here so you can see this is our image. This is our rectangle. This is our mosque. So if you try to select this container and move it around, you can see it is going to reveal the portion off the image we are actually using. We are actually aligning this rectangle, so it is just like a portal. You can see it is a border where you can see the other dimensions foods anyhow, So this is how this images. So if you want to expand this image, you have to select this image and you have to skill it like this and we're going to play set over here like that. So if you work this rectangle or this container or this this actually mosque toe, have some roundness. Let's create 80 wrongness. So we have very nice this next, like this one. Oops. So we have this mosque, this one, so we're going to select both off them to move them around like this. And if we want a group, we can group them inside a group toe have this simple group so we don't want to see very big selection all the time. So this is how you create mosques. So now you are goingto added a mosque. So we have this mosque. You have already seen that when it's like this one, I can change the size off it like this. I can change the position off the mosque and also if I want to change the size of the image over here. So if I want Toby to make it smaller, I'm going to select this image and I am going toe. Make it smaller, like this, like this. Similarly, if I want to change these corners, I'm going to use it this time. So this is how actually you create mosques are have container to create different kind of designs, where you are going to hide the rest off the portion now, Similarly, you can have other elements to in the mosque. So if I have a burden for example, like this one, let's create a button quickly button. So we have this button, there's group it. Come on, G, Bt in. And I wanted to be inside this rectangle or inside this container. So I want to have my button inside this mosque. So I'm going to drag it over here and drop it over here just above this rectangle. So now you can see this addle extending extending from this image, including this button and this rectangle. So it shows that these are the things that are inside this container. So now you can see I cannot see my button because it is outside of the container. It is just like a middle portal. You can see the other side. But if it if something is outside of that mirrors, you can view it, so you have to move it. So I'm trying to move it over here. So you have to move it inside this container like this. And now you can see it is behind this image. So I'm going to move it up Now. You can see it is inside this mosque and it is inside this container. This this mosque must area. So no. Should I want to move it around, For example, I want toe hide the right side off this button. I can do that like this. This the other end off this burden is outside my container, so I cannot view it. So this is actually the technique technique off masking and, ah, this is going to be very helpful in your design. I mostly use it whenever I import and images. I use a rectangle toe mask it so I can easily control its position. It's Ilya what? I want to show what I want to hide. So this is really important concept. I hope you have understood this masking concept and how to use it and how to have a lot of elements inside a mosque. Let's move on to the next lesson. 14. Project ► Masking Images your Introduction: you have already learned how mosque things. So now is the time for your assignment. So now I'm going to give you an assignment, toe, mosque and object or any image, and you are going to create some introductory text about yourself that I have four cares or I love to watch enemy cartoons or I am very busy or I am a nurse by profession or whatever is on your mind. So whatever are your hobbies or you do or you your love is about, you have to share it with me and use your own image. It is better that we introduce ourselves. So let me show you my skin what I have created. And I'm going to also going to give you some off the tips on how to create the's masking. And what are the problems that you can get. So let's done toe over screens now. Now you can see here I have created two screens. Um, this is a custom mosque. I have created a shape over here, and I have inserted my image inside, and they are inside a group. It's always better that you group your group, your elements that have been masked. Otherwise, the stigma is going to keep on adding things in them. So whenever you start with this, you can create something like this. You can use an ellipse over here, draw an ellipse with holding shift, drag your image inside it. And like this, for example, let me draw on drag this you can see No, I have an image every tar on my lips. I am going to select both off them ellipses at the bottom mosque. And I'm going to move this inside this here like this. So this is easy. And always try toe, create a group, so it's easier toe. Manage them. So this is one day now. If you try to create a shape with the pendulum, for example, I try to create a shape like this, and I want to insert an image inside. There is a trick you can see over here. There is no Phil are over here, so try to add Phil first. Otherwise, your image is not going to fill this. So let's let's bring this again. And here we have it. Let's like water off them mosque, and now you can see I have created a very custom mosque with the custom shape over here. So always remember that Try to fill your vector shape before doing something like that. So this is the example. So start with your name. Welcome, John or Sarah or whatever your name is and then to figure class and then something about you. Like I watch a lot of enemy gardens. Mostly lately re superpowers love to explore all kind of designs. Even I love to explore into your design or any kind of design. Three d or I love toe see them wash them. And I have four kids and freelancing from past 10 years. This is my simple introduction, and you can have a button very uses. Let's start or be humble. Always whatever you think is the key word to your life. So this is the assignment for masking. So make sure you created I'm going toe keep on looking for your assignment. Okay? So how to submit this assignment? You have to click this art board. You have to go to export. Click over here, and this is over here. Export iPhone Bless. So, no, I'm going to export it on the desktop. And this is the image you are goingto upload. So Okay, so this is the image. So this is You can see this is the image, and this is you have to upload and as an assignment, so I can easily relate. Okay, so I'm looking forward to your assignment. Do submitted. Let's start this mosque in assignment. No. 15. Creating reusable Styles: in this video, we're going to talk about it. Must tiles that are going to be our colors, trials and textiles which you can use again and again and easy re apply to others text elements or other buttons or anything you have. So we can also create different effects. So let me show you by doing something so you can see I have used were here four colors. So if I select this rectangle, this is a fill color So how I can use it again and again So I'm going toe click over here This is called style and I'm going to click over here, create style So once I have this'll, I can rename it like steel I'm blue something like that and I'm going to have a style here So if I hover on it it shows still blue. Similarly, for these I'm going to create different names Second re orange color Then we have this primary primary blue dark and let's create another one Primary blue. So now you can see we have four color strives overhead. These are our team style. So these are not local to this document. So these are our local design styles that we can apply in this document. So this is our project right now. This is practice page, actually. So we have four colas trial, so you can see how we can apply them Easy. Let's let me show you. So I'm greeting rectangle also lips over here and I'm going to go to rather than going to fill I can I am going to goto. There are two ways, actually So go to style and select any colors you want. For example, I want this color similarly. For example, I'm creating a burden. So I have to strict angle over here. This is a nice but and everything apply to it. It exists. And I wanted to be like this. So this is very easy for me. I don't want to remember this and you can see here we have primary blue dark. So the main thing is reusability, for example, I have applied the same color. So this rectangle like this So what if I want to change the color and I want it to be another shade off this blue. So what I can do over here is I'm going to click over here and then I'm going to click on this edit style. And here we have Option two chain discover, for example. I wanted Toby, Uh, let's see this cover. So now you can see our primary Blue dark is totally different. Okay, so go over here. You can also go it from you can also go toe changes from over here, so disliked this frame and go to local styles and you can click on the settings and let's change it back to something very dark like this. So here we have the color, size and how we can edit them and how we can reapply them and what effect it will have. So, for example, if I want it to be some other colors So if I click over here, you can see it shows me all these colors. I cannot addict or change any color. I'm not open toe all the colors. So if I want to go back so I have to click over here d dead style. And now you can see I have my fill back so I can change its color to anything, and it is not attached toe. These two elements are these two colors trials. Now we're going to learn about textiles. So here you can see I have this heading. I have this text paragraph. It is regular. 18 pigs, Ills Roboto, die face. And this is Roberta Light 64 pictures. I can increase the size of 72 if I want. Oh, and this is my heading now. I can also create the same style You can seethe same button over here. Back over here. And I'm going to have it heading big or heading 72. That would be easy for me to remember. Similarly, over here, I'm going to have it. Ah, better graph 18. So it means 18 pigs is the paragraph size and you can see I have to textiles over here. So whenever I want a new text over here, for example, I'm typing something being so I wanted to be a heading. So I'm going to just go over here, click on this and just slacked my hiding 72 and I'm going toe have all the settings I did over here. Now, if you want to edit this style, for example, I have already created a style and I want to change it so thing is that you have toe klik anywhere over here, or you can just disliked anything which is easier way. And you can just click on this and I'm going to switch to, let's say black and I'm going to have 64. Let's use some other for, for example, like this one. This is a better one, and I think it doesn't have a backside. So let's use heavy. So, um, board. So this is looking good. So you can see this is how you change your style so you can go outside off this bone. Rio, you can select this one. Click this one, goto this icon. So this is a bit, uh, you can see a bit larger road to travel. I like it that way. So I just disliked it and go from these local style and change it over here very similar to these killers And these headings or this textiles. You can also create other styles. For example, I want tohave. Let's detach it, and I'm going to create linear ingredient. Now it's like this and I'm going to change the color to this one going toe. Increase the opacity. So no, we have created over here and select disc radiant and again I'm going to go to styles and let's beard, ingredient or here. So I have my greedy in style similarly like this. So if you want to apply to this one, I'm going to click over here and this is my bottom with ingredient. And let's add some more things over here. For example, I want let's detach it and I want some effects. For example, I want shadows over here, so I am going to have drop shadow, and that is going to be a bit darker. Drop shadow that's used something like this and I'm going toe have blood off 50. Let's reduce it to 30. Exclusive to 25 35 Looking good. Let's move it down a bit. 6 18 Now we have created the drop shadow. Let's clear style for it. We have been too good style and click on this same plus icon to create a style. So this is our, ah, drop shadow Four buttons, something like that. So we have another style. So if we go outside of the scandals and click over here, you can see no, we have a fact styles color, size and textiles. So these are different kind of styles you can try out over here, and you can reapply them to any I think you want. For example, I go to this effects and just like this and we have this shadow, I don't want to remember the values off this shadow again and again. So this is a very good concept in any and powerful concept of stigma. And I really love how they have used these effects styles, colors, trials and textile local textiles separately. So I hope you have understood the concept off style and how to reuse them. Let's move on to the next lesson. 16. Effects panel in Figma App: in this video, we're going to learn different effects off your design and how you can use thes thesis effects panel on the right side whenever you're designing using figment. So four things we're going to create one is this very light Settle shadow around it, very small shadow around it. Then we have another one, which is going to be a very soft expended shadow. Then we have this three D effect, and we have this inset effect, the same thing I have done when I bought my first you a design course with photo shop, So I'm doing it in fig motto. So these are the four effects we're going to create. So first off, I'm going to remove all these defects from here to show you where I started, actually. So, um so here we have simple elements. Simple white. Now you can see one thing is common. I have a light colored background. This is very important. Whenever you are trying to have some shadow, you have to have some colored light, bill colored background. This is going to work a lot better now. The first thing we are going to do is we are going toe create this shadow over here, which is going to be a very you can see very expanded, very blurred shadow. So press this passport and we have a simple drop shadow which looks likes this. This doesn't look very good, so we're going to improve it. So for the options were going toe, get over here. So we have these options X value the movement off shadow in the right side. So it is going to move for try to press five over here. You can see it is moving in. Destruction value is top to bottom. So if you want to move to the bottom, this is how you can do that. So increase the vie value to move the shadow at the bottom. If you want to, you move the other side. You're going to use minus five like this and minus 15 like this. So that's cool back. Okay, so blood is how much blurred it must be. So it is going to have some soft edges. So if you try to increase the blood value, it is going toe become more softer. So the first setting we're going to do is I'm going to use X one. So I'm going to move a little bit or here that I'm going to use the blood 32. So I wanted to be very soft as shadow and the viral. You will be it. So I want to move it a bit down. So I want less shadow on the top. A bit more over here. Then I'm going to use 20%. I don't want it to be very, um hard shadows. So I want to make it soft. I'm reducing the opacity 20%. Now you can see it is looking great. Now, the last thing you can do is we're going to change this color from black. So the same color off this background. So I'm going to click over here, and I am going to move it around over here. Now you can see again when I have selected the color It went again 200%. So I'm going to use it to 30% Now. You can see this is looking really good. Soft shadow. I'm going to give you assignments to make something like this. Very nice. Very clean, very creative. You can see over here now, similarly for this one, we're going to use some other settings. So again we're going to go to drop shadow. You can see we have more options in a shadow layer, Blurred background blur. But we're right now going with drop shadow and in a shadow is going to be next. So now we are going toe Jane the settings so x will be zero blood will before and the vie value will be survival will be too. So we want it very close to our earlier and this is going to be 15%. And the killer we are going to use Lex use this color and I'm going to reduce its capacity to 20% like this. So this this is a little bit different color for the from the background, a bit bluish. This is a bit greenish blue, but it looked at it. It is looking create on the top off this background. So this is very soft. Close settle shadow. If you want toe change the color a bit. Want darker shadow? You can go in this darker area. If you want some lighter shadow or light based effect, you can go in this section. We're here. You can see If you look closely on the left, you can see light, dark, light, dark, light, dark. So I'm going to go with this one for him. Now, we're going to go for this inside of inset effect. So clicking this and if we click on effects, we want toe have to actually effects. One is going to be in a shadow. So once we use in a shadow, you can see it already has an inside of insect effect not to. In Ha's this effect, I'm going to zoom in to show you the difference. So this is actually your inside, and, uh, it's called the effects. And I can use 20% over here, and I'm going to increase it down a little bit. Excuse. Three north, down a bit up. And now I'm going to use another effect, which is going to be my drop shadow. Now, this drop shadow is not going to be dark over here. When something is breast, there will be a light shadow on this. Over here in this area, light is going to fall on this bottom over here. Let me show you what I mean. So we are going to have a shadow blood. We're going to reduce the blur to zero because we don't want it to blur. Why is going to be fun? We wanted to be just along with this lines. Or here let me zoom in a bit more. You can see this great line or here. No, we don't want this to be great. We are going to use a white line over here Now. If you zoom in, you can see there is a white line. Let's zoom out a bit. There is a white line or here. So let me show you. Let's increases capacity 200% because you cannot view it. Now you can see that we have a wide line over here which is going toe improve our inside effect. So here we have a perfect in set button. We have used some off in a shadow. You can also use this four and we have one drop shadow, which is going to be a white light over here on this. A. So this is going to complete your insight effect now, coming to this treaty effect treaty is very simple. Let's create an effect. Drop shadow. It will be and we're going to reduce the blur 20 Now you can see this becomes solid. No, we are going to use the same color at this button and we're going toe move to this darker section or here. So let's use, for example, this one that is all that is all we need for a three D burden. You can see if you want to increase its ah, treaty nous or its shadow, you can increase for example, go to six. You can see now it looks a bit more treaty. So this is how you use different effects when you try to be a different shadows on insects effect when you are trying to use fig MMA. Now we're going to study the last two effects which are the slayer blur and background. If you click on their blood, you can see this holier is actually blurred and you can change the blood citing for example , 15 or something like that. So if you want to blur layer, it will be something like this, which is very easy, very easy to understand the concept of this Lear blood. Now the last thing is, we're going to study the background blood. Now, for example, I want this item and I want everything on top. If it, for example, I have a rectangle over here and it is hiding this whole screen, for example. This is the whole screen, so I'm going to add the effect of Bagram Blur. Now you can see nothing is blurred. So once you try toe, reduce the opacity off your fill over here, for example, I want to be 50%. You can see the background behind this regular is actually blurred. So if you want to change the blood setting, you can increase the blood. You can see now it is more blurred and, um, not visible, actually. So if you try to use the white color, our hair, something like this, you can see this is actually background blur. So if you try to put some text over here, um, I like it a lot. So it is actually going back. I wanted to be at the top of this background, something like this. So you can see whenever I try to move this this is going toe, have a blurred effect. This is going to if you try to move it or scroll it. It will have some effect like this. So this effect was first seen in IOS devices? I guess so. This is actually how you can use background. Don't forget to reduce the opacity off your fill color over here because it is not going to work without that. So if you have some setting like this, it is not going to work. So try to use 80% 70% 50% or whatever looks good to you. So these are all the effects I have already showed you. If you have problems understanding these effects to ask me questions and I hope to see you soon in the next lesson, till then, take your and by 17. Project ► Using Layer Effects: now, Your next assignment is that you are going to create these three buttons with the shadow fact with three D effect with insect or pressed effect. And I want you to mention your name at the top. So start creating this assignment. I'm going to give you some hands. These are my settings. If you goto this shadow, you can see these are my setting for shadow 0 15 Blood value is four. Spread is one dark blue color for the same. This blue 40% is the opacity off the shadow. Then we have this one. This is actually inside this leader and so drop shadows. You 05 is the vie value. So make it a bit a little bit down, and then we have the dark green color 100% for this one, we have to actually drop shadows. One is a 10 line white line at the bottom, which I've already taught you. This one and in the shadow is 06 blur. Four is of I value and dark orange color for the shadow inside the breast effect and 100% it is its capacity. So I am looking forward. So seeing this assignment, so start reading it now 18. Components in Figma: in this really of we're going to talk about a very important concept, which is called components. Now. Components are basically your design elements that you can reuse them. You can change some off the their properties, and still you can use them. So let me share with you what is basically the concept so component can be group off any design elements, your tax background, your Parton's, your guards, your you were designed headers or anything you have. So it is basically group off two or three elements, for example. We are going to create a button over here, and I'm going to use things Brugler over here. And once we have selected this here we have this around this corner roundness. So I'm going to use it over here. So we have a nice round but annoyed head. Now let's add next over here. So Presti and we are going to have some text like down Lord Don't know, best escape and let's align it in the middle. A little bit up over here, Jeanne, the color white. So I am changing the physical er off the stacks over here right now. And let's add on ed over here. So I have already talked to some off the shocker keys. So I'm going to use control or command backslash toe, get my search, and I'm going toe dive icon. And here we have four awesome icons. So this is actually Blufgan. So I'm going toe die arrow. So you can see we have a lot of annals over here, So I'm going to use No, she was this one. So this is the air over here, and right now you can see we have this vector of ahead and change its with 22.5. Okay, so, no, it is looking good. That's changes color to white and let's make it a bit bigger. So I'm going to press this country in constrained proportion. So I'm going toe go with size, like 36. Something like that. This looks great. Okay, so we have some of the elements over here. Our I go on our dexter and our background. Now, you can also apply some effects. If you want some drop shirt over here, you can have some drop shadow like this. So 8% blood x value the movement off this shadow. And here is the shadow on. Why would mean that it is going to go down from the rear at the bottom of the Lear. So here we have a very nice button. Now, right now, we are going to group them. So let's group control or command G. But if you don't want to grope them, that is good too. So just like all of the elements and we are going toe press command all K or control all K for creating a component. So let's create a component. Now you can see as so nice have I have created this component. You can see the eye gone over here is totally changed. So this is as basically a master component Master component is actually our main design element that is in its original form. So let's duplicate this one so you can press. Come on D. So now you can see I have a duplicate element at the top offered, So I have dragged it over here. Now you can see the I gone off. The 2nd 1 component to is different, although it is the same as component one. But now it is an instance. So this is you can see or hear on the right side of this called This is called instance. And if I click over here, there's no instance. Over here it is. It is saying component. So if I click over here again, you can see we have this small panel area over here instead. Component one. So it is an instant instance off component one. So it is just like if you are a programmer, this this is the concept off a parent and child In Javascript and Java, you make different classes and the same properties. So it is just like a parent and child. So now you can see this child has all the properties office parents. But I think that is not good. So if I want to change, for example, the color like this one, I can do that. Still, you can see it is similar in everything like its father or experiment. So this is the concept off components. So we have this component. So once we complete create any component, we cannot revert back. So this component is going to be available in this assets panel over here so you can see this practice practice frame and we have this component of one so you can also rename it. For example, I'm going toe rename it Bt and download. So I'm going to rename it BD en download. So now if we go toe assets, you can see it. So shows pretty and download and I can drag and drop it and place it anywhere I born So you can keep on creating a lot off different assets and components like this. But make sure you create them once you are finalized with their design because it will be difficult. You have toe change the master component to get the change is done. What if you want to create a new company so I don't want this instance? I want a new button similar like this one. But I wanted to be another component, so I'm going to right click over here and I'm going toe Use this command Detach instance. So now you can see if I go to layers panel it is again off frame so you can see this frame I got over here component toe So this is actually on group. If you click on on group, it is going to get out off the group because we created the group in the first place. So once we have this, I can change whatever I want to. For example, I want different corners. So I have clicked over here, and I'm going to use 16 over here and 16 or hair and, uh, zeal. And, you know, over here, for example, let's say I want a button like this one so I can create another component. And I think this is going to be and again master component. So make sure once you create a master component, keep the copies on your design and use this master component and move it to some other page . For example, I'm going to create another bitch named Style guide. So once I go back to my page, I'm going toe get both off these. Let's create a copy. I am actually pressing and holding Arche and option key toe drag and create a copy. So I'm going toe flick pulled off them Control Command X, and I'm going to go back in the style guide and district over here. So we have component component over here so you can rename them down Lord Flat or something like that and, um then we're going to go back. So once you have over here and you want something to have changed something, for example, I accidentally Jane the color toe this regular and I really don't like and I don't want it to be ready. And I want to go back toe the way it was before. So I'm going to kick over here. This is God reset. Instance. Once I'm going to click over here, you can see it says reset overrides. So I actually overheard in the color only. So if I want override, I can override tax too. So I'm going to type. I don't download now. So now if you click over here and click on this he said overrides. I'm going toe reset everything. So text is going to back the 1st 1 default. But an icon everything is reset toe the master component. Similarly, if you want to address something or change something into the master component, you can click over here, go toe master component and it is going to go to another page. Well, actually, the master component is residing, so also, you can add some description over here. Whatever you want on bond. That is all. That is what the components are and the instances are and how you can go toe master component, how you can reset components. These are the 43 or four things how, actually these components work. And we will talk about more of these components about this constraint in the next lesson because I think I don't want it to be ready long. So that is all. If you have any questions to ask me, let's move on to the next lesson. 19. Using Constraints with Components: now in this lesson, we're going to go into a bit more detail about this constraints over here. So country constraints are basically limitations. You can apply on a group or a component, So let me share with you how you can do that. So, for example, we have created these components in the previous lesson. And let's move toe there, master component over here. So master component is actually the one that you are going to change and apply these constraints or here. So once you click on this icon to expand it, you can see we will have constraints over here for each element over here. So, like this this ad over here, for example, let me show you. Actually, if I try to expand it, let's expand this and you can see how this is expanding. I don't want to extend that this button experiment like this. So this text is not in the middle. This is actually stretched, and this is really wrong. So let's go back. Controller Kamanzi And we want I'm actually develop clicking. So once you click, you're going to slack. This one you can idol press control or command toe directly slack this one, so you don't have to double click or click twice or tries to go to this element. Just click. I hold your controller command key and kick over him. So now you can see we have sat over here scale and scale in both directions. So it is going to scale. We don't want it to be scaled. So we're going to fix it to the right over here, right corner, and so the top. So it is going to be fixed over here. We don't want this button toe expand in destruction. We just wanted to be expanding in the horizontal direction, nor the vertical one. So this is said so. If I tried toe expand it, you can see No, it is. It is fixed in this corner that is scored. Now you can see this. This dollar noise not fixed. So we're going to fix this problem. So control or hold, command your control and click over here, and we're going to pin it on the left. And let's use this center. Uh, they're left and center. That is good. So you can also do the same life left and bottom or top. That would be good to. So you can also been it like this. So once we have said this, you are going to see what is what is going to happen if we expanded. You can see the down or no is at the same point where it should be. And if I try to expand from here, you can see this is the behavior I want to have in this Spartan. Now the most difficult part of scaling or having constraints is for the background off desperate. And so if you click on a slack despondent, it is good. You can expand it in four directions, but we don't want to expand it in destruction. So right now I think it's not good. So what we are going to do is we're going to slack this background overhead. This is actually it is set to scale and scale. So this is the default behavior. What we want is actually we want scale in destruction. You can see you hear the annual it is contracting in the horizontal direction from left right, and this is the top to bottom skills. So we're going to select it toe Saturday top and in destruction we're going tohave skill. So let me show you how it is going to behave. So you have to dissect it because you are right now in this background, so de selected and select this again this component. And if I try to, you can see if I try to increase the height, you can see it will stay the same. It is not going toe expand or scale and destruction. But if I try to expand it from here, it is going to expand in destruction both off the sections. So this is the behavior I've wanted with my component. So this is how you can apply different constraints on your buttons on your different drop down arrows, menus, drop down menus. You're taxed, their alignments and everything you can see over here. This is my abs, which we're going to build at the end of this course, and you can see if I go to style. Guys, we have a lot of component Shal here, so you can see I have these components over here where we have this icon and these icons have been left and top. You can see similarly, this one has been to left and top toe. Although I think it should be over here like this, right and job anyhow. So this is how actually everything is working over here. Similarly, if you go to this, uh, this one and if you click on this addle, you can see it is right and top. So it is going to stick over here If I try Toe Jane the size that's change size of this one . So you can see it is going to stay at the same area where I wanted to be, So you can see it is going to be at the right top in the same position. So this is how actually you apply constraints. Similarly, if you look at the search recipe, this is going to be the same. Like you can see over here. It should be over here, actually, right and top. So this is how you use constraint in your components and apply them to have better expanding or better flexible components. I hope you have learned a lot in this lesson. Let's move on to the next lesson. 20. Common shortcuts part 1 - Figma: in this video, we're going to learn some of the commonly used fig, my short guards. And in this lesson, I'm going to show you how you can ban or zoom around in your feet my interface hide and show some of the controls. So let's get started. So first we're going toe. Look at Penn. So if you can press your space bar and hold it and you will see this hand and you can easily ban around or move this your frame around wherever you want toe, this is first shortcut. Now, the 2nd 1 is about zoom levels. So you can see here you can see it is set to zoom level or 50%. And he was select this frame. If you want to zoom toe 100% you are going to press zero so pressing zero so you can see this is the actual frame size off the frame are art board I'm using. Now you can also zoom toe fit so you can press one so you can see now it has been zoomed toe fit and is 71% now and also you can press one or nine. So one is easier to remember zero for 100% 1 is for zoom toe fit, and two is for zoom to selection. So, for example, if I have, let's zoom out first for and you can zoom out by using command or control plus minus key. So you have toe hold your control key, and along with that, you have to press minus minus was Omar Plus we'll zoom in so this is very easy. Plus, so I'm just holding my control or command key on a Mac if you're on a Mac command and if you are on a windows than control key minus and plus. So let's suppose that I waas designing in this zoom level and I want to zoom into this Hello there. So, no, I'm going to select this object first, So I'm going to drag and slacked and press, too, so you can see now it is in the focus. So if you want to go back or you have to zoom toe 100% or do you want to zoom to fit press one. So this is a great way off zooming in and out when you are designing. Most of the time When you are designing, you have to zoom in and zoom out a lot of times. So these shortcuts are going to help you out. Now, whenever you were designing you, you sometimes need your rulers to draw some of the guidelines to support your design or you have to align few things. So in fig ma, you have to enable your rulers first so you can see at the top over here or on the left. We have normal this. So we're going to breath shift and are now You can see we have rulers on the top and on the left. So if you want Oh, if you don't remember this shortcut, you can go over here on this menu and here we have shift plus R. So you can enable it over here too. So once you have enable it, you can drag guidelines over here like this. They're going to stab two different objects. For example, I have this one. I am going to drag and drop my guidelines like this. So this is another shortcut. Shift are and you are going toe enable your rulers. Now I have hidden my ruler and you can see my guidelines have also disappeared. Now, if you want to show your design to someone and you don't want to show them this design section over here this panel over here are also the layers panel on the left. You can press and hold your control or command key along with your back slash So control backslash and you can see we have hidden our fig Mazz you y which is around our objects. So again you can show it by pressing and holding controller command plus backslash Similarly, we have another shortcut which is search bar. So if you want to search something quickly in fig MMA or you want to add something all you want to search a plug in, you have installed the shortcut key is control backslash so you can see control or command key command plus backslash so you can search for example, every tar Andi, I just click over here air ITAR plug in and you can see here we have a name it are We can also again go to search and we can also search for for examples like this content real or company earned a lot of things. There are short cars. There are plug ins. Everything can be searched by this search bar over here, So this is a very common very easy to use Shortcut key controller Command forward slash. So you have to remember it back slash to hide your you I farmer slash toe such Now, if you are designing for Web sites or mobile APS, you might have your grids or columns layout over here. If you are familiar with bootstrap or other Gridley hours. So I'm going to quickly add a great over here, Let's add agreed. And, for example, we have this incredible here activated. And if I want to hide it quickly, for example, I'm designing over here and I don't want toe, you know, Bothered by this creed, I have toe use my shortcut key, which is control shift plus four on Windows and Control plus G on Mac controlled Shift four on windows so you can see at the bottom. It says layout grid hidden. This is very nice in fig mark that it shows you the feedback, which is really, really nice. Feature off any design software. If you are a user experience or familiar with user experience, you know that feedback is very important. So command G on a Mac. If you are a Mac user to hide this layout grade and control shift plus four, these three keys are going to hide. Lee out creates on Windows, so that is all about some off the shortcuts that are going to hide and show different things while you're designing. Let's move on to the next lesson where I'm going to share with you some of the more shortcut keys you have to get familiar with. So let's move on to the next lesson. 21. Common Keyboard Shortcuts part 2: in this video, we're going to look at some of the more Sigma keyboard shortcuts that are commonly used when you are on a frame or a canvas. So whenever you have opened up a new file, there are a lot of things you can do. For example, you want to align these objects. So first, we're going to look at these alignment shortcut keys. So you you have to select two objects to align them. So once you have a lie selected to off them, you can press art and we for vertical centers. No, I'm going to press all and we So now you can see they have aligned in a vertical direction . So the bottom one waas coming up and the left one was coming down, I think I Let's go back Controller Kamanzi and Art and V. You can see so similarly we can do, uh, with art and age for horizontal centers. So they're horizontal centers are you can see over here these are their centers. So I'm going to press all plus itch toe align them like that, for example. I have this and this and I want to align them or gently I'm going to press art and each so you can see this is how you align different objects. And most commonly, we use horizontal alignment and vertical alignment. Now we're going to look at some off the short cuts off the tools over here at the top, which we're going to excess a lot of times. 1st 1 is a R F for art board. You can draw your frame or art, but over here, or you can click over here and choose from a pre defined size or here, for example. I'm going to go with this android. No, let's zoom in and I am going toe ban over here, and I'm going to press my archy for a tangle or four ellipse, and I'm going to hold my shift key toe, have it in proportion like this hell for line. So I'm going to drag my line. I'm holding shift, so it is straight similarly for tax tool. I'm going to press my tea, and I can either drag like this or I can just Presti and oops, I am have toe press escape and I have I am going to Presti again and press over here. Hello, Hopes Hello, dear. Something like this and I'm going to press escape at a time like that. So this is how you are going to use these tools over here? If you want to access spend tool, you can press be shortcut key and do something like that, something like this. And, um, I think that is all off the shortcut keys, I think which are commonly used. And these are the tools we're going to excess again and again. Now let's delete this one, and I'm going to go back. We're here and we're going to study. Some of the more shortcuts were commonly going to use a lot of times one of them is duplicated, So I wanted to pick it this layer, and I want it to be exact same like this. There are many ways first you can use art or option key and press, and you will have a double cursor like this. Just drag this object wherever you want to place it, and you can see this is a duplicate. Now you can press and hold command or control plus d tohave. Another duplicate, it will be. It will repeat your step. The same spacing everything and duplicate the object. No, we have three off these rectangles. I want to grope them. I'm going to select all of them and I'm going to press Commander Control G Group them now. You can see the icon over here. This group one has been changed. It has this marching answer here around it. So it's a group and all these rectangles are inside this group? No. If you want Owen, group it the same shortcut key. But with an addition off shift. So control or command, plus shift plus g. So you can see now they're back. We are out of outside of that group. That group is no more. Or there now, on the left, you can see this is our earlier stack. So we have image at the top rectangle this rectangle blue one at the bottom three black rectangles and text. No, If you want to change the position off the stacking without, you know, using your mouse, you can either drag them like this, are dragged them like this. For example, I have over here, so if I move my rectangle at the top, you can see that text is behind this Lear so if I move it up, it is now over here. So this is called stacking order. I'm going to change the colors off these rectangles so you can easily see the difference. And for this one, I'm going to use white. Now, you can see I have all these rectangles over here, and this is my rectangle at the bottom. No. If I want to change the stacking order, I can use shortcut key like control shift and brackets. So, no, I'm going to press. I have selected this layer, for example, this layer, and I am going to shift it up or down by using control shift on bracket so you can see over here you can either use this is going toe be at the bottom. So if I strike to use control shift and bracket left record, it is going to go down the most part, um, off all the layers, stacks stack. So, similarly, if I press the right record or ending record, it is going to go up. You can see or hear the shortcut key for Mac keyboard is art plus command plus bracket. So it is our command bracket and for windows control shift and bracket left and right bracket. So you can also remove your shift from the key and you just press and hold control along with your bracket and you can see it will move one step up, one step down, one step up. So I'm leaving shift inside this, uh, shortcut key. So I will display both shortcuts in Mac version and Windows version for single layer movement if it didn't the stack and moving up and down at the bottom and at the top off the stack using your shortcut keys. Now let's end this lesson by showing you last toe shortcut keys, which are masking, and this component so you can see if you hover over there. It also shows you the shortcut key for Windows. It is control art plus K. And for Mac, it is control all for plus sort, command R plus key or option plus key. So same, everything is same. Just command is for Mech. So for creating a component which is going to be used again and again. So I'm going toe slack. All these three and I'm going toe either click over here or I can pass control art and key . And now you can see the icon has been changed. And it is a component now, so you can see this is a very good shortcut key. We're going to use it again and again if you want. Toe, get back, toe your older states and you want to break this component. You don't want to use it rightly. Can we have a lot of options over here? Okay. So you can see or hear. Bring forward. Bring to back. These were the shortcut. Keys are used group selection or frame selection. You can also frame them. Flatten outline, use as mosque. This is the next shortcut key. I'm going to tell you control off plus m. So this is how you create a component? No. If you want to mask something, for example, I'm going to use an ellipse over here. And I want mosque, this area behind me. So this is a component at the back, and this is the ellipse at the top. So what I'm going to do is I'm going toe. Move this at the back. This one is at the back. You can see this is going to be my mosque and the top one is going to be what I'm actually trying to hide. So these portions on the left and right there going to be hidden. So I'm going to select both off them. You can see my container is at the back and my information or whatever I want to show. My content is at the front container at the back, content at the front. So we're going to slack both off them and we're going toe breast control or command R plus M control on em. So you can see now they are must. So this is You can see this sign shows you can see. What? Here. This is small. Um, you can see like moon. So this is this icon. This shows that this has been masked. So this is actually our mosques. So we can you can see, show and hide our mosque by clicking over here. We can also lock the layer over here, and this is our components. So this is the content we're trying to show. So, no, I have a very small and simple tip for you. So once you are designing and started designing in fig MMA and you have forgotten any shark . Erkki, don't Google around. Just click over here in this narrow area, this question mark. And here we have shortcut keyboard shortcuts. So once you select this keyboard shortcuts, whether you are on a Mac or a Windows PC, you can easily see whatever all the different shortcuts are. Zoom, tax shapes election cause they transform, arrange and components. So this ends our fig more shortcuts. I hope you have enjoyed and learned Lord of short cards and you're going to use them in your next lessons. And in your the new you can see design projects. So if you have any questions to ask me, let's move on to the next lesson. 22. Collaborating with Designers in Figma: one of the coolest feature off Sigma is that you can collaborate with other designers, live in any design. So if you are designing, for example, this file you can see you are seeing two courses over here. One is over here, which is just change showing the name off the other designer, which is included in my team right now. You can see here says 40 months now if I go back toe team my team, you can see this is my team than you. Exciting. And on the right side, you can see this is me. And this is actually my other eye. Mac and I have logged and using another account using this name, so I tried to change in him. So it is easier for you to see that someone else is trying to change this design. You can invite members by clicking on this in white members over here, But you have to come to this screen off your team, actually, So this is my team. And if we go back, let me go back. And for example, you can see these are the change ings I am trying to do. No. If I try to change something on my I, Mac, or try to change the move, the cursor you can see. Now it is showing that the Fatma or the other designer is trying to change something. So if I try to hold this and try to drag it over here, you can see this is actually, uh, happening on my other Mac. So I'm not doing it on my PC. So if I try to do something like this And if I try to change the color, let me change some of the things over here so you can see that two designers can simultaneously work on this design. So I am trying to move, put my customers and trying to change, You can see. So this is me moving around and other box is moving around by another designer. So this is how you can actually work simultaneously on a single design and two or more than two designers they can work simultaneously. So if you are working in a team, you can work on a single design, and you can speed up your project by having multiple designer working on the same thing. So if you have, for example, already created style guards and your components. You can just add designers and they are going toe drag and drop those components and keep on building projects in with a lot of speed. So this is a very cool feature Off Sigma collaboration with their designers. It is called live collaboration. A lot of other tools are also implementing it. I hope you have enjoyed this lesson. If you have any questions or have any suggestions, you can always ask me, Let's move on to the next lesson. 23. Working With Team Libraries: in this video of, we're going to talk about a very nice feature off Rick marriages called team libraries so you can share your you can see or hear textiles. Color strives on your fact styles, along with your all the components. So whenever I design, I actually are designing. Mostly I designed in a design page, so I have a separate page for style guide. So in this page, I normally have all the components, all different icons, which are already components. So I'm going to share with you how toe actually manage your team library and how you can update it and how this update will reflect to your other team members. So it's It is basically collaboration kind off designed library sharing where you can share all your company and sell your styles you have created in your project. So other designers can easily pick them up and use them in other screens. So what you have to do is whatever your main components are. For example, you can see bottom navigation. This is actually a component, and it's instance I actually keep all my master components into this style guide. So in the style guide, you can see. We have all the components we have logo, small logo, big logo than we have. Different meant this diet plan chips, and then we have different buttons than we have. Search bar. These are navigations. So what we're going to do is we can create different frames, for example, or this one. I'm going to call it Navigation Navigation. So now what I'm going to do is we don't need on this one. So this one is not in the navigation. This is actually navigation. This is actually a navigation. And, um, this is not navigation. This is outside of this. This is also outside. So I am going to separate them in tow, different categories. So I'm actually managing them in different art boards. Or you can call them frames. So navigation is going to be over here. So whatever is in the navigation, it is going to stay over here. Similarly, I'm going toe create another frame A or F G. And here I have I'm going to call it, um, buttons and and controls. So over here, I'm going to drag My both pretends my such bar because it is a control item. These are Okay, selects, move them over here too. And other than that, I think this is going to be okay. So now we're going to create another frame. Let's call it, um um, arrested be guards and items. So here we are going to use all these options that are going to be inside the recipe. Thistles. Also going to be recipe. This is actually related to search. Let's move them. Let's I'm going to move them in the burdens section over here because these are pins, so we're going to use them. Um, okay, so here we have one card, one big recipe card over here, so I'm going to expand this art board next. Move them over here, Make this art board a big, more bigger like this. Then we have this big recipe, this one small recipe, then we have this card on. Then we have the step recipe step preparing a recipe. So we have different components over here. Similarly again. If you want to keep your logo, so are I'm going to call them. Let's create in that are bored or frame. And I'm going to call it, um go, go and icons. So I'm going to grab all my logos and icons and drag them over here like this. These are few icons. Actually. You can create a whole bundle of five counts over here. So I'm actually creating Let's make this a regular here. And now I'm going to just re sizing my art boards. Nothing else. Nothing fancy. These are My icons were here and my local and I'm going toe. Keep them like this. Okay, So once I have created on managed this style guide, you have to go toe assets and you can see over here. These are called, but and then we have If we, um, open this buttons and controls, we have different buttons and controls. Then we have logos. I think this one suits better into the recipe section over here. And one more thing, if you want to change the background color a little bit something else because it is easier to see white backgrounds over here. Similarly, for this one, I'm going to use a little bit Gresh red collateral here. Similarly, for this one, I'm going to go with this. And also for this fun, just to make sure that everything is visible easily, Uh, Let's make it smaller like this. Okay, so we have managed everything. If we go toe assets, you can see we have different categories. Locals and navigation is easier toe. You reuse them. No. Once you have organized all your styles, your components you have to click on this team library icon in this assets panel moved to oh, this assets panel and click on this one. Now you can see I have this fig Mahfoud AB you can click on Publish and we are going toe. Call them. Let's call them full. Now you can see it is publishing library. It is showing me that it is going to publish this successfully published library updates. Now, once you have published your style, you can go back to Sigma. So here we have this stigma a stigma gas, which is our learned, You exciting. And now I'm going to create a new file over here. So let's create a new file. Untitled and I'm going toe open this one untitled and I'm going to create a frame. And if I moved assets, you can see if we have a tab over here to create a component sector Lear. So for that we're going to explore our libraries. So I'm going to click over here, and I'm going toe done this on for this file. So once I have turned this on, you can see I can have access to all the buttons. Everything we have over here. For example, this button next drag things chip over here on this such bar over here. So I can use all these components. Similarly, if I try to create, for example, and tangle over here and I want toe access, the colors you can see we have all the colors over here. So these are my style, for example, disc radiant cream. So I can access all my styles, all my buttons, all my components, for example, Here we if we call it a recipe card components, you can see I have all these components. For example, this one. I can drag it over here and use it like this. So all of my other designers, they can just drag and drop inside this a team, for example, we have Let's go back and you can see this is our team learned you exciting. So I have created Theis style guide in this team. So I have are just operated education team plan. So they let me create this this design system on this design style guides that can be shared with other team members. So now you can see this was my project. And if I create any other team member, for example, this far more we're here. If she opens up a new document or she tries to add something over here, she can easily access this whole design. And for example, legs. This is local. So you can see we can also access our textiles. For example, If I try to write something over here, let's go. And now you can see if I go over here. I have textiles for food, fig map so I can switch to this one or I can switch to this one. For example, this one you can see we're here. I can also switch to any deck style you have so you can see over here we have different textiles so you can switch toe any textile. And if you want to change, go to the definition toe a. Get this. So if I go over here and if I change something in this style guide over here, for example. Let's Jane something over here, for example, this one. So I'm going to change the right off this one so you can see as soon as I change something it says Publish publisher changes to your team libraries if I click on publish. Um, weird changed. So I'm going to update my publish library that I have changed this thing. Publish Over here. And now if I goto this over here, okay? And I try to use this one so it was already operated. Let's change it again. Over here. Let's change it again. So I'm going toe Just move them inside in the middle like this. I smoked him in the middle. So let's publish the changes again. Okay? So, no, If I go over here, you can see it says that component subjects are available, so if I can dismiss it or I can reviewed So if you click on review, it says you have to update it. So if I try to update, you can see it is going toe update the alignment offered. So let me show you one more update, so you can easily see view it so Let's change its color to something else. Let's use this, uh, this orange color just toe demonstrate that I have changed a killer. How? Actually the steam libraries work. So here I am, trying toe use. This one and new one is actually this orange one, so I have to review it. I have to update it and you can see it has been updated to this orange one. So this is how you actually share libraries with your team members. You can share your components. You can share your whole style, guide your style, your buttons, your components with your team members. And this is how you actually manage them into different frames toe. Name them properly. So when someone access them, you can see we're here. Someone access them. They have different categories, so they can easily drag them up. So you have to move. Whenever you create a new file, you have to move to assets and try to use trying to turn on third this library. So if I turned on this one, you can see I can also access the personal colors library. So that's cleared a rectangle. And if I go over here, you can see here we have freak Mahfoud app, the new exciting colors and personal colors. So these are all different libraries, these director team libraries. I can access in tow any project. So I hope you have enjoyed this team library lesson. If you have any problems or if you are stuck some somewhere, you can always ask me a question or started discussion. Let's move on to the next lesson. 24. Community Tab in Figma - New Feature: Today we are going to see a very latest feature of sigma ab, which is community. Now they have just released their community tab. You can see over here on the left, Community in bed beta. This is beta version for community and this is a great, really great initiative and really great feature for this fig my app. And you are really going to enjoy it. So if you click over here on community, you can see this is my Fichman profile. Handel says Fichman.com, S and N3C and the rate of asset and DC. And if you don't know how to set your public profile, this URL, you can go to this over here, your name. Let me go back to the settings. So you have to go to the settings. And you can see in settings, this is my name, email, password. And then we have another thing which is called public profile. Now you can see I have set my public profile handle at S and addressee. And if you want to set your public profile, try to choose the name that is specific to you or you use it a lot on different forums. Okay, so once you set your public profile, so set your public profile, you can go to community. So I had to click twice on community to get over here. Something was messing up. Actually, it's in beta. So that is the problem maybe. Okay, so here we have, if you look at top, we have different categories, UI kids, if you click on UI kits, you will have a lot of free UI kits. The people, different community members they are sharing with you or other members. So that is a great initiative that different people have shared their resources and we can use them and bring them into our projects. Similarly, you can see we have web design. So there are lot of tons of resources for icons, for illustration. So if you, for example, if you want to bring something in, you can click over here. And we can like this. For example, I like these, so I'm going to click on this, like you can duplicate this. So if I click on duplicate, it is going to open up into my sigma tab as a new file. You can see now we have all the illustrations so we can use them into our projects. This is really easy to use these illustrations. So going back to community, let me show you there are few more things which I'm going to show you that might be useful for you. One is this slit ID tags. So if you want to looking for something, icons, icon set or something you can click over here. Similarly, we have illustrations. I will have wireframes and we have designed systems that are really helpful. So if you are trying to start some website or something like that, you have to use some design system. So to be able to use that, there is a one feature, let me just use this one. And let's duplicate this. You can see 1.1 K 1100 people have already duplicate it. So I'm going to click on duplicate. And I'm going to open up in my FISMA. Let's see, it is taking some time. Ok, so here we have the material design styles you, I get. Now, if you go over here, over here, you can see this is actually opened in my drafts. So this is actually my project which is draft. If I want to open it, I have to open it over here or move it to something else by clicking over here. Okay? So now whenever in you have to share your material design, you have to go to assets. And you can see already there is a light version, there are a lot of assets. So here, now you can click over here and you have to click on publish. To publish these styles. You have to publish this style guide so you can use it in your designs. So I'm going to click on publish. Move to team to publish components. So let's move team. Let's move to my move. Let's move to sigma class. This is a project. So I'm going to say Material Design Lite. So I'm going to publish it now. Okay? Now once you have published these, we have to go back to this sigma class. Okay, so right now in this project, it has been shared. So if I try to open up any file, for example, this untitled over here, I can use these components. So let's delete this. Delete this. So if I go to assets, you can see we have let me go to this one. Let's check this one so it is shared, but I have to enable it. So I have used this library icon. So I have two nm alert. And you can see I have material design components over here. If I want to use any component like this, plus button or New File button or whatever you call it. I can drag and drop different lists. I can drag and drop different cards. So I don't mean to create these by myself. This is a really good start. It is going to save tons of time for you. You don't have to create all these components. So this is the feature of communities. So community is actually really helpful. I'm going to put a love over here. And if I go back, you can see if I go back to my community over here, school back, what is the problem with this? Doesn't sometimes go back to sigma community anyhow. So if you go back to my profile over here and your profile is visible, Let's open this one. So you can see in this profile I have resources and like so if I click on likes, you can see, so all the different resources I have juice or I have liked r over here. So you can see user profile, sigma library, I have lived. Here. We have these two plugins. So this is how actually you use your community. So let's go back to community and we can click on plugins to so we have to file tabs or hair files and plug-ins. So you can also explore different creators. For example, this person, this person, or if you want to follow them, you can follow them for new updates. So any new extensions or something like that. Similarly, I can click on design systems, for example, like this one, and I can use it in my designs, my websites or whatever. So this is a great feature to use. Get different resources, use them and tack and say thank you and put some love to the resources or the creators of these resources. That is a really great feature, a great addition to sigma. So I hope you have enjoyed this lesson. If you have any questions you can always ask me. Let's move on to the next lesson. 25. Using Grids and Guides: in this lesson before we dig in tow and start designing something I'm going toe get you familiar with some of the concepts which we use a lot of time in designs in design, your design, Web design and a lot off designers and courses. I have seen that they actually miss this, which is very important, and that is actually layout grid. So you always have toe use layout grid whenever you are designing for a mobile screen. Oh, our website. So in this video, I'm going to explain to you how you can use this layout grade and how you can create differently outs when you're designing for mobile and Web sites. Now, if you want to see how to create bootstrap grade, if you are a Web designer, then you can had to YouTube my channel and you can watch this video. Bootstrap for groups creation, this is a detailed video eight minute video about how to create and Bush a four grade in sigma. So let's get started and get how we can create different type of cribs. So there are actually two type of careers, so I'm going to show you one is actually this pig's ill greed. And 2nd 1 if I try to add over here, you can see it is going to add under one. So default is big, so great. So I'm going toe and 10 pigs ill is the box size, so you can see if we zoom in over here. This each box is 10 pigs ill by 10 pixels. So if we want to change something, for example, I warned the box going to be a big sell and I won't remove this. So this is called 88 exit Great. Which we use a lot of time in Android mobile development and even in our U. S. Designs. So if you're designing for iPhones or Android abs, I think this is a great kid grid. So if you want to change the color of the Great, for example, I want it to be a bit in this great area, something like that. You can change the color off the screen. So this is how you create Theis? Uh, it exhilarated. Now we're going toe goto another thing, which is called columns and rows. So if I'm designing for mobile labs, I have to align my things in bigger columns. So they have us simple layout or follow some layout. So for alignment, I'm going to add some columns so you can see I can add, like any number of columns. But always try toe, add the numbers which can be divided by two. So never add our numbers, even use. Always use even numbers. So this is how you use the even numbers. So I'm actually using six right now on this design, you can see I can see in the background because it is not. This is the opacity, actually. So if I try to harden it, you can see I am unable to see what is behind. So it is better that I try to use it 10% something like this, so I can easily design and align my things around. What hit second is its type, so you can either align it in the middle and you can specify the bridge off the columns. For example, I want 80 pixel wide columns, something like that. And Goodall is actually the distance between two columns. So this is the gutter. We can use 30 something like that, or maybe 24. It depends on the screen size whatever screen you are trying to use. So if I try to use 12 over here, you can see it is looking something like this. Now, you can also save your layout, creates. You can see over here, here on the upgrade style so I can save it to 12 columns or something like that. Part of the name here, cause so something like this. So I have created agreed style and I can easily applied on any green. Similarly, for example, I'm going to create another art board E. And I'm going to use iPhone eight plus No, I'm going to create a clear great and I'm going toe press plus and it created 10 pixel. I want toe wanted to be like 16 pigs are great, for example. So I I can have a 16. Pigs are great like this. Now, if I try to place my button over here, for example, I can place my button. It is going to stick to these areas so you can see this is my butt, and I'm going to use the roundness off it, and I'm going to use some color like this. And if I tried to align it in the middle. So right now it's in the middle. You can also have it to spend two specific boxes like this. So now you can see this is how actually you try to use the similarly for text. You can also align your text. Hello. And you can align your text to your grid like this. So these are actually my rules. So I'm trying to use this 80 hour here for my next. So this is actually the area I'm trying to use. So if I try to reduce the capacity 50% so you can see better. So this is actually the head area or the area it is going to cover. So if I try to move it over here, So if I try to slack this one so you can see this is the boundary around it. You can also align it in the middle or a job. But I think it is going toe. Use this much space. So this is how you can use this, and you can align your different icons on. Also, you can add another grade. For example, if I want to have some columns over here, so you can see I can use four columns and I'm going to have them in the center. And that's your 60. Let's use more 75. That's use it. E. This looks a bit better for me, and I'm going to use 24. Greater size 20 is, I think. Good. Now you can see I can align meetings with discreet. So let's like this. So I have no two grades. One is my basis Baseline grid or my cred at the back, which is a pigs ill, Great. Which is the job, actually, boxes and one is column grid. So one is, uh, 16 pigs ill I can also use did over here something like that to have more options to align thing. So whatever you are designing on a mobile app, try toe have something like this. It is going to guide you. You can easily align your elements on this along with these lines, for example, like this. Similarly, you can also enable your rulers shift and are and you can, uh, drag and drop different guidelines over here. Toe a line things better. So whenever I try to create another little art board, you can see this guideline is comin over here because I have drawn it without selecting my art board. So whenever you want to have, whenever you want to have something which is going toe act as a global guideline, you can see see your hair. So if I tried to select this one right notice electric. So if I drop, draw something on it. And if I try to create another art board, for example, like this one, you can see there is no guideline over here. Even if I try to use the same art board I have used before. So you can see there is no guideline because I have selected and I have drawn this guideline for this specific screen. Now, if you want to have a global guideline, for example, I create another art board over here, which is going to be iPhone Pro X. Let's create the same size Ivan eight plus. Now you can see these are the boat. Art boards are the same size, but if I want to have and ah guideline that is going to be global, you have tow selectee selected, and if you try to drag and drop it on inside this area, it is going to be present on this one. So what we have to do is we have to drag it and drop it in the middle area, which is not the common area, which is an empty space which is not the 80 off any art board or frame. So I'm going to drop it over hair and you can see it is present or in all the three art boards. So this is how you actually use this global these global guidelines to align all your elements. For example, if I have maybe a bottom navigation so it will be aligned to this. So if I have a top navigation, it will be in this section so you can divide your whole mobile app or your Web design whatever you have, using these guidelines Grid's columns so you can choose thes local guidelines and global guidelines. These columns, this layout, grid toe design, better layouts to design better looking APS. I hope you haven't destroyed this concept, and I really wish that you learn this and use this in any design project you do. Let's move on to the next lesson 26. New Figma Auto Layout 101: Today we are going to have a look at one of the features of Figma, which is auto-layout. So they have recently updated. This is my 2022 and I'm going to show you how to use that. And let's grab some buttons and create something amazing to see how it works. So the same thing is, let's start with T, and I'm going to type some text over here. Let's create a button. I'm going to make it 20 pixels. Let's keep using inter bold. And to create a button, I'm going to press Shift a. And we have created an Auto Layout. Auto layout has been added. As soon as we add auto-layout, you can see this is a new panel on the right. We have the direction of the auto-layout, horizontal direction, vertical direction. These are the paddings between spacing between items I'm going to share with you in a few moments. And this is the padding around this button. Let's add a fill color. Let's add a fill color of this. Let's use this bluish color. And let's make some rounded corners of eight pixels. And now we're going to experiment the padding around this button. So for this auto-layout, the padding is horizontal. Padding is this. So I can drag it like this. You can see there are pink lines inside the button which is showing me, Let's keep it to 40. And this is going to be the horizontal, top and bottom. So I'm going to keep it to 16. So this is my perfect button, kind of perfect button. Let's try to use some dark blue color for the button text. Okay, so this, this one looks great. Okay, so one more thing they have added over here. If I hover on the button, you can see if I click over here, it let me enter the value over here. So here's the padding. So once, click once. And what happened? Here is the frame. Oops. So I have different values now. So you can see over here, I have different values for top, right, bottom, and left. So I think I need to click over here to see that this is the right one. So let's try to reduce it. I think there is a bug because once I change the value, those actually disappeared. Okay, so I have them now. So if I click over here, you can see this is if I click over here, 20, okay, so here we have it again. So I have to click over here again, ten. And now they have disappeared. Oops, I think there is a bug right now anyhow, so you can control everything from here. So if you want independent paddings, you can open this up so you can see I have independent bindings for left and right. So you can separate them with commas to 4020. So if I want to have 60 on the left, you can see I have, I can have 60. This is my top and bottom. Let's try to use 32 at the top. Here we have it. Let's keep it to default. Let's use 36 on left and right, and top and bottom. So this is going to be my button. Now, if I want to create a simple menu bar, I can just replicate this Control or Command D. You can see I'm replicating just this text and it is actually in the horizontal direction. And this is the spacing between items. So this is the frame, this is the auto layout frame, and these are the paddings between them. So you can see, I can click and drag like this, increase the padding between them. And it is actually expandable. So if I tried to About Us, let's use on deck over here. And again, also we have the padding at the top and bottom. We can control it over here. This is a really nice feature. They have a separated the padding, all the padding around it. And they have more, I think, user interfaces more friendlier than before. Okay, so here we have it. Simple navigation bar. Okay, now what I'm going to do is I'm going to replicate this whole frame. So Command D, frame 234. And I have these, all these frames and let's select all these frames. And I have to create another auto-layout. Now I have another auto-layout. Now you can see the direction is top to bottom, this is vertical. So now we are going to play with this spacing between items. Let's use 24 over here. And this is the separation between these items. You can see I can control it from here too. I can just click over here and enter like 16. And Let's try to see I can change the padding. Let's try to see the padding over here. Yes. These are the paddings or default. Let's add 24 at the bottom. And let's add the left. You can see now this is another frame. This is another auto-layout frame, and I have added paddings. I'm also using this spacing between items. So you can see what here, Let's try to use 32. And if you want to fill it with some color, you can do that just to show you that how it is going to work. So this is actually the outer frame. So I have inner auto frames. Then I have outer, outer auto frames. Just to show you that we have multiple items which we can separate by spacing. And Let's add one more thing to this auto frame. I'm going to add, let's say rectangle over here. Let's try to add a rectangle over here. So it is going to be placed over here like this. Now, you can see it actually got the layout which was, you can see over here vertical direction. So anything I add, it is going to be in the vertical direction at the bottom. Or if I want to change the position of this item, I can move it up or down wherever I want it. Now, if I want it to be at a specific place outside of the control of this. Let's create smaller circle like this. And I'm going to have rounded corners of 60. So it is small circle. Oops, 36 shouldn't be the height k. So I have just created a small circle, Let's say it was like this. So I want a status over here or over here, or maybe over here at the right. Maybe a close button for this frame. Right now it is inside the auto-layout. Managing the vertical direction. There is a small magic button over here. It calls. It says absolute position. So you have to select that element, click the absolute position and it's going to go outside of that auto-layout. And let's use it over here like this. You can see now, you can see it's still inside this auto-layout frame, but it has an absolute position just like we have used it in HTML. So this is a really, really nice feature. Okay, So one more thing is that you can see over here the hug resizing, vertical resizing and horizontal resizing hug fixed contents. And then we had the third one, fill content I think was what this one container. You can see this is a very nice, so outside of this, this outer frame, it only shows me that HUD contents and fixed width. So if I try to use a fixed width, it is going to be like this. And let's move it over here. On number two, move it like that. Okay, so for this one, I'm going to use full container. So you can see as soon as I clicked on the full container, it has filled its container. So container is darker and the lighter one is actually my content. So content is going to fill the container. So this is fixed. Hot contents is going to expand whenever I. So you can see if I switched too hot contents, it is going to go back. Okay, So this is hot contents spill container fixed width is self-explanatory. I don't need to explain it. It is going to keep the width of this frame out. Outer frame fixed. Content is going to grow with the content inside. So let's try to see Judgment Day. So you can see the outer content. Outer frame is actually expanding with the inner content because it is hugging the content. I never, the content is expanding. For example, I'm hugging something like this. So if something, someone inside the one I'm hugging maybe a balloon, if it's start expanding, I have to expand my arms. So this is how the hug actually works. So let's see if I have missed something over here. So we have this alignment. I think I need to show you the alignment over here. So let's add a rectangle or maybe a button over here. Let's create a rectangle. And just think that it is a button. So let's create this button. I'm going to move it inside over here. So let's assume that this is our button. It pixel roundness. So this is my button. So right now you can see everything is lined up on the left. So if I click this outer frame, let's call it outer frame. These are the inner frames. Okay? So once I have select this outer frame, you can see these are the alignment options. So right now it is left, top left alignment. If we go to this one, like the right alignment, you can see everything is aligned on the right. The button also moves to the right. If I use the middle one, it is going to align everything like this. Okay? So sometimes what happens is that I want this button to be aligned on the left and maybe all of these top ones to be on the right. So the simple way is that let's call this btn. And I'm going to create another auto layout like this for this button. And for all these frames, I'm going to create another automobile. So now I have to auto layouts inside this. So for this, I'm going to keep it on the left. You can see, you can see now and for the middle one. So let's call this content. Let's call this button. You can see you are here. The content is at the top, and I can move it the content irrespective of the button because I have them in two different frames. So I have different container containing frames for them. Similarly, you can see now it is again inside that frame, content frame. So it is moving that direction you can see over here. So let's try to, again click this. Let's call it status. And I'm going to again click this one, absolute position and it's going to go back to the place it was before. So let's try to raise my status. This is the one. Let's try to use it over here. Let's move it over here. Okay? So we have studies the, study these alignments. We have started this vertical and horizontal direction like this. Then we have studied the separation between different items. Let's use 80. So these are actually, you can see now this frame has to inter-frame. So whatever spacing will be, it will be between these two. So if you want to control spacing between different group of items, you have to group them into auto-layout frames. Okay? So we have few more options over here. You can see like, like you can see over here, bagged and space between very nice animations. Maybe I can try to something here. Let's try to use these mean. Okay, I think we need two or three items in this direction to have space between. So right now I have one only. So let's create a group of buttons. So let's replicate this command D. So right now it is moving in the bottom direction. Let's click this Auto Frame, auto-layout frame for the buttons, and we're going to move them in this direction. Okay, now, let's try to see if I can. Okay, So I have to make it filled container like that. Okay. So first you have to make sure that your interframe or where you have to use this space between is actually filling the container. So what I did is I actually created three buttons inside my button frame. You can see this layout is from left to right. Because I want it to fill the whole frame. So you can see over here, this is the alignment options now because I have switched from back backdoor space between. So if I go back to pack. You can see they are going to all align like this, closer to each other. And they are going to have this spacing between items, which is ten. So let's use 24. So this is the spacing between them right now. But if I shift to space between, you can see the spacing between them. It says auto, auto, auto. So this is the main difference, so it is going to automatically spaced them. And right now you can see this button frame is actually set to fill that container. The container is the darker one. Also one more thing is I think the strokes, this is actually if we have put a stroke around the button, let's use a stroke of 15. So you can see right now, let's use it outside. And you can see now my stroke is actually getting outside of this. Let's try to use some maybe white color. Let's, let's try something like that. So it is going outside of my frame. Let's try to see if it accommodates. So right now it says strokes are excluded. Let's include them in the layout. Now you can see the padding and spacing everything is accounted for the strokes, strokes as well. Okay, so now I'm going to shift back to fact because I want to show you something interesting. Rather than using a spacing of 20-fold, let's try to use minus ten. Minus ten. Let's put a stroke over here just to show you that it is going to be like white, your theme. So I'm just going to be outside. Let's try to use the same stroke. If Dean, outside, Whoops, oxide, just going to be white. Now you can see I have three buttons and three buttons that are overlapping each other. Let's try to use different, a bit different color over here. So just to show you that which one is overlapping with the one we have right now, 33 of them. So this one is at the bottom right now, and these are at the top. So if I tried to, so we have one more thing which is Canvas stacking. So you can say it says last on top. So if I switch to first on top, you can see the first one is now on the top and others one or at the bottom. It is useful when we have different avatar images, different icons, and we want them to overlap each other. And the last one is actually the baseline shift, which is when we have an icon and a button. So let's try to, try to use some icon. Oops, not over here. Let's icon. And I'm going to use any icon right now. Let's use this one. This is going to be an icon album. And if I tried to use that inside this, inside the button, lets you combine them command G to group them together. And let's try to have a text over here. Says, okay, I'm going to align it perfectly. If I can. Let's move it outside this. And let's move this one also outside of this one, just to see how these are actually going to align. So I'm going to have writing for war between the items. So right now it is actually, it is actually pretty obvious and it is aligning with this one. Let's try to have a smaller text, smaller text at the bottom. And let's try to change the color. I'm going to increase the distance to 32. Okay? So right now these are both aligned, but if you want to change the alignment, let's try to change something. You can see what here. If we have shoe of baseline alignment, then we can shift like this. So if we have two or three texts and one icon, we can use this baseline alignment to align these. So right now you can see is baseline alignment, which is not working for this scenario. But I can guarantee you that in some scenarios when we have a text and an icon that are not lining up, you have to use this baseline alignment. So this is how much they have changed. They have provided new options like baseline alignments, compensating for strokes than we have. This one. I really love this feature of this fixed, this one, absolute positioning, really, really nice feature. And then we have very nice presentation of paddings, padding all around the item. Left padding, right padding. If we hover on them, left, right, left, and then left and right padding. Let's close them because it is actually not matching with my HTML. Anyhow. So this is all about. They have also moved this hug, hug content feel content to the frame. Options like width, height because it was more suited for the frame. So that is my recent video or new video and how you can master your auto layout. Very simple concept. Before, it was too hard for me to understand. I have seen a lot of my students in design, students who are actually having problem while understanding this concept of auto-layout. I hope you have understood auto-layout well and good from this video, I will meet you soon in another video. Make sure you like subscribe and share this video till then, take care. Bye bye. 27. Using Group vs Frames: in this video, we're going to learn the differences between groups and frames and ventures. You should use frames instead of groups. Now, if you look at it over here, you can see this is a group. This is an illustration. So if I try to scale it, you can see it is going to scale the whole group Along with that, you can see when I click over here, there is a blue boundary around it. It is actually its bones. So this is actually the boundary off this. It also grows when you try toe scale any group. So this is a group off illustration. These are different factors. If I try to increase the size, you can see the bones are actually moving. And if you look at it over here on the constraint size, it's a skill and ah, it is actually going to scale. It is a default. You can say constraints. Option off any group. So now if I try to select, for example, let's say right and let's say top now you can see what is happening over here. Every group have constrained according toe, the nearest parent frame so you can see If you look at it over here in this whole hierarchy on the left side, beer and frame for this group is actually our art board. Now let's see what happens if I try to increase the size often Art Board. You can see this constraint is actually working for this art board, so it is staying with the right and left off our board. Now let's see what happens when we never have said these constraints. So mostly whenever you try to import any graphic inside your phlegm a file or are bored, the same thing happens. For example, if you have a group like this and it's an illustration now, you can see if I try to increased elect, zoom out and try to increase the size of this. You can see what is happening. The size off the illustration is actually getting bigger with this frame, so let's next. Let's see the size its size its size is 573 by 5 31 Now, if I try to resize it, you can see now it is 80 98 806 Now, if you don't want this behavior and you don't want it to scale like this. Next. Go back to every wire. Okay, so now if you want to a wide this behavior, you want your icons to stay where they are. You have to use frames because frames are going toe. Let's let me show you. Actually. So here we have thes Let's frame it Right. Click and frame selection. Now you conceive. We have two frames over here. One is this illustration are sorry. This practice frame, this is actually the art board. And then we have another frame. Which is this frame? One inside it. So let's call it options. Now you can see we have frame inside a frame. No. If we try to change the size of this practice frame, you can see the size off this object. It wa 618 by 2 25 No, If I tried toe again, resize it. You can see. Let me make it bigger and show you what is the difference? Size stays the same. So this is the behavior I need when I have elements inside a container and I want to go and I want them to be to stay on the same area where they are and I don't want them to resize. Then you have toe Always use our frame. Otherwise you will have these problems that icons will keep on growing. For example, let's, uh, removed this frame. I am pressed controlled shift or command shift G toe on group this frame and now I'm going to group them. Now you can see they are in a group. So let's call this group options. And if I try to now the size is the same. 618 by 2 25 Now if I try to use the size, you can see what is happening. These icons are going out and everything is messing up because I don't want them. Do you know scale? If I try to click on this icon double click, you can see these are the constraints. So these are the constraints, scale and scale. So it is going toe get smaller and smaller. As I resize this so you can see Let me show, you know. So these icons are you can see now there 44 wait our journey. They were like 72 pixels wide. Now you can see this is the behavior we don't want. So the basic difference between group and frame is that group is going to have constraint. Ledgett toe the parent frame. The parent frame will be mostly it's art board and for the frame we don't have such problems. Frame is going toe. Act as an independent container or a window and everything be aligned according to that second thing is that whenever we have a frame, for example, Yeah, that's G, I guess hopes we have frame, friend selection all control and G. Okay, so we have this fame. There is another option which is clipped contents. If you want to create something, it is going toe act as a window. This frame is going to act as a window. So if you try toe extend, for example this icon outside of this, you can see now it is slipping outside because we have defined the Britain hide off the frame. But if you try toe, do something with this illustration, for example, this was a group and for example, I have this vector or this arm and I try to extend it. You can see nothing is clipped and one more thing you can see If I try to click over here, the boundary is actually automatically adjusting. The bones are automatically adjusting. This is actually the feature off group. So if you have something like this you want, you don't want to clip the content, you can use this group. And if I go to this one now, you can see we have some icon over. Harris says resized to fit life. I try to click over here, you can see now the size off the frame has been adjusted to the clip contract. So it is actually trying to find where is the boundary off this content? So this is a feature off frames frames have a specific height and read everything outside of them is going to be clipped. But groups, they're not going to behave like that. They have nothing to clip. They will have auto boundary. They will increase the bones off your elements inside them according to their return high. So whenever you try to change the width and height, it is going to change the boundary off this group. So this is actually how I try to suggest you that whenever you are designing your abs or anything, for example, let me show you this over here. Okay. So you can see over here this stop one is actually you want to create a frame. For example, I want to have a fixed return height for this front. And don't want these icons over here to change their position and change their size whenever I try to increase the hardboard or here similarly for this bar over here. 30 minutes, four people, 1.5 kilocalories. You have to use a frame. If you try to use a group, you try toe increase the height off this art board over here. It will mess up. These things will move out. And actually, it happened once when I was trying to design in this exercises happened. Ah, lot of times if I haven't converted them to frames, So frames are actually going to have a specific boundary and the constraints are going toe work inside this inside this area, for example, I'm going toe use left and bottom for this one. Similarly, for this one too left and boredom. Now, if you want to scale a frame, you have to click over here, go to the scale, tool and you try toe. Use that if you want to really scale the height and width off a frame. But for a group you can you don't need to use the scale. You can use the move to do and you can just dragon press your shift and hold your shift key to scale like that. Now, one more thing whenever you create ah component or here so components they are going to act just like frames. Everything is going to have constraints on. Do you can see your here? Now you can see whenever you are inside a frame or you are inside component the bones or the constraints are going to work inside this boundary, this frame boundary instead. If you look at this group, if I try to select this top and let's say left these bones are these constraints, boundaries are actually according to their parent frame, you can see over here the parent frame is this practice frame and these constraints are linking to door. So these lines, these dotted lines, are showing that they are linked. So these these constraints are linked to the spirit frame. So when I click over here and I double click this one. If I try to use, for example, center and bottom, it is going toe. Have constraints with this on this frame over here. Similarly, for this one, if I try to use left and job, it is going toe stay the same. So this is actually the boundary because of this banana over here. So let's reduce the size of the banana by pressing shift. And now you can see the bone is the same. So we have to press this resize boundary again and this is our boundary. Now, if I try to click over here, you can see it is these constraints are linked with this frame rather than the parent frame , which is practice for him. So I hope you have understood the differences between groups and frames, and when you have to use one instead, the other let's move on to the next lesson. 28. Exporting Assets and Images: in this lesson, we're going to talk about exporting your images and assets. Now, this is very important. If you are designing for an android app or and I s app, there are different settings or different export options for both the design systems. So, for example, like you can see, this is my android app and it has been designed for an android device. So whenever you are exporting your images, for example, your ministrations, they are your images for example, your PNG images or any buttons or anything you have to export it into different sizes. So there are different android devices there are They use different sizes to support that app. So let me show you a quick article Over here. You can see this is a quick article on medium dealing with diversity and these are different. Pockets are deep EI buckets. I called the resolution buckets for android devices. I have a full fledge separate course on android device and designing. But Google material, where I have discussed all these just you have to remember that 0.75 acts 75% 1 next 1.523 and four. These are the things you have to export for. Let me show you. If you moved to Fig MMA, for example this bottom bar you have to export. So I have selected this bottom bar for example, this one And if you go over here, you can see there is an export option. So if you want, remove some export option. You have toe klik minus. And if you want to add, you have to add ahead. And this is actually the size it shows. It shows one X one next means the same 100% 150% 200% 300% 400%. So I'm going to select 400% because I actually wanted toe have all these sizes. So these are the export options for an android device. You can see we're here at the bottom. It says export boredom bars. It is a name off this group. So von x, 100% 100% 304 101 150% and 75% which is going to be smaller than the size we have designed . We have designed in 100%. So these are the export options you can also change the file type of our hair PNG is going to be You can say it is going to be transparent at the background. If you go to this preview, you can see the background is transparent for these three buttons Oh are moving Britain's or whatever you call them. If I goto jpg, it is going to have a white bag now. Actually, it is showing me this preview but it is going to have a white background. All others are Let me remove all others. Next remove all these And now if I shift o jpg still, it is showing me the wrong preview anyhow, So the J P G or J Big image is going to have a white background. I guess so that's exported. I'm going to press export and I'm going to go to desktop and let's see if it is how it has white background or not. So you can see or hear it has, like background. It has white background. You can see if I drag it into fig Mauer here. You can see if I zoom in and it has a white background. Okay, so this is goingto happen. I already told you that J. Peg image is going to have a white background. So anything you want to export and you, for example, most of the images in a website, for example, this image you might be using Jay big image, because a very big image a very big background image. You have to use something like this. For example, in my this yum Zab on this log in screen. If I zoom into this log in screen, um, this slogan screen you can see we have, ah, background overhead, this image background. If I have to export this image background at the back, you can see it's is, um all these I went toe group them together. So this is my whole background. You can see So this is going to be my background. So I am going toe press overhead, export. And I'm going to use a jpg because Jeb is going to give me the smallest size for this whole background. So this is going to help you whenever you are exporting for websites or anything that is very large, very large image. You have to use J peg image rather than PNG. PNG must be used for, for example, these icons or maybe thes buttons or something like that. Mostly, these icons are going to be an SPD for make, so I'm going to go to that now. So you have learned that when you have to export for for android devices, you have to add different densities of different sizes. For example, two x three x four x, the's different sizes so far and IOS device. If you're designing for an IOS device, let me show you over here so we only need one x 100% 200% and 300%. So these are the three actually sizes which are used by IOS devices. So if you're designing for IOS devices, you have to export your assets into these three sides. So let's go back. Tofig MMA and we are, for example, I'm going to select this screen If I want o export this whole screen, I'm going to export PNG and I'm going to export into these three sizes one next to X entry X. You can see the preview on if I export over here it is going toe export three different files. So I'm going to see what we're here in the desktop and ah, here we have thes three files so you can see this suffix is actually the file name which is added 101 Add two x forces the name off the file and then the suffix is actually going to show you that it is the percent age or this is the density or this is ah, you could scale off that image. So these are two different things. You have tow use in your mobile labs for numbers you were designing Similarly, for IOS, you can see this is actually iris screen. You have to use thes three so far are us for our U. S. T sizes one x two x three x For Android. We have actually four or five sizes. One next 1.5 x two x three x four X point sound five x or 75% So these are all the different sizes you have to export. BND is going to have transparent background. Jeopardy is not going to have transparent background. SPD is for illustrations, for example like this illustration SPD scalable vector graphic. I mostly used my icons and my illustrations. I know me export them in excess SVG file form it. Pdf is a basically document. If you are designing a document and you want to export or you want to show your designs into a pdf file, you have to use the speedy of to export. Similarly, once you have set all the export options for all your different different screens, you can go over here toe sorry or here not over here, but in this menu. And you can use file export so you can export all the different illustrations and everything. If you select everything over here that was select everything and then I can go to export. And these are all the different assets I'm going to export 11 SX. So if you have a very big you can say project and you want to export all the assets at once , you have to select all the hardboard and use this export options option in the file menu and click on exporters. It is going to export all different resolutions. So that is all about exporting your assets for your android devices for your ah, I use devices, apple devices and for your websites to. So I hope you have learned something created in this lesson. If you have any questions, always ask me. Keep on moving and keep on designing. 29. 05 Variants in Figma Simple: In this video, we're going to talk about the very latest and new feature of sigma, which is variance. And there are variants of different components like we create buttons, then they can be disabled returns, they can be primary buttons, Secondary buttons. There could be buttons that are having a loading bar or they're loading and unloading state or prestige or overstates. So all these states, they had to had a system to create all this into just one component. So in this video we're going to learn just that. So let get started. Now you can see these are few variance. I'm going to show you the power of variance if you click over here and if you want to switch to gray button or disabled, but, and you can see you just have to use this option over here, which is a new one variance. And then we have to switch to blue. So this is actually I created this myself. This is a custom made. Similarly, like you can see over here. Here we have a component. Are you hungry right now? And we have two stairs checked. We can check it on and on and off. So we're going to create both of these in this tutorial. So let's get started. Now we are going to start from scratch. So I'm going to press a for art board and I'm going to create an art. But over here, then we are going to have rectangle over here or press are for rectangle to create a nice button. And I will give it some roundness over here. We will give a primary color, just this blue. I'm going to press T for text. And this is going to be our primary button. Are we? Okay, so here we have the text. Let's color it white. So we have one button over here. Now the next step is, it is always going to work on a component. So we have to select both of them, create a component, and here we have a component, let's call it but an slash pry Marie. Okay, so we have a button and let's create some more variance. So you can see once I click over here, there is a new option over here, which is called variance. So you have to click on this plus, and there we have another variant. So let's customize this variant first. So we will have green button over here. Let's call it something like this. Let's make it something like this. Let's change the text color to black ups like this. So let's keep it simple and we have 2 million. So ahead. So now if you click on the whole bounding box, so if you want to add a new variant, you can click over here in the plus sign and it will give you as many variants that you want. I can have gray button over here like this. And this is going to be a bit darker grey like this. So we have right now three buttons in this frame. So if we click over here on the whole boundary of this, these three buttons, you can see that we have declared over here property. So property is actually it could be your type, it could be your colors, it could be the type of the thing you are creating. It is actually in hierarchy. It is going to be at the top. So one property can have multiple variance. I am going to repeat it again. This is a very, I'm very initial essential concept. One property can have multiple variants. For example, I can just call it primary. Lets call it button. Ok. So we have button over here and then if I click over here, I'm going to, this is basically the primary. This is, or we can call it primary, primary blue. And then I'm going to click on it. I'm going to rename the variant to primary green. And then I'm going to click over here and primary disabled. Ok, so let's call it gray. Okay, so we have completed this, so how we can use it. So we have already created this. Let's move it outside of this frame. Now we are going to move to our assets. We are, we have this component over here and we're going to drag this button component. This is the one we just created. Okay, so now you can see on the right we have this property name over here on the left this is button. And on the right we have the variance, primary blue, primary gray, primary green, or whatever. You can even call them like primary, Hoover and maybe disabled. It's up to you, For example, let's name this hovered. Then we have this one to be disabled. So now you can see we have three states over here, homeward, primary and disable. I'm not sure why this is lining up like this. I think they should have the same you can say the same order which we have created over here. Anyhow, still, we can switch to anyone we want, like this. Ok. Now let's come to the point where we have to create a small checkbox, which is a mobile checkbox. So I'm going to make it round. Let's use 320 k. So first we have to create different components. So now we are going to use an ellipse. Just 21 by 21 changed the color to white. Let's make it a little bit like this. Move it a bit more over here on this side and reduce the width of this one. Okay, So we have a little bit of arrangement over here. So let's create component by clicking over here or Alt Control key or Command Alt key. I'm not sure what is the shortcut on Mac anyhow, so you can click over here. And here we have the component. Once we have the component, we have to create its variance. I am going to click over here. And here we have another variant. Let's double-click and go inside this variant, change it's color to green. And let's move this over here. On this side like this. So this is going to be our another variant. So for the property, I'm going to select overhead checked. And one thing you have to do is for when you click over here, you have to describe its variant name. For that, we are going to use false. And for this one true. So this, this will create toggle over here. So now we have to use it. So let's move it over here. Go to assets. We have this component, and let's click on it. And we have the check box over here. Really nice. Hope you have enjoyed this lesson. I'm going to meet you in another lesson soon. Till then, take care and bye. 30. 06 Figma Variants Advanced: Now let's get into a bit more advanced use of these features. And we are going to create input over here. Make it a component. We're going to add variance. So before we create more of these in vertex, we are going to create a new property. We're here at NYU property and we're going to name it type. So we have type and this is property. This property is going to be the state. So these are actually, these are both actually are going to be type x. Add a new type to squint to be text input. And if we click one of them, this is going to be default state or normal state. And for this one it is going to be active. Now we are going to create more of these. Let's create this one, another one. And for the type we are going to use, let's create a new one over here. And we are going to use actually dropped on, let's call it dropdown. And then we have another one. Before we move into another one, we are going to add a rectangle over here. Polygon actually, for the dropdown. Lets move it like this. Let's rename it select. Now we can create another variant. Let's create another obedient. And I'm going to again use this one over here, copy it over here. And this one we're going to call select. Let's change the color to something else. Like this. Just to make the difference. Similarly for this one, I'm going to change the color to something like this. Okay, now I'm going to select this one and this one, and this is going to be Type drop-down. Okay? And for these two, I am holding actually shift. We are going to use text input. Now for each one we have to set the, set the state. This one is going to be normal, this one is going to be active. So now you can see we are actually using two different sets of states and type. So how we can use it, just drag in, put text over here. And if we go on the right, you can see here we can change the state over here. Then we can also change the dropdown and type of this one. So this is actually that Vos usage where we can combine two different properties. Now if you want to create variants from your already created components, so don't, you don't want to create components and you already have few components, then it's very easy. Let's me, let me create component over here. But they must be dif, different components. For example, here we have components of different states. For example, we have this one. This one is active state, let's call it active. And I'm going to create a component over here. And let's go to layers. And here we have another one. This is going to be, let's call it nav as backslash normal or normal. And nav backslash disabled. And if you want to create both of these and you'll want to create variants, you have to just drag like this. And you can see on the right, you can see combined as variance. Just click on it over here like that. And you will see already created disabled and normal properties, variants. And for the property we are going to just give the name navigation, maybe something like that. And when you have to use it, just drag and drop this now over here. And you can change its state like this and make sure, uh, one more thing is that if you want to alter the shape or for example, if I want to change the shape of the state, that's up to you. That is not a very big issue. You can change both of these states. So you can see your hair navigation, normal navigation disabled is a bigger one. So it's up to you. You can change anything into any variant. So that is all about variance and its power in fig, my hope you have enjoyed this lesson. I will see you soon in the next lesson. Till then, take care and bye. 31. Prototyping basics linking & overlays: in this video of, we're going to learn a few off the prototyping basics in Sigma. Now you can see I have designed three simple screens and one is actually a left navigation , which is a custom frame. So if you click over here, you can see the size to 51. Height is 7 26 now. First, we're going to start with these three screens. So here we have. Let's zone to fit Press one, and you can see you here. We have three frames, so all of these have the same name, so I'm going to rename them. There's, uh, rename it one that's seen him in tow to that's rename it to three. So we have stepped one toe, 33 screens, and there's nothing much in this. The first thing you have to notice and you have to remember is that if you want to any made your objects, you have to name them the same Lear, for example. Here it says, illustration or hear and see if we go in this Lius panel. The names are the same administration because they are the copies off each other, and in the same next one, it says illustration the same. Or here it must be Illustration. Okay, then also these layers were here. These groups, they have the same names. The only thing that is changing is one is This illustration is changing. Name is the same. And also you can see over here. And we have these bottom bars. These are three bars and I'm actually changing their colors. So for this one, the next one, we have this different color for the 3rd 1 This one is active, other to ours, inactive. That is all that is happening inside the screen. Then we have this left navigation. So first, what we are going to do is we are going to move to our prototype or hear prototype screen, and now you can see none off. The art boards are selected. So first, we have few prototypes settings like orientation than we have device which we want toe see in our prototype than we have the model Gould. Midnight silver excuses. Also, we have some preview also. What background You want to view these selects. I'm going to select this background and then we have the starting frame. Which which one should we? So we're going to use one. And let's start combining these screens. Start connecting these screens Now. First we're going to do is I have selected this art board and clicked on this name and we have a few. You can see a small circle over here that is basically a collector point. Similarly, if we click on over here, you can see if I were on different elements or groups. I am seeing seeing the same collector items. So if I want oh, have some interaction applied toe This item I'm will do. Use this connector for this one. I moved us like this and use its corrector. So right now, we don't more toe use specific any our hair. So we are going to go with the whole screen. Let's select this one. So here we have just click and drag and we're going to leave to the next screen now as well . As soon as we leave this, we have few options Over here. Interaction is going to be on tap on drag while hoovering while pressing came bad game Bad mouse center. Most leaves. These are all different interactions. What actually you are trying to do So we're going to select on tap. Next is what's going to happen when you adapt this 80 0 ahead. Never get toe open Overlay swept with back close over the opening So these are different things you can do You can open up a link you can close any overly you are using. You can go back to the previous screen. You can slap with something else s. Oh, here we have open over live. We're going to come back to this. Open your name. They're drawn. So, um, they expect this one again. So here is the interaction with going in. So next is what any mission we're going to do. So these are the animation. Citing moving. Move on with slide and slide out. Smart enemy dissolve or instant instant instant is going to do nothing is always going to dissolve into the next skin. Smart animated. We're going to use mostly this one. MoveOn is actually moving in and in which direction. So if it moves in, it is going to be like this. Okay, so you can see the animation preview over here. Next is we have Theis timing. So we have, for example, we're going to use 400 milliseconds. So let's use rather than move in. I'm going to use smart any minute and I'm going to use these in an hour. This is the option I use most of the time. I love this. So this is options I have selected over here. And then again for this again, the 2nd 1 we're going to do the same. So I'm clicking this white area. I'm again. Slack click and drag and leave it to the nest next screen so you can see the settings I have did the last time on tap. Navigato smart and image easiness out the timing. They have been saved. So once you have selected the settings, it is going to apply toe next screens. If you want to change them, you can change them. So let's see how these actually look now. So let's play this present and click on this present and we're going toe. See this prototype? Now you can see we are on the first screen and now we're going toe tap. Over here, you can see the smart enemy of any mission because we have set it to moving, easing ease out. And also the name of the illustrations are the same, so you can see how these illustrations illustrations are actually changing into each other . Now you have seen this. We have nothing to go back to. So we can also set your tab. Sections were here. We can also use that these and yes. So I'm going to leave it open and going to go back to my file. And, um, I can have set it to go back over here also for this one to go to the 1st 1 over here, I'm going to set it to go to the next one and this one to go back that school back or ahead and try to dabble ahead. And you can see how all of these are changing. Okay, so we have learned that auto An emir. If you have the same names off the elements, they're going toe. I have Ah, riel time. Very nice. Smooth. Any mission into transition from one shape to another are changing these. Okay? No, The second thing is step area. So whenever you are prototyping a lot of designers that make this mistake you can see this 80 hour here it is very close to the next one. So first thing we can do is that we can increase its step India so you can do something like this and that's call it, Yeah, India. And then we are going to go to design and reduce It's opacity to zero. So whenever you want toe correct something, you have to connect it using this. For example, let's delete this one. The staff media. Now you can see, for example, the skip, so Skip is going to be a button. So if I try to click over here, you can see it has a very small bounding box. Now I'm going to do is I'm going toe create a rectangle over here and to have a happy idea . We're going to call it that area and we're going to reduce it's opacity to 0% actually were trying to hide it. Why? Because this is going to just act as a tapped our top target area or the skipper them. So now if we go toe prototype now, you can see I'm going to move to this. So here. Now, the next step is that we're going toe select this step any our hair and we're going toe click and drag and leave it to this one. Now this says on tap Navigator, But we don't want to never get to this one and said we're going to open it as an overly so we're going to use this open over there and we have no different settings with the position off this overly center top left top center, top ride, bottom left, bottom center, Something like that. But we're going to use men, will and I'm going to play set over here just like that. And a few more things is that I'm going to use it. This one top left. I can also use this position over here. I can also use manual or top left that can be used men will. I think I'm going to stick to manual right now. These are few pollution options to center or anything like that. Similarly, we have a few more options like clothes When clicking architects, whenever someone clicks outside of this area, it is going to get closed again. We have add background behind overly, so we're going to add some dark color your hair. You can also add vital and over here on do use 50% capacity and the any mission I'm going to use is moved in rather than instance. So it is going to move in like this from left, right and other settings are going to the same. 400 milliseconds is in and out. Excuse this. Let's try this Now. This is the last step where we were were going toe klik. Our tab on the skip. Okay, so here we have our left navigation. Very nice. When I say if I try to click over here outside, it's goingto go back in, out, in, out. So this looks really good. These are the two basics off any prototyping. You are going to link your screens together. You are going toe move from one scheme to another one by tapping. And also we're going toe overlay Different screens like you can see where here here we have over lead These are the directions moving. Move out. So that is all These are the basics off prototyping for sigma. If you have any questions, you can always ask me. Take care off all these tapping us. Try to have a good chap area so you can press them with the thump leather than your mouths off your PC or your Mac. So that is all. If you have any questions to ask me, let's meet you in another lesson. 32. Project ► Basics of Prototyping: Now you have learned all the basics off. Preferred hyping how? Toe transition from one scheme to another. How do you smart, any made and how to overly screens On top of that. So know your assignment is that you have to create this three or fours screen set up and you you have toe share it with me. You are going to create something like this. What is happening? So it will set on drag anyhow. So here is three screens and then you have tow beard some overly with anybody you have, For example, the skip. This is overly so. They should be coming from the left, right? Or wherever you want to place that you might want to place it on the top. The border bottom to top. So much is from the bottom off the screen. It is up to you. So this is the prototype. Once you create this prototype, you have tow click on the share prototype, and you can see there are settings on Lee people invited to this file and anyone with the link so slack this anyone with the link and copy link and share that links to me. So I'm I'm able to see and visually see your prototype. And I will be giving feedback to you. If you have any improvements, I'm going to tell you that. So make sure that you create this protrude. I may be mentioned your name somewhere, so I can easily remember that this is the prototype off my this student. So three screens or maybe four screens or two screens tradition from one to another and third screen for the overly. This is your assignment. So let's get started now. I'm reading to see your perfect I no. 33. Swap with Overlay & Time Delays: in this video, we're going to learn a few more things we can do while prototyping in fig MMA. So we're going to go ahead and learn a few more things, like, even see or hear. Here we have. Um it's like this one, this interaction and you can see we are using swept with. So we're going to study strapped with and how you can do that. Also, we're going to learn DeLay, for example. Um, if we have over here, if we go to these interactions, so there we have interactions, and then we have any mission. So inside this interaction panel, we're going toe study. Few more things s so we can get better at prototyping. So here we have it. Set it on tab. We're also going to study drag and also after dilly all these, for example, vile hovering while pressing he game pad thes might not be needed most of the time. So right now we're going to skip them. Maybe in the future, I'm going to create more lessons about these options. The's are different interactions while holding some object while pressing it. Maybe you are trying to create a game with the keep key. Ah, and entering key and changing something. Mouse center, most leaves. Touchdown. So these these might be mostly needed in games, basically. So here we are. So let's get started. First, I'm going to delete these already mean interactions. So there are many ways you can goto this prototype more do we are inside it. You can press delete and is going to delete this interaction. Similarly, for this one, I'm going to press delete, or you can go over here and select none. This is another way. So sometimes maybe the stigma is not working for you. And you are unfamiliar. How? Toe remove this interaction between these two elements. You can do that. Okay. So swept with so first we're going to do is we have already have this. Uh, you can say this is actually our overly We have opened an overlay over here. So whenever you are inside and overly, and you want to switch to another navigation, for example, some navigation, for example, like this one. So we are inside these settings and we want to go inside the settings and and this is the setting screens. So this is actually left navigation toe named it. It is just a duplicate of this. So, um, what we will do is I'm going to show you how it will work in a few seconds. So first, we're going to slack this layer or here, and we are going to create an interaction. So we're going to move toe this screen on tap, and we're going to use that. The navigator we're going to use swept navigate is actually going to remove this frame. And it is going toe goto this frame so everything what we left behind will be, You know, um will be gone. So this is another problem. So swept bid is mostly going toe work. When you are in an overly moored you already have an overly on your ab. I'm going to show you one more example. So first we have this, and it will go over there. And similarly, when we prestes cross overhead, it is going to go back to this screen, the screen, and we're going to use on tap slapped with, and it is going to be left navigation. This one and we're going to use dissolve. He's in, or he's out. You can use any of them for 50. I'm using preserves Scroll position. So it is Sometimes when we have a very long screen. Right now we don't have it. But if someone is have ah scrolling and embattled vertical scrolling and they have schooled , it is going toe Stay on the same position it will going to. It is going to preserve that scroll positions. If you have school down, it will be. When you cook, come back. It will be at the same position. So right now I objected just for you can see fun. We really don't need it because our left navigation is small. It is not scroll able. So let's play this. This is our prototype. Even see your hair. Here we have it. Let's play this and we go to the skip. And here we have our navigation. So just, for instance, think that this is the navigation? No, if we want to go to settings and I don't want to hide all these screens behind behind. So I'm going to select over here and you can see this whole frame the stop frame. It's swept with another friend where I can change my settings and then I can go back. So this is actually the use case or scenario off using a strap with function on fig MMA in fig MMA. So this is all about swept with. Now, let me show you one more example. Here we have our fig Mahfoud at which we're going to design in this lesson. And you can see I have designed a very simple overlay feedback. So once you have submitted this, uh, this your review about a dish or any recipe over here. So whenever you submit this after submitting this, it will show you a feedback message, and this is going to be that feedback message. So what we're going to do is just move to the prototype and this is actually our overly you can see, this screen is going toe. Get this overly so if I show you, actually, so we're going to go quickly to that screen where we have this over here. So if I go back over here, we have completely this ready to eat now. So when we click over here, it shows an overly which we already have discussed. So this isn't overly. And if you try to click over here If you try to click over here, nothing is happening because we haven't link it with the next game. So I want is that I want to slap this screen with another one which is going to be Thank you for submitting your review. So let's go back and do that now. So once someone click over here, I'm going to go to the screen. I'm goingto select on Tab slapped with this'll Screen swept with the screen I wanted to dissolve You can also use smart animator moving I'm goingto slacked Smart, animate This time is in is out and that is all I need right now. So I'm going to go back over here now. If I tried to press this, you can see we have this and it disappears after sometimes. So this is I'm going to tell you in a second. Okay, so once you click this over here, this is our frame only feedback. What I have did is I have selected the interaction after delay. So after one sacking, it is going to disappear. It is just like a feedback message that pops up and automatically disappears after some time. So we're going toe increase increases time to 2000 millisecond, which is equal to two seconds. So over here, we're going toe slack this close, overly. So rather than go back or scrap it, we're going to use close. Overly. This is all we need. So these are toward trees. Things we have learned in this lesson one is that once you are in an overly mood, you want to slap it with another screen you have to use slap with. Here we have this rapid attraction. So where it is, let me pick this one. So here we have on tap, its rapid. Okay, so now I'm going to use these in. And, uh, oops, I'm going to use dissolved is always actually better for this one because it is going toe. Um, let's like this school position. It is going to be better because we don't want things to any made up and down. We just want the screen toe appear and disappear after two seconds. So actually, I have whenever you want to use this time, delay toe clothes and overlay, you have tow slack this frame and go to interaction and use after delay in this interaction and used time over here and close the overly. Now we're going to see this. And if we click over here, submit overly Summit review over living dough. And if we click over here, you can see thank you. And it is going to disappear after two seconds. So this is the interaction we wanted, and we have created it using slap ID and time delay. So I hope you have enjoyed this lesson. If you have any questions, are you want to ask me anything about prototyping In fig MMA, you can always ask me, Let's move on to the next lesson. 34. On Drag Interaction + Horizontal vertical scroll: in this lesson, we are going to learn on drag in traction. So if I select this one, you can see in this interaction we have on tap on drag. So this is going to be used a lot of time. And when you are designing or creating some interaction or prototype, so on drag is actually going toe in tracked when you try to drag some object. So for that, we're going to create, uh, and rectangle here. So just think that this is an e mail. So you are using, actually, for example, you're using Gmail, and this is an email over here. So there's a tax your hair. Let's put some text no shoes on this background to be like this. So here we have an email. Just think that this is an email I just received. Let's use over here to minutes ago. I assume that I have just received this email and this is my real let's like this and command g to control a group. We're a group. Okay, so we have this squalid email. Okay, So just our email over here. Exchange your sculler to something else, shoot this one. Okay, so we have received just an email and I want to drag it. And I want over here my controls, Toby delete or maybe moved to some folder or something like that. So I'm going to use to Elemental. Here's one is going to be this one, so I This one is going to move like this. Okay, so let's copy this and placed it over here. Control C, Command V. And here we have the same email over here. But over here, we want it to be dragged to this location. Drag to this location, and we are going to use another. So we are going to create another 10 here, 84 height. Just combining with this like this, and we're going to use some other color, like like this. And let's move this a little bit more. We're here. This Okay, So this is our drag state. If we want to add some, you can see some icons, lips at them, shift control, backslash I pawn. I'm going to use material icons, and it is going to appear or hair, so I'm going to use delete. So here we have delete. Excuse this, and we have still eat Let's make it inside. This helps. Let's drag it and use it over here. Yes. So let's What is the Here we have this list, Mr Bean. Image dragged and normal, so I can easily see what is happening. I am I never to see what is happening over here. So here we have this factor. Let's move it over here with this rectangle. Let's delete just here. We have this specter above this rectangle change its color white. And next, you some Dexter along with it. So these these are just few adjustment. I want toe tell you weigh and how we can use it. And what is actually the use case off this option so we can have more options over here. Let's just use keep this over here right now. Just dilute and select all of them. Come on, G. And this is going to be our drag actions Escorted drag actions. Now, if you want to use this, we also want this group Toby over here, and we're going to position it. Come on. See? It is going to be over here, but it is going to be outside off this section or here. This is going to be over here outside off this frame. So now we are going to go to prototype. So we have bought these this email and drag actions. We have both these in both off these frames. Both of these are boards. Just a change off the position. So we have this drag state and this is actually normal state. Now, we're going to prototype this. First, we're going to select this element over here email because our drag action is going to happen on this leader. So we're going to link it to this over here drag state and on tap rather than on that we're going to use on drag. So on drag, it is going toe navigate toe this drag state, and we're going to use smart anyway, it and easier is out. That is, I'm going to use. So let's use 4 50 milliseconds and let's see how this happens. Now you can see we have this email over here and we're going to perform over drag action and you can see once I'm I have dragged. You can see this delete option or here. So we haven't created the drag back over here. So we're going to link that now. So now you're going to select I did this or this, so we're going to select this one and, um, that's used on drag. And it will move toe, never get to normal state and we're going to use the same settings overhead. So let's go back. And it's dragged this like this and this this and this. Similarly, if you want to have this whole Dragnea, you can also use this and you can also use the same action over here on drag. So if you missed this a year and you use this area, same thing is going to happen. You can see So right now I think our this one is very close. The prototype. So this is actually the drag action. So you can also have one more screen where this actually is deleted. So once you've drag and then tap on this over here, it is going toe. Remove this email and move all other emails up. So for this exercise, I wanted to tell you how to use on drag action and how you can use that when you are trying to create some prototype in fig MMA now Let's talk about simple scroll actions. Hearts under school and vertical school. You already have started vertical school. It is very easy. Your screen is length here than your normal screen. But what about horizontal school, for example? I have, like, three boxes were here, and this is outside. So what I'm going to do is I want them to be screw allowable. So right now you can see this is outside off this whole frame. So how I can do that? How I can scroll these, For example, I have this one over here like this. It is going out, so I have to drag it inside this fame. So this is our normal over here, and we have four different. You can see a four different frames over here for different rectangles or maybe images Or maybe anything. Um, you can think off. It could be your recipes or anything. So if we have four of these, and I want them to be dragged herbal, so whenever someone opens this app, they can easily scroll them. So right now, if I go over here, you can see Let's, um, replay this and we have it over here, right? now you can see on the dissection is happening. So this is actually the drag tribe is over here, but I want them to be screw level so very easy. I'm going toe select all of them. I'm going to use them inside a frame, so I'm going to use frame selection. This is my friend. So what I'm going to do is I'm going to reduce the size off my friends a window sizes, actually. What is 500? I'm going to use 400 instead. So this is going to be my friend. And I'm going to use clip content like this like this. That's used Z over here like this. And I'm going to use 400 for the size like this. So this looks better now for any frame you can select providing options. So once you have selected this frame, you can goto prototype over here. So this frame is selected. You can go over here No schooling, and we want to have horizontal scrolling behavior for this overflow behavior. So this is actually going to happen over here, so you can also set it to for this whole art board so you can have ours under scrolling vertical and hours into schooling. It's up to you. So once this is set, you can easily drag them like this. You can see really nice. Very easy. I mean, I think I should explain it a little bit more. Let's use the window. Verdes, Toby. 300 hopes, nor 30. I want the framework to be 300. Excuse this. So here we have the framework. It I'm going to move the frame. Um 60. This So I'm going to move the content inside the frame like I like this. Okay, so frames actually of indoor, it is going toe work as a window. And now when I try to use this, you can see where Here. Very nice. Very nice drag and school over here. It's actually we left our one element over here, which is our green. I was doing OK, so it is very far away. That is why this is happening. So let's use all of them and you study up to have an equal of it and distances between them . Let's like these. Okay, so this is this is really cool. Very nice. Very nice. So this is actually how you can prototype and enable horizontal scrolling or vertical schooling and use frames for school herbal elements like these. So I think this is going to help you a lot in your prototyping when he was using sigma these air on the basics I have covered. I don't think you need more than this right now to create beautiful interactions. If you have any questions, you can always ask me. See you in the next lesson. 35. Hover transitions in Prototyping using Figma: In this lesson, we're going to see one of another feature of prototyping in sigma, which is while hovering. So this is another trigger. Basically we have to animate something or moved to another screen when you are hovering something. So let me show you how actually I have used it. So now you can see this is my design. I actually designed this website recently, right now in development phase. Now if you look over here, you can see when I hover over this link, it fades to blue color, which is actually my whole overstate for my web design. So whenever I hover over this, you can see over here. So you can see the color has changed. So this is actually, I made this prototype to show my developer, my web developer, that how you are going to apply this whole effect over this navigation. Similarly, you can see over here, same I have did for these buttons over here, call a double six similarly, the bottom one. So this is how I showed him or explained to my developer that this is how you are going to use this, these colors over these buttons. So today I'm going to show you how you can easily create this. This is a simple exercise. You can see over here. And this is very, very, really easy. So there is just to things you don't need to do a lot of things. Now, let me show you, let me rearrange these for you. Okay, so this is going to be our default screen, or the first one. So this is going to be our first one where we have all the states, all the buttons in normal state. Normal state means that they are going to be in just simple way that there is no hover animation, nothing. So this is going to be default state or normal state. Then when someone hovers over this button. Now for each homework, for this one and this one, I am going to have two different screens. So you can see here, let's call it over button and let's call this or link. So what I actually did, let's delete these. So you have created, for example, you have created this screen or here, let me zoom in. So sim one symbol but on one simple link with grey color and make sure you have a touch target or heat area around it. So what I did is I just drew a rectangle. Let me show you. So I just drew a rectangle over here, made it 0%, and move it inside this try now, at the bottom of this try now. Now the text is that the top and we have a hidden layer behind this. So this is what we are going to use. To prototype or link our prototypes. So this is just a simple bot and 24 pixel is a roundness and this is the size and width. This is just a shape. That's all we need. Now, let's, let's make it a bit smaller. That's great. Okay, so now we have our default state ready. Now I am going to replicate this by pressing holding and pressing art option D And just dragging it like this. And then we are going to drag it like this. So this is going to be our default. This is going to be our hoover button state. And this is going to be our Over link state. Okay, so what we are going to do just we are going to change the color. Let's use something over here. And I'm going to go here like this. Use this. Okay, so you can see in this state I haven't changed anything for this because if I try to change it, when someone hovers over, both are going to change. Now, Let's prepare the second one. So here on this hyperlink, nothing is going to happen to this button. But this link is actually going to change its color from this grey to the scrape black. Okay, that is all we need. So now we are going to move to this prototype and we are going to link these. First. We are going to link this one to this one. And on our interaction rather than onClick, We are going to press this vile hovering. So all these while hovering, while pressing, these are almost the same mouse enter mouse leaves. These are almost the same like hoovering. But they have some other options like maybe you want to animate something. These are for those key and gamepad is actually the key you pressed, for example, four or five or six, or P, o you any key on your keyboard. Right now we don't need to go into that. So vile hovering we are going to select while hovering. And for the animation I'm going to use, let's use dissolved first. So I'm going to use ease in and out 300 milliseconds. And then for this one, I am going to move, link it to this one, the same, same settings over here. Now let's see how it actually ends up. So now you can see really cool. So whenever i over this, you can see how it actually animates and fades to that color. Really great, really great. Similarly for this one. Oops, what is happening over here? Let's see, what is the problem. Dissolve is in, out o, so it is not onClick, We have to select on while hoovering. Similarly for this one. Oh, very nice, very nice, really, really cool effect. Okay, so now you have learned how to use this vile hovering in prototype using sigma. I hope yet that you can use these affects in your FISMA prototypes. You can use them in your web design prototypes like I did over here in this prototype to show my developer that this is how the whole effect is going to work. So I hope you have enjoyed this lesson. See you soon in another lesson. Till then, take care and bye. 36. Project ► On Drag and Scroll: Now is the time for your next assignment. And your assignment is that you have already learned drag function like this. You can see where here in this prototype drag function. And this is your first assignment that you have to create a file. You can clear this simply. I just want to know that you have understood the concept. All you can create an email, whatever you want, so drag and drag. So this is one portion off this assignment. Second, is that you have to create some this horizontal scrolling within a frame. So this is your next assignment. Create this and then you have to click on the share prototype Anyone with the link and copy link and share with me the link in your discussion or in the assignment section or project section, whatever is available to you and I want to see what you have created. Make sure try to use your name somewhere so I can remember that this is from this student. So I am seeing farmer to your assignment waiting for it. Now keep designing and improving and keep prototyping. Like always, this is going toe cleared. A better world with good designs anyhow, stock No 37. Figma Mirror App - Preview on actual Device: in this video, I'm going to talk about how you can view or preview your fig, my design on an actual device. So there are many ways. So there is an app court Sigma mirror. So you have to download that on your mobile, for example. You can see this is on your Mac devices or your iPhones. So you have to download this fig mom mirror for your iPhone. And then you have to download the stigma mirror for your android abs. So right now I have my android phone with me. I'm going to switch to that screen with my camera and I'm going to show you that how you can views your this bird eyeball. Here, let me show you this prototype on an actual device. So there are a few steps that are going to help you view this because some some things are confusing and there are very you can see bad reviews for fig my app. I think they are trying to improve it. Three stars over here and also 2.5 SARS or here. So they really, really need to improve this. But still, I think I'm going toe guide you through this whole process. So let's switch to the other camera and see how actually you have to do it. Now you can see my fig momentum. App is open on my android phone and you have this email and password you have toe type the password and the email off your fig. My account. I have already saved it. So I'm going to press logging. No. Once you log in, it is going to ask you that. Select a frame or component that direct Dax is directly on the canvas. So now you have to move to your fig, my ab over here, and you have to select the scandals over here. So I'm going to slack camera State of one, which is right now on my screen. And you will see that after some time off loading it has loaded this screen over here. So once the screen is loaded, I can just a prototype, for example, tapping over here. It is going to animate and transition into different screens, although it is a bit legging and slow. But I think you can view your upper right. We're here that I'm going to go to Skip, and you