Ep 239| P-3 Building UI Components for Design systems

Welcome to this day three. In this particular video, you're going to learn how to create certain UI components, how you can create certain elements, how you can build your library in order to scale it up faster. You've been learning design system in the day one. Day two, the video one. Video two. So this is going to be an implementation. You can able to see some of the elements, how we are building it and how we are scaling it up.

Okay.

And also I'm going to explain you what's the difference between building a system, building a design system, building a brand guidelines, building a theme, building a style guide, building a component. These five terminologies may seem very similar, but in this video I'm going to break it. Why it is very different and how it can be done. Okay, let's jump in. So when you take, when you recollect quickly, like this is what we saw in the day one, which is the introduction for design system. Second, we saw about importance and then we saw about IBM case study and then we have started implementing in real time how it can be copied and extracted from there since it's open source.

Okay.

So day three is very interesting, which is called components of design system. What are the components which you can see, see, there are many components available.

Okay.

You can just find an understanding. Like let's say there could be many key components, typefaces and you can have color palettes, you can have UI components, you can have design patterns. Everything is actually a part of components.

Okay.

And you can create a lot of what you call key components and try it out. Let me give you a background of it.

Okay.

So I'm going to share my screen. I think you can see the screen, right? Yeah. So I'm just going to create a basic frame using figma software.

Okay.

You can do it in what you call, you can do it in Adobe xt, you can do it in Sketch. That's totally fine.

Okay.

And if I'm pressing R so that I can get a, I can create a rectangle out of it and then I can able to now create the radius. Or if you want to create one side radius, that's up to you. You create however button you want and then you can change this color to like, let's say blue maybe this is fine.

Okay.

I'm going to create a call to action button. So now I'm going to create a text around it. So I'm just pasting the word T so that I can able to create some text.

Okay.

Something like click. I'm going to create A click button. Something like this.

Okay.

I'll just reduce this to little lower.

Okay.

I'm just creating so and then I'm trying to take some elements from icons. Let's say if I wanted to add some icons here.

Okay.

Maybe whatever is very relevant to the click. You can use noun project, you can use icon scout, you can use icons 8. So everything is actually available in the online. You can able to find it whichever is comfortable for you. Okay, so I'll find a suitable icon. Something like this is okay for me. Okay, I'm just pasting this. Maybe it got little what you call zoomed out. Yep. So let me make it a little bigger. Okay, so now this becomes one action point for you. This becomes one UI element for you.

Okay.

Or maybe you can able to tell. Okay, this is one system Jagdish. What I'm going to build it on all of my screens. What you can do with this, you can just drag select all this and then you can press your right click and then you can go and add something like a create component.

Okay.

The beauty of this is this will now become as a component and it will add to your layers. You can create something like click.

Okay.

And there is a way also to understand if there is four dots. If you can see here, this is actually a sign of showing it's a component.

Okay.

See how the beauty is like let's say if you're building more screens like this.

Okay.

Let's say if you're building, you can press alt and you can duplicate this screen. No problem.

Okay.

How much ever skins you want, you can able to create it using figma.

Okay.

And you can create third screen. So now the beauty is. See this is the main component element, right? If I'm double clicking this, if I'm changing this component here, it will automatically change in all the three wonderful. Right? So if I'm able to change these icons here, then it will all move here. Because I have selected as a one component and if I make a change in that main library, it will get populated over there. Let's say if you're building 200 screens, you want to change it. Do you think it's possible to go and work on 200 screens? This is the fastest way to do. You can add it even more simpler. Select all and add to auto layout. Let's say if you're creating an auto layout now, you can even move this guy in a different video, double click it and move this guy in opposite. See, look how it happened. Let's say your brand Guideline is saying, hey, all the icons should be placed in the right hand side. Hey, no. All this button should be what you call all this click should be coming here. Hey, no, no, no, no. This particular click has to come down, the size has to change. No problem. You can do any change. You can make any, any component movable and adjustable. You can resize everything. It automatically gets populated in all of the 200 screens. Whatever you're making. This is the understanding of how a particular component can be played inside figma. How a component can be played using an Adobe xd. In Adobe XD also it's pretty much the same. Okay, so now let's come back to this. By using this kind of a simple idea, using component and using auto layout, you can able to scale multiple design systems, multiple UI components across your screen. Okay, I'm not coming to the design system yet. I'm just explaining you how to create certain UI elements. Okay, and then what is the reason for creating this kind of things? This will create a very consistent component and it will create a very good learning pattern for the user to learn quickly because they will not get confused or much further because everything is same replication, right. See, it's impossible to create the same kind of a button size, same kind of icon, same kind of a spacing for all of your 200 screens and thousand pages or whatever you have in your website. But it's much easier to work on this kind of a component. This will get replicated to all. You can open something called a Atlassian Design System. This is a beautiful library which I can say you can able to open this. I'm just opening the screen. You can find. Atlassian Design system is actually a place where you can find a lot of brand elements and you can find a lot of foundational materials. In fact, you can go to the components, you can find whatever is comfortable for you. Let's say if you want to use drop down menu, okay, you can go and understand what are the kind of drop down menus, what they have and you can even copy this. This is again open source, you can able to use it and if you want you can able to understand certain foundations also using these principles. Why elevation is important, why grid spacing is important. I think we saw it in the first case study also in Google Material Design and IBM. So spacing, let's say the consistent and intentional use of the spacing system creates more harmonious express experience for the end user. The spacing system also lays a foundation for responsive design. See, they're talking about spacing 8 pixel base unit. This is one of the concept also in 8 pixel based units. Very beautiful concept. Okay, you can scale that, you can create some kind of a tokens and look at the spacing, how it is in the multiples of feet. So this becomes more consistent when you create multiple screens. See, building one dashboard, one screen is not called design system.

Okay?

If you're building it for multiple screens for your one project that time only this kind of auto layout, this components, this, this scaling of the systems comes in picture. Okay, so now let's get back why we are doing all these things. Guys, let us first understand, okay, you can first make sure your consistency in UI is maintained. This will increase the design consistency by 40 percentage. 30% of your repetitive task get reduced even for the designer, even for the developer. It gets reduced even for the component, even for the people who are using this application, they'll find it more quicker. They'll find it, they'll learn it very faster. So this is the best advantage of having a design system, guys. Okay, see, having a component is maybe inside your project. Having a design system is a big okay. For a design system to be done, you need to have a documentation, you need to have a proper details, you need to have a dimensions, you need to have lot of detailed elements in order to create a design system. For creating a component, you don't need that much. You're just moving certain elements inside your one project, one file which is called figma files or Adobe XT files or anything. But design systems is creating more style guides like that, creating more brand guidelines like that, creating more themes around it. Design system is much bigger, components is much smaller. Okay, you can tell like that based on that. Design systems only you can able to control certain versions of your product. You can even control version one, version two. You can give back and forth options so that user can able to come back to the version one, version two and still they can have an understanding of all the features available over there. That seamless integration will only happen when you have the control over your product. If your company is really big, big industry, big products and service, they have multiple line across. Without design system you can't have. Okay, you can do one activity case. Go to Atlassian design system and try to find out certain elements which is useful for you and build at least 10 screens in your Figma, Adobe XT or Sketcher, whatever even you can just draw in your paper and show me. That's okay, fine. But whatever you learned from that website, please register your learning. Make sure you pin that in this text box which is given in this video. I will read all of your comments, I will read all of your work. I'll give you personalized feedback. I'll not leave even one. Okay, I wanted you to take this action because if you're just learning and going, nothing is going to happen. Because if you're taking action, only you will know the real intricacies of creating that button, creating that component, you will know what how to create. You will not know how to create an auto layout. So all these options, you will also figure it out and then you will come to a conclusion. Okay, so create a basic library of UI component. That's the activity I wanted to give you. And then do a proper documentation for it. See the moment when you're creating a documentation that becomes a design system. If you're not creating a documentation only for one project, you are moving components here and there. That's called component and auto layouting, that's only for local files. Design system is much bigger. I hope now both are very clear for you. Okay, using design system you. You can create multiple components, multiple brand guidelines, multiple themes, multiple style guides. But other way is not possible. Please be very clear on it.

Okay.

And then you can just put why you have designed some components. You can add some justification behind it. You can put the dimension, spacing details, color code, all these things as a detailed documentation. Once you get able to do this detailed documentation, that becomes a proper design system. Okay, I hope this assignment is very clear and definitely I'll review and give you a feedback.

Okay? Okay.

So this particular day three we saw about the difference between various components and why it is very, very vital in order to scale up your multiple design systems. Inside your product, inside your service, inside your app, inside your web space and everything. Tomorrow we are going to have a very interesting topic. Okay, let's see in the next video.