Master Figma to Design & Prototype your Mobile App Idea with transitions | Muhammad Ahsan | Skillshare

Master Figma to Design & Prototype your Mobile App Idea with transitions

Muhammad Ahsan, UI UX Visual Designer 10+ Years

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
52 Lessons (7h 34m)
    • 1. Intro to Figma Master Class

      1:55
    • 2. Download and Install Figma on Win and Mac

      4:46
    • 3. Basics of Figma Interface

      9:08
    • 4. Different Panels and what they do in Figma

      6:49
    • 5. Using Frames and Artboards

      7:37
    • 6. Figma UI Design Tools

      12:56
    • 7. Type tool in Figma

      6:46
    • 8. Using Pen tool to make shapes

      9:13
    • 9. Place Image tool Update

      7:47
    • 10. Hand, Comment Pencil Tool

      5:07
    • 11. Fill Colors and using Gradients in Figma

      7:46
    • 12. Project ► Gradient Buttons

      1:07
    • 13. Using Masks in Figma

      5:33
    • 14. Project ► Masking Images your Introduction

      4:13
    • 15. Creating reusable Styles

      8:22
    • 16. Effects panel in Figma App

      9:46
    • 17. Project ► Using Layer Effects

      1:17
    • 18. Components in Figma

      9:10
    • 19. Using Constraints with Components

      5:45
    • 20. Common shortcuts part 1 - Figma

      6:52
    • 21. Common Keyboard Shortcuts part 2

      10:55
    • 22. Collaborating with Designers in Figma

      2:49
    • 23. Working With Team Libraries

      13:03
    • 24. Community Tab in Figma - New Feature

      7:45
    • 25. Using Grids and Guides

      9:41
    • 26. Using Auto Layout in Figma App

      5:23
    • 27. Using Group vs Frames

      11:15
    • 28. Exporting Assets and Images

      9:16
    • 29. Prototyping basics linking & overlays

      11:36
    • 30. Project ► Basics of Prototyping

      1:45
    • 31. Swap with Overlay & Time Delays

      9:33
    • 32. On Drag Interaction + Horizontal vertical scroll

      12:21
    • 33. Hover transitions in Prototyping using Figma

      7:11
    • 34. Project ► On Drag and Scroll

      1:22
    • 35. Figma Mirror App - Preview on actual Device

      5:26
    • 36. Creating Wireframes & inspiration study

      8:17
    • 37. Grid Guides plan before designing

      7:27
    • 38. Design User Interface of Login Screen

      18:17
    • 39. Home Screen - Recipe Mobile App Design

      19:10
    • 40. Home Screen - Recipe Mobile App Design 2

      9:54
    • 41. Home Screen - Recipe Mobile App Design 3

      25:32
    • 42. Home Screen SALADS - Recipe IOS App Design

      4:21
    • 43. Healthy Recipes Screen - Recipe Mobile App Design

      2:19
    • 44. Prototyping Sliding Navigation in Figma

      11:42
    • 45. Search Filters Recipe App Design

      8:33
    • 46. Prototyping Search filter selection animation

      15:55
    • 47. Designing & Prototyping Search Results

      14:25
    • 48. Recipe Ingredients Screen Design

      27:42
    • 49. Recipe Screen Prototyping

      15:10
    • 50. Review Pop up Overlay transitions

      10:06
    • 51. Project ► Design 6 Screens App

      2:26
    • 52. Thanks and What's Next

      1:04
28 students are watching this class

About This Class

Figma is one of the most powerful UI and UX Design tool that can run in a Browser. Figma’s power is hidden in its being cross-platform and Collaboration with other Designers and Developers. It works seamlessly on Windows and Mac Operating Systems with a Desktop Application. In recent times, it is one of the most powerful and popular User Interface Design App due to being a Cloud based App

This class will teach you all about User Interface Designing and also adding interactivity to your Designs with powerful prototyping features of Figma. First, we will learn about the basic tools, common keyboard shortcuts and familiarizing ourselves with the Figma’s interface.

Once you have solid basics, we will move on to Auto Layout, Responsive design and few advance things like viewing your Prototype live on an actual Mobile Device. I will show you everything step by step.

We will design together the User Interface and then the prototype of a “Recipe App called YUMMS” from the scratch and make it into a pro level design by multiplying Artboards, using reusable Styles and Components.

If you are Beginner in UI UX Design or a seasoned UI/UX Designer trying to switch from Sketch or Adobe XD, please join me in this learning experience.

Transcripts

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. Basics of Figma Interface: now, Once you have downloaded fig mine, install it, you are going to run it. And the first screen you're going to see is this one. Now, in this lesson, we're going to get familiar with the interface off Sigma. So let's get started. Now. The first thing you're going to see is this recent files. So you can see these are my recent files. You can arrange them alphabetically. Date created, ascending, descending. You can change their view from this list. So this grid items and you can also see that there we have a plus sign over here. This is you are going toe, create a new file. So when you press this one, you're going to create a new file. This is the inboard files. If you are using sketch, you can import sketch file into figment. So this is the basics screen you're going to see. Then we have you been see or hear plug ins. So if you want to install some plug in, for example, like this one, just click on install like this and it will be installed. So this is where your plug ins are. So these are all my install plug ins. Thes are few featured plug ins. You can browse plug ins and search them by name. So this is the plug in section recent Blufgan. Then we have this such So you can search files, projects, people, whatever you want. We're here to like you can see. What? Here. This is one of my project called practice. So if I go back and type here practice, it would show me that we have one project by this name. So mostly it is from over here like this. So you have to switch to another dab to see what this project is. So this is, for example, if I teibel here like this, you can see it is a file. So this is the file jams app we're going to create in the schools. You can see Fire founded and said that it's a file. Then we have this jobs. This is basically a project. So this is by de fired we whatever we're going to create it will be in the draft project and you can press this plus icon over here. All your diligent files are over here. For example, you can see on similarly again. We have a new file icon, our hair and in we have an import file over here. So this is draft, So there is a confusion. So whenever you start using figment, you might be confused. What are different teams, but is project files frames. So I'm going to make sure that you don't get confused by this. So first we're going to study what it's fig ma hierarchy. So at the top, we have a team, for example, to people deemed three people team. There will be a team so you can create a team in Fig MMA. Then, within that team, we have multiple projects, maybe three. For then, whatever the number is, then, within those projects, with each project, we can have multiple files and in a file, we can have multiple pages off that file, and then we can have a lot of different art boards or frames within a single page. So this is whole Sigma's hierarchy, so don't get confused with my project or file or pages. What are these different terms teams Within the team, you have projects on multiple projects, but in single project files within fires, you have pages within pages. You have a lot of art boards or frames. So this is a fig Mayes hierarchy. So let's get back. And we're going to click on this fig mike on over here, and you can see we're here. This icon, this is a team, so you can see where here this is. Learn you excited, team. And if we click over here, we can have members. We can invited that members by clicking over here. We have different settings enabled libraries for all teams. Thes are, I think, features for professional and other upgraded pricing models. So if you have tow, you have to subscribe to $12 to get this. Yes, you can see what? Here. Upgrade plan. So they didn't. This team, this is my team. We have a project which is called practice. So we have this practice you can see or hear if I click over here and opened this project. Okay. So you can see it says practice. And within that practice, we have this file circular graph plus clock. So here we have different art boards. So if you go over here, this is another. This is one Ardmore. You can see where here. This is another one. One more thing is that if you want toe change the background color, for example, or hear the background color is great. So just UNSA lacked or disliked any off the art board you have selected or frames you have selected. Go over here, for example. Click on this empty background and you can see here we have background color so you can change the background color to something like this. So this is how you are going to Jane some off the things within fig MMA and then we have over here. Over here we have share controls. You can share your files, you can play your prototype. So if you want to present it, you're going to click over here. Similarly, we have this zoom in, zoom out all different zoom 200%. So this is 100%. This is, uh these are few things over here. Then we again have some manual here color space. We're going to use s RGB. So if you have settled toe unmanaged, try to click on S rgb. So this is really necessary. If you are designing for digital devices, you are going to use as RGB color space. We again have Blufgan. Zor here. New window. New file open draws violent browser. Different options. Check for updates about Sigma. So this is the right side. And if we go over here, this is our search. You can click over here and you will have another menu here file. And it you object Director dext range plug ins, integrations preferences, different settings. Libraries that are basically designed libraries you can share with your team. And this is your account settings. And on the top on the left, you can have different. You have different tools over here. For example, this text, this comment tool, you can use it to commend on different projects. This is handled to move like this. So we are going toe go deep into these tools. Don't worry right now. Just get familiar with the interface that on here we have different tools like move scale. The's are our art boards or frames. Over here, they call them frames. So if you want to create a new frame, you're going to click over here and you will see different frame sizes over here. Tablet Foon. Okay. Similarly, we have all these tools, and if we go. Want to go back? We're going to click on the stick Mike on and we're going to go back on where we started. If you want to create a new team, you are goingto click over here at the bottom left and new team. And, for example, I create you X team off that's used this UX team. So let's see if it let me create a team or not. So you can add different collaborators over here, so I might have three or four different collaborators or people that are going to work with the steam over here. And right now I can skip and you can see or hear choose your team plans. So that is why I said that it is going toe ask you for upgradation because you can create one team in the free version. So this is how you can create a team. Now, if you are a Mac user and you're using fig MMA on a Mac, then the only difference between the interface is that you will see the menu bar at the top . So whenever you open up phlegm A in your Mac computer or Mac laptop, you're going to have this menu bar over here. So the same thing is over here. If you want to change the color space and different things are going to be over here. So that is the only difference between Sigma's interface for Windows and Mac. I think that is all about the interferes off this Ah fig model. Make sure you remember this hierarchy Team projects, filed speeches and framed in our ports. I hope you have got familiar with Sigma's interface. Now let's move on to the next lesson. 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. Using Auto Layout in Figma App: in this video, we're going to learn about utterly or feature off Friedman, which is very latest, and you can create but ones that are going to expand on their own. So let's get started. First you have to do is you have to select the taxslayer. So we're going toe Presti or slack this over here. And let's use something like this Down Lord, No, let's escape And we have over text. Now, what we're going to do is to add orderly out to the stacks were going toe, have a shortcut key, which is called shift and a shift plus a and you can see we have order layout added. So there is a feedback. Go ahead. Now, on the right, you can see we have horizontal layout orderly out, and these are the settings we are going to work with. So this is actually the padding. Horizontal is actually the direction in which it will have other elements or hair expand or something like that. But right now we're not interested in this one. It is going to be auto hide, and these are the things we're going to be interested in. So first we're going to add a fill over here so you can see what is happening over here. So we are going to use a fell, for example, like this one. Okay, so you can see this is our feel. And this is actually the padding on the right and on the left, off the stack so you can see this area over here. It is 10 pixels. So if I try to increase it to 24 you can see we have more space on right and left. Similarly, for top and bottom. We're going to use something like 16. And this is actually the batting between two items. So if we have toward three buttons, this is going to be the space between them right now. We're not interested in this value. We're going to come back in a few moments now. We're going to add some rounding rounded corners. I'm going to press it or hear or see was 16 excuse 50. So we have a bill, but I know here. So what is special in this burden? So just double click, and you can use sign up and it is going to expand. You can use create account, and it is going to expand, and it is keeping all these values over here. So 24 you can change them. For example, I wanted to be 20 something like that, and I wanted to be 15. Okay, so you can have something like these values. So this is how you create an auto expandable but and using orderly out. Now, this is not end of the story. We have something more. So, for example, I have a create account button and log in button, and they have specific spacing between them. So what I can do is I'm going toe add another container frame, which is going to act as a container for this, this frame or despondent. So right now I'm going toe rename it toe button just to make it clear. So we're going to slack this, and we're going to add another orderly out toe use as a container. So shift A and auto sales added knows you can see we have a boundary off another container . So this is actually ah, frame inside a frame, so button is actually a frame, and then we have another outer frame. Now, outer frame is actually going toe control the spacing between these items, so you can see right now it shows vertical direction. So let me show you what it can do. So now we have added another frame. And inside this we have. But so select this burden and breast commander control the to duplicate. And you can see we have multiple buttons over here and they have a specific spacing between them. Not this pacing is controlled by this frame fund, which is their container. So we have 10 pixels right now. Let's increase it to 60. Now you can see and if we try to use horizontal, you can see they are going to be in destruction. So you have seen menu items on your websites. They are going to be something like this in a in destruction. And if I try toe have some less pissing like this. So let's delete the last button or hair, and I'm going to stick with these two and I'm going tohave log in option. We're here so you can see this is how you create multiple buttons and using auto layout. And let's try to change the color off this button or here hopes this is the burden and I'm going to change the color off it toe. Let's use something like the solar here. She was this. Okay, so if we have creatively out and logging and this is actually the use off utterly outs in figment. So I hope you have enjoyed this lesson. How to create our I'd orderly out to your buttons and how to create these auto expandable buttons using Sigma. If you have any questions, keep asking me Let's move on to the next lesson. 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. 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. 30. 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. 31. 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. 32. 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. 33. 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. 34. 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 35. 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 could see, the sliding menu is coming up over here. I'm going to go to settings and I want to go back and then I'm going toe, move this out. So it is a big slow. But I think, um, you can view at least some off the working off it and you can see how it is actually going toe be viewed on a mobile app. I think they have to work on it a lot, But still, it is a very life preview. Your design. Some of the times when you are designing, you have to view your actual design on an actual device like you can see where here I can clearly see what is the type size, what is a four size, but that the staff media is enough for North these kind of stuff. So you have to see your prototype on a live device toe, actually see some off the things. For example, you can see this button is actually good enough toe, you know, Tab or here, for example, this circle icon over here, this one this close circle it is actually a good size. I can easily dap it for the finger. So These are the kind of things you have to see. For example, this phone for Chuy's this text size and thes margins on the sides off this device. So these are some of the actual things you have to see live on your device. So then you can go back. Hopes go back to this fig mab. You can log out and that is it. So I hope you have enjoyed this lesson. You have to download the stigma Miller app on your mobile device whether you are on IOS iPhone and make sure that the frame size your frame size you are selecting your art board size is actually the same as your device right now. You can see this app over here, which I am actually trying to use is Google. I think it's actually let me show you. It is Google pixel to excel. So this is 400 lemon by 8 23 This is the size for my this android device, so I actually had toe figure out. Once I opened this over here, I had to see which is the size that is actually going to fit on this device. Similarly, if you are trying toe tests on and iPhone 11 pro or eight plus you have to use that physical device. Otherwise, is it is not going to fit toe the whole screen. It is going to be a bit outside, or maybe sometime inside the screen and leaving. Some black areas are outside. So these are the things about using fig mom mirror app. I hope you have learned something valuable from this lesson. Let's move on to the next listen. 36. Creating Wireframes & inspiration study: before we start designing this, uh, nice app off how the recipes. I'm going to show you what is my planning process and how I have reached this design. What inspired me? How I selected thes colors for my color scheme. Although I have different courses, you can look at them. I have color scheme course. Is that how you can master the color scheme? Typography selection? I'm not going to go into a lot of details because these are big, bigger topics. But whenever I start designing anything from user experience, point of view, you are going toe. Always have some off thes wire frames. So without these, you are not going to go anywhere before these wire frames. We have, ah, hold user experience, design process, use the stories, use the scenarios, affinity, diagrams and all that stuff. So we are going to interview users. We're going to see what are their needs, and we're going toe convert your knees needs toe, do the stories, wars and features, and those features are going to be on a vile frame. So wire frame is going to be the starting point off user interface design or whenever you are going to design. So we have all the user needs over here. And you can see this is my logon screen. These are the skin sharks off my drawing. Bad. Pardon my design, or I actually try to be as simple as possible. And you can see we have I have the idea of having some, um, place or something. Some apples over here. Something like that. Yeah. Comes log in with Facebook and log in with Google and skip the Logan, for example. I have seen and studied, like, four or five popular me laps before designing this one. This is really important. So I'm going to show you, Uh, this is the inspiration for me for the color scheme, so I really love the green and orange. So I mainly use this. So this is actually a color scheme. But I'm not copping this color scheme. It is different. These are different colors. Now you can see I'm going to go toe inspiration for their cynicism. And then we have an idea supporter. So in this ideas for a you can see these are the popular recipe abs, but none of them looks like mind. So minus totally different I got the ideas. Different ideas like this bottom navigation. What are different things? You can see some off the things. For example, the star ratings this. Then we have the search icon over here. So some of the legal adoption some off the killer's some off the you can say ideas like you can see these are separated by these lines. And if I look in my design, you can see I have used this similar lines. You might not notice these very simple things. You can see I have these in my ingredients over here. So this is really important. You get a lot of ideas from seeing other ideas. You are going to have a lot of ideas if you keep on looking different ideas on other I Other abs. Other designers you have tow expand your you can say design, taste and keep on looking on different designs. It is going toe, give you inspiration and it is going to improve you as a designer. So these are you can see different inspirations. And these are the ideas I had and from thes I went toe have something like this. So I keep on trying these fire frames and you can see we have mean Sellards desserts, desserts healthy, featured on the 30 meters healthy recipes recipe title stars, ingredients and preparation. Because these are the two most important things without ingredients, you cannot start preparing your recipe so ingredients are going to come for. So whenever someone lords this ab, these are this is actually loaded first, and then you move to the preparation. Similarly, you can see if we go back to wire frames. We have such options over here, then this is my log in account settings, and these are the things I had in mind. So a few more things like you can see or hear, hear. We have different allergies and diets you prefer. So this is actually this is a feature I actually designed and implemented in my search over here, so you can see if I go to search so you can see if you try to search something, you have a lot of filters. Officials. I died plan filters. Filters are common allergies like these other common allergies. People have soy food, whole grains, gluten, including analogies or something like that. So you can click and select both off them. You can either select the diet and you can either select an allergy you have. And this is going to be the results. Eso it is going to have fill this such bar and it will show you the results So you can see I have also added this color which is inside this color scheme and also this orange so you can see I have actually changed some of the aspects. For example, I have a lot off dim, dull green in the background over hair rather than agree or some green color. I said this. You can see what here and the phones I'm using. Over here are these Rubik Google forms and Yanta money. So if you are going to start this design are open up. My design in your phlegm ahap try to download and install these forms is a really beautiful sense. Sense said if orange and easy to read and have some style to it. These are very clear. So these are the two forts die faces I have used in designing this. This is the logo. I designed myself just for this exercise quickly. So you can understand. You could just understand the meaning off this. And, uh, that is all. So I have some off the icons over here, which I actually, um you can say I have an AB which is called Nuclear AB. Over here, I use the icons from this You can use icons from Google Material Design, Google Material icon. So you can such koukal material Icahn's And here you can go over here. I can material design and you can select down Lord from here so you can see we have arrows . Different kind of adults. These are standard icons. You can use icons from him. There are many videos. I have shown that how to download and use a whole icon. You can see a system. I'm going to share these icons with you if you want. And you can have these these SPD files. I prefer to use SPG files as an icon because they're expandable. So that is all. That is how my whole design went hand. And, uh, I hope you will enjoy this exercise and learn from it all. Actually designed it. I always vision. Always suggest that if you are Regan typography or color scheme or layer design, you have to take other courses which are going toe improve your design skills learning a tool and design skills are two separate things. I hope you have enjoyed this video. How to prepare your before your design. You have to download these four typefaces you have tow. Select your color scheme. You have to have some ideas and inspiration in your bag, and you have to have your vile friends, Freddie. So let's move on to the next lecture and start designing now. 37. Grid Guides plan before designing: now, in this video, we're going toe get started. And before that, we're going toe handle our grades and they are great and we're going to have some guidelines so we can easily define them before we get started and align our major elements , like our top navigation or bottom navigation according to those guidelines. So what I'm going to do is I have a team than you excited. Then I have a project in him figment class, and I'm going to click on new file. You can also click in drafts on this new file, and you can create a new file. So once you create a new file, it is going to be untitled. So we're going to rename it and let's rename it to free GMA food app. So here we have. Let's change the background color, so I'm going to go with a darker background because it's easier toe view things over here. So here we have it. First thing I would like you to create over here is your vile frames, so you can create your wire frames on paper, pen and pencil and just take the screen short and get them over here. That is all you don't need to draw your You can say wire frames in fig MMA. If you want to draw your wife rooms over here, tax up to you now I will create three pages. One is going to be wire frames. Second is going to be our design. Um, next scholars are us. Yeah, or let's call it men design. And then we can have another page called Styx Guide. Where we were, all our components will be, So this is going to be on a structure. Now we're going to go to main design, and the first thing we're going to do is we're going to press A or F G to go to this art boards or frames. So on the right, we have iPhone 11 pro Max 11 pro. I'm going to go with 11 pro, and here we have our art board now, before going on, because each frame is going to have the same settings as the next one. So we're going to define our layout grade over here. So let's press this plus icon over here, and we are going to go toe columns and we're going to use four columns over here. Let's center, Align Aid And our each column will be almost 70 bigs wide, and God will be 20. So this is going to be our columns and settings for our layout grade. So once we have defined overtly out grade, we're going to move to the next step, which is going to be our guidelines. So make sure you have ruler over here on top and on the left so you can see on the right this menu we have rulers turned on. So make sure you have learnt rulers turned on you can press shift in our to turn them on. So once you have done them and you can see done off and on, So once they're on, we're going to drag a ruler over here, and we're going to place the 1st 1 on 24 pixels over here, and then we're going to drag and drop the next one at 72 pixels over here. So this is going to be for the alignment of our icons. Our icons are going to be touching this 80 over here that this is going to be our such bar over here. And if we go down here will be our at 1 50 Big Oezil's. We're here. You can see on the left. If I go over here on the left, you can see the value is 1 50 So we're going to leave it like this and let's drag the last one which is going to be over here. So if you are unsure that how you can you are going to drag these. You can create your own element. So here, for example, I'm going tohave Height off 60 pigs is for the bottom navigation. So I'm going toe create a box over here off 60 pixels just for temporary, just temporary box and I'm going to align this. So you have seen that I have clicked outside toe, make it universal guideline. So we have three guidelines at the top. Similarly, you can do the same over here so you can create an asset off your rectangle off 24 pixel size and we're going to align it at the top. And if you don't know how toe make exact 24 pixels. Just create these elements like this temporary elements, and we're going to drag and drop it like this. It is going to snap over here. This is really good, because we have to be something. We have something like this. So let's create now, make it side 72 you can see it is snapping correctly. We have it on 72. Then we're going to be on 1 50 That s cord. We have it on 1 50 So our main guidelines are complete. Let's, um, make sure that these are actually global guidelines. So I'm going toe klik outside and drag and drop it over here like this, that I'm going to make it 1 50 Click outside drag and drop it over here like this. So I think we have to over here. So let's remove it and create a new one. Let's drag it and drop it over here. So this is how we're going to lay out our main interface and how we're going to get started . This is going to be our canvas. So once we were going to complete for screen, we're just going to replicate this one. So click on this press Artur Option key and we're going to duplicate it like this so you can also hold your shift key to all can shift key to have it aligned in in the same way in the same line, which just exactly where your first frame is. So this is how you actually do it. So this is our this is going to be our first screen. And once we have this, let's rename it toe, um, in draw or something like this. And let's Delia Rex used this rectangle. We had one rectangle over here, so let's draw a rectangle for the background. To be this full size over here like this, express one to zoom into the fit and we have this background. Let's call it PG or background. Now we're going to drag our image inside it, and we're going toe place inside this container and move it around where we warned the image to be 38. Design User Interface of Login Screen: Now let's move to the resources for dinner. I have attacked with this exercise. You are. You have already downloaded it. Now we're going to open it and driver image over here. So here is our food app. Resource is, And inside the images folders, you can see these other images. Here are the images for at backgrounds that are very empty and can be used over here. So I actually use this one. So I'm going to drag and drop it and fig my like this, that zoom out. And you can see this is actually the boundary off this image press shift, oppression person Hold shift and alter option key toe. Make it my big, smaller like this. You're going to move it like this. And one thing we're going to do is we're going to slack both off this layers and we are actually going to mosque control, art and marker command option. And so here is our mosque. So now you can see this background is actually masking masked by this rectangle over here, so I'm free to move it around. Let's hide our layout. Grid control shift four is a shortcut on, um, B c and I think control G or controlled. I don't remember the shortcut on the Mac, but it will be displayed on the screen. So, um, just to make sure that we can easily design rather than discs it distracted by over here. So I want to move this. You can see I have selected this image or here. So it is moving inside this container. So let's move it around like this, and you can enlarge it and you can make it up. It's a bit smaller like this, and I think this is looking great. Now, if you want to change Ah, this image or any settings you can go to this image. You can change the highlights increase the highlight, Like this highlight is actually making it a bit more brighter. Whites are more prominent shadows, Atmore, dark against. If you want to make the shadows more dark, you can go over here or maybe something like this. So here we have our image. Now we're going to go to other sources folder and get our logo Now. Actually, what I did is I created this logo inside the stigma hap and I don't really recommend I really never recommend fig motto. Create a logo. So what is happening is when I try to export it using SVG form it. It is giving me a very veered kind off logo. So now you can see I have exported it using PNG farmers over here and exported this logo. And we're going to drag this PNG logo because s which is not working. I'm I'm not sure what is happening, So here we have our file. So let's drag this over here like this. So we are going toe place our logo like this over here, and then we're going to place our text over here, which waas Healthy recipe book. Now we're going to grab our text tool and trustee, and we're going to right over here. Healthy recipes book, and you can use Roberta for two. But we have used Yeah, Monta form. This is actually a Google phone gets free, and we're going to use 18 exist over here for this one. And, uh, letter spacing is going to be 5%. And, uh, I think that it's all we're going to align it in the middle off this a little bit on the left and the color will be will be next use except a similar seven year. It won 88. So this is actually a great blue color. You can see your hair and I I don't want the user to be very attentive to this. So here. So this is our logo. And this is our next line or whatever you call it. Okay, so here we have it. Then we're going to create two buttons which are going to be log in with Facebook and log in with Google. So get and use those Google and Facebook colors. You can go to this website brand color start net, and you can find the colors off Google, for example. You can type Google over here, and this is the red color Google is using so you can copy it took clipboard, and you can use the same color or here. So we're going to create a rectangle, and we are going to use blue colors for Google, a regular for Google and Blucher for Facebook, this one. So just grabbing these values over here and we're going to create some buttons, grab a rectangle and the burden size I'm going to use is 304 is the third time. 48. Brazil is the height, so let's use 304 and 48 is the height. Next align it in the middle, or you can use this one are our options itch. So this is actually the shortcut key. And I'm going to use the Facebook color, which is going to be let's copied from here and just based it were here like this. Enter. So we have our Facebook button. Next, use a rounded corners off four exit around ness over here. So this is going to be our button, and we're going to drag and drop our Facebook icon, which we have already inside of a resource is icons. And this is going to be Facebook with the Facebook Facebook, This one. So here's the Facebook. We're going to drag and drop it over here like this that's moving inside. This that's ungroomed this Come on, shift cheap. So we actually need this. We don't need this one. And also march if g one group. So this is our Facebook. Oh, cool. So we're going toe color it white, or we can use a big off um bluish white over here. Something like this. This can work too. So the tax we're going to use is log in Facebook. They reflect this our option V work quickly. Align it. Or you can use this one Option B and again, the color. We're going to use this this same color. So we're going toe add it into our Oops. What was happening added into other styles. I'm going toe plus blue, um, white, uh, blue. Excuse this. And at this color, too. We're going to name it Facebook. Yes, smoke. So to get this to the same white, we're going to use styles over here, just like this color. So log in with Facebook and the text will be Rubik. So four buttons I'm using real big phone. Arabic is also Google for well, good die fists. And as you can see, it is a bit bigger typeface. So we're going to use a bit smaller like this, and we're going to use 2% or hair and we're going to use the case, Toby, all gaps like this. Now again, we're going to align it in the middle because it is getting out. No, we can align these sides off the burden. So let's have a gap off. 20 four over here on the left. Let's have a 24 were here, toe. So that's your started. A war here. So we have over Britain. You can see you here. Let's select this. All of these. Let's first group this controlling command G. So we have you can see. No, this is a bit better because we have our background separated. Now you can see the masking any eyes over here. So we have all these outside of the mosque ing. So this is our logo. So let's group these our scald them logo group. This is our background for button BG Burton median. And these all these are linked with the button Facebook vidi in Facebook like this, it is always better. You arrange everything like this. So once we have this, we're going to press control. Command d are we can create a component or here so you can do anything like this. So right now I'm not going toe create a component. I'm going toe just duplicate it and replicated and just have another burden over here like this. And, um, let's drag the Google icon over here. Yeah, we have it. Let's dragged over here. Same white color, local colors. And this is the white cliff we're going to use. Oops. So? So let's move it with the keyboard. I'm pressing shift and arrow keys to move it around, because from my mouse, it wasn't hard, easily crab able. So let's remove this group. This is actually okay, so that's that's good. Okay, so let's sing the color toe. Same white over here and the Bagram Gallery be Google killer. So we're going to go over here and find the Google red color. This is going to be the Google killer and less that's did, added and jean the color from the schoolgirl Killer. And now we're going to add this Google color to our style store. So let's add Google correct created style. So we have our two buttons. One more thing is, if you want to add shadows, you can add a fact store, so I'm going to add very subtle drop shadow over here to blur. Let's use the blood off it, and I'm going to have it too exults like this, and this is going to be almost 15% Very, very subtle shadow. So once we have this shadow, we can also cleared an effect called a fact style. And we're going to call it Burton Shadow. So certain. So now we're going to select its background over here, and we are going to apply the same effect that is all. So, uh, so I think you are enjoying this. And, um, you will be really amazed by the features off Sigma let's and the last line over here, which is Let's browse. No. Or you can also rename it to skip log in something like that aren't itch. Let's move it with shift and arrow keys and you can also move it. One pigs by arrow keys like this single pixel and I am going toe Make it. Let's press your present. Hold your AR drop shin key, and you can see you have selected this one. And if you drag and um, over on your and other item, it will show you the distance between both of these 2 27 I wanted Toby. Let's, um, used 20. I think that it's that it's good that is easily definable, so you can also have toe think about things. For example, this is going to be the tab idea for this one. And this is going to the DAP in here for this one. This is going to be the tab idea or section for this one. So these have some good margins between them. Good distance between them. So user can easily rapid. So the color for this one skip log and will be H S B. The color is 1 78 which is the green. You, our major primary color 73 is the saturation and brightness is 19%. This is the color for skip log. And this is actually our major. You can see color, which is our legs. Let's college dark green. This is our dark, very blackish green color were using it for text which are very dark and mostly for thes links links color. So this is going to be linked. This is also the same color for this logo. The slogans not black. It is very dark green, which is this one? Skip skip long and so the distance between these two buttons is 12 12 pixels. You can add the distance if you want to. If you wanted to be more spacious. You can add it to be like 16 like this. And you can also add some more distance over here 24 or something like this. But I think I like it like this 12 is good enough for me. And 20 is good enough for me to. So this is how you create and keep on the Jews. Ability issues off the absolved because this these three But as they are lower in this area our hair your Tom pure you system can easily reach out this area. Now, if you want to, you have completed the screen. So let's zoom out. This is very necessary. Whenever you create something, I always zoom out and see that if I want. We're just a spacing Are some elements I want to move around. You can see these were not in the centres where I moved them in the center a little bit up over here. It is looking great. Let's view this in a prototype over here. So I moved to this prototype iPhone 11 prove model. I'm going to use space screen and, uh, explained this is the one thing I don't like about fig might take some time because it is a cloud app. It takes some time if your images are very big and it takes some time to Lord them like this. So this is looking good. I think I have the problem off this to Chile's over here. You can adjust the image. What? However, you warned. So we're going to quickly just the image and let's make it a bit bigger like this. Okay, so this is looking perfect for me. This looks perfect one to zoom to the fit. And I think this is going to end up this lesson. If we have any problem or anything that is not looking great. For example, you can see in the image over here background. There is something over here. So the simple trick is if you want to remove something, I'm going to use an ellipse over here like this. I moved to design, and I'm going toe use the same color color picker, and I'm going to use the same color as this area over here so you can see her here. Now I am going to move this batch over here like this, and let's move it just above this background, and instead I think I can see some of the shadow over here. Let's zoom in. Oops, looks like this. And let's make it a bigger like this. So now you can see it is not very visible from far away. You cannot guess that there is something used over here, So it is just most inside your backgrounds. This is looking good. So these are simple tricks you can learn when someone is designing. I hope you have enjoyed this lesson. If you have any questions or you didn't strain anything, you can ask me. Let's move on to the next lesson. 39. Home Screen - Recipe Mobile App Design: now, the first thing we're going to do is we're going to convert this button toe component because we are going to use this button with on Icon. So let's do that. So we're going to select this group. This is our Burton Facebook burden. And click this and this is going to be a component. This is master component. So we don't want Overwatch, Master component. Toby, Inside this design, we want tohave over instances or here, so command or control data duplicate so you can see we have another one. So select this master Component Control Command axe, and we're going to move it to our style guide. So if you haven't created a frame over here, just press f or a and we're goingto get a frame and based it over here like this. So here we have our pretend. Now, let's get some settings over here. So this text I have double click to get it. It is going to be, um, stick toe this right side and at the bottom over here, or you can have it on the right and bottom. This is going to be another setting, so it will always have the same space over here like this. Similarly, for this Facebook icon were going toe have setting off left and right. So it is going to maintain the same same left and bottom spacing if we try to increase it. So if we try to increase this burden, you can see if I try to increase it over here. The Facebook logo is sticking to this left. So this is going to be the behavior off this this button. So this is our component. If we want to change it later on, we can change it into our master component. So this is going to be our button with, um, button icon. Let's call it button with Icahn. So this is going to be our button with icon. Okay, so let's get get back to the main design and let's leave it. Because actually, I think we should also use the same component over here, But right now we're going to leave it because it based a lot of time. So once you have created component, just change the color and change logo over here. I call over here and you will have something like this. So let's dip. Replicate this and we're going toe press holding press our option key and along with I'm going to press shift key to create another screen like this. Now I'm going toe delete this image over here at the background hopes. So this is going to be Let's rename this first. So it is going to be our means mean meals screen So this is going to be made means screen. So let's does this and open this one and we're going toe removed This ellipse this image over here This is good. Let's, um, remove this mosque in lower here and let's come on shift in G ian group this and this is going to be removed over here. This is going to be a big, smaller and 30% opacity, and we are going toe make it a bit smaller. I have locked this ex proportions. Let's make it 20 24 32. This one looks good. This is going to be over here somewhere. So this background is actually going to be this color e d. F. Three f four. So this is going to be our major background color that is going to be containing all over screen So this is going to be our color. So you can see this is looking great on this background. If we want to increase the opacity, let's use 40% over here like this. So this logo is going to be minimized over here on this screen. Let's leave it like this. We're going to bring over icons before that. We're going to remove these or here like this. So we have this empty space or here, we're going to bring our icons of back Adul. And here we have the filter icon than we have such bottle here. All these things are going to be over here, So let's get started. And this is our arrow left. This is actually 24 by 24 pixels, so you can see what hair 24 is the size, and let's put it over here and align it like this. Then we have our dry cone or funnel icon over here. We're going to grab and drop it all here like this. This is also going to be 24 this is going to be aligned with discreet. So you can see this is the value off grid. We have this layout create four columns and were lining things according to that. Next move it in the middle. Written right on the left was it is a bit unbalanced. Design item more here. So once we have it, we're going to use a full weight over here to create our such bar. This is a going to be our search party is going to be 48 pixels high. And, um, it is going to be 300 39. This is sexually the forward and color is going to be white, and we're going to use the same board radius four for this one. So now we're going toe a line. I think this one waas aligned over hair. This one was a bit up over here. The color for these icons. Let me first Heidi's color for these icons Waas, medium green, which is our, uh let's use this color. 43615 e. This is our medium green color. So let's add this color 12 a style guide. This is squad medium creamed. Oops. I think I have selecting all of them. So we are going to select one off them. Select this color hopes hopes. Now we're going to have a medium green so you can see sometimes everybody me except us. This is our medium green. This is, um OK, so this is our logo. This is our search bar Over here. We can also add a stroke effect around it. It is going to be, um, local killers, Lex use discolor. And we're going to lower the opacity to 15% like this, so you can see we have very dim line. Or here, let's zoom in and show you what this effect is actually doing. So you can see this is actually what is happening over here. So let's aligned this. Tow this lines over here like this, and this is going to be our such bar. Let's use some tax your hair. D um, such ressie B hopes recipe like this. This is not going to be all caps, so it is going to be as it is typed. Are this case actually such recipe like this? This is going to believe you big regular. 16 pigs, 2%. So this is actually going to be our text. So, um, let's change the color toe something else because it is not going to be very, um, bright or here, maybe something like this. So you can see I'm using the same color. Just changing some off the Hughes or things like that. We're just to my liking over here, but it must be visible to the user. So we are going to create a textile. Now, this is actually our real Bic 16. And with that, I'm going to use what is its purpose. So it is actually our, um, button action next. So this is, uh you can see it so I can easily memorize it. That this is going to be taxed for buttons is the same text we have used over here for these. These were here and also for this over here. So this is going to be our tax debts. Let's, uh, Jane this style and use as it is type. So this is going to be a bit better for me like this. Now we're going to add such icon over here. So get I was such icon is my search icon, this one. So just crab and drag and drop it over here like this, like this. Just change the color that this one. And, um, excuse this one so we don't want all the colors to get the same attention. So we are going to use, um, you can say this is going to be up it. This color and discolor is the same. So let's change it to something else. Lets you the same color as this such bar. So I'm going to select and it's like the same color over here like this. I think we have selected the Hong color anyhow. So it's the Selectric from here. This is looking good. Let's add this color. Great green. Let's call it great green so that Zo Motor and see what is happening. Looking good. I can also make it a little bored. Bit more them or more grayish. Maybe like this. I'm liking this color better and let's call it great. I'm also going to use the same gray over here so that switch to discrete this is looking better because it is blue, green and green. Everything was looking green, so I have made it like this. Now, are such matters completed, we can easily group them, so we're going to select all of them and command and control G to group this such part and why we're doing this Because we can easily create a component out off it. So this is going to be spaced out 13 pixels from here. So let's make it 14 15 16. And similarly, we have this one. This is also 16 from this left side. So I'm using art option key to me in the distance, as you can see or hear 16 on the left. Similarly, we have this one. You can open up this group and we have this vector inside it. We're going to delete it because we don't want tohave complicate a complicated icons. So I like it better like this. So this is our such icon. Let's call it icon. This is our search bar. This is our background butts for such bar. And for this whole such bar, we're going to create a component. So command or control R K Option K. And this is our component. Same thing. We're going to do command control de to replicate it, and we're going toe cut this and move it into our style guide over here. So this is our such bar, so you can see no we're building our style guide. So Oops. So once we have created this, we're going to go back to main design and we're going to create this navigation or head. This is the navigation we're going to create. Now we're going toe, have a text De and we're going to use Mees. The text will be It is not going to be Rubik. Let's detach this and we're going toe use young mine of and for 16 pigs is 5% and I'm going to use the middle alignment. It is going to help when we align it and this is going to be vita next, and the background behind it will be this. We're here, So I'm going to use, um 64 pixels wide and 32 pixels high. And let's use the border Kanakaredes to before you can see the meals is behind this rectangle. So we're going to move it up and slack board off them. You move them in the middle like this, so this feels bring up. So I'm moving town rectangle seems a bit smaller, so I'm goingto make it a bit larger. All edge, we is. Okay, so we have this ready So let's change the color toe this Phil, which is going to be our primary green color, which is a sharper color for this one. So actually, our primary green color is zero e 5956 So this is our primary queen color, so you can see this is very sharp. This is very lively or live Lee, whatever you call it, this is a nice color. So we're going to group this together, and we're going to move it over here less use our guidelines to align the murder control shift four. And I think there was control. I'm not sure what was the shortcut for Mac, but I will listed down. So here we have it like this. Now you can see this is our Mies group. Okay, so this background is going to be moveable. So we are going toe, remove it outside of this. So let's move it up. And this background is you can see this is outside of this group means So we have means active, stared in a come on d and this is going to be our inactive street. So at the bottom, we will have inactive Stoute so inactive killer off the text will be, uh, this one. Okay, this is actually our medium green color for 3615 So let me show you what I actually mean by inactive. So let's hide this active and let's hide this background. You can see this is our inactive state. Now, we are going to just to replicate this. We have this background overhead, active state next and neck if we're going to hide and, um, there's allowing them better. Oops. Okay, so we are going to replicate it. Let's first use something like, Oops. So we're going to slack this meals and all option. Let's drag it like this. Our distance off, like 33. 32. Oh, here. And we're going toe press. Come on, Control de. To replicate this like that, so you can see it is actually using the same space on replicating it like that. So first we're going to rename it. Now, this is going to be Sellards and also for this inactive state. He started this one. So just time actually replacing the text, then we're going to align them again. Way have created all these and were renamed them, uh, handy control or command are salad. Stream him. This is a shortcut key. Now we're going to move it outside of this canvas cause we want to have a good distance between them. So now I'm going to use distribute horizontal spacing like this so we can have some menu like this. Let's move it a bit. Over here it is looking too wide. So it's like this 40 years. So I'm going to have a distance of 40 between them. 56 something like this. Let's move it a bit. Or here 26 26. And we actually want to my unit from here. 123 123 and on three. So they all have the distance off 30 six inside them. So now if we want to change the background simply we have to do is we have to hide the active stewed than on the inactive state and move the background to this one like this. And like your salad, we're going to use active state and hide the inactive state. So this is how we're going to move it and any midget around thes Ugarte idea. So in the next lesson, we're going to prepare the rest of the thing because it is getting getting very long. I don't want this like just to be really boring, so let's move on to the next lesson and create the rest off the screen. 40. Home Screen - Recipe Mobile App Design 2: in this lesson. We're going to create the bottom navigation which is going to be at the bottom off this app here at this or here because we want tohave navigation first. Then we're going to create the content inside it. So to do that, we're going to use a rectangle over here. This is going to be a rectangle for the navigation and it is going to be your white. Now you can see why I'm using white because it will have some contrast on this background. This background is not pure white. It has greenish color and finish you in it. So once we have this, we're going to use a fax over here to have some trap drop shadow. But this time the drop shadow will be on the opposite side. So we're going to use minus for, like, this blood is going to be six like this and we're going to use 10% something like this very subtle shadow. And you can also have a shadow off the same color. Which is going to be this. Let's use this background color and we're going to amplify it like this over here. So this is the background color were using. And this is, um, 100%. So you're going to use 15%. Let's use 20% like this. Next zoom in. And, uh, where are these? Actually, this is going to be your hair. Okay, so here is our bottom navigation. Zoom out in Hyde. The Kruger's like this. So this is going to be our bottom navigation. It is actually 60 pics of that should be 60 pixels. That is why it was happening. So shift our No, actually, this waas correct. Now it is looking read. Anyhow, I'm very big Zil Perfect. So I try to be as perfect as I can. Now we're going to grab, and this is going to be our navigation PG, so it will be static. So we're going to drag and drop all our icons in their states. So this is going to be our house on me and icon for the first navigation item home hopes. So we have a bigger one over here. This is 20 by 21. This is 28 by 30. So we're going to use 21 by 20. So excuse 21 hair so you can see or hear zoom in because we want to be already perfect over here. This is our empty line home. Normal. And this is going to be home active like this. So do you feel the difference? Anything moving around? No. So this is perfect. So we are going to go to this vector and change the stroke color. Tow this green because this is going to be our normal color. And this is going to be our active, so active color will be actually discovered. This means collapse. Let's add discolor toe over styles too. So this is our primary cream. This is our primary green. If you want to arrange them, you're gonna reach them. Let me show you. But right now it's OK. So click outside over here. Primary being Let's move it up like this. And medium green and great green gray, white Facebook, Dark green will be at the top like this. This is looking better. And now I'm going to select my art board. This is going to be my home active, and I'm going to use this color. Yeah, so right now I'm in this stage, I'm going to hide the normal state. This is going to be home active and we're going to move both off them inside. Now we're going to align it in the middle off this over here, and we're going to do the same for all the other icons. You can get the idea that inside home we have to stairs home, active home normal. They must be off the same size. So if you hide or show one and the other one, they must not flicker or change size or shape or their position. So this is actually the mean. You can see the point northward here. So once we have home over here, I'm going toe, speed it up and I'm going to bring other two icons over here Quickly. - Now we're going to align these. So we have these three navigation items and let's align these. So first, we're going to select all of them. I am holding controller Command key, and we're going to use this tidy up. So this is looking good. So it just arrange this one in the middle, and now we're going to change the stairs. So this settings inactive stairs so active, we're going to hide like this. So we have three stairs over here. Now, if you want to have some mawr, um, relisting approach, you can also use this opacity over here so we can have something like 80% on 90% like this . And we can also have something over here like this. 90% on this is looking a bit smaller. So this home we are going to increase its size selects use, shift like this. This is looking much better, because thes I cause we're looking bigger. And this one was looking a bit smaller. So now let's try toe align them like this. So Oops. So let's align them at the bottom. That's these are looking good, uh, 19 at the top. So we're going to have 18 and 18. Let's move them a bit more up like this. So this is looking great. Let's keep 13. Okay, so our navigation menu at the bottom is complete. We can You can see that we have one inactive state and we have one active states. Active state is a bright green, very sharp, greenish blue and inactive is a bit dull green, which is in our color scheme. It is called medium green color. So you can also added the stroke weight off your s, which is icons like this. If you want to have a very slim icon, icons like that, for example, I want to have one pixel. But like that, or maybe 1.5, this is looking better. 1.5 looks good. Um, so I think our bottom navigation is complete. We can easily change it and order it. And one more thing is that you can also cleared Ah, a component for this one. So, command G and this is our bottom. I have. And, um that's right. Click and create component. There are many ways you can create a component and we are going to replicate it and control and command E and control Command X to copy this one, and we're going to move it in this frame. So also, you can change the frame color background to be like, Oops. So we are going to change the frame, color, background, feel color to be something like great. So we can easily see other components on top off it. So this is our you can say mean Ah, you can say navigations. Our mean items that are going to be present on every screen, like such bar, our logo are back a row, going back to the screen, and then we have this one. So now in the next lesson, we're going to create the middle content, the images and all that stuff, so let's move on to the next listen. 41. Home Screen - Recipe Mobile App Design 3: in this video, we're going to create this featured recipe off our app and let's get started. We are going toe use one resume toe our fit. And now we are going toe. Create a rectangle over here and let's create a rectangle and it will be the size of this such bar over here. So it will be 3 39 and the height will be 216. So first we have this. Let's use the border radius of four and this actually is going to be the container off the image. So this is actually going to be masking a lot of things. So this is going to be more our mosque mosque container. So let's grab the image and drag it over here. So we're going to go to our images, and, um, the image we are going to use is this one or this one. So let's drag and drop it on top off this one to have it something like this, like, bought off them both of them, and use mosque. And let's let this image inside this massive zoom out. So this is the image boundary. We're going to hold shift an option key toe. Move it where we would like to have it like this. Okay, so this looks scored. No. We have created this main box over here. Now we're going to have some overly effect on this image because we want to put some text over here. So what we're going to do is we're going to create an indirect angle over here at the top of this image, the same size off the image of a head, and we're going to move this rectangle. You can see this is the rectangle, and we're going to move it inside this masked group and call it overly. So once we have over overlay, we're going to use a linear Grady insulin, your ingredient. And if we are going to use vital here and black over here, Okay, so we're going to have something like this, and we're going to change the direction a little bit like this, like this, and we're going to use multiply over here so you can see this looking great a fact. So, um, men thing is that we can also change where we want it to be. For example, I want this white color to be over here like this, and I want to add in a little a little bit creates color over here like that, and this is looking great. So this is going to be our overlay, which is going to help us have some text over on this in this section over here. So this is this is our mass group because everything will be inside this. So we are going to keep on adding things in this mosque group. Now, we're going to create a simple shape over here, which is going to be our featured recipe tag featured recipe tag over here, so you can see this is our shape factor shape. We're going toe, color it orange. And the value off this orange color is e a 93 development. So this is actually my primary second regular. This is orange color, and we're going to add it into the fill. So let's first added into other styles sick, angry orange. This is our secondly orange. So we are going to remove it and added into the fill over here this color. So we have this bar, and if we want to increase the height, we can use 20 years or here like this, we can also shorten it and move it like this. So let's call it Dag and we're going to zoom in and put our text overhead. D is going to be featured like this. And it is going to be Agent Romanoff. Not true. Big Yantra. Man Enough is going to be 14. It is going to be 10% because we want a lot of space in this section or here. And let's move it like this. Let's make it 24. And next use white, which is going to be this white, this bluish white over here and next use, um, 12 eggs from here. So I wanted to be aligned in the same area like this stacks over here. So let's use our rulers. This tax, this text must be a line with same lying almost over here. Or maybe over here like this. Let's keep the means over here because it is a button, so we don't need toe. Be much worried about it. This is just text. So we're going to align it like that. Okay, so next is it's ah Di does it? This will be a real Big 24 2% white. Let's see what is the distance from below 7 12 Also for this featured control, Camargue E. And we're going to move it closer to this one because it's a text item. We don't want to be worried about that. It is very close to the bottom. Then we have 317 textual hair, which is going to be, um you can use your big toe 14 317. This is going to be again white, and we're going to use over love icon over here. And, uh, let's see. Where is it? It is this one. We're going to use a smaller version 16 pigs Ilves because we don't want it to be very big that she was white over here. So I think in my actual designer used gentleman of over here like this. So this is looking I think this looks good, but you can also use through big toe. Rebic taxed is looking better for me. Uh, this one is in German of regular. You can also use medium if you want. Oh, this This is going to look back writing now Here's a design dip If you have some item which is smaller and one is larger and they're on the same line, you have to align the bottom off them so you can see we're going to use the bottom alignment like this. But you can see now they're looking ah, lot below this. So what we need to do over here is we're going to grab a line like this and we're going toe align things that like that. Like that. Like this. Like this. Okay, so hard is going to be aligned with this because it is not text. You couldn't have something like that. So let's hide the lines. Shift are now. You can see this is looking a lot better now. There's one thing we haven't added over here, which is shadow. So here is our featured tag. Let's rename rename them title. This is, uh, hard Icahn. So all these I will move them inside this mast group like that. You can keep them outright toe. That is not a problem, but for this. Dag, I think I wanted to be inside this idiot this mosque area because I wanted to be clipped over here. If it is extending outside of this border. Now we're going toe adds drop shadow to this group. So I am. What I'm going to do is I'm going to add the drop shadow to this mosque group rather than having to the rectangle. So we're going to add a shadow over here, and this time we're going to use 20%. Let's have a shadow. Six pixels. Blood is going to be 12 like this. And, um, that's more Move it a bit closer. Blood will be 10. Um, let's use it double value for this. Why? So this is a very good trick, fool. And it always try to double this blur. And let's add a bit more color your hair. We are going to use discolor and use 30% for this one. It's used 50%. 65. Well, look better. Okay, so, actually, I'm trying to use the same dream green color we have in our background and try to use a darker shade off it. Selection of 70% and I'm going toe move it more of a like this and that she was 50%. So I'm going to use to six the star green color 40%. So this is going to be my final settings. And if I zoom out, you can see this is looking great. Now the next part is very simple. We're going to use the same the same elemental hair, which is let's group this first. So we are going to crop it. Come on, G and we're going to call it big rest. See, be. And we're going toe command and control T to create another one. And now we're going toe have a smaller screen, a smaller, smaller version of this one. And we will remove this featured over here So the stag will be moved and I would lay everything will be seem. And if we, um that's try toe make it a bit smaller like this. Now you can see there's a problem that we are having this squished. Icahn's over here. So to fix this, we are going to double click on this one and we are going toe have Jane, this constraints. So this is going to be right bottom. And for this group, you can see it's a skills were going toe have it fixed size, so let's no try to scale it. You can see it is trying to stay in the same area. It is not squishing or changing its shape. No, let's use this like that. No, we have our smaller section. We're here. Let's zoom in and fix some of the problems or here. So this is actually title is going to be at the bottom like thistle here. This is going to be inside the image and it will have automated. Let's use this automate and know. You can see it is fixed for this one. You can see we're going toe on group command shift control shift G and this is actually happening due to this clip contact. So we have a frame and the script content exactly having this issue. So let's move it over here. More water of them like this. This is looking better. Let's see how much the spacing we have over here then and between them. Five. So now it is. You hear this? So we have six now, so let's move one Pigs it over here. This heart is going to be six pigs. It is 10 picks is they have small board of them. Wonder 34 on three. Okay, so this location is looking create. So now we have this. Um Okay, so let's where is this title? So title is also going to be fixed this weed out of it. This title will be chilly beef and the four size will be 16. And it will be John. Trauma live and color will be this medium green. Now we're going to create a textile, which we already have. But this time it is going to be Uh huh. No. 16 pigs, ill paragraph so or normal text. So this is actually of a normal text. So this is going to be our title. Or if we can also use something like, um uh, small title like this. Ah, Bankoff Normal will be good to. So once we have this, we can replicate it, so we just need to replicate it. And now we're going to rename it small for a C B Just replicated. We have a distance off replicated command D, and it will be appreciated like this. 14 must be inside this. So we have this major section over here. So what we can do over here is, uh we can also do one more thing. So if you want to create a component, our control all case before making a component, you have to make sure that everything is perfect. And you have made it right because ah, it will be difficult for you to see and change everything over here. So control all K, this is our small recipe. I'm going to replicate it. Come on, The small recipe. I'm going to move it over here. To my hips. To my style. Guide, we're here like this. No, I'm going to move back to my main design. And here is my main design. Let's zoom out and see what we have over here. So this distance is a bit too much for me. So I'm going to go to style guide and made some changes or here and I'm going to slack both off them and move them a bit Over here. This looks better. Now we are going to move back and it is looking better over here. One more thing. If you want to change the image over here, we will do that later on. So let's replicate this art option. I'm holding Arden Option key. 14 pigs ill. I'm going toe 12 pixels between them. The distance, Come on, de toe. Have it copied over here. Now, we have three small recipes, and we can also add attacked over here. So let's under title under 30 minutes. So this is our title, and this is a Rubik 14. And we wanted to be a big 16 over here. Actually, we wanted to be big because it is a title. So this is actually this style no Big 16 but in text section on action text. So this is actually the style, and we will have more space from here. So let's use tarty two over here and stepped all of them. And we will use almost, uh 12 from here. This is looking better. And now what you have to do is we're going to select all of them command and control, G. And this is our a small, uh, small. So I have gaps. Walk on small section. This is our section, actually. So now we are if you look over here. So if we select all of these three, we can we also have this option or yes, we can James the distance between them like this. We can also change it, toe ed, which is looking a bit less for my best. So now we are going toe replicate this command or control D and move it under this one. So we will have again 30 too Bigs from here. And Jeanne thes headings like this. And let's zoom out. It's like this one. We're going to change the size off this one or here, and you can see size off this bottom. Never the same. But we have to change the size of this background because it waas stayed behind. Okay, so we have completed this. Let's select this. Um, that's Collab collapsed. These and we're going to select this bottom navigation. And we're going to select this fixed position when schooling because it is going to be at the top and it is going to be fixed. I have never We want to move this. So let's try to view this in a prototype and we will see what is happening Now. You can see we have this navigation at the bottom. So if we try to school, we are screwing inside this you can see you can see we're scrolling inside This So this is going to Stace over here. If you want tohave something at the top, you can slack that too. But right now, I think this is better to have this universal navigation at the bottom. You can see now the only thing left it is that you have to change those images, which is a piece of cake for you. Now, what we're going to do is we're going to change all the images for these recipes, and we're also going to quickly change the bottom titles over here. So I'm going to show you how to change the image. We're going to double click and go to this mosque group and click this image or here. And I have found a very nice trick that if you drag and drop your image on this image, feel it is going to be frittered very easily. So it is going toe fill it at a good space. So let me show you when demonstrate what I actually want toe say right now. So let's drag this image and drop it over here. So if I try to drop it over here, you can see this is going to happen. Imagery, size and everything is going toe Go over here and they're the best thing. Our best thing you can do over here is just title drag and drop it on this image way. Now you can see this is looking better. This is not what I what happened last time. Similarly, for this one, we are going to slack this image. Uh, this mass group. And if you want to direct this like the image you can hold control or command key and go to this end this, select this image and we're going to go back and select another image. Let's slacked on this one. So I'm going to drop it on this image field and you can see this is this is better. This is easier for me If you still want to adjust it. You can slack this image. Go this image, fill on goto crop and you can place the image, for example. I want to place this section. I want to make it larger on shift, Um, like this and press cross like that. So this is another way if you want to customize it. But right now I am I want to quickly placed these images. I want to change these numbers. I want to change these tax over here. Similarly, for this one, we're going to do the same trick, and we're going to go to this image or here. This is the image file. This is the image free, lower here. We're going to drag and drop whatever we have on this image filled, and it places it in a lot of good way for me. I think this is a great placement. So if I want to drop it and change it, I'm going to change it like this. This is looking better for this. Under 30 minutes will be dark green, not using black over here. This is actually are black. So that is all for this screen. We have completed successfully this screen, and let's view our prototype in screen and see how it looks. We have toe test, few things, for example, the top notch over here. Okay, Now you can see this is our local jumps, and it is just behind this top notch part over here. So I wanted to be over here in this section because we have toe take care off this in our design first I used to place. I placed it over here, so it was, you know, getting got by this section. So I moved it down over here. So this is how we are going to use and design the screen. The others next three screens, they are just you can see just very similar to this one. We have everything better up. We just need toe. Make sure that this stop navigation is going to move. And also the bottom one if we have toe. So this is going to be the next session. I think this these lessons are very long. But you have to stay with me. You have to build it, and you have to learn and see how I actually do it. So let's move on to the next lesson. 42. Home Screen SALADS - Recipe IOS App Design: in this lesson. We're going to create the next fuel screens and you can see we're here. Here we have. Sellards deserves healthy, so these are almost the same. The only exception is that these the menu bar over here it is actually moving from active toe in active. And this background is actually moving around in over here. So we are going toe, use this and just change through off the tax. This is the same. So I'm going to really skip it very fast. Or maybe I am going to skip this section. I'm going to just focus on the top over here because everything is the same. Just we are changing images, values off this one, That is all. If we have, If you have any questions you can always ask me and that will solve your problem if you have. If you find any problem, everything is same. Only were changing text and images. This stop recipe and navigation. I'm going to explain in this lesson. So let's get started. And what we're going to do is we're going to replicate this screen, and the first thing we're going to do is moved to this area over here, Skip. Okay, so this is active, inactive. And first, what we're going to do is we're going to remove the inactive and go to inactive state, because now on the meals is gone. We want a bad ground. Toby moved to salads over here. And we are also going to change its rich, because now it is looking a bit smaller because salads is a big word. So this is going to be over here like that. Okay, So sellers for sellers, we have active state. An inactive is going to be hidden. So this is how it is going to move. Um, so now we are going to do the same. We're going to just change all these images and everything. The tax store here quickly. And that is all. I normally try to hide my bottom navigation once you can lock it or you can hide it toe easily, manipulate these items. So I'm going toe. Mostly hide it like that. If something like this happens, it is because we have cited toe crop so you can go to fill, and then you can again goto crop to place it where you wanted to be. So this is happening. Actually, I have specified Grob Ah, in my, um, previous scam McCandless or are bored over here. So this is happening with me, so don't need to worry about it. You can fix this. So if I go to this, I can use Phil and then I can select any image from here. Maybe this one and I am going toe drop it over here like this, and then I can go toe crop and move it around like this. So now you can see this screen is also completed the second next to are also the same. So I'm not going to repeat us. Same design steps again, again. So I'm going to create them by my own, and I'm going to skip those lessons because that is the same thing we're going to do in the next two screens. So, once I have completed, all these screens were going to meet next, and we're going toe actually use our prototyping tools to prototype these four and five skins. So let's move on to the next lesson. 43. Healthy Recipes Screen - Recipe Mobile App Design: So now I'm creating, actually, the last off this four screens, which is healthy now here is a tricky part. That is why I have actually stopped over here and started recording. Now you can see over here we have this background. So if we try to move it over here now, actually healthy is going to move inside the screen rather than over here. So, uh, when we have to do something like this, we have to actually move this whole navigation. So let's use this school, move them outside. So we have this whole navigation with the background. Come on, G, this is other top they have. Okay, So what we have to do is we have toe move this actually on the left. So this is actually going to move like this, So means is going to go out. And now we are going toe change the stats. So this is going to be inactive. This background is going to move toe healthy. And, uh, now it will be a pit outside of healthy, and the rich will be. I think this is good and, uh well, is healthy. Okay, So active state inactive is going to be hidden and, um, next move it in the middle. Hopes. So we actually want to move this background the middle of this. Okay, so this looks good. We have moved everything over here, and this is going to be like this. The rest is the same. I am going to replace all the images and I will meet you in the next lesson where we will we will be actually animating these and actually trying toe prototype this section We're here. 44. Prototyping Sliding Navigation in Figma: Now you can see we have created our force, these major screens and this intro or log in screen. And we are in a position that we can add some prototyping over here. Now you can see all these four screens. They are 940 exile high. I have left some space at the bottom. So if you look at it over here So actually, I have left the space because this navigation and this background whole content is going to move. So once we move this page up, this is going to take its place over here. So it is going to be over here like this, so no, you can see this is this. This is why I have left some space at the bottom. Okay, so now we're going toe link these screens, and we're going to move to this prototype over here. And first thing is that this is going to be our main screen. So we are going toe grab it from here, and we're going to link it to this one so you can see this play button. This is this shows that this is going to be the first screen now We can also add some something over here. For example, group all these command G and let's call it Logan Group. And we can also link this to this one and on tap we're going to never get toe this mean means and it is not going to be instant. We're going to use smart, animate, and we are going to use ease in and ease out for 400 milliseconds. So this is going to be the fact we're going to use similarly for this one. Okay, so one thing they have to mention is that whenever you try to use any icon, there will be a hit target area. For that I gon hit area means that we have to design something at the background, which is going to be at the capable area that is accessible to the finger. So if you have a very small capable area or hit target, your finger is not going toe touch this icon easily. So use a real keep on touching this, and it will not work. So what we're going to do is, um, let's go inside this group. Let's create a rectangle over here like this. I really hate this, um, functionality that I want one Simon in a group. It should create this rectangle inside that group rather than reading it at the top. So I am going to drag it to this arrow left and for the sect angle, it is going to be, uh, damp idea for this error left one. Just go to design and just Jack this Inject this clip content now, the step area is actually going toe be transparent. 0% transparency, because we are just going to use it for prototyping. So once we have the stab media and we want to, you know, based it in all the other groups too. So I'm going to do the same for this one. So I am going to have a tab section over here. Tap it yet for this one, Do and I'm going Teoh, use some DeBlieux like this. Uh, let's use something like this and let's move it inside. This funnel This is also into court app. Yeah, and let's change this clip content. I'm off this if you have it. So you have to check if there's a frame around your icon and you have this clip content this is going to be a pain in your head. So, um, Tab area is going to be transparent, so I'm going to change transparency to 0%. So we have funnel and arrow icons over here, and we're going to slack thes Kamar and see both off them. And we're going toe, um, Biest them or here like this. So let's, like, board off them, dilute them. And I am goingto hopes dislike this based time we're here, they're going to be based in the place so less next to lead these in the seconds like this command, we your control v, to paste them similarly for this one. We are doing it because we haven't made these components. If we had made these components, we just had to add in the component section. But I think these kind of others actually have going to work anyhow. So here we have them. Now we're going to link these sections back, so we're going to go to prototype and open this and select the stab India and we are going to link it back. Uh, this is going to navigate to, and we're not going to use smart animate, but we're going to use, um, move out or it is going to be in destruction. So this screen is going to move like this, and this is going to come back similarly for this one again, We're going to do the same thing. Settings that already the same. So we have linked bag and we have linked this log in tow. This D's for this main screen. Okay, so let's test this one. Okay? So we have the screen to stab it, and you can see the effect Yum xyz come going up. This is actually smart. Any minute you can see moving out and emitting like that. Now, the next thing we're going to do is we're going to add capable areas for all these. So what I have to do is I have to add ah adaptable area tab area in all of these. So we I think we should have created this from the start. But, um, this is how I wanted to show you that if you don't create the stab target, which a lot off actually, and designers miss whenever the teach their classes. So this is going to be tap target. And, um, this is going to be 0% what this means. Then we have the same time it duplicated going to be four Sellards like this in the same. Yeah. Then we have Come on D on. We are going to go to deserts this section We're here. Then we again Come on d and do the same for this one over here. So these are the tap joggers for all these. So this is going to be used in our prototype. These are the hit target for fingers. So if your fingers if you have this step target very small fingers are going to miss this Stargate, and it will have some problems. So this is how I'm trying to show you how you are going to do the user experience or improve the usability off the app? No. I'm going to add all these tap targets in all these or here. Now, I have created all the tap targets. Why? I didn't make component because I have to move this whole over here and what they're So I just wanted to show you how to create these tap targets and why they are necessary for prototyping. So now we're going to move to this prototype section or here. And for this means this is going to be meals for the sellers. You can see now the staff target. We are going to move it to salads over here. And it is going to be, uh, smart any mere. And it is going to be easy in and out. So these are the same settings were going to use for every off every one of this. So this one is going to move, so this deserves this. Healthy is going toe move to the last one handy. Next. Zoom out so you can easily see that similarly, we have this Sellers Sorry means and it is going to go back to me years. Dessert hoops Dessert is goingto go to desert. Healthy is going to kowtow Healthy similarly all of peace. Now you can see I have linked them. Now let's test this out and see how this navigation menu actually works and looks and feels like So let's get started and see what we can preferred. I've with Sigma. Let's give it some time to Lord, it is taking a lot of time to lower the same it. So we're going to go ahead and see our prototype overhead. So some of the images are not loading, but you can see the effect overhead right now for GMA is actually operating their service. That is why we are having this slow slowness in this, um, this animation and this prototype, I hope you won't mind it, but this is actually how we are going to create this, uh, section or here. Similarly, we can click this and go back go or hair healthy their school from healthy two meals Desser , Sellards and means. So this is how you actually prototype and link your screens? Make sure the positions off this text and everything is the same because you can see over here. If I try to click over here, it feels like it is moving. Some glitches are there in fig mass prototypes or don't need to be very too much because you have to show your developers that this is how it will look like and there are standard controls and programming that are going to facilitate this movement. So I hope you have enjoyed this upto up till this. I hope you have learned a lot about fig, Mom, we're going to create next screens in the next lessons. So let's move on to the next lesson. 45. Search Filters Recipe App Design: Now, in these few videos, we're going to create these search fitter screens 123 and four. So, actually, in this green we selected to off these selections, so I'm going to stick with only one this one. I'm going to show you the technique, and you can apply it to as many. If it does, you want toe slacked over here. So we have Ah, this screen with the such reserves are shown than we have. Three screens were filters and advanced search options are so whenever someone clicks on the search, this screens will appear. So let's get started and start designing these search filter screens. Now, we are going to go back to our actual file, and first thing we're always going to do is we're going to replicate this. So let's replicate this healthy and let's rename it toe. I feel they're all you can call it such one. So this is going to be our first such item. And, um okay, so we can pick up a few things over here. For example, we don't need this over here, So we're going to delete this than this one toe, and from these we're going We don't need these small recipes. We might need this heading tax over here, so I'm going to keep it over here like that on. I think we don't need to use thes. Maybe we might need something like this, but right now, I think it's matter that we deleted. Okay, so here we have one heading, and let's turn our Lior grid on, and I'm going to align it on the left. That's keep the distance toe. Um, 48 is good. Next. Enable our rulers. This is the job, actually. So Okay, so I think 40. It looks great. Let's hide everything. Shift on controlled shift four or control G, if you are on a Mac, and here we have our Paul, you're like So I think it should be aligned over here so people don't get a lot off flickering or something like that. So I'm going toe go over here like this. Okay, so first we're going toe rename it to died land. So we have a diet plan. Options were here. No, we're going to create different die plan options for that. We're going to use a technique that is going to help you Speed up your work and we're going to start with text there. Over here. Cattle died. Let's use this and I'm going toe color it going to go local killers. And I'm going to use this white even f f Or you can use a bit more fighter over here like this. No, the simplest technique is you are going toe. Add a frame shift, plus a Now you can see here we have a frame, so we are going to call it option. And once we ever did the frame, we can add the fill color over here, and that is going to be it be nine e five. So this is going to be a great color, so we don't think that it is active. So it is a normal state. So we're going to add some roundness to it. Let's act 1 to 6 and on the left and right biting. I'm goingto go with 16. Something like that. And top and bottom. I'm going to go over 12. Let's use 13 something like this. So this is looking great. We have a very nice box that is going to expand with our text. So if you remember we have used orderly out before. This is actually the orderly out drink. Now I'm going toe replicate this. We're not going to pound it into another container, so let's replicated by are pressing art option key. And we're going to have another one, which is buy new indict. Let's create another one all draw option drag to create a new one. I'm keeping distance off 12 over here between these two elements. So we have four options over here. Let's group them together. Come on, G. So this is our died group over here, so I'm going to move it inside this small section because we already have had this group. Okay, so from here, we have a lot of space, so we don't want it to be too much. Okay, so one more trick, I'm going to show you, So let me show you control shift four. Okay, so if you zoom in, you can see these are not aligned properly. And one more thing is, if you have rounded corners like this oval shapes, you have to keep them a bit more of a from the border, are you? If you want to keep them on the border like this, Like this 15. Just going to be 12. This is going to be tried. Okay, So I'm going to make this one a picked like this. Or maybe I'm going to move it inside a little bit because we have rounded corners over here . It is going to look a bit different. Oh, are you can see a bit. It is actually a visual problem that whenever you see something like this, it is not. It will not look aligned. So this is a simple trick that if you have a lot of rounded items like this, you have to move your text a bit on the right toe, align it visually in the line. So controlled ship four. This is looking a bit better. Even you can move it. Two more pixels in this looks great. Died plan. Okay, so we have this group, just we're going to replicate this group and create under group over here at the bottom. Okay, so right now it's 54. I'm going toe, move it more down 56 and rest. You already know. I'm just repeating the same stuff. What I have done over here. Okay, so this looks good. Now we have to reduce the height of this art board. Wasit is a bit much. We don't need this much. So here we are. So this is the finish line for this screen. One more trick is over here because if you want to change the height are the distance between these items you can slack this. Grab this and you can increase or decrease the distance between them. So this is 13. And if I I cannot do it from here, I can use something from here. 12. I wanted to be 12 and similarly over here. I wanted to be 12. So this is how you do it quickly. This is these are the few features that are that are really shining in Fig Meyer. So I hope you have enjoyed this lesson on next. We are going toe, do the selection state, and I'm going to tell you how we're going to do it in a prototype more in the next few. Let's and let's move on to the next lesson 46. Prototyping Search filter selection animation: Now we're going toe replicate this screen and we're going toe that next state, which is going to be selection stage. So I'm going toe use the zoom toe 90% to my liking. This one looks good. Now I'm going toe click and hold my art and option key to drag it and replicate this screen over here. So this is going to be over such to and here we are going to have some selection states over here. So once someone taps all here, there will be a search item over here. So this is going what we're going to do in this screen? One thing we have forgotten what here is that we need to change this such recipe and we're going to use a door here, search duh or select select options. Let's call this now one, someone click on it. So we are going to go to this value, died an option, and we are going toe replicated this by command E. So we have another one, and we are going to call it option. Let's call it option value. And let's call it option, uh, normal. And let's call this one option okay for the active state. We're going to use the color we had, which is very sharp green, which is our primary color. This one zero e 5956 So this is a color scheme. We have already decided. These are our primary colors on the screen. One and I really love and enjoy this color. This is very nice, girl. Okay, so we have this selector state, but we also want an icon or help. And one more thing is same thing is going to be added overhead. So what we will do is we're going to bring the icon over here, dragged I got over here and created one for ourselves. So first thing is, we are going to need an ellipse over here, which is hold shift. And I wanted Toby 16 by 16. Let's make 16 by 16 and it will be the same color. This one, the screen, and it will have a stroke off one pigs ill, and it will be white. Okay, so I'm going to tell you why I future Dwight, because it is going to separate it from this background over him. We can also have a bit bigger, like 18 by 18. This is this is looking good. Okay, so we have this one, and this looks create. Now we just need to bring the I gone over here, so let's bring daikon. Okay, now, here are the icons we have already selected. There are two icons that have the checked like this. You can see this one and this one. So I'm going to go with this one. I'm going to drag it into my sigma and we're going toe quickly Change few off the things or here. For example. We just need this check. Mark, we don't need these lines are here, so I just need this one. So I'm going to drag outside off this group, and I'm going to move it inside this, like this, We're going to use a white color. Excuse this'll one, and you get a bit more white. Let's add this white color toe more white, excluded, more light. Zoom in by using command plus keys, and we're going to slack this and we're going to make it a bit smaller because it is very, very large. Take over here. So we I think we need just, um, like this one. This is good. Okay, this looks great. Excuse the border off the same color like this one. This more writer, okay? Border And this check box has should have the same color. Okay, so I think we have our selected steered. Now we're goingto group it together because we have things separately to work here and there. So these are our two ellipses. This is Okay, So this is a small section. This is allergies. So this is die Pan di. Planned group option virgin. Okay, so here we have the option active and option normal. So we are going to move our these two icons just above this active. We're not going to move it inside it because it will apply the same things over here. The settings over here. So we're going toe, select all of these command G, and this is going to be our option. Active student. So this is our option active. This is other option. Normal. So whenever someone clicks over here, or perhaps over here, this is going toe Come forward. Okay, Now we're going to add something. We're here, and first thing we're going to do is we're going to hide this and we are going to make another and it's so sorry rectangle over here. And we're going to use something same settings like this. Or maybe we can use just the text or here and call it value diet. And, um, we are going to add shift A that is going toe Adauto layer to it. We're going to use 12 and, um 11. And let's use, uh, 36 over here at some particular, which is going to be our blue color, which we have already added. One. F. Four d 96 Now let's change the color off the text toe something white, which is going to be a more vital here. Let's place it over here and see it because it fits. No, it is a little bigger, so we are going to have a little bit less. Then 10 is looking good. Let's zoom in and see if we have equal spaces a top and bottom something like this. Let's zoom out and see a bit more smaller. This one, this one will work. Yes, okay, so online is the setting, so we have one point value died over here, which is already added, and let's see if the same type sides. Okay, so this is the same for I can't I think 11 but an action text. So this is 11 connection text. Okay, so this is good. Make it in the middle. Okay, So once this one is selected, this one goes like this. And, uh, we're going to create an icon over here. Cross icon, It's use this shift. Let's use a straight line and we are going to use minus 45 something like this, and we are going toe have capped. Toby rounded. Ah, a little bit bigger. Who is going to be the size? And we are going toe command the replicate this and we're going toe. Move it to 45 degrees like this. Let's just these do. Okay, so I think this this looks this looks scored. We already have across. I call, we're going toe. Group them together and call it cross or x. I got next. Move it over here looks a bit smaller, so we are going to change its hide a bit. 13. This looks better before that. Away from this that she was 14 or here. Shoes, you know, ahead. 16. Okay, so 16 is actually the size for this one. So I'm using height. Height is going to be 15. And let's say you 16 16 looks a bit bigger. 15.5. So I'm going to use some size like this one, and it must be, Let's let's move it inside. This such by? I think we cannot move it because it's actually on instance. So we either need to break this instance. We have to break it. So let's keep it like this and change the color big the same, this same color. Okay, so we have no this or maybe we can have this. I think this looks good. Both of these actions are pretty separate. So we have a selection state ready to now. The trick is, whenever you want toe any minute something in fig, ma or any of the proto driving app bought off these states should be the same. So you can see or hear. Hear? This is different. We have different options. Option, option, option, option. And here we have. We have different things, so it must be the same. So what I'm going to do is we're going to generate this by replicating this one. So I'm going to believe this. Replicate this one because we have we have We need all these active states to if we want to any mid and we are going to in this state. So this is going to be search one search one. And in this state, this polio, let's naming, should be the same. So if you have frame one that it must be framed one over here toe. So I'm going to move it down like this over here, and it is going to be C 0%. So it is going to be the transparency should be 0%. Okay, so we have hidden it over here, and we are going toe. Use the search. Select option. Toby present. Over here, it is going to be active similarly in this over here, we have to hide something. Option active. It is going to be 0%. Let's first move it down. So I wanted to slide up like this. So I am going to move it down over here, and I'm going to use 0%. So if you understand that, I have actually, I'm trying to hide these states. And when we moved to this enemy toe. This one, this active state, we're going to just show them okay Similarly, for this cross icon. We are going to move it over here like this on may be over here, over here and move. Make it 0%. So whenever someone tries to click over here, it is going to go into the state. So whenever someone tries toe, pick our try to activate this. It is going to go into this state and every item is going to show itself slowly and gradually. So this is actually the trick behind this. Similarly, over here we are going toe. Show it. But we are going to use opacity over here. That's hided by using opacity like this. Okay, so let's try to any made them and try to connect them. Let's go toe prototype and I am going toe. Go over here. And if someone OK, so we're going to go over here. If someone tries to click on tap on this one, it is going to go to this and we're going to use Smart Enemy. It is in out. No scrolling gets off that it's cold. Let's start this. Let's also connect some of the such bars over here to this such area. So we are going toe move to this one. Smart. Any mere. Ok, so this one, similarly, this one similarly, this one. Okay, so all of the search bar there correctly to this one. Let's play our prototype and see what we have caught yet. Okay, so here we have it is our animated meat menu. Then if we click on this such recipe, it is going to you see, this comes up like this. We cannot go back right now because it is going back to this one we have toe. Okay. So once we have we are on this screen, let me show you what we have done till now. So for click over here, see the any mission over here and let me connect this so we can repeat it again and again. Okay, so here we have this cross and where's across? Across. So this is really I don't like this in strict mom, because my name. And then when I slept this I should be inside, taken toe this layer over here. So this is a across icon and I am going to add um, taps that 80 over here. So this is going to be my tab? Yeah, for this cross icon. What is happening? I want to have a tangle that is going to be the their opinion for this one. It's cross icon. Let's call it depth. Yeah, I'm going to 0% opacity, and it is going to go back. So in prototype, I'm going toe. Move this and this is going to go back to this one. And let's play this again. No. You see the effect over here? You see how this pal your diet slides in along with this one? So this is how you create a nice looking an immediate prototype in fig. My hope you have learned enjoyed this lesson. Let's move on to the next lesson where we're going to show the search. Such reserves. I hope you have enjoyed this video, and I know that these videos are very long, but you have to keep watching to learn something new 47. Designing & Prototyping Search Results: Now we have created the search, any mission and prototype it. Now we are going toe move to the next screen, which is going to be the search results. So let's call it such reserves and you can see or hear. We are going to have some status over here like we have found these many reserves that's delete this next. Dilute this. So I'm keeping this because I need to show it. Five reserves phone. So I'm going to keep this same top section over here, and we are going toe change the color to some great like this because we don't want it to be very highlighted over here. And now we're going to create a rectangle overhead. So rectangle is going to be the same size as this such bar. Over here it is 3 39 3 39 and let's keep the height 1 24 and we are going toe lying in like this. It is going to be 20 pixels far away from the stop reserves, and we are going to have some rounded corners, four full excrete. That's enable our So it is a bit outside off outside of Fallar section over here. Okay, so this looks scored. Okay, so, no, this is our starting point. So I'm going to hide my, uh, out grade command control Shift four and control G. I think for Mac users, I'm going to use white color. So now you can see why I have used this white because white looks create on this pale and finish background. So this is a trick. I wanted to show you that if you try to use some very light colored or very light teamed background, your white color is going to shine on it. So now we're going to add some shadow, this one. So we're going to go toe effects. Drop shadow and blood will be three five. Any will be one. Because we don't want it to be very far away. And the color in with 363636 And the opacity will be 10%. You can see it is very subtle. Shadowed. Resume in. You can see this is very, very light shadow, and it looks really great. It is very close to this layer, and this looks great. Now we're going to add an image over here on the left and on the right, we will have some off the information, like milk gig or something like that. So first we are going toe. This is going to be our Dana. And now we're going to add another container inside this one. So it will be over here like this. This is going to contain our image. No. What we want to do is we want to have this container to act as our mosque for all this. So we are going to replicate this command control D and we're going to slack this container a mosque. We have been to rename it, contain a mosque in the background, and we are going toe slept. All the top players we want inside it and we're going to use this mosque or here. Now you can see all these leaders. They cannot escape this size. So if I try to resize it, you can see it will always stay over here in this. One more thing is that I think our shadow is lost over here. So let's move this from this, and we're going to add it to our mosque group. So let's add the shared over here. The one 3 66 and we are going to use 10% of it here. So this looks work. This looks good. So we have this next caller image container, and we're going to drag and drop over image inside this one. Let's use this and fill this with image over here, like this image and expose the image. And these are the images. They expect this one. Okay, so this is looking good. This is looking good. Great. Okay, So we we need to have some information or here. So in Michigan dinner, we have the image inside it. Then we have this container. This is going to be the full white container. Let's call it continue light. And then we have continued mosque, which is actually masking everything. Okay, so now we're going to add something over here, like milk kick. This is going to be our title. Okay, so we want to have good separation from this image. Let's move it inside. This lost group 2120 s good from the top. Excuse 12. Then we will have something else like 5 36 People love it. We will also have review over here, so we will use 251 reviews and stars. So we're going to use a star shape over here, create a star shift or shift. I'm going to use some other angle, like 45. This looks scored. And I'm going to use an orange color over here like this one. A bit brighter would look better. Like this size will be next year's 12. This looks good. Not just We need to replicate these. Come on, De. Come on, D. Now, I'm going to use some of the gentleman of because most of these selections you can see over here if you go over here. This one, This has Arabic. I'm going to use in some out of 16. Similarly, over here, I'm going to use your strawman of 16. And the color will be the same. Like this one. A little bit create. Similarly, for this one, I'm going to use it and gentleman. And let's group all of the's okay for this one, we're not going to use this black, but we have a green black. So we're going to use this one similarly, for this one. We don't want it to be very bright. Let's maybe we can use this green primary color because reviews are very You can see menting off any app People love to read them. So this is almost ready that zoom out and see how are different distances. This, uh, this one looks a bit smaller, so I'm going toe increase the size express and hold shift. Okay, so this one looks looks better now. Nurse line left sites. OK, so so here we have the distance off to She used this. Move them a little bit up because it is very close to the border over here. Okay, So once we have created this mosque group, this is actually our, um, such result. Or maybe we can small card. We can call a small card. Now, we're going to replicate this one. If you want to create a component, you can also do that. So I'm going toe shift some of the things here and there, and then I'm going to move it. Let's make this a component. Command Control. Deterred. Replicate. I'm using. I'm going to move this Theis component, this master component to our style guide. So let's Harrod or here like this. Now we're going to replicate and just change the images and the tax. So I'm going toe. I'm not going to go into detail. This is going to be skip. I'm going to skip it very fast. - No , the screen is ready. You can see over here. I have changed all the different items over here, and I have left some space over here at the bottom. So whenever we school, we have the space for this bottom navigation, or here. So now we're going to link these items over here. So once use like this and click on search, it should go on. This search is er speech. So let's do that. So we're going to select this icon, and we also need to add some rectangle over here tohave the tap active area like this. And it is going to be this is going to be near this such bar. Tap a DEA, screw them together on weekend. If we don't want a group, we can leave it like this step idea for such like this. And then we're going to use the opacity to 0%. And once we go toe prototype were going toe slept the same This tab 80 over here and going to move it. So this one is in any made. So let's try to see what we have accomplished. Still yet. So all your diet rate Next, click over here and here we have our results. Now, if you want to Any made these deserves, that's a different story. We have toe use the same reserves you can see. Okay, so this is a bit problem. We're here. We have a lot of space at the bottom because off you things over here. So let me show you what actually happens. So whenever you have something like this, you need to have clip content. And for this image, we want toe resident Phil, we're goingto go toe crop. You can see this boundary is outside of this area. So whenever you have this but this kind of boundary this is going toe give more space at the bottom. So we are going to use crop and call. It is going to fix that and also you can see over here what is happening. So BG background is a bit larger. This is another problem. So make sure your your layers are not getting outside of this container so If any layer is outside of this container, it is going toe. Give you some headaches like that. Okay, So before going to this one, we need to animate these for so we are going to select all of them. Come on, See? And we are going toe base them over here. Good morning, V. Now we're going to move them a little bit, Doan and, uh, we're also going to change the distances between them like this? No, we're going to use the same trick. 0%. 0%. 0%. This one is going to be 0% to this one is going to be 0%. So we have all these? No, let's try to play it again and see what we can get. So here we have it. Then if we click over here, you can see it comes a top from bottom that's played again. Okay. It tells you that these are the possible actions. So this is how you do thes kind off animations using prototyping. So I hope you have enjoyed this lesson if you have any questions, any suggestions? Make sure you always tell me. Let's move on to the next lesson. 48. Recipe Ingredients Screen Design: in the next few videos, we're going to create this single recipe ingredients and single recipe profession, these two screens and this overlay. And these two I'm going to skip profile and settings and this one this one is almost similar to this such deserts over here. So I'm going to skip this and I'm going to leave it to you guys and you are going to make this. You already have seen this. I'm going toe Include all these all this app links so you can view them and you can create your own as your assignment. This'll overlay. And these two single recipes I'm going to finish because these are all these screens they are going toe finish up all the techniques I'm going to show you inside Sigma Onda Thies. This will be a repetitively which I think I really don't like. Toe do it right now. So let's get started with a single recipe ingredients and then I'm going toe get back to you and going to see your assignments and what you have done and you have created No let's get started and started sending the single recipe screen. We're going to go back toe way were before. And I think we need something over here, like this one salads, and I'm going to replicate this. Let's replicate deserves this time. So I'm going to replicate this one and let's zoom in and I'm going to call it single. Oops. What happened? Single. That would be okay. So first thing is that we don't need this at the top. Also, our this image, it is going to go vied. We also don't need this one. And this is going to stay over here the same. This is going to stay over here the same. Uh, this is going toe. Go away. And now you're going to move it up like this, and we're going to expand it by pressing shift. Let's see how perfect expands. Okay, so this is this Look scored. Now, we don't need the rounded corners over here, so we're going to go inside this mosque. Let's use zero. So we have street corners. This arrow is going to be white now, and no, we need to enlarge this image. So what we're going to do is we are going to seeing this mosque group, this rectangle over here, actually, and we're going toe, drag it at the bottom like this. So let's create a T 100 then height or dissect angle. Let's resize this image or here, like this. Move it inside it. Let's gene the height of this overly, okay? And then we are also going to move these this title over here this hard. I go on this all these three at the bottom over here somewhere, And it is our Dag the stag featured tag. We also need to move it over here like this. Okay, so this is done. One more thing is that we need to change over overly now because we want to show our these icons at the top. So I'm going to go to this overlay. Go to this overlay. This is actually linear. So I'm going to move this gray at the top over here. Now, uh, somewhere over here like this, Why it is going to be in this area there like this make it a bit darker like this because we have very big image. No. Okay, so now I think our back arrow is a large visible now, Um, Okay. So if you want to make it a bit more necks. Let's try to use a big darker over here like this. Like this. It's up to you. It's up to you. What you want to do here? Okay, so I like it this way. Now I'm going to add more icons when its share I gonna run this heart I got if you won't like this fund So here is my share. I call on this one and my heart icon ISS, this one. So I'm going to crab boat off them ex Moved them inside. Jane Doe colored white like this there certainly won over grid lines grid and move them in the right. Art is going to be over. Let's move it over here and more this like that. This is good control. Ship four or control G to hide these. Now we have made the top section over here. Now we're going to move to the rest off the bottom, so let's dilute this one. These three hopes I might Night need this one subscribes. Let's use it for ingredients. You're going tohave a navigational here. We're here somewhere, so we need this one. Let's dilute everything else. Okay? Now we are going to draw something over here to show the stats off this. So we are going to have something over here like this 48 that's used 48 four. It is going to be white. And here we will show some of starts like home any minute for how many person servings and how many kilocalories this recipe is. So let's get it done. We're going to use this this and one more. Which is what was the 1st 1 time in this clock. We're going to drag all these three into Sigma and we are going to use this clock over here . This one is going to be over here. This one is going to be over here. The rest of the thing is alignment and colors. So the killer will be this one. This is actually medium green. We don't want them to be very highlighted because this is just an information. Use a door. Nieto, click it again and again or do something about them. And I think thes stores also need to be like this. That's used text over here. 30 means 30 minutes that she was a spacing off. Six. We're going to use your Ramana Let's unblinking because we need a very small four door here , small size 14. And the color will be like this. Or maybe like this. Like this. OK, so same color as icon and I will go line it like that. Four person, four people were scored. Four people and 1.5 kilo calories. Something like that. Make sure you name these icons because right now I'm not naming them. This is energy. So no, I'm going to just align them. And according to this bar over here and just try to see what looks better to my like. You can see what here? That fighting over here is less. I have to just, you know, fix these problems. The distance between is four. So it must be six. This is a bit much. This is one for seven six. This looks great Next, allowing them to see Okay, this looks better now. A lot better. Nine. From here we have 13 selects. Make it Dan. Nowhere here and also then from here Now this body is almost done. I have some problem. Or here here we have a lot of space, so I'm going to middle align it just using my eyes. I'm not trying to be very pixel perfect over here. So now next birth this ingredients menu bar over here. So I'm going to use you can use a line. Let's use a line underneath it. Shift to make it straight. Let's make it two pixels. We are going to use the capital B Round color will be this blue color. What is this, Bill? No, we don't need Facebook Blue. What? We need our purple blue over here. I think we haven't added it into our colors. Let's use this and added to other styles. Second degree blue. This is our blue. This is not Facebook. Clue. So here we have it exchanged to our primary blue, This one. Okay, so this is going to be a little bit closer. Four bigs away from this, which should be 105 Okay, so this looks great. Now we need another one over here, which is going to be Let's move this inside this group with this group. So this is going to be inside over here. Recipe. Okay, so here we have it inside this recipe, A small section. So it is inside, actually small section. Uh, this line is going to move, and, uh, we also need some states over here. So, command, let's keep it like this. We're just going to change the colors and move this line moving life excluded. Moving line. Now I'm going to replicate this. Okay, Now, this is not going to be highlighted. So we're going to use some other color like this one medium green. This looks good. This ingredients is actually dark green, this one. So our menu is also ready. Let's see how much the distance is from here. It's keeping 36. We want to have good space around it. So user has nor difficulty is stepping over here in this section or here. Now, we're going to list the ingredients over here. This is very easy. This is just a list. I'm going to prepare the 1st 1 and rest you're going to we're going to replicate. So let's get started. And we are going to use. Or here 10 I was I was Salman Fish fish. Then we're going to use a line at a separate over here, and line is going to be discolor. Or maybe this discolor discolor. So we want to be very light. We don't want it to be very prominent over here, because this is just a separator. So let's use common off. And I'm goingto Pete Dexter in the color to be something like this. I'm going to separate the roles from then something like this. Then we're going to use the same Let's have the opacity off 80% because this is just separate or 50% this looking better. I don't want it to be very prominent. And ah, what was I was looking for? I was looking for this this addle over here. We actually want us use the same or c and we're going to place it over here. Oops. Or here. Come on, TV. So this is going to be or hear something like this. So whenever user taps over here, it is going to be activated. So we have, For example, we have this item prepared or we have this with us. Next, use a bit more like this. Next. Group them together now from here to there. Mark Control G, this is our recipe. Be rest C B. So this is over. Recipe item we can also create if you want to create a component, you can create a component. And that would be helpful to And, uh, it's moving a bit up. 49. Let's have 40 beard. Big distance between these and we really replicate this. Let's create this. Come on, D control. Come on, X. You're going to move it to style guide Over here. Oops. Like this. If you want to change the setting, for example, if you want to move these into a group again, I can call it icon and you want to move it over here in destruction at the bottom and the right, you can fix them. Similarly for this one, I'm going to fix it to left and bottom. So this is up to you. I'm not going inside these too many design details because I have already taught you. Now we are just going to replicate this like this morning D dd knee de and D. So we have list off all these items. That's I'm going to select all of them and I'm going toe. What is this? Let's delete these. Is that empty for hymns? They're select all of them. Oops. Let's lock this bottom. There was it is giving me some headaches. Also, this background I moved lock. So I want to select only these. Now I'm going to use this one. So let's improve it a bit more. I want more space, Dean. 20 or maybe more than 20. Seems 24. Okay, so I think 24 looks better. So we're not just going to change these decks over here. And one more thing is I'm going toe increase the height of this one and also the background . So I went to unlock the background is the background is the bag number. It's a knock. It resize it like this. Then I'm going rogue in lock it. We need a button or hair which say's let's start cooking something like this. So we are going to use our standard button that school to our style guide. So when we try toe, change the hide off this, uh, this art board, you can see some off these icons. They have been messed up. Now this problems occurs when we have the scale set. So don't try toe whenever you have some. Some icon over here. Don't try to use the scale, but what this is going to be problem. So next school back that this actually happened. Okay, so here we have them back. Let's see, What are the changes? Okay, so one thing you have to notice is when you are trying toe, if you select, this item will hear this icon double click it. You can see if we if if we're trying to use right and bottom, the bottom is actually happening with this one. So it is this alleged toe this bottom over here, you can see the line coming down. So if I try to change top and bottom, it is going toe. Stay over here. So I think we should you stop and right rather than using So it will not go down, right and top. So this is better. You can see this one is stopping center and this one is left. We don't want it to be at the bottom. We wanted to be moving with the top. So let's move it now. Successfully and it is not going to go down like that. And that's Jane. This let's create a but no one here. We're going to drag our same button with the icon, but this time We don't need the icon. So what we're going to do is we're going to This is the instance we're goingto unlinked the instance. So because we need another button with without the icon so we can right click on this one and we're going to use de Dat instance Now, once the instance has been detected, we're going to remove this Ikonomou here and for this text, we're going to move it inside in the middle. This is going to be middle aligned text, and we're going to rename it legs. Start cooking. Okay, so right now it is a blue button. We don't want it to be Facebook blue. We wanted Toby our green color, which is our primary green. No, we have added over color. No, we're going to double click and go to this background. But and and rather than having the simple color, we can had a linear radiant. So I'm going to go with really ingredient and we're going toe have something like this from left to right. And we are going to use the same galera here almost the same a little bit. On the lighter side. You can see or hear this looks create. Now you can see this has darker shade on one side and water lighter and more sharper on the right side. So here we have the second button, and now what we can do is we can easily create another instance or another. You can see primary, but so this is going to be another component. So this is our master component. Let's call it Burton. A simple control command e. I'm going to move my Marcia component to my style. Kite over here. So the So here we have two kinds of pretence you can see side to side. One is this button with Icahn. Second is but in the dark icon. So let's school back or main designed. Let's align it in the middle like this, like in the middle. See if this is in the middle to I think this. Oops. Come on, G next, call them recipe items. This is going to be in the middle door. What has happened? Select all of these, Margie, and they're going to be inside a group. Make them in the middle Now it's in the middle. Now. The rest is that just you have to change all these icons. So in this over here we are going toe hide this factor and this ellipsis it is goingto be empty. So we're going to use Vied and we will have some straw which is going to be opposite. So it is going to be a better like this Like this. Okay, so if we have something empty over here, we're going to use something like this. The rest is that I just have to change all these text overhead way. So I have gained the text. Now we're going to test it in the prototype over here. So I'm going to link my desserts over here. This image I'm going to link it so this over here. So they expect this and move it over here like this. Start any minute smart and married Easing is out. Let's move to our Sorry, this one. It's not one. Let's play this Sellers means and deserts. So under desert screen, we're going toe klik This and you can see this is the effect. This is really nice. So we have to link it back. So if someone clicks the back button rather than going over here, it is going to go back to salads. The man screen. Oops. What is happening? This one. Let's dilute this. So this is going to go back toe desserts like this? Check this. Check this out deserves go back. Oops. So going back is a bit different. Smart and emir. Let's see what is happening at Cletus Going back from to 80 years old Here. We need to select the stab 80 actually. And this is going to go back to desert, not move on. But we're going to navigate to Smart. Any merit is in his out. What is the 2nd 1? So here we have one. And if we select the 2nd 1 we want to delete it. It's plus delete. That is all we need. Okay, So this is a fact I was looking for. You can see if we scroll down on this one. You can see we have this button. Let's start cooking. Very nice. Cruel. Okay, so that is going to end this lesson. We're going to create one more screen preparations, which is almost similar to this one. A lot of repetitive Urgh on the new one. Next one is going to be overly so let's move on to the next lesson. 49. Recipe Screen Prototyping: in this video, we're going to create the next queen, which is going to be preparations. So we're going to replicate starting, but replicate this replicating this one. So we're going to replicate this and we're going to move this toe over here. So this moving line is going to be moved over here. Exchange size toe 100 102. You said this one looks good. Let's change it, Sculler Toe this one. Oops. This darker one and said this is going to be into this state. So we have already Jane, this. Now we are going to move in this area. Our here. So we are going to delete everything over here except the top one. And now we are going to call a rather than group one. We're going to call it operations steps. So this is our first step. So I'm going to call it step one, and we're going to, right? Click and deed, agit. Dejected. Instance. So step one way might need this line. That's dilute this treat. This I can do. I just needed this one. Okay, Now, what we're going to do is we have way water rectangle over here. which is again going to be white color. These are our steps. So this is going to be white, color white, white, And it is going to be the bottom off this Step one. We're here in this group. This is actually a frame. So try to use frames when you want to have some more control over constraints, these constraints. So this is going to be our actually taxed overhead inside it. So we want it to be detach. And we want to use a fix. Weird like this, something like this. So we have this fixed width. This is going to be able paragraph hard ideas. What is this? Estes. Step one. Okay, so we are not concerned with the height and ripped off this one. Exchange its heights, uh, to there's changing toe group because it is behaving very differently. Now we have the group sighs. That's move it over here. Force tried to fix everything you've warned, then convert to frame because we frame is actually trying toe use its own height and Brits so we don't need that. So this is going to be our paragraph. So now I'm going to use this. Okay, so this is going to be my 1st 1 So I'm going to use the roundness of four. Um, okay. S four is looking good, and then we're going to use an icon over here. Before that, we're going toe cleared on a tangle over here. And what we're going to do is this is going to be around, too. This is going to be zero. This is going to before, and this is going to be Oops. So sorry. This is going to be zero toe. So, actually, I try to create the same angles over here. So here we have two. Here we have four, Which is again not equal to this, uh, white or here. So now we're going to use our orange Calero here. Let's make a bit little bit off lighter color. So let's add it in corn light orange. And now you're going to have polygon, which is going to be our play button. Let's rotate it toe. 90 degree. Oops. 45 degree. What is happening? Minus 90. Victory. Let's use one big selloff radius that she was this greenish color. Lex, reduce exercise too. 16. Okay, so this looks squared. So whenever some user clicks over here. He or she is going to see this step in a video. So video with Bob up and they will see this step. So this is almost complete now I think we should can convert it to frame. And we are going to let's remove this group. We are goingto UN group this. Now we have one background. When this we have rectangular polygon, This is going to be a icon. Let's move it inside this frame. And this icon is going to be at the left, in the bottom, left in the bottle. This is going to be left and top. Okay, The cyclone is going to be right in the bottom. This is going to be left in the top and that is all we need. Okay, So one more thing is that we need to add attacks layer over here for the title. So for the title, we're going to use step one, take the egg out. So this is going to be our mean heading. And for that we are going to use, um excuse the same fort die fierce and we are going to use the color which is going to be our green green. Excuse this one. So this is going to be our sharper green color. So this is going to be step one if we want. We can also use this one. This is this is not going to be a problem for us. So let's use this that zoom out. And this is our main step. So now we're going to repeat this. We're going to group them together, and we're going to repeat this. This is our steps Step and let's replicate this and move it down like this. We need to have a tea least 16. Let's make it 20. Come on, de. Come on, D. So right now I'm going to use just three steps that's used these three steps. No, we're going to change its size. We can see this is going very well because it is a frame and we have already object of a constrains over here. Similarly, for this one will exchange size similarly again. We can slack this preparation step and we're going to move it like this. So these are our few steps. Let's move this break up over here. And this time we need something with, um with an icon. This here, Let's delete this. We don't hear 48 for the air in the distance between these for the icon, we're going to change it. Select school layers. Icahn next seals this one. Okay, so for this icon trick, I have to show you that if you want to add an icon over here, you cannot add an icon like this. You cannot drag and drop a Nikon, for example. For example, this one inside this it is not like that. It is not going to let you add. I attempts to your instance. So instead and going over here, we're going to go to Sty Guide the burden Master component. We're going to add another icon. Let me show you the trick. So we're going to add on that icon over here. So we have our icon you can see. No, it's inside this one. And, um, we're going to change its color too wide. She was this more white, and we're going to hide it over here. So whenever we want to drag something, let me show you how we're going to use it. So we have this button now and simply we're going to hide this icon and show the cycle. So this is all we need to do. So let me see if we can align it properly, because it is not in the middle. Okay, so now it's in the middle. Okay, So that school backdoor mean design and exchange it do, and I'm going to change its color two. Okay, So one more thing, we're going to add this BGN button, and we're going to add it to our color styles. This is going to be a very green Grady int. Okay, so we have no great. And over here, So once we have our ingredient, we're going to slack this background, and we're going to switch to big Radiant. That is all we need to do over here. So this is how we actually cleared this? Let's try toe. That's tried toe shoe, our bottom navigation over here. Okay, so let's make it a bit smaller like this. Also this background earlier? No, for this one, we need to have a depth media that is going to be over here. Two areas, actually. What? This? This one on checking. It's this one. So this is going to be prepped stab. And this is going to be ingredient. Yeah. So I'm going to just hide them by 0%. And now we're going to go toe prototype and simply were going toe use something like this. Drag and drop never get too smart. And he made. And from here, we also need to baste both off these, um, Lears most of these layers over here too. Something like this. So let's move this over here. Excuse this one to go back. So now we're going to test our prototype. Let's see what we have done over here. Okay? This is looking good, and we can go down and we can click over here, and it will goto our review pop up, which we're going to make in the next lesson. So we have ingredients and preparation. Now, if you want to show the progression and move them up, moving them up you want to show the any mission you have to do the same thing you have toe select all these, and thats group them control. Come on. G X called them steps. We're going toe. Come on, See? And we're going toe Base them over here. So here we have them like this. And inside this group, we're going toe, move them up in town, Jayna positions. And now we're going to hide this. So you're going to use 0% for the opacity. Let's see what this happening over here. You can see when they come out like this, you can also slow down the animation or here. So if you want to slow down the animation on the movement over here, you can select this and we have 300 milliseconds we can use for 50 many seconds. Similarly, for this one, we can use 3 50 See, what is the effect now? You can see it looks better when we have, uh, these kind of settings. So these come very nicely like this. So this ends over this prototyping in all this, I am going to create one more screen which is going to be overly and rest of the screens and major app. You are going to design for me and show me what you have caught. So let's move on to the next lesson and where we're going toe design our over the screen, and I'm going to show you how toe use this pop up overlay and fig MMA 50. Review Pop up Overlay transitions: in this lesson. We're going to create this overly screen in fig MMA and where I'm going to show you how toe pop up this overlay and hide it when someone submit reviews. So we're going to go back to where we left. This is the section where we left and now you're going to create an overlay screen or here , which is going to be a fight. So we are going toe, create a new frame and it will be our own size. It will be. It will be 328 pixel vied because we wanted inside this. So let me show you. So if I dragon you can see over here you can see it is going to be inside this container. So let's use 330 and the height will be 400 70. This is just and you can see estimation and we wanted to be rounded corners. So I'm going to use four over here. You can use increase more, for example it, for example, like this that is going to work as well. Also, if you want toe, add some shadow, it's up to you. But right now I'm going to use some text over here. Log in as, um, mud. Okay, so the killer we're going to use is going to win this one. So this is going to be a link color that I'm already logged in from top. I'm goingto have 30 from the left. I'm going to have 20 less. Keep it pointed. Something like this. Then moving down. We're going to have select rating, so we will show the user some fading many over here. We're going to use the action button. And the color will be this dark, greenish black separating. And we're going to use the same, uh, this Starwood here that she was the star. Let's based it over here. The star rating. And now, actually user warships Electric. So we're going to increase its size. There's lock it. Let's use skill over here. And I think this one is good. I think we also can increase the distance between them up it like this. So I'm going to select holding shift key, and I'm going to use this. Distribute horizontal spacing, horizontal spacing. So this is this Looks better. We want to have some separation between them so users can easily manage to know that, though. Slack this reading. So let's have 14 between these. Excuse this again, and I am going to used right review, and then we're going to have text box over here in this textbook. She was that is going to ride his or her review. There's a lying all of them on them on the left, like this. Okay, so I'm going to reduce the height of this one because we also need a burden. Were here, so I'm going to use again. Four exist. Excuse this or here. The worse. We're going to use reverse sightings over here. Let's add some stroke around. It is going to be this. It's used a lighter color like this one. This looks better. Now we need a but and we're going to go toe assets, and we're going to use over simple button over here, and let's change size. Okay, so we need to set this button in our, um, style guide and next see what is happening over here. This is in the middle. Uh, hi. Out of word. And, um uh, it is going to stay in the center and at the bottom. So let's see now, jacket now in the design. Okay. So just just looking. Okay. So we just need to change the pardon color over here. We're going to go with our hopes. Uh, so we're going to go with our solid color That is going to be about this bluish color. So I'm going to use this one this time. So I wanted to be closer to this. And we have We want to have some space at the bottom. You can also increase this frame hard. This is going to be our over lips. So let me show you what is happening over here. So this is you can see this is set to scale. We've wanted to be at the left and at the top. We don't want to Skill swelling going to move them it right now. And this looks crete. Now, some vertical spacing. Okay, so this is good. 30. This is 21. This is going to be 20 tardy for D. So we have this, uh, designed. This is going to be our overlay. And this text is goingto be submit. Submit a review? No, on the screen. When someone tries to click on this ready to eat now, Button. We're going to show them this overly. So once they have finished everything, they have prepared the dish. We want them to leave some review over here. So to do that, we're going to link this, But until this early. So we're going to go to prototype and that soon out. And we're going to link this burden to this and on tap. We are not going toe Never get do. But we're going to use this open overly. So in this section or here, this is going to be overly. This is overlay. We are trying toe use and there are options like center dob left. We're going to use it at bottom bottom center. Let's use this bottom center and we're going to use move in and it is going to move in from the bottom like this. Next use 400 milliseconds and let's dust this out in our app. This is the burden. So if I have pressed ready to eat, you can see or hear. This is going toe poor book like this, but we need a background. So, um, on this selection, we're here. So here is our injection this interaction. We want it to close when clicking outside. We're going toe also add behind overly. So I wanted to be 50% and let's see what happens now. So this is the actually effect. So if we click outside So now if we click on this button, you can see this is how it pops how this is how it drops down. So also you can click, You can use the submit button and you can link it back This main screen that thank you Would something like that Or maybe start going something new, something like that. So you can never get all you can navigate it back to this screen. It's up to you. So let's test it now. And if we click over here, Okay. So you need to see that it is going toe. Go back. It is going to move out now, and it will be It Will is in his outlets. Use is out. So I'm not sure why it is giving me a jerk when it goes back. Smart and image met in years is in out, move in, move out actually, so it is going to move out. I'm using move in. That is why it is doing this jerk. Okay, that's that's that's squared. So it is moving out very swiftly. That is good. So I think this is going to end up our journey with this app. I have left few screens because I think that was a reparative work. I wanted to show you this overly How it goes out hose, move. It moves in how we do the any mission off this selection over here value died. How? We show these such results and all this different stuff. So I hope you have enjoyed this lesson. If you have any suggestions any you want to learn anything from me, you can always ask me. You can contact me. I'm open to questions. Don't forget to ask me questions. Whenever you are struck. I'm here for you. Let's move on and learn something new. 51. Project ► Design 6 Screens App: Now you have learned everything I have showed you how I designed this whole app. Now it is your time to create any app. You can clear the recipe app if you want, or you can create any app your own idea. I'm not limiting you. So create an app with at least 6 to 7 screens. At least six screens that are going to transition. They have some transition effects. They have some movement effects, popping up effects. They have some overlays that goes out with some time eso create this. So I'm going to show you at least this log in screen. Then we have this Minsk in there. We have some transitions and then some screen with some movement toe another screen, which is a single object or single file or single record. Whatever you call it, then we have the search builders something. I want you to create something like this. You can see this effect moving out, moving in. So I want you to create some effect like this. Also, screens moving up. Record your findings are recipe found or your records phone whatever. Popping up one by one from Bordeaux and bottom. So this is the assignment I want from you. So start reading it now. At least six screens. If you want to increase the screens, I am limiting the number of screens. I am giving you last numbers because I think that time should not be wasted. If you are creating, if you are, you can have. If you have a lot of time and you want to create like, 10 screens, go ahead. I have no problem but six screens, at least so I can do different transitions. How you move from one scheme to another one and have you used the tap your target area, which is a very important user experience. Point on usability Point of view. A lot of designers that don't use that tap urban area, so it is going to miss hit most of the time. So this is your assignment. Create a full fledged AP 6 to 7 screens or 10 screens, whatever you want to have, and show me all the transitions, how everything works around this app. I would love to see your ideas I'm reading for your assignment, So start creating it now. 52. Thanks and What's Next: Now, thanks a lot for being with me along this whole duration of time and learning together with me, I hope you have learned something useful. If you are unable to understand something or have some questions, you can always reach out to me via this platform. You can always reach out to me via my website. Then you excited.com. You can contact me, you can email me. You can join me on social networks and ask me questions or anything, any questions you have regarding user experience design, user interface design or freelancing in general. So del then we are going to see you inside another course. Do check out my other classes and courses about design, about typography, layout design, color schemes and all that different stuff. Trying to leave honest review, write some comments about whatever you have learned inside this course. Tilden, See you soon inside another class or course. Till then, take care and bye.