Build Design System in Figma from Scratch - UI UX Master Class

1. What you will learn in this Design System Class: Welcome to my class about design systems using Figma. In this class, we are going to learn what are design systems, how we make up our design system, and how we convert that or design that into Figma. And we can reuse that into our projects with developers, with our teammates and different designers. Before we dig into design systems, we are going to learn a little bit more about what our design principles. What are the purpose statement of your design systems? What are different components? What are their qualities? How a component should be? What are tokens, rules, themes? So a lot of stuff we're going to learn before we dig into actually designing our design system. So stay tuned with me. We are going to work on grids. We are going to work on icons, illustrations. We are going to work on different grid systems, lay out a lot of stuff, including our buttons. Then we are going to create simpler components that we're going to create. Bigger components are called molecules. If you know about atomic design system. That is all we're going to cover in this class. We are going to create a whole dark theme, often app learning app using Figma. And we're going to build its design system. And I'm going to share with you my techniques, how we're going to use auto layouts and how we're going to use different components and how we can easily swap different components with each other or we can easily manipulate them. I hope you will learn a lot with me. Let's learn together and start this design system class with me. I will meet you soon in the class. Till then, take care. 2. Intro To Design System, Benefits And Outputs Of Design System: In this video, we are going to talk about design systems. Now the first questions that arise even in our minds is what is actually designed system. So think of everything that makeup off in any product. You have, any mobile app or any company, for example, let's say Google. Whatever the layout they uses, colors, icon, topography, tone, and voice. What are their styles, different style of designs. Then we have coding conventions. So all these actually make up a design system. Keep in mind that design systems are going to be the part of all these things. Your tone and style, your grammar, your personality, product, personality, that is going to be your style or voice of your product. And then we have typography, colors, different animations, even the micro animations, these are also part of your design systems. How the button is going to be clicked when, what is going to happen when you are going to click the button? Or what is going to, what animation is going to play there for a whole long. So all these are actually the part of your design system. We're going to study some of the pillars of design system. A lot of you, they misunderstood design systems. A lot of us, they think that just the component library or the pattern library, or just the style guide is your design system, but it is not. So we're going to look at five pillars of design system and then we're going to look at different benefits of design systems. What are going to be the inputs, sorry, the outputs of design systems. Let's get started and see what are those things. First, we are going to look at the pillars of design system. And those are actually brand guidelines that are going to be your first step. Brand guidelines are mostly developed when you are designing the Logos or the brand image. It includes tone and voice, your brand personality. Then we have actually, what what it says is that it is your overall presence of your brand or your product. For example, if I am a person and I go out in the market, My whole dressing, my tone, my style of speaking, my style of walking, all these are going to be the part of my personality. So these are the things that are going to be defined in your brand guidelines. Then we have style guide. Style guides is going to contain all your typography, your icons or illustrations. All these things are actually going to be into the style guide. Mostly these are atomic level design. You mean that the basic and elements of your design, the smallest elements of your design, grids, grids are also part of it. Then we have visual language. Visual language is actually the whole feel of your product. If I use just one word, it is going to be the feel of your product, how your product actually feels like. Then we have CSS library, although it is going to be at the end of your process, but it is a very important part. Css library or CSS framework basically is the coding style or coding library you are using. Whenever your coders are using a specific library, you have to, as a designer, you have to stick to those rules or you have to adopt those into your own designs. For example, if you look at Bootstrap, all the apps or websites that are built by Bootstrap, they look almost the same. Similarly, we have Foundation. Recently, we have tailwind CSS. I really love that designer. I have purchased some of the courses from that developer. Actually he's a designer plus developer heavy as a developer first and then he went to design. I have learned design from that from him too. Then we have foundation, bootstrap, Bulmer, the CSS and other, many other CSS platforms. Or you can also call them front end frameworks. These are actually going to help you lay out your whole interface in HTML and CSS format. The last is pattern library. Actually better library is actually the second last. But right now, whatever comes to mind, I'm going to tell you the fifth one is pattern library, which is going to be your components, for example, your cards, your repeatable. For example, you have blogposts. There are paragraphs plus some buttons and some headings. So you are going to combine those and create a component library. Now let's talk about the benefits of design systems. A lot of people, mostly bigger companies, if you are a new designer, they are going to resist that we don't need a design system. And how you are going to convince them. Design systems is actually going to eliminate all the inconsistencies in your interpretations. For example, I have designed something and that is going to be, for example, I have designed a button and The button hover state is going to have animation of the drop shadow. That is my own, you can say, perception of that design while I was designing. Now when that design goes to a developer, he might think that even don't even notice that mild change in the shadow. So these problems are going to gather time to time and within one year or two years there will be a lot of inconsistencies and this is actually called UI design depth. That depth is going to keep on collecting. And design system actually can't reduce that design depth and also the interpretation problems. My developer might be thinking that it is something else. I might be thinking that it is something else. These interpretations are going to be reduced. Then we have a single source of truth for developers and designers. Developers know that this is the block they are going to use. They're going to pull that CSS code block and they are going to use that most of the design system. They also come with coded examples of those components. This is another thing which a lot of, a lot of designers they don't understand. Then we have consistency, uniformity, cohesive design approach in all our different products. Most of the things like you can see you are using Facebook, Google, all other apps, bigger companies, they are on multiple platforms or even if your app is just a website ammo Anna, and a mobile app, just to product app or two product to facet product are two phases of the same product. Still you can, this design system can help you a lot. So if you have two phases, you can show the same personality in both the directions of your. So for example, if I am a person and I'm I'm wearing a t-shirt and some pajamas or maybe some sneakers. And when I turn the other side, I am wearing a tuxedo. This is really irritating for the users. For example, your website design button spacing is different and on your mobile app it is different. This is going to create a lot of problems. So cohesiveness, consistency among your different platforms. For example, a similar app look same on iOS and almost the same on Android phones. So this is basically can be achieved with design systems. Then we have one more thing is that developers and designers, they don't have to fight again and again for small design issues. For example, I want this orange and the developer says, I want this orange, this tone of the orange. So this is a very small problem. Once you have designed us design system, these problems are not going to come up. You have to solve the actual user's problems or the bigger problems you have to look at the bigger picture. Rather than sorting out small changes and small problems. That is all about benefits of design system. And let's look at what will be the outputs of the design system. A lot of us, we don't know what will be the output. The output is actually a clear, up-to-date documentation where everything is explained. Then we have guidelines, design guidelines, rules, styles, everything that is easy to understand for the developers and for the designers. Second is documenting reasoning why we actually chose this design or this animation. This is actually, you can easily justify. For example, after, after six months, your CEO or your manager calls you and says why this animation is happening like this. You can show them that this was the reason behind it. The users actually loved it. Maybe something else. Then we have tools and processes that help you implement the design system on daily basis. That is actually, for example, if you have chosen a Figma or you have chosen a specific CSS framework or specific, you can say naming conventions. These are actually different terminologies that can have very big impact on when you are going to collaborate with your designers and developers. Similarly, we can, in different processes like for example, we, we can, for example, if I want to change the whole theme of my app, for example, I want an update or my CEO calls me and say that we need to update our design system to a more modern look or maybe something else. We can, we can implement that in many different ways. We can implement that within just one product and see what is the response of the users. There are many processes you can develop to implement that design system. And you can tell your developers or the product managers that this is how we are going to implement this design system, this design terminology or something new. If you are bringing something new into your design system, we're going to have it like this. This is going to be the our process. These are all the things about design system. Then we have, we have learned the design system pillars or main parts of the design system. What are the benefits of design system? I hope you have enjoyed this lesson. Till then we're going to learn a lot about design systems. We're going to build our first design system in this class. And I'm going to see you soon in another lesson. Till then, take care. Bye bye. 3. Purpose Statement in Design Systems: Whenever we start our design system or building as a design system, the first thing we have, we need to do is we have to build a purpose statement of our design system. Now, for the purpose statement, we are going to ask just three or four simple questions to all our stakeholders. Designers, developers, product team managers, CEOs, or product manager or whatever, the person who is invested in that app. So the questions will be, the first question will be, what is the goal of this product? Then we have, why is it important? Why are you creating this design system? And then the third one is, how will it help us? And the fourth one is, who is it for? There could be different answers for different teams or different apps for the same, same these questions. The answers could be that our design system will help us free our time for our product designers and developers. And they can focus on major problems by the users or the major problems facing and the users are facing. The second is why is it important? There could be many answers to this one, but one example is over here. If we are not going to innovate, our product will be eaten by our competitors. Or it could be that our users can be confused with the inconsistency in our product design. Third is how will it help us? So how will it help us? Actually, it is going to save over time. We are not going to do the same. You can say discussions on the button color or button size. This is going to save a lot of time and money. So we are going to have repeatable patterns. We can reuse them again and again. It is going to save a lot of time and a lot of headaches for our developers and designers. Now the fourth is who is it for? Normally it is it for our whole product team. And they are going to use it, excluding the, I think the CEO or the owner of that company, mostly the designers, developers, even the product managers. Maybe they might also need to use them time to time when they are developing some wireframes or some mockups or something like that. So these are the questions that you are going to ask your stakeholders, your developers, or your designers before you are going to start making a design system, make sure you create these questions. You get at least the direction that this is going to be our design system. This is the purpose over design system. Why is it important? How it is going to help us and who is it for? So I am going to share with you all the slides. There are two examples over here, so make sure you download these PDF files and all that nodes along with this course, you can revise them and whenever I post that, you have to submit your assignment, you can easily submit it. That is all about purpose statement of design system. I hope you have liked this, learned something new, we will meet in another lesson. Let's move to the new lesson. Take care. Bye-bye. 4. Design Principles And How To Come Up With Them: In this video, we're going to learn about design principles. What are their two major types and how to hold a design principle workshop. How you are going to get all your teams together and what questions, and how we are going to come up with those principles, design principles. So let's get started. First, we're going to introduce what is actually design principles. Design principles are basically guidelines that are going to help you along your whole design process from start to the finish, where you have where the design direction is going to be. So why? Because we can have more aligned experience or similar experience across different products or, or platforms. Now, this is going to become clear when we are going to see some of the examples. And that is delightful and simple. These are just words, but they matter a lot. These are called universal principles. Delightful is going to apply to whole set of products. But if you want to get to a specific products, specific design principle, for example, like Intercom design principle, they have something like design transactions, Design Conversations set that then transactions. So it actually means that transactions are very robotic if you go to or visit any bank or any of that kind of institute, the people are going to be very formal. They are going to require a lot of document, documentation and things like that. They are not warm and very welcoming, are very friendly. Design conversations rather than transactions is one design principles, static, very specific, that we are going to have a very welcoming or very warm feeling from our product. Now, why do we need these design principles? This is actually your whole design, your product behavior, your tone and voice, everything is actually going to be the part of your design principles. Now, the major reason behind this is that we are going to use these design principles to make better design decisions. This is actually, you can say, you can say the sword of design principle. So why do we need that? We, we are, for example, we have two set of buttons or Buttons Styles and we have to decide on one of them or theme, one of them we have to multiple themes and one of them, it reflects our design principles like delightful simplicity. And the other one is a bit, you can say formal or you can say a bit dull in their theme. So which one we're going to decide we're going to go towards more delightful and simple theme or simple button rather than the complex one or the formal volume. These design principles are going to guide our design decisions. Let's talk about how we are going to hold a design principle workshop and how we are going to come up with these design principles. Now the first step is that we are going to gather all our team members. That includes developers, designers, copywriters, SEO experts. Then we have product managers or anyone who is invested in the product who is linked to this product. Second is we're going to get an hour all materials, for example, post-it note or sour Sharpies, markers or whatever you need. Then we are going to give those papers to our team members and ask them to write at least five principles. We are going to gather all those principles and we're going to post them on a board and we're going to rearrange them and make a theme converge. And theme is the next step. So once the theme is formed, we are going to combine them into, by voting them and ranking them that these are the best principles. These actually, these are the principles that reflect our product. This, this feels like this is our product. So this is actually about feeling rather than concrete design solutions. This is actually, however, tone will be what will be the, you can say, personality of our products. So we can easily rank them and then vote them and we're going to select five of them. More than five people are going to forget them. So make sure they are less than five design principles for your product that is going to be part of your design system. I hope you have learned a lot and enjoyed this lesson about design principles, how they help make our design decisions, and how they are going to be part of our design system. So let's move on to the next lesson and learn something new. Bye-bye. 5. 7 Steps To Building Your Design System: In this video, we are going to discuss some of the steps, how we are going to build a design system. But before that, before we move into that, we're going to look at different things we already have. So whenever we are going to start building our design system, we're going to start with what we already have. So there are basically two or three stakeholders groups that are going to be present for, for looking into what already we have and what problems we already have. So start with your CEOs, your product managers, your marketing manager, and also with your developer team and your design team. So ask them all of them what they already have, what they need, what are their problems? We are going to ask these stakeholders what they already have. So what they already have is called UI inventory. You have to build that. We're going to see some of the steps in the next slide. So before that, we have to look at all the different platforms or surfaces, basically, surfaces that are going to be the part of our design system. For example, you might need e-mail templates for marketing you might need and blog posts, templates or blogposts designs for marketing. You have to understand that your design system is not only going to be your web or mobile app, but it is also going to touch all different surfaces. For example, marketing, for example, acquiring new customers from Facebook ads. So there will be a lot of different, you can say, surfaces attached to your design system. So let's move to the next one and we're going to see all the steps. Now we're going to look at seven different steps that we need to take to create our design system. Again, as I already said, that we're going to start with what we already have, so we are going to take inventory of what we already have today. We're going to take our UI inventory. There is a lesson on UAE inventory. I'm going to show you how to do that. The next step is getting everyone on board with your design system, your developer, in your design team, your CEOs or managers, or other stakeholders, you have to get them on board that we really need to develop our design system. Third is established the baseline components. So baseline components are basically the major components that are going to be the building blocks of your a system, your, your mobile app or your website. Without that, you cannot build anything. These are the baseline components. We are going to build all that. For example, your buttons, drop-downs, all that things forms. Then we have billet, ballots, topography, scales, typography, and colors is I think, the main major teaming component of your design system that is going to define your brand language, your your design design outline. So it is going to decide where your design is actually going, in what direction. The fifth is Strand, right? These standardize these across your products. Don't try to overdo your design system. The start, you have to create just simple things. You don't have to create a lot of complex design system are very big design system. First you have to standardize doors, all colors, color palettes that those topography, typefaces across all your platforms, your mobile lab website, they should look almost harmonious, I think not identical, but harmonious. And they should look like they are part of same system or a product or a company. Then we have to integrate the design system with our process. We have to build a process of how we are going to create our design system on how we are going to implement that. How our designs from figma or from our design system in our design tool is going to process towards the developers in which format. Rather we are going to use JSON language according language or CSS or HTML, whatever. You have to create a process. Then the last one is maintain your design system. We have to maintain it. Because design system is going to be ever evolving. You cannot have a design system that is static for like five years. You have to create new components. You might not need component or a button you have to create. Maybe after one or two years, do you have to create new theme for your whole design system? Maybe you need a dark theme and lighting for your design system. There will be changes that you have to maintain. So there will be a team of designers or maybe one developer that is going to help you build or keep or maintain your design system. That is all, these are all the steps of building a design system. Seven steps. We're going to discuss a little bit more in the next few lessons. And then we're going to Figma and we will start our basic design system in Figma. Till then take, let's see you and meet you soon in the next lesson. Till then, take care. Bye. 6. How To Audit UI Inventory?: In this video, we're going to learn how to audit your UI design inventory or what you already have. You have to start with virtue already have an MOU or building a design system. There are few steps. I am not going to be very elaborate about it or make it a very long lecture. This is going to be a short two or three minute video, and we will look at what, how to audit our UA inventory. So the first step is that we have to take the screenshots of all the different screens. Now, what we are looking, we are looking for inconsistencies. Keep that in mind. We're looking for inconsistencies in color, in diaphysis and Typhoeus sizes, font sizes. Then we are looking for inconsistencies in styles, maybe your gradients. You have to take those, all those inconsistencies. Take the screenshots, you have to look at every screen we already have designed or built. If your company or your product is new, you haven't built anything. This is not what you need. This is for if the company has already built something and you have to audit the UI inventory. So take those screenshots of all those inconsistencies, then we are going to group them into different categories like navigation header, drop-down, cards or whatever those different categories are. Then we can also sub-categorize them Like button States. There might be differences in buttons states. And then we have to show these inconsistencies to CEO, your developer team or your design team that these are the inconsistencies across your different products, across your different platforms. And that is all. We have to work from those inconsistencies. We have to limit them. We have to unify them into one design system. I'm going to share with you one article written by here we have the article I think it is written by I'm not sure. Brad Frost. Brad Foster is a famous guy. That is a about these molecules, atoms and all that design systems stuff. You can see here is the example of my bank's website. And here you can see the ANS inconsistency in button designs. There are like I think they have like ten different types of button. There are different styles, they are different sizes. There are multiple inconsistencies in all these buttons. So you can see these are just the screenshots. He has taken. Another one over here. You can see just the Learn More or Get Started button with this arrow. It has like ten different variations and this is really frustrating. Here you can see for each C, you can see here they have all different insist can inconsistencies in button. You can see the sizes, the, even the gradients, they are different. This is total gray, this is grayish gradient and this is a bit different than we have two different, you can see the sign-up and the suggested they have two different gradients. One is a bit darker and one is a bit lighter. You can see the checkout with PayPal or add to cart. They are I think the signify different actions, but they have the same color. You can see these are how you are going to find out different inconsistencies and you have to report them. You have to start with these UI audits. So you have to create a separate file in Figma or whatever software you are using. Take those screenshots and group them together into different categories and present it to your management. That is all about how to audit your UI inventory. I hope you have enjoyed this lesson and got something, some good knowledge from it. We will see you soon. I will see you soon in the next lesson. Till then, take care. Bye bye. 7. What Are Components Of Design System: This video is all about components. Are the, what, our grid components or how to build a good component, and how to sort them, how to categorize them, and what should be present in a component that it is the, it gives the most value. Let's start and see how we are going to name them, how we are going to categorize them. What should be present in component? First thing is that there are two major types of components. How we're going to build a component. Try to see which is the most highly frequent Lee used thing or design element on your design. For example, buttons, they are going to be used again and again, tax that is going to be used again and again. Headings, they are going to be used again and again. All these are, can be components. There could be smaller components, there could be major composite components are bigger components that are called molecules. So first we're going to look at high frequency components, the components that are going to be used again and again. Second is we're going to see which component is that is going to show the essence of our brand or show. You can see whenever a customer, they look at that component, they are going to guess that this is Google's product. This is Airbnb. We have to, this, these components, they have high value components because they are going to show your brand. They are going to tell the story of your brand. So you have to also categorize them. You have to, you have to create high value, high frequency components also. What are different? You can say different properties of a good component. So first is purposeful. Whenever you are creating a component, it should solve our design problem. If it is not solving a design problem, then I think it is not a component. Second is that reusable? Reusable doesn't mean that we have to use the same button again and again. Reusable mean that we can easily change its color and shape. It is not good for a single use case, or it is not used just in forms. You can use them anywhere. Third is that it must be flexible. Flexibility comes from, you can change its color, you can change its size, you can change its style. So these are three things that are going to make it flexible, size, color, and style. Maybe you can outline that same button and use it somewhere else. So that is, I'm going to show you some examples over here. Let's see, Let's see one example. Here. You can see, let me show you. You can see over here, if you look at this Airbnb page, this bigger component, this top header component where we have Show All Photos that is very specific to Airbnb. Whenever you show this, just this whole product, this whole component, the bigger component, anywhere anyone is going to guess that this is Airbnb website. Then again, this component over here, this 1 $13 per night, this whole block of card pricing card or check-out card is actually showing the essence of this whole brand, this hole company or firm. One. This is going to be very, very unique to this product. So these are high-value components. Let's come to the reusability of flexibility of a component. You can see over here, here we have check availability, a button very nicely designed. And if we cool down over here, you can see this is again a button show all 11 amenities. And it is same shape, same height, same curves of the borders, roundness of the borders, corners, and the same style, same size, everything, even the text size is the same, just the colors are different and there is style different softwares, thin border line. This is called the flexibility of a component. So this is actually a same component, but with different style. So these are what you should have in a component, reusability, flexibility in solving a problem. For example, you can see here this button is actually showing all this place is going to offer. It is actually hiding some of the features. So if you click on it and this is going to show. In all different 11 amenities over here. Similar, but this button, this is actually solving a problem that is very unique, that is actually unique product feature that is actually check the availability. This is actually going to book or show you the availability of this place. Similarly, you can see this button, this is totally different. It has smaller size, it has icon, it has less spacing around it because it is serving a different purpose. Altogether. It is going to show you all the photos. These are different button styles and these are they have different purposes. Okay, So that is it. Let's move to the next slide. The next question is how we are going to group them? How we are going to name these components? This is a very big question. First thing is always categorize them on basis of purpose. So if you have headings or texts, they are going to be sit on a single page, style guide page where you are going to style all the texts. Then we have purpose is like for example, we have a checkout page. They are, we have an Airbnb property page, for example, let's say we have property page. We're going to sorry. We're going to group all those cards or all those related components that are going to sit on are related to that specific page or that specific feature. You are going to group them like that. So it is going to help you create larger or group larger components like we have cards. We cannot schedule those cards on different pages. For example, all cards that are related to product page, we have to keep them on a single page. Next time, whenever a new designer came in, he can easily see that this is, these are all the components related to our product page. This is how you are going to group your components. Next, let me show you some of the naming conventions. For example, headings. We can have mega heading H1, H2, H3. We can also name them related to what the coders actually use. Our familiar with heading dash blog. You can see this heading dot dash blog is very related to the purpose of this heading rather than its size. I'm categorizing or using the name based on the purpose of that heading, that it is going to be the heading of the blog, blog post. Then we have cards, lending cards, signup card, footer, large. These are different cars that are going to be paid specific or you can say name specific that this name shows the purpose. Third is Button. Never name your buttons like blue button, red button, green button. That doesn't show or tell the story of a purpose. You have to name them primary action buttons. Secondary action buttons. Drop-down buttons are maybe you can also call them checkout buttons or checkout page button, something like that. That is going to show the purpose of that button. So let me show you the example. Let me show you again the same page over here, Airbnb you can see over here, if you look at this pinkish red button, it is actually the primary action button over here. So it is the primary button over here on this page. If you look at all other buttons, they, they don't show that much of a bop. Bop means that they are not very visible, or they are a bit subdued, or they have been limited in their style. And you can say saturation. You can see this is a gray button, white and gray again over here. If we look over here, this is again a grayish white button. It doesn't have any colors. Then if we go down contact host this again. Button that is dull and gray mixed with, almost mixed with the background. But you can see over here, if we let me bring it down, you can see the check availability is still at the top and it shows you that it is a primary action, but you have to name them that this is a primary action button. And you can see over here this style is actually our secondary action button or tertiary action button. So this is, this is the hierarchy and purpose built into your design system. I hope you have enjoyed this lesson and learned something new. I will meet you soon in the next lesson. Till then, take care and bye bye. 8. How Hierarchy of Components works in Design Systems: In this video, I'm going to talk about different levels or hierarchy of components. Hierarchy doesn't mean that which components are going to be more important. It is about what are different classes of components from basic to advanced. The first one is actually your basic or stationary components that are going to be your buttons forms your input fields that are actually, you're also your icons. These are going to be at the very basic or base level. Then we have composite components. These are the components that are going to be a little bit bigger components, but they are going to be made by combining two or three components. For example, we have a header on navigation that is going to combine different links and maybe a button and a logo. This is a composite component. Then we have containers. Containers are actually, you're for example, a section, for example, I have a container of news cards. So it will be a container, it will have 1234 different news. I'm going to show you the examples. Don't, don't worry right now. So then we have layout. The last is layout. We have to show the developers are others that how you are going to lay out all these containers into a page. This is going to be the last part. Make sure whenever you create a component, you have to tell its purpose, what it is solving, and what was the reason behind it. You have document that also. Let me show you some of the examples. And here we have the New York Times. So you can see at the top we have this subscribe now. This is actually a composite, a component or it is a big component and it has a button, text and logos over here. If we go down, you can see over here, this is the top one. This is again a composite component. Or you can see our container, maybe a container because it is a header and it has some space. A lot of styling are like this navigation, this is actually navigation is composite component. And then we have two buttons. Then we have this temperature, date and everything over here. So it is actually component, composite component, and it is also part of layout container. It is actually a container. So this is actually our header or masthead. Then you can see on the left we have very big featured news that is actually very specific component that is specific to this brand or this New York Times. And you can see this dye fears the styling. This small text, great x. It already shows that this is a news from New York Times. On the right you can see again we have a feature news on the right, and it is a totally different component. On the right we have a separate container that is containing all the different news. On the left we have a container that is actually like 60 or 60%, 70 percent of the width and just containing different news in the top to bottom layout. Actually, this is going to help build the layout. The layout will be that we have a feature name is over here. Then we have a small component, small news live, something over here. Then we have to news or bad news headings. Then we have again a featured small feature news over here. I think it is again, the feature same styling, you can see almost the same. Just the text. Dex treatment of the heading is different, everything is the same. You can see this is actually the layout. You have to tell them that feature. Then we have to show some text, text news, then again a featured. Then you can see again we have some graphics and graphic element. This whole composite component is actually a container. This is actually the updates. You can call them update container updates off all the the coronavirus news. And then we again have another news that is again featured. This is just this left side. Now if you look at the right side, the layout is totally different. We have this first component that is our feature news on the right. Then we have again text so you can see the similarities in the repetitiveness of the same bedroom. So again, we have two texts news, then again we have. One opinion use. Okay, so one more thing is on the right, you can see the typeface used is very different. It is very tall. And again, we have something featured with an image. Again, a few more news or maybe articles. Then again, another one which is again with small video. Again to the feature, the feature or something like that. And then we have this can also type of thing. This is actually, this is you are going to tell them in the layout part of your design system. This is a bit advanced. If you have a very big product of very major products, you have to show them that this is how you are going to lay out your landing page or the first page. Then if you go to this business, it is going to have a different layout. You can see the layout of the top section has been changed. You can see this has been squished up. Very small. Top navigation. Then we have this new component business deck, where we have different categories of business. And you can see the layout has been changed, totally changed. You can see now we have three columns on this page. So we have this feature news as a bit smaller feature news. Then we have on the right side, we again have two different news that are related that I have a small image and styling is different. A little bit of arrangement in different, but the basic component, the textile, that text treatment is almost the same. Then we have this container over here. This is again a container of feature news or things like that. It was also present on the biggest wage. Let me show you if we drag down. Let's see here we have the same component. This is a common composite component or containers. You can see it contains four guards that are basically news. It is going to repeat at the bottom again, if I go down, you can see again it has been repeated over here. And again, put it over here. And again. The same has been repeated over here, four areas. And that is all. So this is how you are going to create your components. This, this button is actually our basic component, the basic starting component. This again this link, you can see this links treatment. This is again a basic component. And this whole navigation is a composite component. This whole, this section is a container. It has a lot of components arranged into layout to create this matched hetero header. I hope you have industrial all these different layout container, basic components or composite component thing. Let's move on to the next lesson and then something new. Till then, take care. Bye bye. 9. Tokens, Roles Values in Design System: If you want to start building a design system, you have to understand what are tokens and their values and their roles. So this is the lesson about them. This is the most important lesson, I think in this whole course or in this whole class. So let's get started and see what are those tokens and their values. Okay, So just to understand that token is actually a code, actually it is extracted from what developers use to do. They used to assign a variable to a value. This is actually the same concept that has been imported into the design system. What we do is, for example, we have a token of texts. So text token can be applied the rule of primary texts, it could be a button text, it could be anything. So each rule or each token role could be different. So there would be five or six or maybe 20 tokens in your design design system. And there would be like two or three different roles for each token. For example, we can give the rule of primary texts to the text. Similarly, the value is actually the variable or static. I'm sorry, the value will be variable, name will be static, which is actually the same concept we use in programming. If you are from a programming background, you already know that, that we have a static name of a variable and then the value actually change. Design tokens. You can see we have table, background, page, background, lighting value, dark theme values. Surface is actually what is on the top of that background. Component BG or you can say it is a card BD, you can name it according to what your developers or your team uses. Maybe your team uses cards, use card BG for background, light theme, dark team, texts value, text token is going to have primary text. And then we have light, the light and dark team. Similarly, we have muted texts. Interactive action is actually the button you can also use. Rather than having token off interactive action, you can use button instead. That is not a, not a very, you can say, this all depends on what your team is actually using. Or you can also use buttons and links separately. That is up to you, interactive on texts or button on text, that is up to you. So you can see we have almost understood the concept of tokens and their roles. Now let's talk about how we are going to name them. There is a very simple method that we have to use category first, then type, what is the type of that component or token, then item and then its state. For example, we have category of button. And the type would be what type of button it is. It's a call to action button or muted button or whatever it is, a disabled button. So we have button dash or small dash CTAs, CTAs for Call to Action button. Then we have dash, what is the item? It is actually a background. Then we have item is actually state. So here we don't have state because it is a color. So color is actually going to have just roll off background color. We're going to name it button CTA, background color. This is going to be our name. Similarly, you can use a lot of different other names. For example, if you are just naming a section or a button or a text, or if there is a button, it will have a state of active or disabled or pressed, something like that. So state will be at the end. Here is some example of the code that will be used by developers. Just I paste it over here so you can understand what it will be. You can see here we have a token of background color, then we have another value or rule applied to it. Background color light. Background color light is actually a light theme. And then we have border, border, hairline, border radius. It could be regular border-radius of roll or something like that. Maybe over radius something maybe we have three or two different roles we can apply over here. So it is very easy to change a theme to something. Similarly, you can see over here Bill reverse is actually background color, dark border color is actually background color, dark color, text color light. So this is reversed scheme. This is really, really easy if you know how to appoint tokens and they are variables and their values. Here is actually the visual representation of what we were talking about. This is the background. Then we have surface on the top. Then we have text which is our you can see the text is our heading or paragraph heading. Then we have texts muted, which is a bit of a dull text. It is not very sharp or regular text, it is a delta x. Then we have interactive action, which is a button, which is button background. And then we have interactive own text on text means that it is the button on the text. You can use button instead if you want to. This is another thing. On the right you can see we have customized your shipping method. It is reverse theme of the same thing so we can change the values as we like. This is the simple most concept of token roles and values. How we can use them to change a whole theme into something else easily. And we can also shorten our labor of keeping a lot of variables. Tokens are actually the solution to all this design mess. So we have like 15 or 20 different colors to use. Different surfaces, different shadows, different. You can see spacing. All you can do is just assign them a token and change the rules. That is all. I hope you have enjoyed this lesson. We're going to move to another lesson to learn something new. Let's move on to the next lesson. 10. Typography for you Design System: In this video, I'm going to simplify your design system where we talk about typography. So where will our topography falls in design system and how many sizes we will use? How will, we will name those diaphysis and their sizes? So let's get started. Now the first step will be we have to select and start with a base size. So you have to select your text size, which is your base size. For example, 16 pixels, 18 pixels, 19 pixels, that depends on the TI phase. And if you want to learn more about it, you can take my typography class. Once you have decided your base size, which is readable, easily legible, unreadable, you are going to generate a type typography scale. On the next, we are going to decide our line-height. So if we want our design to be very area or we have, we want to have a modern layout. It is going to be have more space between the line-height. If you want a dance design where we have, for example, a news or a blog where we want to show it like we have a newspaper or maybe some other website that uses a very dense layout, darker layout, we have to move them closer. Line height will be less. Next question is, how we have to name our type scale or different types sizes. What I actually do is I actually use for maximum four or five different categories. Like we have a mega heading that is going to be present on our hero image area at the top, very top, when you land on a website landing page. Then we have at these three headings, headings 123, biggest heading, second heading, and third heading. Then we have normal texts, which is paragraph that is our base size. Then we have captions or small text or metadata where we have our, you can say, if you read red, you have read any blog posts you have seen that it is written by author name and the date that is actually metadata. We actually use very small size for metadata, or small typhus size for metadata or captions. That is going to be our small category. Then we have, maybe we might have a different size for our buttons, whatever the text is going to be on the buttons, maybe I'm using 18 pixels for my text, paragraph text, and I might be using 19 pixels on a button. That is how I actually divide the size. There are different methods, people different. Maybe they might, your company might use size 123456 or size extra small, small, medium, large, mega, something like that. It is up to you how you name your type scale. Then you can also name them or categorize them on the basis of their purpose. For example, we have story titles, headings, body copy page section headings, metadata, Caption button text which we actually have discussed that how I actually name them. These are different categories. This is how you are going to name the typography system. We're going to do all that in our last section where we're going to actually design our first design system. So stay tuned, keep with me and we'll see a lot in the next few lessons. So till then, take care. Bye-bye, will meet you in the next lesson. Let's go ahead. 11. Define Spacing System: The next step in design system is that we have to create a spacing system. You can see this is actually vertical and horizontal spacing, both of them in most of a website or most designs where we are not designing a design system for and very, very big app. We might normally need the vertical spacing. How you are going to start your spacing first is that you have to select your base number, just like your typography. You have to select your base number like four pixel grid or eight pixel for pixel is a bit more flexible. It can have sizes like 12 pixels if you want to have a gap between very small elements on your, maybe you are designing a table full of data information. You might need four pixels. And if you are creating a website, I think eight pixels is more than enough. Okay, so the next one is, once you have selected your base. Besides, you have to select your scale, you have to grow your scale, for example, for, then we will be jumping to 16 or maybe eight, or maybe up to whatever the size you go. We will have like seven or eight different steps. This is just, it is just like building a ladder. So you specify one step and then you go to up. And like we will have eight step ladder. The next is less or more contrast with spacing. It's the same dance or aerial design if you want a very redesign, modern design where we have a lot of empty space, then we are going to have more gap between our spacing system. For example. First is maybe our first start would be 16 pixels, then the 32, then maybe 64. More than that, we will have more bigger steps of spacing. Now, let's come to how we are going to name them. There are two ways. First is that you have to name them with their tie. For example, if it's vertical spacing, the horizontal spacing whatever it is. And you can also do that, or you can mix the whole spacing into one system, one letter. And you can say that we have space 01234, up to ten or 15, whatever you want to use, but I think up to ten would be more than enough. Second part is that, for example, if you are designing for mobile to your design, spaces are going to change or shift to smaller spaces when you are going to shift to mobile app or mobile size. For example, if you have a website and you are designing a responsive or smaller version on how it would be viewed on a mobile phone. The sizes will shift. You can also specify that space 0 is like 16 pixels on desktop. Space 0 is eight pixels on a mobile. So you can generate this system into two different branches. So it will retrieve, it would mean the same that where we have used space 0, it would shift to it on a mobile device. So this is how you can achieve a harmony in your design. And you can have a spacing system that is going to and went up your whole mobile apps, your iPads, and your desktop views. If there is some app or some website that spans from desktop to tablet to mobile, you can have a spacing system where the whole spacing system is going to have three branches for desktop, tablet, and mobile. This is how you are going to have your spacing system and this is how you are going to name it space 01234. I normally what I normally do is I actually don't have much separate spaces. What I actually do is it would be easier if the system is smaller. So if you have a very large system, you are like two or three teams of development and developers, or maybe four or five different designers, then this is not going to work. What I actually do is in my freelance work, I actually name or tag the space in it. So first, category spacing. Second is vertical, how the item with a spurt vertical or horizontal. Then I actually write the space. You can use maybe space vertical one. And that is all. But I normally try to mention that it is 20 pixels, 32 phases, 40 pixels, 64 pixels, 44 pixels, that is up to you. So there are these, These are two methods. So I would suggest that space 01234 is a bit better approach because it can develop both your desktop designs and your mobile app designs as well. So it is going to develop or apply to both of them and will reduce the confusion. That is all about spacing system. I hope you have learned something new. Let's move on to the new lesson and see some more things into design systems. 12. Color System and how to name it properly: In this video, we are going to study another particle of design system, which is color, color system. You have to define your color system, how your colors will work on different background, different themes, darker background, lighter backgrounds. Let's get started and see what we have in our color systems. So the first step is always experiment in colors you cannot be right. You have to first test your colors on different backgrounds. For example, if you have a darker background or lighter background, you have to test the colors which have more accessible, accessible colors, which have more. You can say darkness or lightness. I will show you Figma plugins that actually do that automatically. So we don't need to, You don't need to worry about that. Second step is that you have to have at least four, basically two colors. One will be your primary or accent color, where we will actions, and secondary colors for backgrounds and other stuff. And then we will have success or warning colors. Actually, we only need two colors that are basically for backgrounds and your accent color. Or maybe you can introduce a third one. Success warning colors will be green, blue, or maybe red or some variant of those colors. Then we will have another category which is BG, colors, that is three different colors for backgrounds, we have dark backgrounds, we have light background. So we might have neutral colors, which might be some tone of gray, grayish blue, or maybe some tone of greenish yellow, or maybe some creamy kind of yellowish color that is a bit dull. So these could be your neutral colors that can also come in handy when you try to create a different team inside your design. I will show you my design how all these colors I have created. Now, naming those colors. So first thing is that you have to group your colors into different categories. For example, action colors will be different. Your links, elections are actually closer to each other. They are a separate group. Then we have text colors. You need to know that we have muted text, we have headings, we have subtitles, we have title. So all these are going to have different colors. Similarly, we might have text for input, text inside our input, where we have, we have to type some text. So there would be a lot of different texts colors. Then we will have muted colors. We already have discussed de-emphasize emphasis where we have bold text. Maybe we want to change the color of the bold text. Then we will have backgrounds. Backgrounds will be different. Action backgrounds, emphasis, de-emphasize. Links are also very close to actions. Maybe lists, list, item, bullet points. They are also, I think in the emphasis category. Text texts will have, I think three or four maximum categories. One is disabled text, your normal text, paragraph texts, you are headings, and maybe some suggestive or caption texts that is on three or four different types of texts, colors. Then we will also going to define color rules. For example, on black primary, what will be the primary color on a darker background? On black secondary, what will be the secondary color on the dark background? We are going to have all those different different rules. I'm on black accent, which is going to be our tags are supplementary texts on black hover on deck borders. If there is something that is going to change on a black maybe border color, hover color or maybe accent color. We are going to define those roles. Let me show you the color system of actually my favorite closed system, Google Material Design. They have very, very, you can say, solid kind of color system. And you can see here I have a simple color scheme and on the right you can see each source 1234, different areas. Then we have primary, fff, which is white color. On Secondary is our this dark black color. Then we have on background, then we have on surface, surface actually discard on error, we have a white color. So you can see if we go to this five over here, this is also five, this is also five. If we correlate these, you can see this red error is actually having a white color on top of it. On error means on adult, on NLP background, we are going to use white color. Similarly on background, we are going to use dark black. Background. Background is actually, let me show you here. This is our background. Background is white, surface is also white, error is red. Similarly, we have primary, primary variants, secondary, secondary variants. So two colors to primary to secondary. And you can see over here, this purple color is actually used. Primary color is used. The analytics, analytics over here. And this green secondary color is actually our excellent color where it has, has been used for the action. This is the, you can say methodology. You can get ideas from, you can use in your own design system. That is all about color system in design systems. Let's move on to the next lesson and I will meet you in another lesson till then, take care buh-bye. 13. Grid System and Layout: Now the next part of your design system is actually your gradient layout. Grid is different and layout are different. Grid is actually how your whole system is going to use the grid. Different columns, different width of different spacing between column that is cutters. And your layout is actually how different your molecules or different. You can see areas of your design you are designing are going to come together. These are two different things. You might have the same grid system, but you can have a totally different layout. You can generate three or four different layouts. I'm going to show you one example that will be more easier for you to grasp the idea. First thing is that you have to select a framework bootstrap or any custom framework your coders or developers are using, try to communicate with them. Start from there. Then we are going to decide on the number of columns on larger desktop size. It'd be 12. Medium sizes might use 12 or eight, and smaller devices might use two or four columns. So you have to define your grid, that 1284 or maybe two, then how much area should be your design, okay, So this also depends on your grades. So if your grids have a lot of gap between your two columns like that, it will have more space. It will look more special and modern. And if they have gap which is very less like this, it will look a bit more dense. So this is how you are going to use grid to make your design area or change the theme of your design area versus dense. Now layout will help that how the design is going to be cohesive. How it actually, you can say, reveal itself in the presence of a user. I'm going to show you some designs over here. Here you can see we have a very simple wireframe. And it shows that we have top section which we have over here. So if we define this, this is actually our top section. Then we have section where we have two bigger information chunks. And then we have our next section. We have our this tab bar. Then again we have some records for different records. Then we have this layout. So you can see this can be arranged in many different ways. But once you specify that this is how we are going to lay out our design, it is going to be like that. You are going to define your layout on a mobile. And for example, this one, this is actually dashboard. And you can see Dashboard half specific regions for specific things. For example, your chart, pie chart is going to be on the right side and the second, in the second row. On the left, you can see we have very bigger visual presentation of different countries and things like that. On top, top right, we have a section where we have two different errors, messages or something like that. So this is how you are going to define the layout that will be a hair. You will show this thing, this thing, this thing and this thing. For example, we have news websites, time news, and they have very specific layouts for each of their different pages or different categories. This is how you are going to use different layouts. You are going to specify different layouts that this is how you will follow create your design or create, or you are going to bind different design items are areas with each other. So that is all about grid layout in your design system. I hope you have understood the idea behind it. I don't want to go and show you a hundreds of different examples. We will do this in the next lesson, in the next section. I think that is all. I think you have understood the idea and we will be moving on to the next lesson now. Till then, take care. Bye bye. 14. Theming in your Design System: Now let's talk about teaming in your design system. How much teaming should be allowed. You going to give you a developers that they can change your type with tiles or they can totally change the typeface. For example, if you have used Roboto and they want to use Open Sans, would you allow that? So these are the questions whether you are going to just have black or dark to white theme where we have light and dark themes and you just want them to change the colors. For example, from darker background to a lighter background, light theme or dark theme. Or maybe you want to use totally different theme, that is autumn theme or spring team. That is up to you. Different designs or different projects. They have different requirements. So in this video, we are going to discuss how much theming should be allowed and what are different things you should be taking care of when you are going to give them a lot of design independency. The first thing is that dark versus light. This is actually just the change of current. So this is the level where most of the designs are going to be. I think 70 to 80% are going to be over here. We just need two different themes. Everything else will be same. Spacing will be same line height will be same. Text, style or Fort face or typeface is actually going to be same. Now the next is, for example, if you have a system where it is going to be used on Windows, MacOS, android, iOS, on different systems, there are some specification of some things or system settings that you cannot change. You have to adopt to that. So to do that or to do, to create this whole theme, you might have to change your original design a little bit. You have to keep that in mind. Sometimes your design customization might not work on Windows, so you have to change that. Now the next level is content structure or style. Whether you are just going to change the styling of your colors or your diaphysis or do you want to change the structure? For example, the title is above, or maybe you, in the next design, it is at the bottom of the image. That is a very big change. Make sure you have to be very specific. I think you should not go for too much change. Maybe users or users are mostly familiar with the similar design patterns. So don't try to switch a lot between structure and content. Content could be changed. For example, if we have maybe an email or we have an Instagram templates. So maybe they are going to follow the same tokens, design tokens or same design structure, but the styling will be totally different. That is, that can happen. Here is an example on the left you can see we have two different color colors where we have two different themes, light and dark, where actually the typeface is actually change. It is both built with material design guidelines, but you can see they are not using material design. Specific diaphysis, for example, Roboto or something like that. They are using their own style. This is one thing on the right. You can see we have again, the same thing going on over here, but standardized forms, dark and light teams. Now let's see some more variations over here. You can see here we have color variations, muscle versus tech spacing and coloration. Spacing is actually going to change. So if you try to change your typeface, for example, you try to use a sans-serif. You were using a sans-serif and you started to switch between a serif typeface. Line heights are going to change. Typhus is a totally different line heights, their letter sizes are totally different. So you have to take care that your whole spacing system is going to be adjusted. Once you change your typeface, the whole spacing system, your line-height, they should be adjusted. That is what you have to consider in your theming. Because if you give your developers or your design team a lot of independence that they can use and change anything that is going to be a mess and you have to be worried about it. That is all about theming and what should be taming in your design system. I will meet you saw in the lesson and the next section we're going to start designing a basic design system. And we'll use it to create an app or something similar. Till then take care, Bye-bye. 15. Design Principles and Purpose Statement: Before we start our design system, we have to make our purpose statement. And for that, we have created this design principles and purpose statement document. And I have created another page, separate page, and this is very simple. I'm going to gloss through them. And you can see here we have the basic logo on black and white. And then we have our design principles. Practical rather than theory. Show rather than tell. It means that we should be more practical and we have to show everything in our design rather than telling a lot of story. Showing means that videos is actually the part of this design system which has learned in learning is part of videos. Show them rather than telling them the whole thing. Everywhere accessible means on every device, iOS and Android, it will be accessible. You have to create the design so it is adoptable on both of them. Focus on learning experience. You have to focus on the learning. So it means that the video players that everything controls will be more accessible, more easy to use, more resistive tap and things like that. Then we have this purpose statements. So you can see we have gold, why benefit users? We have seen all that, but I've created this for this particular app. Goal is to save time and quickly build design, add new screens features drove our app. If we don't generate design rapidly, why? Every new feature will be delivered two weeks minimum. So we were going to face delays benefit for solving repetitive similar problems. So product team can focus on really shows users who will be the users of this purpose. This design system will be used internally within our team. This is, we already have discussed this in our purpose statement lecture. This is what you should be creating for the first time, and this is going to be your assignment. This is going to be your assignment two. That is all. Before you move into your design system, try to create some design principles that are going to be deciding factor for your whole team and design. Then we will have a purpose statement that why we are building this design system. So stay with me. We're going to build a design system. Will meet you in another lesson. Till then, take care, Bye bye. 16. Figma Auto Layout and Variants 01: If you want to build your design system in Figma, there are two concepts that you really need to master, and one of them is auto-layout and second is variant. In this video, I'm going to share with you some of the techniques you can use in auto-layout and variance, using variance to create your components in Figma. Let's get started and see what we can do with these. If you look at this screen, you can see we have this navigation and if we tried to squeeze it, it is easily expandable that you can see everything is staying over here. Similarly, we have these two buttons. They are actually component and variance, but before that they were actually auto-layout. They are created using auto layout. Similarly, you can see over here, here is an input with label. And you can see this is also created with auto-layout. So if I try to change it, for example, my name over here, you can see it is expanding. Okay? If you don't want to go and wanted to expand, you have to go into this inner auto-layout arrangement. And we're going to set this text to fill a container. You can see now it is not expanding. So we have fixed it. Okay, so here is a text input within the action or button over here. One more thing is the arrangement over here. You can see this is in auto-layout and if this label is at the bottom, so if I try to move it at the top, you can see it is going to be at the bottom. This is actually reversed in Figma. The bottom one will be at the top and the top one will be at the end of this arrangement. I'm going to move it back over here. Let's get started and see how we can build all these. So first we're going to build this, this text input box with a label. For that. We're going to use just a text. So let's move it a little bit on side. Let's try to expand the frame bit more. Move it up. Zoom in. Here we have the canvas and I'm going to press T for text. And let's use your name. Let us use regular bit of grayish color over here. We're going to add auto-layout to this one, Shift a. You can see we have our auto-layout added. Let's call it text. Let's duplicate it pressing by holding your alt or option key and dragging it like this. So I'm going to drag it to like, let's say 60 pixels apart. I'm going to name it now action. Or maybe you can use upload. For example, if you are creating an upload button, I'm going to use different texts color because we are going to have link. And let's stick both of these. Again. This is not actually text. Let's call it. Select both of them and again, press Shift it. Now you can see we have this border around them and another frame, Let's call it input. If I expand, expand this input and you can see we have action and text. So you can see action is at the top, which is actually on the right, and text is on the left, which is at the bottom right. Now, if we click on Input, you can see over here on the right we have 60 pixels separation. So this is, this is actually the spacing between items inside and auto-layout. Input has actually two items inside it. And this auto layout, you can see it is in the horizontal direction. So two items horizontally, they are 60 pixels apart. Just get the concept. And if you want to add padding around them, for example, this whole section, we want to add padding around this input box. We can use something over here like ten pixels. You can see now it added 101010 on all sides. Let's use eight over here. I will show you why I used it at the end. And this is actually the arrangement. Right now. It doesn't matter because we have just two elements and they are aligned properly already. Let's use in the middle. Next is we are going to, you can see I have selected this input rather than the inner. In the items. So this whole input is selected. Now I'm going to put a fill on it. And white is great. Let's add eight pixels roundness over here. You can see our basic item is ready, input is ready. But the problem is once I start typing, it is actually expanding. Fix that we're going to use click on text rather than than hot contents. We are going to use filled container. I think it is going to fix this. Another way of fixing this is few slipped on. Select this input. You can see we have packed and space between options. If you try to use space between, it is going to fix this option. It will always be this upload is always be on the right side is going to space everything using this spacing over here, this padding. It is going because we have two items. One is going to be on the right and one is going to be on the left. I think that is. All right. Now let's see. If I try to change. Let's select input and try to expand it. So you can see now upload is moving with the right. If I try to expand it, it is going to move like this. We can also add a label over here. So let's select text. Let's create a label. Again, we're going to put an auto layout on the label to shift a. And we will treat it a little bit and add it to the input. Now this label has been added and it is also a frame, so let's call it label. You can see it has a padding of ten over here. We're going to use it. And let's align it with the label over here. The text inside of our input. Again, we are going to select all of this hint. We're going to use shift a to create the frame. This frame will be input plus label. This is how I actually created this. Now you can see if you look at this one, the direction of the auto layout is vertical because we have no two items inside this. Let me show you. One is input and one is labeled. And you can see labeled is at the bottom, right now it is on the top. Here we have it. Let's use 0 because we want the label to be very close. This label has actually eight pixel padding, so it is eight pixels apart from the bottom input text area. This is how you create and use this technique of auto-layout. 17. Figma Auto Layouts and Variants 02: And next thing would be that if you have created this, we are going to create, create a component. So let's create a component, Control or Command Option K or Control Alt K. Let's click this and you can see now we have this. We are going to add a brilliant. So let's the property to be state. Let's keep it simple. Here is our default state, and this one will be, let's call it active state. Here we will, we can change the text to be more black and change this one to name. Make it a little bit more lighter. Just to have the difference between these two states. If you vote, you can also add a stroke over here. Let's make it like this. Okay, so here we have another variant, this is active variant. And let's add another variant. Click over here, and add another variant and new variant. And this will be actually stayed, three would be disabled. So let's make this white color to greenish color. Use this gray. I think this way would work. This Upload would be now a grayish color. Maybe like this. Label would be sin. Now you can see we have created three variants of this, input plus label. You can do the same with any component, any button you have. For example, let's create a button over here. We will again use auto-layout. Let's create a text first. Let's just shift a to add auto-layout. I'm going to use a padding of, um, that's use a padding of 12. Top right, 16161612 at the bottom. Like this. Use this in the middle. Everything will be same. Huc contents. Yes. We're going to add a fellow warrior fill color. Let's change the color to something like this. The text color will be white. Here we have the basic button with our auto-layout. Let's add eight pixels over here for the roundness. For me, I think on the right and the left, I want more space. I would add 2020 over here. You can see this is now the simple button with auto layout. You can create variance. Now if we want to add, let's call this button. If you want to add an icon over here, that is another story. So let's use Control or Command forward slash. I have this plug-in installed lucid icons, and I am going to use, let's use some micron. Let's use this icon over here. This is where the icon over here. Let's bring it inside the frame. Drag it over here. Here's the overburden. Let's try to drag this inside the button. Now you can see once I dragged it, it is at the end of the button because it is actually what do you call it, the bottom and the top. So whatever is at the top, it would be at the end of the button. Because our layout is actually horizontal direction. This is our gamepad. Let's try to use a white color over here. So here is a register button with an icon. Now, if you want to increase the space between these two items, click on the button, and this is the space between. So if I try increasing it, Let's use 40 over here. I think 36 would be good enough. Now you can see it is looking great. What is the padding on the right? Let's use 1818. Here. This looks like better now. Okay, so we have this button. Now let's create a component out of it. And we're going to select our component. Now. It has been turned into a component within auto-layout. Let's create a variant. Now here's the second variant. And for the property we are going to again use state right now. Make it simple. This is distance between the two variants. So if you want to decrease it, you can decrease it. But I think 24 would be great. 20 will be. To the second video. Let's change the colors of the second variance. Let's make it a bit more brighter when you are going to hover on it. And that is it, I think right now I'm just going to change the color right now. Here we have the default. This is the second variant state would be hover or active. Let's call it active state. So this is default, this is active. Let's use a capital case over here. Here is another radiant button with variance are using auto layout. This is, you can say the essence of your design system. If you understand these two concepts, you can do anything. You can see this is a button with an icon. If you want to move the icon at the start, let's move it over here. Let's move it over here. Now, it is at the start or on the left side. Make it to bring it back. Now if you want to change the distance between the icon, Let's make the, for example, if you wanted it like this, and I want it like this, 30. You can see now it is shrinked in this direction. 1818. Here is a simple video about auto-layout, and this is the power of Figma. These are the two things you are going to use the most to create different variants and everything. If I tried to change the text over here, change the text now you can see it is auto expanding over here. If you want a fixed one, I think the V is that you have to use fixed. I think. I think you have to do the setting in the start. Let's see if I can have a fixed size button. Okay, So this is all about this. Hug the contents and fixed width items. Mostly we are going to use the content contents. That is all. So this is my simple video about sigma variance and auto layout. I hope you have understood and learn something new. We will use this technique a lot in our next lessons when we are going to build our layout, topography, and everything. So till then, take care. Bye-bye. We will meet in another lesson. 18. Auto layout Resizing done right: This is a very basic concept you have to understand, which is what is hot contents and full container and fixed width. This is difference between the resizing of an auto layout, which is very confusing for me. It took a lot of time for me to understand this. I'm going to share with you two ways. One is that you want the whole layout to auto expand. Second is you want the fixed with maybe input text or something like that using Auto Layout. We're going to use this example. You can see over here how content is actually your parent frame or parent auto-layout or frame that is going to expand according to its child. So if the children are going to expand, it is going to expand with it. Filled container is actually for used for the child. So the child object actually fills the container. Whatever space is left it is going to fill that. These are a little bit difficult concepts. How content is also going to work on the parent? The child objects are going to parent is going to expand with a child objects. This is a bit difficult. So just a simple tip. If you want an auto expanding button with the text or labels or you can say icons. You have to use hot contents on everything. For example, here you can see this is actually our input in an input and I have set it's to hug content. So it is going to expand by hugging its content if I tried to change its content. So let's try to change this text over here so you can see it is expanding. This is the parent is expanding. Whenever I'm trying to change its child text, child object is changing its size and parent is expanding. If we go down to text and inner child children, you can see they are also using Hulk contents and link is also using hug contents. This is very, very important. You have to use hot contents if you are creating a button or input text where you have to expand it with the text. You have to use hug contents. Now in the case of this over here, this text over here, which is actually our labeled area. I'm not going to use hot contents, I'm going to use fixed width. Fixed width. Try to change this. Now. You can see now I have switched to a fixed width. So this text is going to affect and my whole label or this whole input is going to stay. The same. Action is going to be on the right. So another way is let me show you one other way. You can see if you click on this input over here, this is actually, it has two elements and it's auto layout is set to spacing of 40 pixels apart eight pixels is the padding and direction is horizontal. If I try to use rather than bagged, if I tried to use space between, it is actually going to have that effect, which is if I try to expand it like this. So you can see it is moving with this one like this. And now if I try to change it, it is again going to be the same. Now, one more setting is that I'm going to, rather than using fixed width, I'm going to use fill container. So now you can see it took this space over here. Between this and this, we have an auto Spacing. So let's try to expand it. So you can see now, now you can see this fill effect, filled container has taken effect it actually fill the container whenever I expanded it. So this is our container. And if I try to expand or squeeze it, it is going to change the size of the text field. You can see now, and let's try to make it a little bigger. So now you can see this is set to full container. It is actually filling the container up to over here. I'm not sure what is this distance between them? It is again 40. The distance again 40, which we set initially the start or dried now it is set to OK, So it is set to 40. It is keeping that distance. So let's try to use space between over here and try to expand it. And C. Now, what is happening? Now you can see it is filling the container. And it is filling the whole space because we have set it to have set it to auto. Space between. Space between is actually automatically adjusting the space between these two items. And you can see it is spacing it like this and filling the whole container. So normally I would not use space between, but I would use bat. Now it is messing up my whole section over here. So let's try to squeeze it, set to pack. The problem is this one. Let's squeeze it like this. For the text, we're going to use fixed width. This is going to have contents and this is fixed width. So this is how you are actually going to use fill container and hot content and fixed-width using your auto layout. If you have any questions, please ask me. I will always be here to answer these questions. This is the most confusing concept, which one you have to use on child or the parent. So make sure if you have an auto expanding button, everything will be set to hug contents and the parent will be set to the spacing between them. For example, this layout spacing, I'm going to set it to 40 or 30 or 20, whatever the spacing I want between the items and this is the padding. So that is all. I hope you have understood this concept of contents filled container, auto-layout, spacing, resizing. Tell them we will meet her in the lesson. Take care. Bye-bye. 19. Responsive Navbar in Figma using Auto Layouts: Welcome to another Figma tutorial where we are going to create a responsive navbar using Figma and we will be using auto-layout. Let's get started. I'm going to show you how you can use auto-layout to create responsive navigation bar in Figma. Now let's get started and create this responsive navbar. Press T to create a text. And we're going to type home. Let's replicate this by holding Alt key. And let's use Command D to have another copy. And we're going to name it about, Let's call this one contact. And let's select all of these and we're going to distribute horizontal spacing between them just to make sure the spacing is accurate. So right now it's 19, we have to increase it. Let's use 46467. Between these. Now we're going to select all of them and we're going to add auto-layout shift k. First we created three texts layers, simple texts layers, and we have created a frame around them. Here we have the frame just to control these items. Right now the frame direction is in the horizontal direction. So if we try to add, you can see if we open up this frame and try to add something new command D. So you can see it is going to add in the horizontal direction, so this is the right direction. Okay, so here we have, let's call it links. Let's hide this navbar right now, the bottom button. Okay, so here we have this one. And next step is that we are going to create our buttons. So again, we are going to prestige. This is going to be our button. Let's call it login. And we're going to add an auto layout to this one shift, a auto-layout added. So we're going to add a fill color of this button to this button. Let's use this green or maybe this blue. And the text color will be white. So here we have the button ready, and let's add some padding over here of eight. And from here we are going to use different padding on all sides. For a button, we are going to use eight at the top, 16 over here, 16 on the right, and eight at the bottom. This is going to be our pattern. Let's call it. Let's call it TTN. Keep it Gideon. And we're going to replicate it by holding the Alt key or Option key. And we're going to separate them 16 pixels. So you can see press, hold Alt or Option key to see the spacing. And we're going to call it sign up. Now you can see it is expanding on its own because we have set the resizing to hug contents. So whenever the contents are going to expand the overall container, it is going to hug the content by keeping the space we have specified. You can see if we click on the button, we have ten spacing. So Dan is the spacing between two items. This is the margins or paddings we have applied. It is going to always keep these. Let's click this one and we're going to, let's use some other color, maybe orange for sign-up. Let's use orange. We have two buttons now. And this is also, we have actually three auto-layout. One is links to our buttons, one button, second button. We're going to select all of them. Again, we're going to press Shift a. And you can see we have this auto layout frame, so this is going to be our NANDA are. And before that I think we need to have another frame for the buttons. This is actually z. Let's align these buttons first, shift a to have an auto layout for these buttons and we're going to call them, but because we have to arrange the layout of both buttons too. If we want to control the spacing between two buttons now we can do that over here. Let's use 12 over here right now. And so now we have buttons, both buttons into another layer frame. Now, what we're going to do is we're going to select all of these. You can see on the left, this is very important. We have buttons. Then again, inside the buttons we have two different button auto layout. And then in the links we have three texts layers. Now we're going to select all of them. Shift a. And you can see we have this navbar, almost nav bar that is completed. Now you can see our text is moving up. So whenever we create something like this, sometimes it happens that our text moves up. You can see this is the spacing between items. So if I try to reduce it, you can see it is going to get closer to the text we have over here. To fix that. You can see I have selected this navbar. This is very important. And I am going to go in the middle like this. This is the alignment options. So if I use this, you can see the text is aligned at the top. Bottom. And you can see it says at the bottom, and we're going to select this. It is going to be at the left and the middle. Now we are going to add a fill color to the snack bar, which is going to be white. Let's use white. And from here we're going to use eight pixels radius. And over here we're going to use some padding at the top. Let's use 16. At the bottom. Let's use 16. Let's add 24 at the right and 24 at the left. Now you can see we have our navbar ready. We have applied all the paddings around it by using this panel over here. Now if you can see if we tried to expand it, it is not expanding, the content is not expanding, it is not responsive. Because you can see over here that this spacing is set to custom. So right now we have to fix that. So to do that, we have to go over here. And we are going to shift to, let's go back wherever our original settings and write down. You can see I have selected navbar and we're going to go to space between what it is doing is it, you can see now this space between items is actually set to auto, so it is automatically adjusting the space whenever I try to drag or make the navbar larger or smaller. This is the trick behind this responsiveness. So you can see now if I try to drag something like this, you can see now it is fully responsive. So this is the last step. Now you can see a responsive navbar is almost complete. Now if we want to add something over here, for example, I want to add notifications. So let's call it notifications over here. Or maybe some messages. If I want to or drag something over here on the top, for example, I have a small red dot for notifications. For example, this one. And if I try to drag and place it over here, you can see it is showing me that it is going to be dropped inside this auto-layout. So it is adopting automatically the auto layout. If I try to drop it like this, it is going to be over here. If you don't want it to or you want to escape this behavior, you have to hold your space bar and just drag and drop it like this. And it is going to be like this over here. Let's try to make it a bit done. Here we have the messages. You can move it like this. This is how you create a responsive navigation bar in Figma. I hope you have enjoyed this video and make sure you watch the next video too. So till then we will meet in another video with another Figma trick and Tutorial, take care and bye bye. 20. Responsive box modal window in Figma: Welcome to another video about Figma. And today we are going to create a responsive modal window. Or you can say a complex auto-layout in using Figma. Let's get started. I'm going to show you first what we will be building and I'm going to show you techniques, how you can achieve responsive window or a card UI guard you can build using Figma. Let's get started. So you can see on the screen we have responsive modal window auto-layout. And this is the modal window we have built. So if we try to squeeze it from the right, you can see it is fully responsive. The buttons and the clothes icon is staying at the top and the bottom and their fixed positions and text is actually squeezing with the box. This is very easy to create. I have to show you what are the actually the layers inside it. So we have buttons to buttons are inside auto frames and then they are combined into another Auto Frame. We're going to create that. So let's get started. First, we're going to create our button. Press T. I'm going to have this delete, add an auto layout to this one shift. We have auto-layout added. Let's add fill color over here. And this time we're going to use this red color for the text. We're going to use white color. Here we have our basic button and you can see this is the padding around the item and this is a spacing. For the next item. Let's try to use a padding of 81620 at the right. Let's use 28 over here. This is going to be my button. Let's add some rounded corners, eight pixels over here. Let's use four. Here we have our descent button. I'm going to use 1010 at the top and bottom. So we have some good sized but button. We have our button. Let's call it btn. Let's replicate it by pressing or holding on Alt or Option key and replicating it. And I'm going to place it, let's say 16 pixels apart. And this time I'm going to change its color to this color. And this is going to be cancel. Right now you can see we have set it to hug contents. So that is why it is actually expanding by changing its content. So it will always accommodated contents and expand and contract. When we have this setting, which is hug, hug contents. Okay, so we have are both buttons. Let's wrap them in, inside and other auto-layout. So Shift, I have selected both of these shift a. This is really important. This is buttons. Till now we have created to auto-layout buttons within another button's frame, which is auto-layout frame. And we have combined them into both of them. So you can see here we have the auto layout direction horizontal. So if we added a little bit and it's going to be on the right. This is the space between them. So if you want to control the space like 12 pixels or ten pixels between them, that you can do that over here, we have our buttons ready. Okay? Now we need text and one icon. Here we have our button. Let's use some heading. Heading. Over here. Tried to use bold. Let's use 24. I'm going to replicate this. Again. This is, let's try to use better graph so d, So I'm going to use a frame like this, like this. And let's try to see if we have, this is a box. I'm going to use Control backs as far slash Lauren. Plus. Let's try to add some texts over here. English verbs, graph. Let's add two paragraphs over here. This is our paragraph. Let's use 1616. We're going to use regular. Let's use one paragraph. I think I should delete the second one. I'm going to skip all these settings. This is just, let's use something like this. Maybe something like this. Okay. We have our text paragraph, which is this one. This one, and heading to pretense. And now we are going to add a, an icon over here. Let's add an icon, icons, cross icon. We're going to add another icon over here for the close button. Let's use flows. So this time let's use this one. This is our button. Let's try to use this color, maybe this one. To close this window. We have this circle over here. Now we're going to select all of them. And breast shift and add an auto layout. You can see now auto-layout has been added. Let's call it ordering. We have to add a fill color, which is going to be white. We need to have some padding over here. So 16 at the top, let's say at 24 at the left, 2416 at the bottom. You can see we have the basic layout of our modal window. Let's use some rounded corners. Let's use some shadow around it. Percent shadow is going to be two. This one, we added a very light shadow around it. Now you can see we have to use something that is going to be this layout. I have selected this model, model and we are going to use right layout. So to bring these buttons and everything at the right, you can see these buttons, this text, this bottom buttons and this corner. One has been moved to the right. This is how you are going to achieve that. First step is this. And then if we try to squeeze this, you can see the text is not responsive because going outside of the box. So to achieve that, we have to click the text and rather than fixed width, we are going to use fill container. Similarly for this one, this is going to be filled container. You can see now it has already been filling the container, so we have to just use this. And you can see there our responsive box and our tax is actually squeezing with it. You can see the distance between these two is actually controlled from here, we have ten. So if I tried to reduce, whoops, not the buttons, but the model window. So we have 23, Let's use 16. And it is going to be like this. This is the, if you want to control more things, you can give them another layout. So I've selected both of these texts and I'm going to give them more auto-layout. And rather than hot contents, we have to use the full container again. And here we can control the spacing between just the text. So you can see if for example, I want it to be like this. Now if I try to select and squeeze it, oops, what is happening? The frame is actually the frame. I think the, the text has been shifted. Again. We have to do the full container. And you can take on again. This is another way. So right now my text is actually inside. Both of these texts are inside another auto-layout. You can see over here text within another artery layout. You can do the same with without this auto-layout, but I love to, you know, control the spacing between my different items. This is how you can do that. This sums up our modal window, where we are creating responsive modal window, which is going to be squeezed and expanded and texts we'll be wrapping around with all the borders are the spacing or padding around it. I hope you have loved or enjoyed this auto-layout video. Make sure you watch my other courses, glasses, video classes, and YouTube videos. I will meet you in another video till then, take care. 21. Typography System - Scales and Styles 01: The first step in your design system is going to be typography. So we're going to select typography and then its scale and different categories. Title, title one heading, subheading, caption, all that different categories. We're going to define that into our design system. So let's get started and this is going to be where you start. So let's create a new frame. And we're going to call this frame Bob Murphy. Now, we're going to select any Typhoeus. You have to experiment about it. There is another class, my class, which is about design directions, selecting typefaces. We're not going to go through how you are going to select this typeface. Right now, I am going to select any typeface, let's call it portal. Text. Base, base font size is going to be 18. Try to zoom in so you can see properly. So here we have Roberto texts, and now I'm going to use a plugin by pressing Control or Command forward slash. And that is called scales. Let's see which one is scale equals type scale. This one type scales. Here we have it. And you can see it is showing me the scale value which is 1.25 and line height is 1.2. I'm going to set it to 1.4. Six scales in the forward direction, or small to bigger, bigger sizes, too small sizes. Okay, So I think I need these many, these are good. I'm going to click on Generate. And here we have our scaled right now. You can see it has created a very nice scale. Let's delete this. And I'm going to delete this one and I'm also going to use this frame biography. You can see it shows me that this is our base value is 18, scale is 1.25. And then these are our different sizes. Normally we are going to actually name them properly because this is not what we need. So this is going to be our heading or title or title, something like that. Let's call it one. Let's just call it, let's call it H1. If we have more styles, for example, desktop slash, one, that is up to you. So if you have two or three different scales for desktop and mobile apps, different scales, that is another story. Right now. You can see, yes, keep these. And I'm going to, what I'm going to do is let's first name them. Let's call it. Right now. What I'm trying to do is I'm trying to name them properly. Let's call it subheading. Let's call this one subtitle. Subtitle. Let's call it a subtitle small. This is called let's call it 4D. I'm going to show you why I'm naming this caption. Let's call it over line. This one is going to be our caption. 12 pixel is our caption text and this is our line. So I'm going to change it style. All gaps. Gaps. This one, all caps like this. And also I'm going to increase its spacing character spacing to be 10%. Let's use 5% or 1% Okay, so you can see this is an online text I'm going to share with you why I am doing this. Here is human interface guidelines from Apple, and you can see they have these different styles. Large title, Title One, 23 headline, semi bold, body callout, subheading, footnote caption one and caption too. So this is actually their scale. These are different categories that are going to be implemented in Apple design system. If we look at Material Design System, you can see we have Headline One, 234566 headlines. Then we have two subtitles to body sizes. One is body 116 pixels. Also let us spacing is mentioned 0.5. Here we have 14 pixels. Button is a bit bigger. Protein pixels, medium weight, medium, and caption is over here. And then we have an overlying. Overlying is basically let me show you actually. Okay, so you can see this is how actually it is using it overline is actually the line at the top of any heading. We chose maybe some category, something like that. Headline and body. This is body text. This is how you are going to apply your design system or type scales into your design system. Now, let's go back to Figma. And now we're going to create type styles over here. I'm going to, I'm holding Control and Shift. Command and Shift and clicking on only these headings or tax over here. No, I have selected all of them. I'm going to run another plugin, control or command forward slash type styles. This is a very nice plugin which is called type styles. And you can use either font family, font size, whatever you want to use. Example, I'm going to use font family in the name. Let's use font size. And let's use. I think that would be great. So I'm actually renaming, naming them. Let's make type styles and you can see it's issues created nine type textiles. If I select over here, you can see it is, it has created Roboto. And inside Roboto I have this whole textiles. Let me see what happened over here. So actually, the name we suggested it, we suggested the name of the type is. Click over here. You can see if I delete all these by pressing Delete, I can recreate them. Let's try to recreate them. I'm holding my command and shift key or Control and Shift key. Again, I'm going to run the same plug-in type styles. Now you can click on Text custom. Let's call them type styles. Over here. I'm going to use font family size. And click on Make type size. Now you can see it says again nine times 10th graded. And if we click over here now you can see we have type style and in that we have Roboto. And these are different type sizes. And you can see 140 is actually it's line-height. 22. Typography System - Scales and Styles 02: This is going to be your first step to create your type size. So once we upgraded our type size, the next thing is that we are also going to create some other things that can show you what is happening. So these are actually frames. Next, try to make it a bit bigger. And why this auto-layout on this frame, I have to remove auto layout. Layout. Okay, so this is a regular frame. Now, let me try to add something over here, which is going to be our usage. So we have to show our developers or other designers that this is how you are going to use this. Let us say heading paragraph. Here we have this one. And if we move to the assets over here, we have to use these styles. Let's try to use this with paragraph. Again, we're going to replicate this and we're going to have a distance of 1828. Let's use 24. Rather than using 44, we're going to use 18, which is our paragraph. Change the color of this paragraph to a bit darker gray like this. Let us use another lorem. Plus. We're going to use English paragraph or two paragraphs. Here we have it. Apply what textile, which is 18, change the color. Now you can see we, we are showing them that this is the sample usage of heading with a paragraph. So it will also have the spacing between them. You have to show the spacing also that this is going to be spacing. These are going to be the colors of the heading and the paragraph colors we're going to create in the next lesson. Right now we are more concerned about this. So also over here, you can also create a text link over here if you want to. What about a paragraph over here with some overline? So let's create that overline feed or texts over here. Let's call it overline category, category product. Now we are going to select over line from here. Okay, So this was 14, actually. We have it. We also going to show the spacing between them, which is going to be eight. Oops. So right now it is nine. What I'm actually doing is I'm holding my Alt or Option key and clicking on one of the item and also moving to Microsoft to another one. It shows that it is eight pixels apart. This is how you are going to show them. Also, you can use some color over here, for example, let's try to use this purple. Purple. Let's try to use this. So this is how you are going to show your developers and designers that this is all you are going to use my text with overlying and headings and this is how the paragraphs will be. You can see the line-height. So if you want to change the line height or something, you have to go into your click on any empty area and you have to further go into this textile and try to change settings over here. For example, here we have 8% and I want to have 10%. Now you can see it has 10% of spacing. In this over here in this style, this is how you are going to name them. You can also name them. For example, if I have this, I can just click over here. And rather than having 14, I can also use this is actually overlying. This is caption. So make sure you name them properly. This is our body. This was let's call it subheading. Yes. This is subheading. Name them properly. This is big title. This is heading one. Let's call it heading one Each to h3. So you can see now the names are more meaningful and easier to remember. So this is how your text file is going to be. I'm going to share with you my project. Let me show you what I have done in this textiles over here. Here I have the type scale. You can see here I have the Type Scale heading 123. I'm not showing the sizes over here because they are inside this text. I have different texts for desktop mobile, board, three or four different bold text treatments links. And you can see here we have color styles. If you look over here, you can see I'm showing my tax treatment on both backgrounds, darker and lighter ones. Let me show you. So here we have the components of texts. So you can see here's the texts with the heading and then we have the body text, then we have a button. I'm actually showing that this is how you are going to treat your texts. Similarly, you can see if you see here this is a list item with some paragraph. It is also showing the the distances between them. This is again a big heading. So you can see if I click on this, you can see it is heading 75. So this is how I actually name them. So this is how I actually name them text slash desktop slash heading. And it is showing for different headings. Then again, text slash mobile slash heading. Why I'm showing you this, because you need to know that there are many ways you can name them properly. So I can just guide you how you can start building your design system. Rest is up to you that how you actually select the TI phase. Different typeface for heading, different typeface for the body text. You can see I'm rather than using body, I'm using paragraph. You can see this is desktop paragraph 14182430. So I actually this was for a web design project. So I didn't use captions or small tags are footnote or something like that. So I'm using these four sizes. Make sure whenever you are building your design system, you are also showing the type usage. You can see over here in the corner type usage. This is very, very important how your developers are going to know that how to use this component are, or how to space things out, how to use this paragraphs. You can also, what you can also do is, for example, this whole, this whole paragraph with your heading, you can create a component. And you can see over here this is a component. So whenever I want, I can try to drag my component out of it. So here we have component text. Here we have it component texts. So I can just drag and drop it anywhere. And it is going to create a component text over here. These are, you can say the keys of creating a design system. You create type scales, select your base typeface. You create type scales, then you create types of styles. Then you create components using those type styles, using your heading and your paragraph and your shared it with your developers. And they are going to just drag and drop it. And all your other designers and they are going to use it in your design system. That is all about text and type scales, tap text styles. I will see you soon in next lesson where we're going to discuss about colors. 23. Color Scales and Styles in Design System 01: Welcome to another video about design system. Today we are going to handle our colors. We're going to generate colors, scales. Then we are going to give late purposes two different colors that this color is for this purpose. This color is for this purpose because if we are going to create scales, we might have like 4050 colors. But we're not going to use all of them. We're going to use maybe some selective ten or 12 curves. We have to specify that this color is for this specific purpose. So let's get started and see what we can do. Now you can see I have over here, Let's zoom into it. This is going to be my starting color palette. And I actually used a web server web tool, which is called this one, coolers dot CEO. And I use Generate and created the color scheme from here. The first color, which was a purple one I selected myself and the others are actually supporting colors that you can generate over here. Just have to, for example, if you want to lock this one, for example, this, Let's suppose that this one is my primary color. If I press space bar, you can see it is going to generate a different colors related to this one. Maybe I want to use purple with some Sian, which is a very good combination. Also green. I'm going to lock them, I'm going to rotate others. Let's use a dark 12. And let's use this one. So this is how I create a color scheme and export it as an SVG to start building my design. So here we have very sharp colors. Here we have like 12345 colors, five colors, and one is going to be our blacks, one is going to be our primary color, one is going to be our secondary color. So let's start with this one. Here we have it. Ungroup this, and let's delete these. This one is going to be my primary color. This one is going to be my secondary color. You have seen that in the buttons. Let me show you. If I go over here, you can see this is our primary color, this is purple and this is the secondary action explore. This is a second one, secondary action. And we are using that. You can see this is our tertiary color when we have an active field, you can see we have a very bluish, bluish, greenish blue kind of Spanish light Spanish color over here. So let's go back to style guide. So this is our actually it does trigger or let us say. We can also call it an active color. This will be our black. Let's keep it over here like this. This is our, this is again, our supplementary color. We are going to use it somewhere in somewhere we're not going to use it. Other than that, we might need a red color. For adders. Maybe. Let's try to replicate this one because our status, status colors are actually called semantic colors. Semantic cars are going to show the sterics of different objects, different elements. So let's try to move to this bluish. Red. Saturation is too much. Let's make it closer. Saturation is too much, so I'm going to reduce the saturation. So here is a saturation in the middle. Let's try two, make it less saturated and let's try to increase or decrease its brightness. Hue. I again wanted to be a bit more red. This one seems good. Let's try. 99 hue. Brightness would be 7490. This is going to be my color for my status. So let's expand this artboard. Have colors. Let's try to expand it to two. Now we're going to reduce the size of this one too. Let's select all of them. Select all of them. Let's make it a 100 by a 100, like this. We are going to arrange it like that. First we want the purpose of color. So let's call it. This is going to be the color follower text. So this is going to be our texts black. So let's name over here. Text colors. Maybe these are just black colors. This is too small. I'm going to use it over here, 18 or here. And I'm going to use Roboto. Maybe you can also bring this over here. This is info box. I'm going to replicate it or hit. It would be easier for me. Do you know, use everything. Let's move them down. Let's make it like this. Here we have our color scales, so you have to rename them. I'm going to skip this. We have our color scheme. Now we need to create some skills. So for that we are going to use a plugin control or command, forward slash, color scales, color scale generator. So I'm going to use there are many plugins. I have a full video on how to create these. Right now, I have selected this green one. So if I click on, I'm going to select, Let's select a dense steps and just click on Create. Going to create this whole color scheme. You can see over here, this is what we have right over here. Similarly, we are going to repeat the same steps for all of those. I'm going to skip this because it will make the video very long. Now you can see we have generated our color scheme. You can see these are our color scales. These are looking really great. If you want to have a neutral color, you can have something over here with the black, maybe some light green color or maybe some light in dull bluish color that is up to you. Right now I am going to use these blacks for my black and white for my DAX colors. And these are going to be our primary, primary action color. This is actually our secondary action color. And we're not going to use all of them. So let's select the colors that are going to be used over here. So maybe if you want to, you can expand this or you can use something, the space over here, let's try two. We're going to check our app now. So this is our primary color, which is 775 CFF 77, which is, I think this one, this is actually our primary color. This is our action button color. So maybe we can do a lot of things like maybe we can add a stroke around it off like five. This is going to be our primary action color. Then our secondary color was 79 FEC 47979 tickets. Let's try to bring it over here. So we want to see if this is going to be feared. It actually matches. I think it is very close to this one. This color over here two, fc 98. Let's zoom in. I think it's closer to this one. This one is going to be our color. Let's add a stroke of five over here. So this is our color. You can highlight the colors where you think that this is going to be our main color for the same purpose, primary and secondary colors, then we have greater than black. So let's try which is the background color 1 sixth, 1 sixth, 1 sixth. So I think this is closer to this one. Maybe I think it is closer to this one. So let's try to see if the background color is one e. Let's try to open it. It's in the blue, 209 to 516. The hue is 209. So let's try to see 209. What is the hue for this 1188? This is 250. Maybe what we need to fix that, we're going to use this color, maybe this color, or maybe we can use this color, this one. Let's try to create more color scale for this darker shade. Or maybe we are going to use red. Replicate this over here. Let's move the slider over here. I'm going to use this color for the background. Move them. So this is going to be our background color. Let's highlight it with a stroke of white color. Let's use red over here because we cannot see it like this. Maybe if you want to, you can name them properly. So let's try to move this right now. Let's try to remove. You can see you are here, this is again a 100, this is again a 100. We want to call it. Let's call it 1 tenth. We need to name them actually properly. So let's select all of them. I'm going to show you how to rename them. So Control or Command R. So we're going to rename them, do primary slash to use, let's call it purple. And then we're going to use a number like this. You can use something like this. It, you can also try to use number pattern like adding a 0 at the end, like this, then 20, and we're going to press the rename. This is how you are going to rename them. Primary colors slash purple, purple, purple, purple. So this is how it is going to be. Let's try to ungroup them and select all of them. So this is how you are going to rename them, and this is how you are going to create color styles out of them. So I'm going to use also, you can do one more thing. So let's try me show you Come on our current name. Before that we're going to use colors slash primary colors. So this is going to be more, better. Next, rhenium them like this colors slash primary colors slash the color you have. Similarly for these, we are going to ungroup them and let's select all of them. And again, we're going to rename them to Fellows. Slash, secondary color slash. Next quality, sharp green. Green. Then we're going to use a number. Number will be at the end, we will add 03, remove this n, rename. This is how we are going to rename them and then we're going to select all of them. We're going to run another plugin called bad Schuyler, I think. Let's try to run it. Oops. We have to think there was an option to create multiple styles. There was this one generated. Okay, so this one is the plugins Tyler generate styles. Click on that. And it is going to generate all the styles, 21 styles. And you can see over here, if we go over here, Let's delete all these. You can see I'm going to delete the previous ones. Primary blue is also going to be deleted. Let's delete all the textiles over here. Color style, and you can see here we have colors and inside we have primary color. Then we have our secondary color like this. You can see we can apply all of these like that. This is how you are going to create your primary, secondary and all those colors. So I'm going to do the same for others. So we're going to skip that. 24. Color Scales and Styles in Design System 02: Now you can see we have created all the colors, styles and everything. And you can see here our colors are nicely done. Primary colors are going to be these ones. Secondary colors or this scale. Then we have blacks. This is our blacks and whites. Then we have semantic color. These are semantic blues, red, and green. These are going to be our status scholars of semantic colors. That is all you have to create, your whole color scheme, color style, everything over here. And next step is that you have to show the purpose. You have to select different colors that are going to be for the purpose of these colors. So let's try to expand it like this. Let's try to first select these and scaling the art board. Let's call it left. And don't normally have to expand that. Again, this one is also scaling. Let's call it left top. All these also left and top, we're actually constraining them so they don't scale with our expanding of this box. We have created this. So let's try to give the purpose to our colors. This color was actually, this color was for background. And I think this color was following our primary action. This color was our secondary button. We're going to write all that. Let's select this. Copy it over here. Like this. Crown. And we're going to use a bit smaller scale plot, this 24. Oops, we have to use 24 types size. This is going to be our background color. Like this. This is how you show the purpose. Then we are going to show that this is going to be our primary action. Cannot see what is the distance between them. This is going to be our second reaction. We have defined the purpose. You can also align it over here like this. Similarly for blacks, we have to see where we have used, for example, this one is for backgrounds, for the text fields. And this one was for the background of, we have already done that. This is what we are going to look for. This is going to be our background. I think it was something closer. Let's try to grab this over here. C and paste it over here to see which color is actually matching. It is very close to this one. This is the color. So we have to replicate. It, controls us art pressing Alt. Let's replicate it. And we're going to use the same over here. We're going to call it the background color. And let's see if we have more. This is also, I think the same color. Same that has been used over here. Same color. This one is different. 353344, and it is in this purple hue. We are going to define all these. This is our input background. And this was also four. This is actually the first, let's call it dabs background. This is also for the tabs background. This is how we are going to generate different tokens. So this is the purpose and token. We have to use these colors. So if we reverse the team, then we are going to reverse these tokens. Make sure that you have, you have specified that this is the rule that this color is playing. You got the idea. And then we have. A few semantic color. So let's see, I think it was this one or this one. Let's use this one. Oops, aren't optional here. This is our active or active input. This is actually showing that this is active input. Now we have to, we had another one. Let's replicate it over here and try to change the color. I think we have used something like this or here, let me show you. So here we have another pillar which is dotted greenish color. I think it was this one. I'm going to grab this color. Let's delete this one. Like this. This is our this is our percentage bar or progress bar. We can also call it progress. Background. Isn't anymore color we have missed. Here. We have analytical, which is bluish green, kind of. I'm not sure which color is this one. Let's try to bring that color. I think we have used it a few places. This one, I think this is the color. This is another color for we have used over here. So let's grab it. This color is actually progress. Let's call it progress, dark color, progress. This is going to be our progress bar for the errors. I think let's try to see if any color over here applies. Let's try to use border over here. Stroke and try to select the color from here. Let us see which one is going to match. This one looks good, read 50. So we're going to use that. Oops. Let's go back to our style guide. Read 50 is this one. This one looks great on an adder. We are going to use that mortar. We have to use the input market, okay? This is how we just matching the distances. This is how we are going to define all the purposes. So I think our our color scheme is ready. One thing which we have missed is actually our text color. So this is our text color, which is Create Account. This is actually this purplish color. So this is actually this color. This is our text color. So let's move it over here. And you can also create a separate section or here for texts colors. Let's grab this. Move this a bit lower. Like this. Let's move it over here. Let's call it text. This is our paragraph text color. This is a heading, heading. Heading gonna, because we know that this is text. We have one color, text color over here. And let's try to find we have muted text color over here, which is a bit dull kind of grayish color over here. Also this input text, this is the same color. So let's try to bring it closer to and see which color it is going to match. I think it is going to match somewhere over here. I think this color, or maybe this one, this is going to work better. So let's try to create a rectangle over here like this and apply this color over here. I think it is closer to this one, this color we're going to use for the muted text. Let's grab this color. We are going to use it over here for muted text. Text, muted. Okay, so here we have two texts colors. One is heading or our primary color. Let's see if we have used one more color. So this is same. We have one more color which is in-focus, which is a bit more darker, where we have just small info section. So let's try to use that over here. This is muted texts, which was BW 50. Let's try 60, BW 64. The other texts for the info text, small in full text. Now you can see we have all the sections prepared. We have different primary and secondary colors. Then we have our texts colors or texts colors. You can make them properly aligned. Or Triumph, right now this lecture is already very long. So here we have input background tabs, color. Then we have our status colors, different semantic colors. Like you can see, we are using almost 1234567891011 colors over here. I think. Dental 15 colors is going to build your whole design system that are going to be used. Other colors are just for supporting. Maybe we need a new color somewhere, so we might need to use that. So that is all this is about how you are going to use your colors and everything and create your whole color system in your design system. So I will make sure that you learn, I'm going to share this file link to you so you can see what I have done. We will meet in another lesson till then, take care. Bye-bye. 25. Button Components and Icons System 01: Before we get started with bigger components and building bit bigger components, we're going to start with smaller ones. We're going to create different buttons, different chips, different small text of text Informations, things like that. We are going to dig into these buttons section and we're going to create buttons with auto-layout and different variance. Let's get started. Now you can see what here we have this button, we just create an account. There is another style which is ghost button. These are two styles, the same button. Then we have this problem. This is an unrolled know featured button. This is a bit different button. Then we have this Explore button, green ones that are four different smaller courses. Then we have this top navigation. Navigation is going to have one active state and one normal state. This is another one. I think these are all also this one. This one is also drop-down button. We're going to create that. And then we have this. This is also a progress bar, bar. It is not going to be we're not going to use auto-layout for this one because this has three elements. But we are going to create a component out of it so we can easily update it and rename it and change its texture will hit. I think that's it. So first we're going to go with the buttons. So right now we have our pages to design system. This is another frame and I have calling it button. First, we are going to see that this button is actually 327 by 48 pixels. Let's try to replicate that in our design system. You can also command C or copy, copy Command V or Control V to create a copy of this one. And now we're going to select this buttons and press D and all that we're going to use. Make sure you have selected this topography BD and textual here. Right now this is selected and this is what we're going to use. Let's press Shift and Shift a to add auto-layout to this one. And the first thing we're going to do is we are going to add some padding over here too. Let's add 16 and the top 16 at the bottom. I'm going to add 58 or 57.5. Let's call it like this. 57.5 over here. Maybe we're going to call it 5757. This is our main structure and I'm going to tell you why I why I have added 5757 before. Let me let me tell you what what will be the problem actually, let's add a free pillar. So we are going to use a fill color, which is this one, purple 50. So purple 50 is the color which is very close to our actual color. We're going to add eight pixels of roundness and open this. And we're going to use corners smoothing. This is our actual layout of a button. But right now it is not equal to the size 327. We have to make it fixed because we are going to use the same size for all the buttons. Now we are going to select this text layer inside this frame, and we have to make it fixed width. We are going to make it larger. Because for example, if I add text, it should not expand. I'm going to use like 200 and let's use the height width of 212. And now if I drag it closer to this, so you can see it's 27 is 326, so it is one pixels apart. So I think this will do for the text over here, I'm using this white color, so I have, I have added this to my colors. Styles. Select, selecting from here. Now, we have replicated this, so we're going to delete this. And this is our button. Let's call it btn notch. We have 3D enlarge, and now we're going to create a component out of it Control Alt K or Command Option K. So we have been compressed that. So you can see we have this button large. We have successfully created our button. And if I try to change its content like login, it works. It is not changing its Smith. This is what we need. Now, moving on, we are going to create some variance out of it, at least three variance. So before that we're going to click on this this whole component and try to set the property. For example, we're going to set the property of the button style. This default will be normal button. And this one will be our cost style. Now we're going to change our styling that we're going to click on this coast and remove this fill color and a stroke, which is going to be this color or it was lighter than 50. So we're going to use this 40 over here. This is how these two buttons are actually going to. This color is coming over here. See, I think we have selected the colors from our color palette, which we have created color styles. So this is how we have created the second one. And now we're going to add another variant. Let us click over here, add another variant. And this would be called disabled. So right now we're just going to change its color from this one to this maybe. Yes. And for the white color, we are going to use a bit of grayish color over here. So this is going to be disabled. So for these 3 third button style, we are going to have disabled or here, this statement. We have three buttons styles actually, this is our PDN lot and disabled, ghost and normal. So these are three buttons, or you can also call it failed and normal failed or whatever. It's up to you. I'm going to call it normal right now. This is one set of buttons we have created. Now we're going to create other buttons too. For example, we have this one. This one, this one. Let me show you this one is also created using frame. We need to not worry about how to create it. So let me show you the settings over here. So top, bottom aid, right and left ten. So let's recreate it if you want to copy it. And we're going to create another set of buttons over here. Oops. Let's recreate it. Is it? Let's copy this. Copy this frame. I'm going to paste it over here. Here we have this frame. Here, we have this frame. Right now we're going to call it dot dash item. Make sure you name them properly. This is really, really important. We don't want it to be fixed width. So it is going to float with the text. If I try to change it, It's dextro here, for example. Business, community education should expand. We don't need to worry about the fixed width aspect over here. This is going to be like this. We're going to create a component over here like this. And this is our top nav item. And we are going to create two videos for this one. Why? Because someone have to click on it. One is going to be, let's select property. Here. It is going to be steered and one is going to be 40 is going to be basically active. You can call it false, let's call it false. This one is going to be our true or active state. This one is actually active stage, so let's try to change its color from this one too. This is going to be use black and white pointy and follow the text color. I'm going to use reverse. So I'm going to use this one. Black and white VW nine. This is how these two are to look. One is active and one is inactive state, or you can also call it false and true. So I think active or inactive makes more sense. I don't want to confuse my developers. So this state is going to be active. This one is going to be inactive. This one, this makes more sense. We have created this successfully. And now we can, we are going to create more or here. Here we have this Enroll button. Let's copy it and paste it over here because we need to replicate its settings. So it is 48152. This is actually 50 sum. We're going to use 50 right now. This is also going to be fixed. I think we are going to use Enroll Now. This is this text vertices is going to be fixed 152. So again, we're going to use the same technique we used over here, fixed width. We're going to use Enroll. Now. Shift a. Auto-layout has been added eight pixels or corners smoothing we are going to add, let's add fill color, which is going to be the same, which we use this one or 50. This is our main primary color. This one we're going to use white. Now. We are going to add some padding over here. So top bottom is going to be 1515. Use 4040 were here. I would like to see how much sizes. 38. Okay, so first we're going to select this text over here. Rather than using this, this over here, we're going to use fixed width, fixed width, and I'm going to try to expand it like this. Maybe we might change the text a bit, maybe change it to something else. So I'm going to have some padding around it. So let's call it 100. I think this one will work. Now we're going to add, change the padding over here. Let's use 3030. I think 2424. Right now we are at 148 with this one is 152, so we need two more on both sides. 4626. We have replicated this button using auto-layout. Also, we can change it to something else, maybe just now. Okay, So this one is also coming inside this section or area. This is great. This is great. Let's delete the other one. Here we have our and btn and rule. Again, we're going to replicate the same thing. We're going to have one more state which is purchased. If you have already purchased the goals, it is going to show up at chest shift a minus z. So right now we're going to convert it into component. And now we are going to add a variant. So let's click on the variant and right now will be state of the button. This is default stick one is default, one is going to be, Let's call it purchased. This one is going to be, Let's keep it like this. Default in purchases. Purchased is going to have different purchased or here, the color would be different too. So let's try to use some color from here. Let's try green, something green over here like this. Maybe something like this. We have to test it on that background. Actually. I'm going to choose this one, green 70. I think this would look great. Also, this text color should not be white. I'm going to use green demo here, or maybe green plenty. Like this. This is going to be two steps. We're going to test it. We might change it off crawl. If we try to see that the background color is not looping, right? We have three sets of buttons. You can see this one is actually disabled, but this one is actually different state. It shows that it has been purchased already. So we have let's You put it over here and chips over here. One more chip we have, I think where was this one? This is just an information chip. It is going to expand or to experience. We don't need to worry about its size. So this one, this one, I will need actually this one, this one, this one is actually this one drop-down. So I think, I think we already have made it using this auto layout. So I'm going to show, share with you my technique, how I have used this with the icon. You can see this icon. Okay, so before moving to this one, you have to create a document where all the icons would be. We will be adding icons from there. So let me quickly share with you how you are going to do that. Let's lock this background layer actually should not be moved accidentally. This icon actually is going to be a component first before you add it over here. So you have to make a component. Let's call icons. What we used is actually we have used phosphors, icons. You can also write over here that you have used phosphor icons. We have used one back icon bars and all that. So these icons you have to add over here. So click clicking on it. For example, we might need these in the video. Arrows. One arrow was used, this one I have used. So I'm keep on adding these down. Down arrow is actually get it. So I went to get it, this one, I have used this one. You can see you can add all these icons which you need. So let's use play. We might need display or display, or display. So keep on adding all the icons you might need over here. Cause I think I have used this one. We have added all the icons, so I'm going to show you what we actually need to do. So this background should be, We're all these icons, these have been added somewhere else outside of this. I'm going to bring them all back in. Selecting all these and dragging them into icons. Here. We have all the icons, so let's use the fill color to be this one. Oops, not like this. So you can use the fill color if you want to. Try to arrange them. I am going to keep it like this. And select all these. Distribute horizontal spacing. I'm going to keep them like this. So one thing is that you have to keep the size of 24 million. So you can see it has been 3232. You might need 3232 pixels or you might need 2424. This one is actually using, has been used as 24. So I'm going to reduce its size to 24. This is what we are using. So let us see if the vector around it is 24. Okay, So this one is got it is 24. Let's see what others would have over here. So I'm going to use the color to be this one. And for the vector background, I'm going to remove this color because this vector background is just for the boundary of this icon. You have to do the same for all these icons. And the next step would be that you have to create component. Let's call it icons slash. I get it. Keep it like this because we already have this icon over here, this whole carried down work, create icons like this. So let me see if we have this back arrow. It is also 24. Let me see if this one, this one is also 24. So all our icon that's download the settings. These are all 24 pixels. Also you have to use these icons to, these are also, I'm not sure, very hard this, but I have to search for them. Anyhow. In your design system, in your icons, these are all 24, so let's resize them to 24. Select all of them. 24. These are all know, fixed. We have to change the color next. I'm going to skip this. 26. Button Components and Icons System 02: We have all our icons, so you can also, what you can also do this one has been already created into component. Select all of them. Click over here, create multiple components. This, these are going to be components. Keep them like this. Also, I think we need one mole, which was settings. I think settings. I think this one, maybe this one, I don't remember, but let's use this one over here. I'm going to use this. We're going to use 24 over here. Like this. Do the same thing. Select all of them, change the color, and create a component like this. Create all these icons like this before you add them to your buttons. We have this icon over here. Has happened. Rather than adding carried down over here, what we are trying to do is we're going to use actually Command or Control D to create an instance, and we're going to drag that instance into our component. You can see I have dragged and dropped it over here like that. You can see this is actually the one I created. This is the one before. This is what I'm using. So it's very easy just create a type text tool over here called a year to 221. Shift a to create this. And you know, the drill, we're going to have a bit more space. And this would be in the middle because we might need to change that year or something, maybe text change. So here we have it. Let me double. Now we are going to, what we're going to do is add a fill. Oops, we already have ended up fellow here. For this frame, we need to add a fill. Actually, fill will be this purple color we are using. Oops, not this one. This one for using our patterns. And this top and bottom would be, Let's, let's use eight over here. This is looking great. I think. Let's try to add this into this like that. Just drag and drop and you have to change you have to change the spacing. I have fixed the button, so the setting was actually over here. So this movement actually, it was like this. So you have to be in the middle like that to create this kind of button. Because we have two elements, so we have to auto-layout, fix them. So posting is that I actually reduce the distance between them so you can increase it if you want to. I am keeping it at four pixels. For the top and bottom, 66810. On the right eight padding is because we have this icon over here. It should not look very big on the right. Like this. It is looking good. You can use seven or six if you want to. Six also looks great. So 10666, like that. And here we have our button so you can see ear is at the bottom, carried down is at the top, so it will be on the right. Make sure you click on this frame. So we're going to rename it to drop down. And this is the auto-layout setting of this dropdown. So click on this drop down and we have for this one, and for this mixed we are actually using the arrangement over here. So this is actually going to fix that text moving up and down. So you can see this is a problem. Make sure it is in the center or on the left. It is up to you. I think centered Looks great for me. This is how I will be creating this bill. Now I'm going to delete this and create component out of it. So creating a component. And if you want to create a drop-down action or maybe selection or something, It's up to you. Like dried now I'm going to keep it like this. So there is no state for this one. This is going to be my dropdown. I think I would keep it over here. Now we're going to create this, this, this is actually already created. Nothing ready difficult. This is actually next fall in full force in full chip, chip cores and four, It's up to you. This is actually using the colors from, let's try to use the colors from here. This gray looks great, and we will have the stroke color to be this screen. I think this looks great. Already looking great. This one. Make sure you choose the colors from here. For example, here if we have this scatter down an ear, tried to use the colors from your color styles over here. So if you try to change something already is going to reflect it in your whole design system. Similarly, you can see why I have added this scatter down over here. So if you want to change it to anything else, for example, you want to change it to labor, then you can do that just by selecting an incense over here, rewind. So all your icons are actually now. All your icons are over here because you have created them into a component so you can scrap the components over here. So this is the beauty of this design system. Here we have goals chip in full. And I think this is again, I have used the auto layout over here. I think I should keep it in the middle because if I try to add an icon over here, it is going to be disrupted. Then is the distance between the padding, but we need it. So I'm going to create a component out of it. And it is auto expanding, so we don't need to worry. Control or Command Alt Option K. Here we have chip component over here. We have created like different buttons and chips. Let's see if we need one more. Maybe we can create this progress, but we need to. This is not very hard and let's use it and try to replicate it into our design system. It is not button, but I think it's a progress bar. So let's call it buttons, plus chips, plus progress bars. Just to make sure attack we had using everything over here. Here we have it. You can see this is actually in the middle and center. If I try to change it, we should not expand it. It should be same like this, so it will stay like this. This one should be moved easily. Like that. Setting would be same. I'm using the same setting for this one. And I think that is on. Let me see if we have a different progress bar over here. This one is using a different settings. So I want to use 11 over here, make it similar to this one. So we will be using the same progress bar. So the vert is 199. Let's make it 200. Just to be on the safe side. This is a bit bigger one. This is 213. So let's try to use 200 and see if it fits. Yes. So I'm going to use 200 over here again. Let's make it a bit bigger than two hundred and two hundred and ten. This one also 210. This one also progress bar 210. So MIG size of each of them similar. This is going to do in the middle. Let's create the same thing with our design system. It is going to be 210 pixels. So I think we're not going to be more complex. So let's try to rhenium them. Fill BG for background, green quality in BD, and select this command Option key to create a component. You can see we have created this component over here and we can easily access it into the assets. So you can see we have, you can see over here in the assets, if you move to assets, we have this chip in for login. Small button. I think we missed one button over here, which was this one. We have missed this one. Explore. Next, copy it and drag it over here. And we're going to replicate this button into our own design system. And you already know the drill how we created this enroll no login here. So I'm going to skip this quickly. And we're going to create two states for this. One to, one is purchased and the other one is Explorer. We have successfully replicated that button. So right now what I'm trying to do is I'm trying to have a bit more space in the text so we can change it to something else, and the size would be 102. So we are going to reduce like 16 pixels. Now. Let's try 16. In 16. Very close. 1515 would do the trick. Here we have the button and we are going to call it smaller. Here we have it and create a component out of it. We are going to create a component. Let's create a variant. The second variant would be, but I think we're going to use the same team for that. What is happening? Here? We are going to use the property. We already had status. Steve. Let's do extinct. So we're going to use button state. Oops, oops, oops, what happened? State. And this default state, this is going to be purchased. It was purchased. So we have to fix that by going into here and try to replicate this. Tried to have it like this. Now we have 213 and see if we have the same size, 10210411 over here. Here we have it, but GIS and explore two states are dried. Now we need to change the background color to something else, which is going to be a scholar. I think we have used green 70, yes, green 17, green point before the text. Green to green. This green point D, this one. If we have purchased the course, it is going to be so it's to this one. So two buttons, red. We have done and completed this task of creating all these progress bars, chips and buttons. And I think let me see if we have missed anything. No, we haven't mixed missed, missed anything. So you can see we have one icon over here which is check circled. You are also going to copy this to your icon or icons over here. This one is actually 32 by 32, and we are going to create a component out of it like this. Keep it with your icons or your icons. And we're going to mention the sizes over here later on. I'm going to show you a few tricks on how to keep your icons. Don't try to do that. It's going to mess the size of your icons. Here we have all the icons. And what you can do is you can also try to copy these over here from here. Like this. Copy this because this one is not there in the design system. Click over here. And this is actually try to zoom in like this component. Download simple. Let's try to see if we have this freedom is horizontal. Try to copy these from here because I think it has been okay, so EQ on the icons, this one is different, this one is different. So squalor, not feeders, but we're going to call it Settings. And this one is settings. This makes more sense. You can see we have all different icons in 24 pixels. This one is starting to, if you have 30 to keep them in separate rule. And I think that is all. We also need these three icons. Let's copy these from here to here we have it How simple student and circular. So let's copy all these three. Next, try to go to this design system. Click on these icons, control V. And we have our icons over here. Right now we're using this color, which is why we have this. We are going to use this color, these icons, BW. So for all these, I'm going to use vw. Here we have it. Bw. Bw can follow these icons. These are actually 32 by 32, so this should be kept in this line. This is 32 by 32 pixels. Here we have it. How symbols to use a circle gear. Let's keep them like this. We have to create multiple components like that. And here we have our 32 by 32 pixel icon set and 24 by 24. What I'm going to do electron is that I'm going to add something like this or here, which is our info bar. This one, this one is going to be added to our icons 3224, and that would be it. I'm going to make it happen and I will show you in the next lesson. This lesson is very long. So let's move on to the next lesson and study something more about our creating more complex components. They'll then take care, Bye bye. 27. Bigger Components 01: Now before making you a bigger components, we have to use another frame to have our illustrations on that. Let's do that quickly. So here we have it designed system. Let's replicate this icons like this. Rename it to move this, move all those. And these are going to be our illustrations. Have big plus small illustrations. So let's use the head just to have it a bit simple. So I'm trying to copy this happening. So what is illustration? So this one, it has been locked. So I'm going to come out Command C, Control C. Just paste it over here like this. This is one illustration. What do you have to do is just create component on topic that I'm going to have a bigger do the same for the other ones. This is a smaller one. We have used progress illustration. I'm going to keep it like this. There are few more things we have used. For example, this small red and blue dots. I didn't use them as background illustration or something like that. So what I have done is I have used them in this whole component. So we're going to add them to this component rather than keeping them separate. Now, I think we are ready to move on to create some of the we have lined up our illustration. So now we are going to create bigger components. Next. Use this one. Next, call them components. I'm going to remove these. Let's call them components. These are going to be our list items, something like that. And let's see, for example, this is feature horse and this one is the normal course. We have one more, which is this one. So we have actually three variations for these. Let's try to create this first, this first. Here we have them. You can see we have this featured image. You can either keep it like this because we have already added linear gradient to it. This one is our course title. This at all. They've been selected for this one. And the button we are going to use other components that we created. Let's go to Assets and five-hour lecture video. We are going to drop it like this. What lap it over here. That for chip is over here. In our layers, we're going to add it. It was inside this featured course. This is the input shape. I think. This one featured course. We have to open it and add this pools chip inside it. This is actually this dude nation. So I'm going to rename it to q duration. This is our future demand. We are going to keep it like this button we have to replace. So we are going to use our Enroll button over here, the same one. And this one we need to replace it. Let's first move it at the top. Btn rule, and let's remove this. Now we are going to have this one, which is going to be our bigger component. We have it almost ready. Let's see if we have alignments. Alignments are perfect. And you can see we have multiple instances of different other buttons and different other smaller components to build a bigger one. Now we are going to create our component out of it featured posts. Similarly, we are going to do the same with these smaller ones. Now, why I'm not using auto-layout because we have to have different spaces. For example, eight pixels over here and 16 pixels over here. This is not possible because it is going to have the same padding. This is going to be a massive. We tried to create it with that. Again, this one course title. We are going to do the same. This is going to be our image, our course image called quality course image. Like this, duration and students, this is going to be our same, this one. I'm going to repeat the same or here, so we're going to skip it. We have the dude nation. Let's try to replicate it. It should be removed. This one, this one is students. So I'm going to replicate this Monday over here. And now I'm going to remove this one is student stories 450. Then. The problem is that it should be kept on the left. We can manage it. Here, we have not explored, but then we have to get the explorer button from here and add it over here like this. This is going to be able to explore button, scroll back through the ears. Explore small. So gunners, students duration. Btn course image. We have made. Let's try to see if we have a course title is perfect. Everything is a component inside a component and styles. We're going to create a component out of it like this. This is going to be our course item. This is our bigger component. For that course component, become one, smaller one. Okay, So for this one we have to create, also create these two. Let's grab them and bring them over here. Command V, control V to paste it over here. This is already been selected paragraph plus muted text. So we have to replace this because we have made a progress bar in our own design system. Let's go to Assets. And where is our progress bar? So I'm going to bring it over here like this and go to layers. This is actually my featured course. It should not be featured board, but it's the list. Forces. Force. I can. So I'm going to drag and drop this progress over here. This one, this is going to buy my featured image. These are actually scribbles and if you want, you can create a component out of it and keep it somewhere else. Let's create a component on top scribbles. And I'm going to Command D, duplicate it. Control X or Command X. We are going to paste them into our illustrations. Here we have it. These are going to be my scribbles like this. I'm going to keep it for here somewhere. In my illustrations. Now if I wanted to change the color of that background, we have to do that over here and it will be reflected in all of them. This is our featured image. Okay, so let's call it Image, Image. Image like this. Here we have it. This is complete. We are going to create a component out of it. So we have these components ready to add them to our design systems are three components we have created. And let me see if we have created other components for the text. Me zoom out. Here we have another component, which is for the text. So let's and grab that. I think it should be over here to our design system and should be present in the bigger components like this. What it does, it has actually created. Let's come on D and use this master component. Master component and bringing it over here. Posture component. We need a master. We have, we are trying to line up these. These are not course components, so these are actually taxed components. We're going to keep them the bottom. Like this. I have created a few components over here. The best thing is that you can change them to whatever you want. For example, like this one over here, I can have a chip and for example, this progress illustration, I can use them both so you can drag and drop it like this. Also, you can see we have this player over here. What is happening? I haven't Claus VG. I have named them properly. What is happening? Why we have this behind this? So we have to delete it. Control V G, This is video image. This is review progress. We can create a component out of it. So this is logo. This one. Would you caption? If progress is progress bar, read your caption shouldn't be over here. We have this LAN G, control G and video. You can create a component of video player. And you can have me show you. We're going to create a video player over here. What we need over here is let me tell you, whoops, happened, just happened. My icons. Okay, so these are not the part of let me just bring them to this. Where do you get this one? Now? The other part of it, make sure you try to hide and choice Command C or Control C. And we're going back to our design system. Here we are going to have this video player. What we have to do is we have to add our icons or severe on my icons. This is false icon. They have to add it over here. Download icon, this is download. This is for settings. This one has been used. Now. Just try to overlap it. This is icon. Yes. Lap it. Nobody ever going to go to the layers. These on my icons. And I have to delete these symbols. Simple. Keep it like this. We don't want to create a component out of them. This is okay, so this is video player. So let's try to create a component. That is why I have used over here. So let me show you, for example, if I want to use blue here, I can use play over here. If I want to use rewind over here, I can use reminder William. So this is the magic of creating this. Using these component icons. I want to teach you what are the, you can see the essence of these, this whole, what you should call it, this whole idea of using your design system. Why you have to create a design system? Because you want it to be easy to change or modify it. And you should have more options to create and control things. For example, you can see here, this is my bottom nav and I want to create something for this one. What I'm trying to do is I will create different states for this 13 states. One is home active, my class active and account active. So let's try to do that. So for that, I am going to use a color from here to make it normal. Not like this. I'm using black and white 60 right now, I argue can use 52. I think 60 is looking good. Black and white 60. And before we move on, we have to bring our icons over here. So here we have our assets. Here on our icons, where is my home symbols? So this is my home symbol icon. And then we have rather than icons, this one. And this one. I'm going to overlap them just to save the time of positioning them again and again. Like this. Here we have it like this. And delete the rest of the backgrounds. We have. Let's move them inside it. These oops, what happened? I let her scribbles. Okay, so I'm not going to believe those that we have text and we have this. Let's try to use the same color for the text to, for the icons. 60. Also for these vector, I'm going to use black and white 6060. This is going to be my state for normal state, where nothing is going to happen. Select all these black and white 60. Select on this one. We are going to, what we're going to do is we're going to hide this like that. This is going to be on bottom NAB, normal status. This is going to be normal. And we have three icons. Why we have used this? Because if I wanted to change an icon at anytime, I can use drag and drop over here and I can slap it 2032 pixel icon. That is one thing. Okay, so now we can create a component out of it. This is our component. We need some variance. So I'm going to click on variance. This is how we are going to use this. In. This first video is going to be not default, but it is going to be active, active state. And the second one will be, third one will be a video, it will be active. We have these, let's click on this one to describe the property. And it is the nav bar. Just call it status. I think that would be created rather than calling it like that. Okay. First, we are going to click on this and let's change the vector to not. We are not going to snap that instance. What is happening? Keep it like this. And we are going to change the color to black and white. And the home will be black and white. This one is going to be active and null for the second state. This is going to be active, but it is going to be moved over here. Like this. Black and white. You've gotten the idea of how I'm trying to achieve my goal. And account would be, again, this all the others I'm going to use back and watch 60. Let's see if we have US plan and wide 60, black and white 60. So if I try to shift the color, I can do it in just a single click. 606060 Dan. Here we have to do is we have to use this leg. Here. We have the three states ready to remote. And we can just drag and drop it and select which state we want. And it is going to be like this. Good. We have created our navbar, which is bottom nav button. Now we are trying to create more complex layout. Go ahead. Whoops. We have left something over here. You can create this component with different, multiple avatars, but I think I'm going to skip it right now. You can also create a chip over here, which is this one, which is about progress of a student. You can create that and you can also create that. So we're going to create 12, these two, and we're going to drag and drop them into our, into our design. This one is another one. This one. Let's start with this design system. And I'm going to do this. Here. We have it at Avid dot frame. It is somebody to buy 72 and squalor 72. Due to the rectangle. You can also, you can see we have this effect, which is for this whole content on this trip. Let me see whether the drop shadow, okay, So we have drop shadow elevator door here. Anyhow. This is the content and this is the background. So let's call it. This is the content. It's up to you if you want to create a component out of it or not, it's up to you because I think it will be mostly this fixed width. Normally. It's up to you if you want to create a component, that's that's, that's your decision. Right now we are going to create, let's start create a component, but we need to drag an illustration over here. Here we have the illustration. Drag it over here. Let's see if we have the same. The book is a little bit above this. Purple book is above over here. Like this. It is almost this file from here. Now I'm going to create a component out of it because I need to have this. Let's keep it like this. Ungroup it. Now I'm going to group them and we're going to create a component out of this whole one. You can use auto layout, but it will make things complex. If you have two, I'm going to select all this and create a component is going to be my user info, our user, let's call it user progress. Oops, what happened? We need to add the effect over here, which is this one. Perfect. This is my master component. We can drag and drop it anytime. 28. Bigger Components 02: Let me see if we can create more components. Whereas the last one, we can also create this one. This is actually our top navigation, and the distance between them is actually 16 pixels. If we can also have different states for this one. Let's try to bring it from the assets. This is our chip. It already had those states, I think. Let's see if it has inactive, inactive factor. What we're going to do is we're going to replicate it like this. 16 pixels would be the distance between them. Before that, we are going to use and create auto-layout for this one. And utterly or direction would be this. The distance would be 1616. Let us try to replicate this. I am pressing Command D or Control D to duplicate this. To create this one, we are going to use, let's say user. Then we are going to, again, not, not like this, I have to select this. And here we have the full navigation user interface. Okay, so you can click and you can change inactive to active, SAP to you. Before going into something else. We are actually going to use rectangular here. Let's try to see if we can add a fill over here. Which is not going to be this. But actually we need like this one. The problem is actually the boarders coming over here. Let me see if I can it from there. Here we have it. This is a rectangle. This is the gradient linear fill, the mask group. Let me see if I can replicate this over here. Same thing as obvious. This is the problem. All. I have added another color here. So that is the problem or this is happening, that is happening. I am adding now, reversing it. This, this one is not going to be a 100%, but 80%. We're going to keep it 100%. We have to change the color so you can see if I try to change the color. So maybe right over here. This shouldn't be like this. This one should be 100% like this. We are creating actually linear gradient which is from 200% percent because it is totally going to hide it. So twenty-five percent will be created. And then this one is going to be a 100%. You can see this is our Masters group. This is our mosque. And we're going to create a component. Let's call it. This is our component. If you want to change the mask, you can make it full like that. This is how we are going to create more navigations. And if you want to have, I think we don't need to have two or three different stage for this one because we can turn anything on and off. Let me show you how you can use them over here. So we have a distance of 41 pixels over here. Let's delete this one. And we're going to use from assets our own created. Whereas my So here we have the components. Open this. Here we have the bottom neck. I'm going to drag and drop it over here. It would be 4000 pixels. 47, I think it was 47. Let us see what is the 50 sound 48. That's colored seven. Like this. It seems 30 years from here. The height was 48. So this one is 48. It doesn't matter. No problem. This one was 3s orbital. This one is 305. I'm going to move it in the middle. Thirty-five. Thirty-five. Yes. Let's choose 44 or one head null. Okay, So it has some other problems, so I'm going to use it. Let's try to use 4444. Bottom is starting to. That is great. This is my navbutton. If I want to change the status to home active class active, I can do that too. One more thing is that you can also the prototype section. You can also create a prototype. We have this whole navigation that is going to shift to other one. So you can have this change to on dapp, on onclick. Onclick. It should not be instead but smart animate out and do the same farther one. Like this. And also from this discipline, back. From this, it is going to go back like that. You can create something like this and it would look great in when it will animate. I have fun. I think I have one prototyping tutorial on my YouTube channel that is showing this one. How to animate this. I've been showing you in this setting instead. This is how we're going to replace our bottom nav. Let's delete this tomorrow and see and Martin V. Similarly, we have this over here. Again, we'll bring to delete this. Oops, what is happening? Okay, so I have to select the frame. Here. You can see we have to make the other one. It is going to be next quarter design. Bottom nav is going to be my classes. This one's status class active. Here we have, let's call it my classes. Click on this active would be glasses. This is home. Let's try to go to prototype and I will show you what I actually mean. Let's try two. Let's try to run this. You can see if you click over here, you can see how these actually are moving. The darks are moving and everything is shifting. So you can see this looks really, really cool animation of, so actually I haven't connected this one back to this one. You can do that in your design system and you pull over here. You can also select item. I think we can go back like this. This one goes over here. This one goes over here. This one goes back to classes actually. Anyhow, this is how you would wink to have this animated effect of your here. So let's try to add from my assets. I'm going to add this over here. Like that. From my layers. I'm going to remove or hide this right now. So you can see this is how I'm going to do on that. One more thing is you can also remove these and keep on adding your components from here. Let's go to Design. Let's try to have them. 50, so I'm actually keeping 6044. Here. We have more components like these, so you can create different categories. For example, I have this video. This is, these are food text, these are navigations. I'm going to have them into different sections. For example, these are my you can also add, you can see you can add description of all these components if you want to. For example, this is actually a playlist. Would call it a playlist over here. And you can also add a documentation link if you want to link it to some documentation page where you will show how to use that or how do you know? More detail about this component? This is how actually I have, I'm trying to manage them into groups. We have completed all our components averaging. I have shown you how to create different variants, different components, different bigger components to use those smaller components. How you are going to use those icons? How to implement those icons, how to replace them into your design system if you want to. How you have to build your illustrations and icons and everything, the whole system. You can also create different links in your icons, for example, you can also tell them that these are false. Icon writing. These were for phosphor icons is false for icons. These are phosphor icons. You can also link, create links. For example, if you have, you can see we have this topography and we are using this these two typefaces. And I am going to create a link for them. To do that, you can see if you select an index, you will have created link at the top Control Command key. What I'm trying to do is actually I will be moving this like that. And I wouldn't be download bond load. Click on this link and you can see I can paste the URL over here. So I am going to go to google.com and I'm going to paste the link of this bottle or such formula. I'm going to use this link. Copy. I'm going to paste it over here. This is how you can base the links in your hair. Let's try it. Change the color of this one to something else so it looks like link. So I am going to use, let's try to use this one. This one looks great. If you want to add links to different portions are different. Different webpages or different things you, your designers or developers need to download. You can click on that and it will move to, for example, these are phosphor icons. You can create a link for phosphor icons. To go to that page. Developers can download all the specifications, everything. For example, these illustrations where we record those illustrations, you can have the link to these illustrations. That is all. So this is, I think another tip I would like to give you that you can add different different links to your whole design system. There are one more thing people tried to do is they try to create different pages and have your buttons and everything separately. 29. Grid System and Layout System: One more thing we forgot is actually grid. You can define your grid system in your document over here. To do that, we're going to create a new frame. For frame. Let's try to create iPhone, which we have used, I think iPhone allowing Pro Max. And we have used a grid. Let's see if we have created a grid style. Let me, let me see if we have this grid. We have the grid now. We are going to create a grid style, let's call it food column. To use that we're going to go over here and select this and this is our grid. You can define mode like what is the distance on the left and right on your grid, and also the colors. For example. I want to have different colors or properties. For example, let's try to change the color of the background to something like this. To show the grid. Grids. Also, if you want to have the layout, for example, we have a layout of all these elements like this, laying out like this. And for example like this, you can create a layout too. We have one big element over here, then two elements over here like that. You can create this layout also, the grid stool. So right now, we're not worried about it, who? We are just going to develop our mobile apps. We have grids for mobile. If you want to. Design system where we have Web T2, then we are going to have a grid system for web design to let me do that. Create another frame. And this time I'm going to use a desktop 1440. This is going to be my desktop. Let's create a grid layout. And we're going to use a column grid layout, 12 columns. Center line. Should be 72, let's call it 72. Cutter wouldn't be 30. This is how you would show a desktop grid. You can also save it over here. This will be more easier than handy for your developers desktop grid. And that would do the trick. I think this is all about the grids. I think I left this. You have to create a grid system to where you are going to show all the different grids. Better if you have created this grid styles that can be easily applied when you are trying to create a new page on new layout. I think we have completed everything grid scholars, topography, button chips, progress bars, icons, illustrations and components. I think that is going to end up and some of the scores. If you have any questions or if I have anything remaining, if you have any questions, you can always ask me. You can create and make this as complex as you can. But I tried to simplify it and I tried to teach you the essence of design system, what you actually need, and why you actually need to build a design system which is going to make your life easier. And all the tips and tricks I have given in this class that are going to help you a lot when using Figma. I will meet you in another video and another course. Make sure you download the resources for this course till then, take care Bye-bye, and we will meet another time. 30. Creating type combo components: The last lesson, we have created our typography section of our design system. Now we're going to see some of the more things that you might need in your typography system. These are additional. So you can see here we have our design system where we have a title heading. Then we have section I have described all over here with the sizes on the left. And every one of them is actually a type style. You can see, you can easily guess what it is now we have, I have also applied all of them to my design learning app. Let me show you. Here we have it. So if you click over here, it is a typography section heading. And if you'll click over here, this is topography paragraph plus muted text. If we click over here, this is small textbook plus bottom navigation. We have applied everything where it should be. I'm pressing Command or Control to click on Slack. You can see textfield and labels. Similarly, if you click over here, this is paragraph mutate inside the text. So this is the filtText. Actually apply that style over here. Then again inside these, all these buttons. So these are actually buttons or controls. In all these controls we have or buttons we have applied the button text if you click over here and button text, if you click and btn text, these are all button texts. Similarly for this text, this is just an information, smallest information. So it is in full-text. Let's check distances. Again. If you go over here, this is paragraph plus muted. So every title below over here is actually paragraph. So if you click over here, this is also Paragraph plus muted. Similarly, we have this one. This is small text. If you go over here at the bottom, this is small text plus bottom navigation. So you can see this is how you apply your whole typography to your design system. Now, if you want to show them the combination of different different typefaces. For example. Here you can see we are combining two of them. Is a difference between them. You can copy from here. You can go to style guide and you can see that steered into this section over here. So fast-paced them. This is the distance between them. This is one text we need to get both layers over here separately. What happened over here? Let's see where it is. Okay, so here we have it. We are going to grab these two command C. And let's see if we can call people. The more here. Yes, Now they have been overhead cost actually, it copied the text only. Try to use a background color over here, which is Docker. Dark background. This one, I think we have used this one. Tried to show everything on a dark background. It's easier for them. Here we have it. Move it down. Copy these two also. We're going to press Alt and drag over here like this. And we're going to call them type. From leftwards 88. You can share your typeface combinations over here. It will also tell the kudos that how much distance would be from one text to another one. You can see here we have the distance of ten. Similarly, if we have more like this one, this section where we have lecture titles, and let's copy this. And we're going to go back to style guide. And let's use that over here. Like this. Next, extend this background a bit more. Here we have it. Let's talk on this background. I think we're using this one. This is how your developers are going to know that the distances between these typefaces, they want to create component. You can do that too. So for example, if I wanted to create a component of this over here, I can just go to here. It is going to be a component. So you can change it later on. So you can create a component and call it, for example, section, Section Video list, something like that. Similarly, you can have, you can select both of them and create a component. Let's call it user info. You can see this is how you are going to create some of the components that are going to help your developers quickly grab those and use them in their design. If there is a shortcut key, if you want to grab these, just press Shift. Slash. There was a shift I. You have to press Shift I. You can see here we have typography. We have to Section Video list. If I click over here, it is going to grab it. Or here you can see this is what we have over here. Similarly, this is our section. Similarly, if I want to use this shift I and I can search any component. For example, these were few we created. And you can also create, use these, for example, userinfo. And it is going to pay something like that. If you want to create more components, like maybe this whole featured goals component and all these. We are going to create these in the next steps back, no, we're more concerned about typography. So let's go to our style guide. And I think here we had, we're going to leave this fight now. We have two components over here, which is, which we are going to use on our developers or designers are going to use in their typography. Section. Let's move this group. We have two or hip. Let's call this background. Just know if you want to extend it over here like this. That's up to you. Like this. Now you can see we have some usage components where we are showing the user the distances between paragraphs or titles or something like that. Also, we are showing the whole design scale where we have all different typefaces and their styles. And their purpose is what purpose is linked to that type style. That is all you have to apply all these, we have already applied them. Let's move in the next section ness next lesson and we're going to look at color combos and generating other color scheme. Let's get to the next lesson. 31. Using Icon System in Input Fields 01: Now in the last lesson we created the icon system and buttons system. Data are few things we are going to use now, which is our input. We're going to create videos and hour input fields. Let's get started and why we created the icons before. I'm going to show you now so you can see over here, if you look at this button, so I have labeled them buttons with states. So these are our buttons. Then we have progress bars in pushups where we have to infer chips and progress bar, and then we have this progress bar. So this one is actually in Port. Use drop-down. Here we are going to use this drop-down. And now we're going to recreate our input fields, which are this one. We have these. So let's copy both of them. We will see if we can replicate them using our design system. So here we have one and this is one, this one is active, so the width is three quantities 7. First thing is that we can use the same width, which is 346. We're here. Let's try to replicate that. First, we're going to use and create this pressing D. And I'm going to use this. This is my input. Maybe we can use email shift a to create an auto layout around it. And the height is 48. So we're going to use, let's use 88 over here. The height is 34 right now I think we would lead the 1212. Okay, So one thing is that we're going to have double-clicked on this text. We are going to align it on the left. This is going to be always on the left. As you know, we're going to have them fixed height. So I'm going to click on that middle one. I'm going to make it at least this long. This long is enough. I think this is good enough for the text. Important, I can have email or anything in return inside it. That is all. Maybe a bit longer than that. I'm going to use 260 word. Let's add a fill color on this frame. Fill color. And it is going to be something like this, small darker than this one. So this one, BW E9, this is the color from our designs are some that is going to match this color. Okay, So I think from left we have 16. So I'm going to keep 16 over here, like that. And also from here I'm going to keep 16, the middle. We're going to keep it in the middle because once we going to add this icon, that's going to mess up everything. That is all. So let's try to see 42. This one is 48, so we need a bit more padding on the top and bottom. 46. Let's use 15 over here and see if it looks great. Let's Yes. Fifteen, Fifteen, Fifteen, 161648. Now we are going to make this white. This is going to be 330. So not like this. So we are going to use the click this frame and try to see. Now, try to add this icon over here. So we are going to go to our icons. We're going to go to Assets from here and go to icons. I'm going to add this and drop this over here like this. Oops, you can see it has already been equal to the size, almost equal to the size. Now go back to layers and we're going to check for your things. For example, top, bottom. We're going to reduce because this 32 is actually having a lot of adding width to this one. Go to this frame one, which is, let's call it input. We will have at the top and bottom will be 12 to, let us see what is the height 50. This one is 48. It's again a lot. Let's try 88 over here is actually adding. This is 48. Perfect. And we forgot about this. Adding the corner radius like that. Let us see what is the width is 327, this is 334. This icon looks a bit too far from this edge, so I'm going to reduce the size side from this side. So the padding would be, let's try to reduce. It. Looks great. Or here. This 330 and this is 327. Let's try to reduce this size. Two hundred and fifty six. Fifty seven. And now we will look at the size 327320 seconds. So this is perfect. Now you can see I can add an e-mail address over here, M.com. I think it is going to be easily for the whole e-mail. This is going to be unfilled state actually. So let's try to use something that is okay to have this. And we have to do something else. Design system and these icons, I'm going to replicate this. This is going to be my empty icon. No, not like this. I'm going to create a box of 32 by 32. And this one is actually going to have loafing fill color. Let's try to use opacity of 0%. For this one. I'm going to call it empty. Or let's call it no. No. I'm going to create a component out of it. Let's make it closer to this one. 32. Using Icon System in Input Fields 02: This is our new icon. I'm going to show you why I created this. Here we have this failed state. We have created the field. So you'd actually forced One more thing is missing, which is this e-mail address, which is the label, which is tax-free data labels. So let's try to add that over here. I went to port D. It is going to be the label, label, label, label with a label, text labels. This is the label and the color is actually something closer to this. Yes. Now we are going to drag it into this auto layout. You can see it has been added over here, so we want it to be at the top. Okay, So now we have a problem. Before adding this one to this. We are going to use another auto-layout. This one is six pixels. Let's keep it Six. Apart from here. We're going to select both of them. Shift. Okay? Here we have another frame and I want it to be, this is going to be my input. Plus labeled. You can see the auto-layout is vertical direction, so it is keeping this leg that spacing between items is six, which we have set right now. And on the left we are going to add some padding of six. It is adding padding on both of them. This over here. This is actually adding everything to this whole. Let's try to create an auto layout for this one. This e-mail will remove the padding top, bottom. This is getting very complex. Bottom 0 and this is going to be 16. I think it is going to match it like this. So 15, I'm going to keep it like that. What I did is I actually reviewed auto-layout for this one too. So I normally don't like to create those many auto layouts and things like that. So we're going to go back and keep it more simple. So let's remove auto layout. Let's remove the frame. Ungroup like this. So what I'm trying to do is I'm going to also ungroup this. To keep it simple. We're just going to group them together. Command G, and this is input, enable, input plus label. You can do a lot with auto-layout, but I don't like too many complex auto-layout mingling together like that. This is not a good way to start your design. So I am going to custom align this from here. This is actually six pixels apart from here. This is how my email field will be. Six pixels. Yes. What I'm trying to do is now I'm trying to create simple component that is this. Keep like this over here. So this is actually, we're going to need some variance over here. And let's keep it simple right now. We are going to use label over here. Let's call it. This is going to be normal. Let's call it label again. Here. Let's call this is going to be, let's make it empty. We cannot make it empty. So let's call it input text. Now we're going to replace this to our icon, which was new icon. Symbol is that this text is, we want it to be something like this. We don't want to be very highlighted because it is just a filler text before anyone enters. This is our normal state. So let's call it state. This is our normal state. Input state. This is actually our state. And we need one more which is active state. So we can move them like this. I'm not going to add auto-layout to them. And let's create one more. Which is going to be where we have this border. And the background is, I think lighter. I'm not sure. I'm going to add stroke. And stroke would be actually on this colors. This is not a color. I think this is very close. I'm going to use another color, which is this one. Blue 50 is actually our color for this state. And icon would be as we are trying to fill it. So we are going to use in the icon right now input field. This, this is actually active. This is how I tried to use create components for my input fields. If you have more input fields, you can create a lot of other things. This is normal texts. This is you can also, if you want to hide this text, you can just make it 0% and it will hide like this if you want to have an input like this. We have created our input text drop-down. This is let me see if we need anything else. Okay, so here we have the avatars. If you want to create an avatar frame, I think you also need a 32-bit 32 pixel icon. Go to this icon. And this is actually here we have it. We are going to use an ellipse. We're going to create an ellipse by holding Shift and the width and height should be 32. This is going to be our Here we have empty one. So let's have another one over here. Keep the empty one over here. We're going to use, which is the same for these. This is going to be our outcome. For the fill. We are actually going to use an image. For the fill. We are going to use an image and keep it like this. I'm going to use avatar and we have to make a component out of it. Solve. We have almost created all our smaller components, and now we are going to go towards the larger ones like this. Bottom navigation, this top navigation for these, following them on these over here, these and also these. I think we have already created them. So we are going to create these components now. For example, this video player, we can have a whole component of this video player and we're not going to use too much of the complexity of adding too many auto-layout and things like that. We are going to use, combine these and create our system. We're going to do that in the next lesson. We're going to move on to the next lesson and create some more complex components. We can add them into our designs easily. And also we are going to have the illustrations copied to another frame called illustrations, so we can drag them and drop them over here. I will meet you in the next lesson till then, take care. Bye-bye. 33. Creating Spacing System 01: Now in today's video, we're going to discuss one very important aspect that actually I forgot while recording this course, which is spacing system. In your design system, spacing is going to be mostly vertical. Or sometimes we can see rapid space that is going to be around your whole layout or page. And there are different categories of spacing. So we're going to see what are the spacings we need spacing system, we need in our design system. Let's get started. Now you can see I have created one art board over here, the vertical spacing system. And we're going to go to our learning app and we're going to see some of the spacing's. For example, you can see here from this logo to the top, we have 34 pixels. The spacing it is almost, I think it was 36. So we're going to use 36 over here. Maybe we can use 32. Let's use 32. Again here we are going to use 32 again. Over here. It was b equal on every side. Similarly, these two have a spacing of 24. You can see these are the few different spacing system, okay, So on the left and right, our grid system actually have 24 pixels margin on the left and right. So you can see, if you look over here, we have 24 at the top. 24. Like this. Similarly, we have 24 on the right. Let's make it 24. So this is actually our wrapper space. We are actually using twenty four, twenty four, twenty four. So at least we are using 24 space around our design. So let's get to the bottom and see what is the space we have leftover here. We are going to have something like this. So this is our bottom navigation and it has spacing of around. Let's try to make it a bit bigger. I think it's 32 most. Here we have it. Let's try to zoom in and see. Is it at the bottom? Yes. So the spacing is 0.77, so yes, it's 32 at the bottom. Now spacing is almost matching. Our smallest small spaces. One block is 24, other one is 32. So these are the two sizes. So we are going to write over here, same way we actually did for our topography here. I'm going to copy this. I'm going to paste it over here. The first is 24, we have, second is 32. These are the two spaces. Oops. Let's go back and see if we are using any more space between these two. I think it must be. One is 36. Let's see what is this 20, this is 211. Spacing is actually 20 pixels. So you can see over here 3621 more step we are going to use, which is less than 24, which is 20. We have identified three spacing between our design. Here we have 40 between sections, bigger sections. And similarly we have, the problem over here is that we need to see the spacing. This is basically a block. We have 16 spacing over here between this heading and this block. So let's try to see here should, it should be 24 from the top. Similarly, these 224.5, this is actually at 101. This should also be 01, like this, 2424. Okay. We are going to use specimen of 16 over here. And from here it's 28. I think it should be something like 32 maybe. Let's try to see. We have one more spacing, which is 16. So let's add 16 or here we have 16. So we have identified four steps. 16202432, I think we had, okay, so we have four. Let's try to see if it's 3232 we have already identified. Yes. One was 40, which was between these two sections. So this is 40. We have for spacing. Now, let's try to see if we have anything as 20202024. Okay, That is good. 12. You can see very adjacent items. They have 12 spacing. Let's try 12 over here. We have now 123456 spacings, vertical spacing systems. And let's try to see if we have 36. So this is 24. This is 40. Yes, I think our whole design is based on these four or five spacings. 1216202430 to 40. Let me see if we need spacing between. We have a spacing of 16 between two items. So the horizontal spacing is also have the same same step. And let's see if we have anything as what is the spacing between these two. So I have used two or three times this 27. I think it should be in some even numbers. 27 is not a good thing. It is actually based on this. Okay, so let's try to see this eight. Smallest one, is it? Here it is eight between. You can see these are three lines texts, so we are using eight over here. Let's add it to add some more flexibility. So if we have the smallest space between our items, it would be 881216202430 to 40. And I think that would complete our design system. 36 should not be 36, but it should be 32. Here we have, let's try to adjust these to one. We can also use 40 over here, but I think I would use 32 over here. And the distance between these is trendy. And this one is also going to be 20. Fact that that is, let's try to see the distance between 168 layers. So this is good. Let's try to see that this system, it should be 16. And let's try to see ten. This is not good. We need to have it over here. And let's try to see the distance between these two. That is good. And this must be actually 16. Here. This looks great. You can see I'm shifting my design to accommodate, so it should be eight. Then again, it and then it's 16. Now it's perfect. That is all I think these are the spacing systems we want to use in our designs. Let's start building them. So what I'm trying to do is we're going to build some blocks of the spaces. Let's get our rectangle. Here we have it. It should be 40 height. Let's try to use 45th. Normally what I tried to do is for vertical rhythm, I'm going to use the width of this one, so it is 375 pixel wide. What I'm trying to do is I'm going to use 375 over here. So I'm going to write by pressing T 40 Bx, like that. I'm going to align it in the middle. Combine them. You can color them if you want to. For example, I might want it to be something like this. For this color, I will be using something. This is going to be my spacing. This is going to be, I'm going to create a component. Let's create a component. And we're going to call it space. This is going to be my last scale, 1234567, Space seven. Or you can also call it section, space, space that dash section. Let's call them by some meaningful names. This is going to be space section or let's call it Space seven. So it should be the biggest one would be easier to remember seven, we have seven over here. We're going to repeat the same thing again. And for that we're going to ungroup it D that instance. So this is again, I am going to solve, I'm doing the same thing again and again. So we're going to skip this 32. So I'm going to reduce the size of the height, 32. Like that. Let's align the text in the middle. Whoops, I actually like this. Let's move it up. Now I'm going to again create this one, and we're going to call it space six. This is going to be my space six. Similarly, we are going to do all the others. 34. Creating Spacing System 02: Now you can see we have created our spacing system. And I'm going to show you how you can create a new screen by dropping these spacing systems. Now, you can also name them, for example, you can name them like this is going to be our margin. I know that this is going to be my margin. This is going to be Section space. So I know that this is going to be my section space. And similarly, all these, this is going to be the smallest between something like that or just call it space one. This will be the smallest. This is going to be my margin. This is going to be my section, sections spacing or next quarter section margin. Just to keep the same naming technique. So now if you come over here, so for example, I'm building a new screen or I'm building a new design over here. So let's copy this one. And let me show you. If I don't have anything over here. And I wanted to start my screen so I would quickly do is shift, shift. I once I press Shift I, you can see I have different things over here. I can drop buttons. I can drop illustration. Here we have the spacing system. So let's start with this space margin or space six. Here we have it so I can drop it like this. And now if I try to type something here, Let's Sally grade. So I know that I need to keep this margin over here before I start something. This is going to be my space. Similarly, if I want to add a new text or I want to add something below it, Let's call it subheading. I know that I need eight pixels of space between them. So I can quickly press Shift I, and I can add my spacing. And you can also show your developers this spacing system. You can create one document and show them that this is the spacing system or this is the spacing that is going to be used. For example, let's put I, shift I, and this is going to be my spacing system space T2 is actually being used between buttons. So developers are going to know that space two is 12 pixels and it is the space between when you have two adjacent buttons. I'm going to prepare one document to show all my spacing system. I think space for was used. Here we have used the biggest one, I think Section space. Let's add the last one. Space seven over here. So you have to prepare something like this or this. So you can see here we have the spacing of 3624 actually shift I. Oops, not typography. I'm want to go to Spacing system and I'm going to add space three, I think 16 space food. You can see you can name them. It's difficult for me to draw it over here. You can also name them by their sizes, temporal, I'm going to use 2020 or here. And 43, I'm going to put 16. This is more easier to comprehend and more digital guess you can see over here, when I click over here it says Sexual 40 section marginal. Similarly, I can add 32, which we need 24 ways, so we are going to use. You can also search over here. So let's grantee for what is happening. Space. Here we have space and miss 24. Maybe I have I haven't named it properly. That is why it was not coming. Again, I'm going to search Shift I to search inside my components. And I'm going to type 24 is going to quickly go to that. And I'm going to prepare a document for my developers. Similarly, you can see we have spacing. We cannot comprehend spacing. It is 32. So let's add 32 over here. This, this is how you are going to show your screen to your developers. So this is 43, but I think it should be 40. So let's try to add for the screen, I think we're going to keep it a bit higher. So let's try to add Shift I, and let's add 40 over here, at least 40 pixels when there are buttons so users can easily press them. This is accessibility issue. So here we have it. Maybe we can add some shadows or something like that. So this is how our whole screen is. You can also shift it a bit down this whole screen, sample 123. Then we can this up. Here we have a perfect screen layout. This is how you are going to use your spacing system, systems into your design systems. You can also specify if your design system have tables and a lot of data, you can also specify a horizontal spacing. Maybe you need four pixels. So for horizontal spacing, you are going to create a smaller blocks. Smaller blocks to show the horizontal spacing. Rather than creating these. For example, let me show you, Let's create eight pixel block. And I'm going to show you that's dy dt at it. And I'm going to type in here eight pixel. This is going to have a separate height would be, let's keep the height 40 and we're going to use it. It would be, let's remove the pixel because it's very difficult. Oops, we have. Let's put it over here. It's not necessarily that you always need to put some text over here. You can rename them. For example, I'm going to call it horizontal space. Let's keep the edge small space. This is going to be at space pool, which is going to be eight. Let's keep it in the brackets. Size. This is how we're going to create. Let's create component. What is happening? Command Alt or Option K. This is our ad space. And this will be one spacing and we can also create for 1216 horizontally, the spacing would be not to watch great, it would be very small-scale. But you can create that and show it to your developers that this is how we are going to use that space. So you can see this is at space. You can also use the space over here like this and the naming. So it's easily, easy to understand that this is vertical space. Something like this. Naming should be very compact and meaningful so your developers can easily understand or any new designer if they are going to come or join your team design team, they can easily understand that this is how your spacing system is going to work. That is all about spacing system. This is how you are going to Control Command Shift four to hide my layout. And this is how you are going to show this one to your developer. And you can also put all of these into a group and call it spacing. And you can hide and show it like this. Let me zoom just into this screen. You can just hide it and show it like this. It is easier to manage this like that. Guys, this is all about your spacing system in your design system. I have seen a lot of designers that they don't use this and they don't know how to use this whole space in systems scale. This is how you are going to name them properly. This is how you are going to create components out of them and quickly drop them into your designs while creating your design system. Till then we're going to learn a lot and then Take care. Bye bye. 35. Links and documentation in Figma - Linking pages and frames: Now we have finished our design system. Let's talk about few of the tips I'm going to give you, which you can use in Figma. And one of them is you can see in the screen, on the screen you can see that I have used some. Over here. You can see this is a design principle document, and I'm using small icon over here, which is called emojis. So you can use emojis over here. What do you have to do is just go to more G's, copy and paste. So here we have it. Get emoji.com. So let's try to use one from here. Let's try to use, Let's try to use any of them. For example, like this one, this is going to be such one such or here's why I'm not able to select it. Let me see. Yes. Okay. So I'm going to select this. This is not such actually, it's sometimes it is difficult to select them. I'm going to select that, select this one, command C or control C. And I'm going back to Figma. You can see for example, this purpose statement. I can get at the end and I can just paste it over here like that. You can see it is showing me now emojis over here. Similarly, you can, you can do is you can paste it over here in the start if you want to remember like that. This is how it is going to look like. You can copy an emoji. And for example, I have this one. I like this one, so I'm not sure why I'm not able to copy it in this browser. Let's try another one. Here. It is easier for me. Okay, so again, the same thing is happening. Let's try to make it smaller. And here we have it, for example, like this one. I'm going to select this command C. And let's go back to this. And I am going to use design principles like that. And also over here I'm going to remove this. This is a very simple trick to use these. So this is a nice trick to use icons in your design. Similarly, for example, you can see I have used over here. What I did is I actually did it copy, just copy from here. You can use any image if you want to. And I have seen people, they try to use icons and other stuff. For example, they have seen people using this check marks, ticks for example. And let's use this check. And I'm going to go back to my design system. So here we have it, for example, you can see this is the same thing I have done with this. You can see other than using this, I can drag and drop over here like this. So you can see not visible like that. These are actually links and you can go to, and link to another page or inside Figma. So the trick is for example, I want to go to this page design systems or right-click Copy link to page and write any texture over here. For example, go to Design System. Click on this link, paste your URL, press enter, and that is all you need. You can change the color of it, whatever color you want. And you can also use an emoji. Maybe I can try something like this heart over here. I'm going to use that and paste, just paste it in the beginning. Oops, so escape. Here we have a very nice link. So if you want to move to that page, just click on, go to that page. It is going to go over there. I have seen a lot of people that they tried to have different categories, different grids and everything and linked over here. So on every page they have the link to this documentation or design system and everything. So you can go back to design system design principles from here, you can also use these links to other pages too if you want to. So this is actually a navigation. You can also create a separate frame over here, call navigation on navigation. Like this navigate design system, something like that. And you can also link, for example, if I want to link this, so I think I can also copy the URL of this one. From here, I can copy Copy link. So you can see over here inside this copy, Copy link button chips. And if you want to add over here, Let's zoom into this navigation so I can replicate it. And I can call it In button's chips, form elements. I can paste my URL over here and it will go back to over there. If I click go to frame, it is going directly to that frame. So there are many ways you can use these links inside your Figma. You can link our frame, you can link our whole page and create this whole design navigation system. Right now I'm not going to click link this. I'm going to keep this one over here. Like that. Try to minimize the size. Let's try to select both of them. Move them outside so I'm going to keep it over here like this. Just closer to my first screen. And that is all. These are a few tips to maintain your design system. Also, you can see over here, I'm going to give you a last look on how we actually, I have teamed it. This is the color. This is a background color we are using in our whole app. What I'm trying to do is I'm trying to use and match. The whole team is using the same background for every element over here. So you can see icons, buttons, Everything is using the same colors. Let me zoom in. And I'm going to show you here is the link to download the Barlow typeface. Here are our colors. These are the three colors used by our texts colors. And also their purpose that this color is for this one. So actually we are trying to use, I think 12345678910 or 12 colors maximum in this whole design. I hope you have learned a lot and enjoy this whole journey with me. Ups and downs may come in this whole January journey. And I would love to embark on and others are generally due soon enough. So right now we're going to see off each other and we're going to say goodbyes. Because this is going to be the last lesson. I want you to create something similar to this one, a simple design system of your app. You can use light version and dark version. It's up to you. That is all. I hope you have enjoyed this course and stay tune with me, check out my other courses till then, take care. Bye bye. 36. Color System Assignment: Now the time is for your first assignment. Now your first assignment should be create a color system for your design system. And before that, you have to create at least four or five, at least four screens of your mobile app or website or anything you are developing. One screen or two screens, at least two pages of your website and at least four screens of your mobile app. So give me, show me a color scheme. Create a color system like this, and show me your primary, secondary colors, your colors for your texts colors, the colors, your grays and blacks you or any supplementary colors or states or invokers you are going to use. And show me everything defined purpose, give them purpose, and show me what you have quad. So I'm looking forward to show, see your screen. You can create a screenshot. You can click on this, for example, this is colors. You can create a click over here, export. You can export this, export colors on your desktop and upload this and show me this color system, your whole color system. I'm waiting for a closed system. I will meet you and reply you whenever I can for your assignment. Let's get started. 37. Typography System - Scales and Styles: Now is the time for your second assignment. That would be your tech system or your type scale and your different type styles you are going to build for your design system. So I'm looking forward to seeing your assignments. You have to create a typography scale and typography design system just like I did. I'm going to show you. So this is how you have to present me. You have to show me that this is your typography system or your typefaces, different scales and assign them the purpose, what this style would be doing like this. This is my title, this is my section heading or subheading whatever course title assigned purposes to these type scales. And you have to show me you can also share your document, for example, clicking Buy here. You can copy the link and just send me the link rather than showing me the whole thing. You can show me the link I end. You can keep on updating that link. I'm going to see it. Just send me a message that we have. I have updated and I have added my icon system or my grid system or anything into my design system. And I will have a look at that. Make sure you create it and show me and share with me the link. And you have to also create some type combo combos, like you can see I have created over here userinfo, and this is my section, video play. So it's up to you. You have to show the combination, how the components will be, what will be the distances between different. We have already covered those into our in complex systems over here. Course components. Don't need to worry, just create a typography scale. That is all you can find the link of this file I'm going to share with you in the resources. I'm also going to share the Figma file, the actual Figma file for this whole exercise. Make sure you download and import it. And you can do that by clicking over here. I've gone back to Home, click on the import file and you can open this file. Let's go back to our design system. This is your second assignment, typography scale system, and show it to me. Take care, Bye bye. 38. Buttons and atoms assignment: Now your third assignment is that you have to create the atoms of your design system, which is actually your smaller components like buttons, a small chips in four chips, something like that. Navigations. This is the document I bought from you. Button chips, progress bars, form items. So create a document like this and show me in different using different states. You can create different variants and show this document or share the link with me. You can click over here on the share and share the link, copy link and show me the link of this document. Make sure you name it properly. You can also write your name over here. For example, my name, dash UX, designer. I can create and use the biggest one over here. Or I can choose this layer and I can use 48, something like this, and use black. This way I'm going to know that this is your file or this belongs to you. Sometimes I open up a lot of design systems are a lot of assignments to check and I forgot what, who actually, or who is the student or who designed that. Make sure you put your name over here. Okay, so here we have this is what I need. You can create this and show it to me. I'm looking forward to your assignments. Let's get started now. 39. Icons illutrations and Grid System: Now your next assignment is that you have to create your icons and illustration system and show it to me. Icon system is also going to have your logos. You can see what he and I have two logos. So you can create logo, logo small and make sure these are components so you can easily add them into while you are designing. Similarly illustrations, you have to resize them. You have to size them properly so these can be inserted into your design system easily. These are two things I need from you. Also, if you can manage to create this grid system desktop, mobile tablet, that would be a plus. So I need three of them, icons, illustrations, and grid system. These are the three you are going to create next. And in the next assignment we will see you, I am waiting for your assignments. Just get started now. 40. Class Project - Design System using Figma: Now is the time to create bigger components. So you have to create a component section over here, an art board and show me what are the bigger components of your design system and how you are going to implement them. Make sure they are easier to navigate and they have variance and proper everything if they have any overstates or any active states tried to create variance. This is what I need from you, your picker components. So this is going to be the last, I think. Meanwhile, if you can create a spacing system, this is the last two things I think remaining spacing system. This is the core of your design system spacing system, grids, typography, and colors. These are these four things are, you can say the base or the pillars of your design system. Every other thing is going to base on them. For example, the buttons, they are going to import the colors and the text and also the spacing from your vertical spacing system. Similarly, your icons, they are going to use a spacing system like we have 3224 pixel like on your bigger components, they are going to use all of it. That is all this is going to be your last assignment. You can share the whole design system and also tried to create different pages. So I can see that you have got the idea of separating your design system. And you can also create a link. For example, over here you can see I have a link over here. So I can go back to the design system by clicking over here, go to page, and I can also go backwards over there from here. That is all this is going to be your final assignments. Show me your complete design system and I will be more than happy to command and reply and see what you have accomplished. That is all I think we have covered a lot of things in this class. I hope you have enjoyed and learned something new for me. Make sure you send me some commands and reply back. It would be my pleasure to see your comments about this class. We will meet in another class till then, take care. 41. What's Next: Thank you for staying with me during this whole class of design systems using Figma, we have learned a lot about design systems. I hope that you are going to check out my other classes which are about color scheme, typography, layout design, and a lot of other things that are going to make you or turn you into a professional UI and user experience designer, del, then I will meet you in my other classes. Take care, Bye-bye.