Day 43- Part 2- Design systems-Skill Booster session

Okay, welcome.

Sorry for the disturbance. What happened? Okay, so I was just sharing the screen with you. So every. Every particular when you open a Figma screens, what happens? You will be able to get some design systems available inside. If you are guys, please admit other people who are also coming. Okay, I've made a lot of people host, just co host, just help them out. Like let's say if you want to import a new system also you can still do that. You can go to Google, you can go to this. Can you see here, like let's say icon buttons. You can see here, right? You can read about it. If you wanted to download a material, you can download it here. Can you see here design kit? If you click it automatically, it will be opened in your Figma screens like this. Whatever material you want, you can use it. Okay, so I'm just trying to help you with a small material. Like let's say if you are using this material design for creating some kind of a buttons, okay, I'm just creating a basic frame for creating frames, you can able to type F. Okay, you can create frames. There are a lot of mobile applications also which you can keep a standard size for that. But yeah, okay, let's say if I have to create some kind of a button, something like this, just using this, you can press R for creating some buttons, okay. And you can drag this radius to. In order to create a radius, okay, Very simple. If I have to create a color for this, I can able to go here and then I can create some kind of a color. Like let's say if I want to create something like a little whitish color. Okay, so this is how we normally create a color. Like let's say if you want to create something like a circle, okay, if you wanted to hold a consistent shape, you can put shift. That will be helpful for you. Okay, like let's say if you want to create something like this button, okay, and you wanted to duplicate this element, you can create a duplication by pressing Ctrl D. Okay, you can able to duplicate it or you can press alt and you can move it will automatically come. Let's say if you want to add some kind of a strokes for this, okay, let's say if I want to create some kind of an element like this, okay, so ideally what it took, it took me some time, right? For creating this. Like let's say if you want to add text, you can put T. Okay, you can put something like.

Okay, I.

Want to increase this size. Okay, let's say if I want to create something like this button, how much time it took? It took me some time, right? But like let's say if I'm copy pasting this same and I'm asking our student like let's say Srinivas to create the same. Hey Srinivas, come on create the same here. What he will do, he'll try to copy paste it. But if, if this needs to be used for a website, okay, like let's say the responsiveness will be very different, right? If he has to use for a different screen size, if he has to use for a different kind of a. A tablet based application, what happens? The size, the responsiveness, everything will change program totally. Totally. It will change, right? So in order to use that, in order to create that consistency I will have to document clearly. If I am creating an element, what kind of a radius should I create? What kind of a color consistency I have to create? I have to use this kind of a color. Like let's say if I have to use this, I have to give this color code to him. Hey Srinivas uses FB6B 7E. That's a color code. That's RGB color code. Or A, or a CMYK color code. Whatever I wanted to give him, I will have to document it properly with him. The moment if I document it properly, what happens he will be able to replicate it. Let's say 260 into 77 is the call to action button. If I'm communicating him, okay, the the circle needs to be kept at 25 into 25, kept at X268 into 101. If he is able to design the same thing, he will be able to get the same element happening. Okay, so this can be documented in a sheet or this can be documented in a PPD or a document or anything. It doesn't matter guys. Okay, but who creates the design system? That was done by the designers initially at the start of the creation of the brand. Okay, this will help lot of people to do the same work. Same color, same what you call button. Same size, same element, same consistency. That's how you create a brand consistency across different different elements. Different different website or different, different mobile app or whatever. Okay, this is manually created by me. Let's take this one. Can you see here? See the beauty about design system is once you create it and add it in your library, you can just drag and drop it. Whatever elements you use, like let's say how much ever times you use in your system and all it is going to be still the same because it's all Created like a library.

Okay.

And when you download some materials from Google Material Design or any kind of IBM carbon design, what happens is these are all like well proven design. That means the radius, the consistency, the icons, the colors, everything has been well proven. Ideally as a fresher, what I would highly recommend for everybody is start using the design system which is already proven in Google Material Design and other systems. Don't try to reinvent something new. First try to use that. Like let's say if you wanted to use some kind of a buttons, you can use this. Like let's say I'll go for this button.

Okay.

I'll create this label.

See.

Let'S say if I want to add some kind of a text here.

Okay.

Takes a lot of time. It is better to always use design system consistently across all of your designs in order to communicate it seamlessly across your team. Okay, Just creating one kind of a small text, I have to reduce this text. Now like let's say if I'm putting a 10, I'm just putting some small example, guys, okay, I'm going to give a call to action for this.

Something like this, okay.

If I put rectangle, I'll get the option. I have to put it in the back. I'll use this.

Okay, created.

See, let's say in your one mobile application you are building something like this. Okay, you're building a small kind of a. Like let's say I'm just creating a small radius so that to make it consistent. See, in order to match this button or maybe in order to match this button, I will have to do a lot of rework. Like let's say this has a complete smooth radius. If I have to make a complete smooth radius, I have to create something like this. If I do like this, what happens? I don't have space to complete this or I will have some other problem. Right? So what I have to do, I'll have to play around with this internal element to find out what makes it very consistent. So let's say if I, if I, if I create it out of this, then if I create a separate element, maybe this looks little different language. Maybe the call to action can be kept separately. Because this I cannot change. This is a design system. This has been built by my company and I cannot have the option to change it. Okay, so what happens? Who's that? Ridu. Guys.

Okay.

Is there some naming happened? Okay, fine, fine. Guys, so what happens? The moment when you are creating this kind of a systems, this will be very easy for you to replicate it. If I don't have system. Then I'll have to play with this around to match this kind of a style.

Right? Okay.

I need to create a background with this color. Like let's say if I have to use this, maybe I'll use this.

Okay.

If I have to use this white color, then I'll try to use this white color.

Okay.

See now it is looking little, little same maybe what is this text size? This is a AG B3 label large. So they have already created a design system and they have named it.

Okay.

And in order to recreate that it takes a lot of time. So this is why I'm telling. It is very difficult for you to recreate everything. It is always better to build a design system and reuse it. Can you see just drag and drop. That's it. It comes. Let's say if you are building a screen, you want to use this kind of a settings here, you want to use the buttons here. Or maybe if you want to use some kind of a small C. If I have to use some kind of options here. It's all becoming very, very easy because it's all built internally for your team. The moment when you're not following design system, what happens is it becomes a hell of a lot of difficulty. And I'll tell you what extreme will happen. Your one team will be developing a product and the other team will be developing a product. And both of them will be looking very, very different. You will not have any kind of a consistency internally available for you. That is why design systems are very, very important. See, if you have the design system, you can able to build things very, very seamlessly and fastly. Okay, let's say this is your design system. This is your text, what you're keeping. So now this looks little similar to the design system what we are building. But it took a lot of time for me right to do it. So please understand that that is why it is very, very vital to understand creation of design system and documenting and communicating with your team is most, most vital.

Okay. Yes.

So I've already created some kind of a small interactions for you. But I would suggest you one thing guys. Use Figma libraries. Use this Google material Design. Use this IBM design system to create some kind of A5 design elements and try to replicate it, try to recreate it in your screens and try to document whatever changes you're making. Take your earlier project what you had and try to use some kind of a simple design system. Like let's say you can start with buttons, you can start with Basic text, everything has been put here. Can you see? When you take this kind of a text or say everything, you can read this. Segmented buttons help people to select options. See, you can even create more. Also let's say if you want to create three, you can create three. Also let's say if you want to create four, you can do it. You want to create a density like minus one. Yeah, that's good. If you want to create some kind of a dark, you can do that dark. See, they have already built the systems. Guys, you don't have to break your head. It's been used. So try to insert that. See, it has come simple, right? Put shift and try to hold it.

Look.

It'S been already created. So you don't have to break your head much. It's already created. But understand the intent behind why these people have created that. Then your job becomes very easy.

Okay?

This is how you as a designer or a product manager or a designer will try to help your team to understand and build the system and establish a communication strongly with your team. If you're not having this, what happens is your entire team will work very, very erratically. So some people will like this color. They will do it. Some people don't like this color. They will do it. Some people will tell, A.J. jagdish, I don't want this here, let me remove this. People will tell very, very different things. You cannot really have a control of what is really happening across your team. Like let's say a lot of people will tell, I needed this stroke. I needed this red stroke. I needed this black stroke. No, I needed to increase the weight to like let's say five. See, for some people it will be favorite. They will do it. For some people, they don't like it. For some people, they like minimum for personal opinions and choices. Doesn't matter. Systems and protocols matters. That is how people have built big, big products and brands and everything using this.

Okay?

And you'll have to have a regular audits to do that to make it happening.

Okay?

And you can use a lot of leverage of AI tools as well, like Tom. Tom is a very expensive tool. It is used by many industries. But ideally if your company has any tool for design system, please try to understand and use it. Many people has Atlassian design system. Many people has like let's say please make a note of it, okay? You can able to practice it later. Atlassian design systems, you can use Google Material design systems.

Okay.

You can use IBM car. In fact, IBM Carbon is a very, very wonderful System. My personal favorite is this because you will find everything with so much of detail. Okay, you can use Polaris design system. So there are a lot of design systems available. Start with something. These are all like free materials only you can able to use. See, I told you, right? You can able to download this very easily. Can you see the same here? I already showed you. See, it's already inside the moment. If you click it automatically, it will come to you and you can able to use it and it's all will be given. What is this? Who has built this? What is the meaning behind it? What is the purpose and intent behind using this? What is say. And also you can search for anything. Like let's say instead of going to this. Like let's say if you're. I'm going back. Okay, I'm just searching out something. Let's say if you wanted to use some kind of a design guides or a very specific animations or a very specific interaction, you can also try and found out this. Okay, you can go to this foundation interaction like let's say geishas. Read about it. Many people have invented lot more things inside it.

Okay.

Double tap. What is this tap? See, look at this tap option. People have created this interaction. What is this all about? You can just click here and you can just start reading about it. Double tap. What is mean by this? Double tap long press. See, when you're creating this kind of a small, small interaction for your project and in a consistent manner, this adds a great brand value and it becomes seamless across your product. See, lot of elements is there guys. Read whatever you want and you can able to find out some basic materials. Let's say you want to do. See, read this. Implement intuitive accessible layouts. Considering play around with this website, guys, I'm also pasting this website for you. You can able to use it.

Okay.

Please try to play around with this website because it takes a lot of time to understand what is happening and you can, you can get well along with this. And you can see all of the links and downloadable materials are available here. You just have to click it and it will automatically get downloaded.

Okay.

And you can read about each and every component. It's a very, very vast subject, guys. People have built it for different purpose and they've kept it as an open source so that lot of people can get benefit out of it.

Okay.

So your responsibility being a designer is to understand what you can use at what time to understand that. Okay, you can use these tools like let's say Figma Libraries you can use the zero height for documenting design system and creating live living style guides. And you can use Storybook for front end development. See guys, ideally I would say what is your company requirement is there? Please use it. Don't fall off for anything. Which is. Which is what? I'm just saying you.

Okay.

Because every company follows a design system, it's ideally good to accustomed there. Okay, what you can do, you can build a small design system with a color typographic color, a button inside your project. That is a small activity which I'll give you.

Okay.

So every time people are coming here, they're watching. But ultimately if you're not building and practicing, it will not become a part of you.

Okay?

So try to do it and also collaborate with some of your other peers and students to make sure both of you are building the same thing. Let us understand, like let's say if you're doing a collaborative project, you can try to exchange those elements and try to use it. So both of them will be building the same system at the end of the day.

Okay?

Yes guys. So thank you so much and subscribe to our podcast channel. We'll let you know if our webinar is happening. You can able to come and join there. And people who come new for the first time or watching in YouTube live listen to our podcast channel and check out our YouTube channel also. Because till December 31st we'll be doing every single day a particular skill.

Okay?

So thank you so much guys for this session and any doubts is there, please go and ask. Please ask me, I'll help you. Any doubts is there guys? I pasted my podcast channel as well. Ritu has joined new in this call. Who's this Ritu? Raj or R? I don't know. Okay, fine, fine. Just share your friends YouTube link. Guys, not the zoom call link. I understand your friends may come here but that's okay. Just share them because they can watch it in the YouTube first. If they are more interested, they can come and join our community later. Not a problem.

Okay?

Yes guys, thank you so much. Have a great day and just tomorrow remind me at 6:25, okay? Or else this call will end. Fine. Excellent guys. So I want everybody to type out like let's say what is your top takeaways in a learning management portal? Okay, I'm just creating a small post so that you guys can go and post it there.

Okay?

Yes, yes. Thank you guys. Go ahead, go ahead. Yes, yes guys, any doubts is there? I think ideally speaking in this class you should have lot of Doubts? Nobody's asking. Did you guys understand everything completely? Either that could be a possibility or you don't understand at all. Come on. Because this is not very easy. Initially when you start doing the design system it will take a lot of time for you to understand what is happening and how people are able to create a consistent layout across the thing. And it will take some time. Definitely it is like not a easy task and ideally when you do it you will get it. Yes guys post is being put and I'm also pinning the post. Kindly go and share your learnings Top three takeaways that will reflect your learning as well.

Okay, that's great.

Excellent. Shantilal I can see your post Shantila now only I saw. That's great.

Okay good good good.

Ashain, you are putting lot of PPTs and you're uploading. Don't do that.

Okay?

Just share that information whatever you want with the community.

Okay.

Just share with the community and don't put each and every slides and see I understand. You will get points when you share a lot of information. That doesn't mean you'll have to pour lot of slides with that people will get bogged away.

Okay?

Just only share the information. See look how Shanti Lala shared. How other people are also shared just one information which can able to help them.

Okay?

Not the entire ppd. You are going to take slides and then you're going to put it that. That. That will actually what you call that will keep lot of information overload.

Okay.

I hope you understand. Okay Great guys. Any other doubts is there? Or else we can end for the day how to build our own design system. See remove this word fast. Why do you need fast? Why can't you do slow? First try to understand what is design system. If you understood the class from the starting to end you would have understood first of all why design system is important and how to do it. I also told you how you can able to start Start using some basic colors, typeface, basic UI guides. Try to understand what is the difference between UI tokens, designs what you call UI guides as well as brand guidelines as well as style guide as well as design system. Then you start building small small elements. Go to this Google material design start with that. That's how you start. You can only build which is already available. First initially try to understand that. Then once you show me that jagdish I'm able to reuse this properly across my design what you call designs then you can start building it. See unless until you are a very big Company you have lot of knowledge in the interaction principles and psychological aspect and UX principles have been completely mastered. You cannot create a design system before that. Okay, don't think creating a design system is just putting some four buttons. No, it's a very deep study. You will have to study lot of screens and you will have to understand what is the color consistency, spacing, how you can make it WCAG guidelines aligned. Because your website and products is going to be used by a lot of people who are colorblind. A lot of people who are having accessibility problem. Lot of people who are having mobile and website has a different definition. So how do you make it common for all of these people? That's why company has a different extensive research team to do it. They only designed this kind of a sizes, elements and buttons. Even many big industries I would say guys, they're following design system from Atlassian, from Google, material from IBM. The reason being it takes a lot of time and efforts to build your own. You will have some time to build your own after two, three years in your career. Not at the start of the time. First start of the time I would say go to that website, whatever I pasted and read through all the materials. That is how you start copy paste in your figma screenshot and start playing around with it. That's enough for now. Once you go into the industry then if your company requires some kind of a new creation then you can do it. Fine. Mutu. Got it.

Okay, good.

Or ideally if you wanted to try something, you can experiment with that. You can try to put one design elements what I showed you and you can try to experiment with that and slowly you can play around that. That would be a great way to also experiment and play around with it. Okay, but don't get lost away in this. This is a very vast field. First try to work on your projects case study job and everything. This is a very extensive skill that can be learned over a lot of time. No problem at all. Okay, have a great day guys. We are coming to the end of this session. Any other doubts.

Go ahead.

Go ahead fast. Any other doubts how they're determining everything in beforehand for the cards? That is all being collected from the user research that is all collected from the information from the customers and they are using it based on that only. Okay, that's why I told you for doing an extensive research company spends a lot of time and effort and a team to collect those data. Once the data is available, then they will start creating a big hierarchy. Then they will start creating a system. Then they will start documenting it. Then that will go to a revision. Then that revision is confirmed. Then the design system will be implemented. Okay, don't jump to the layer on the top. First understand the basics. Being a designer, we will have to first understand we are solving a problem. We are trying to build it. Design system is a part of a bigger element in the company. Okay, once if you are understanding, see, nobody will ask you to build initially what you call, you start building the screen. That means it's a very, very small company. Like you are in a wrong company. Then they itself don't follow this kind of a design system. You should always ask a question. Sir, what design system are we following? Are we having our own or are we taking some open source?