P-5 Integrating Design Systems Live Figma Case Study & Practical Applications

Welcome to this day five. In this video we are going to see how to apply the design systems. Whatever we have already learned. In fact, I am going to show you like a case study from a figma file how you can import certain elements, which is already proven. We have seen about IBM case study, Google case study, Atlassian case study and also today we are going to see certain Airbnb case study. Also why it is very important to do that. I believe you would have watched the last video where you have understood and you created your own design system. Okay, if you have not done that, please watch the video and do that actively. Because there directly coming to here will not make any sense. Once if you have created certain design elements, design system or maybe two, three different colors, icons, grids, that's really, really good. Once if you have that clearly in place, then implementing will make a lot of sense because you need to know how to integrate the design system, which is what we are going to see. Okay, I'm going to take a case study of Airbnb where I'll be showing you how you can integrate that. And in your case you can integrate whatever you have got there. Okay, let's jump in. So we are going to see what is the real time implementation and integration. Okay, so just to recap, in the day one we saw about introduction of design system importance and why it is very important to implement tactically and learn certain case studies like Google, IBM, Atlassian and then we have seen how to create components and outer layouts using a simple, simple elements and then how you can scale it up for a big system. And then you started making your own design system. Now I wanted you to learn how to integrate it into your design systems in your projects, in your screens very easily. Okay, so in this particularly when you see integrating in the design system is very important because practically if you're not able to do that, you will not have the understanding of how the usability is happening in the real time. You may be intending to do something, but user will do it differently. That is why that consistency is very important. See, usability is very simple. How ease the access of using that particular application button or any interface. Whatever you're creating is called in a very broader level usability. There are very deep subjects around it, but this is what is important. Okay, so now whatever plan you created, you need to integrate it into a design system. Let's say if you've created colors, grids, composition, sizing, whatever, try to integrate it in real time implementation of any one of your screen.

Okay?

Mainly if you do it with a team, like one or two people collaborating in Figma files, that would be better. But in that case, if you're not able to do it, do it alone at least and share with me in this video, I'll be giving you a feedback. Okay, I assume that. And also in figjam and in Miro, in anything, you can create this kind of a collaboration tools and then you can give a live interaction and then you can implement all these things in real time. Where your team met will also be connected. You will also be collective connected. And you will seamlessly work together to build that design system and integrate it. Because this is how an industry also happens real time. It's not. You're going to work alone like a lone warrior. Okay, so this is the thing also I'm going to show you why Airbnb case study is very important. I'm going to show you my screen also and do it. It ensures the cohesiveness and it improves the high quality user experience. 35% improvement in design and development efficiency. See guys, I already been telling you. Design system will help you scale and efficiently work seamlessly across many devices, across developers, across different, different platforms. But if you know how to integrate it, only this will happen if you're not able to integrate it. If you're creating all the design systems and creating a big library, not knowing how to do it, it will create a big problem. Okay, that's what we are going to see now. And also you're going to analyze the Airbnb design system language also undo it in your case, you could take your project and real time do it. Okay, so let me make it clear for you. So this is how the Figma screen will look like, like when you open this particular Airbnb design system. So you will see there is an option to open in Figma. So all these resources can be easily downloaded and you can use it in your Figma file as well. Okay, I'm just opening another window where you can see. Yes, I hope you can able to see this.

Right.

So now what happens is people have already designed some design systems using a particular typeface, particular grid system, particular spacing. So I would say in your project, in your case study, you would have already established that very clearly. Okay, use that here in order to create more what you call screens and library around it. I'm just taking an example of Airbnb. But you could explore from IBM, you could explore from even what you call Google Library, or you can even take it from Atlassian design system. That's totally up to you. Okay, but the main point here in this video is how you can seamlessly integrate it and create multiple screens around it. Okay, like let's say if I open this is a cover page and you can see there are many options which this person has actually created for people to build this and use it in an open source.

Okay?

So you can see there are some buttons which is created and you could see there are a lot of colors which is already put in. So all of these options are already there. Like, you don't have to break your head much because in your case you would have already built a system like this. Okay, that's what I believe. You would have taken an action. If you have not done that, please go and watch the earlier videos, do that activity and come back here. Okay, so here you can see there is a pixels which is already defined and there is a section heading which has already been given. There is a body which has already been given. And you can see even the darker text, the lighter background, even the primary button. So everything has been well defined. And also the color code and also the ratio. See how perfectly it has been done. So I'm not going to go in much detail to do a complete application end to end. That takes huge time and which we can do. My point in this video is to make you understand why certain design systems are created and how it is used to create more scalable and efficient product over the time. Understand this particularly in detail. That's why I'm showing you certain case studies live. And also I'm asking you to go and download certain libraries which is available so that you can try it out first. And once you are able to have good clarity in your design system, your own creation, then you can seamlessly integrate it here. That's the whole point here. Okay, so, so now let's create a small screen to understand. And you can see there are some spacings which this person has given. You can see you can see 64 pixels he has created for larger screens, 48. For base it's 24, for small it's 16 pixels. So he has used 18 to 8 screens.

Okay.

And then he has given some icons as well, which is more what you call already established. And he has also put some icon for outlined icons, he has put for some filled colored icons. So he has pretty much established a basic system for creating some UI around it. Okay, like let's say if you're using some kind of an option to create a frame like this, okay, F is a Shortcut for it. You can create it. I'm just creating an example. So he said the darker background should be what you call the darker backgrounds. Could be little darker for this kind of a primary button, tertiary button and all. But you can, he can, he's saying for lighter background he can use a primary button in order to have a contrast. Okay, so color knowledge needs to be there before choosing all these things. But I'm just taking the system which has been already given. Okay, so we are using a lighter background now. So what we can do is for lighter background we can use the primary button, something like this. So he's saying, okay, outline could be something like this. I'll press R for this. Okay, let me go for darker background. Then it will be even more better. Okay, so let's go for the darker background. So I'll just pick the colors from here. This one. Okay, so here the darker, I've taken the darker border. But darker background, it could be something like this as well. No, I'll go exactly with that so that you can also understand better. Okay, I'll take this, what you call dark background. And then I'll go with this. Okay, so then I'll create a button here. We'll create a round here. So in that round, so I'm going to create a small radius, something like this. Or maybe I'll. I'll use one sided button, something like this. Okay, fine. So I've created some kind of a button like this. It could be even small, big, no problem. You can even take the ratio, whatever that guy has given. So this is how you create a very seamlessly consistent layout across different platforms.

Okay.

Because we are taking the color, we are taking the pixels, we are taking the exact. See when you, when you even go for the text size, you can see the section title could be 32 pixels. 36. Okay, so he has mentioned that as well. In fact, you could add a text like something like this. Yeah, something like. So you're creating a happy living out of here. Okay, you're just putting this as a heading. So this is a 32 pixel heading, whatever we have. So that means the screen is much smaller. See now because of the size what I've got, I'm just creating. And then I'm scaling down this much smaller because I came to know that this is exactly like this. Okay, so you can see a happy head living like that. I can able to bold it. I can, I can exactly take out an option. Something like this. This like this. Okay, so no, I wanted a full screen Layout. Like let's say if I want to create more radius seamlessly here as well. Okay, let me create it. So however you want, you can able to create it. So let's say if you wanted to add one icon to it. So you can pick one icon from here. I'm just taking whatever is available from here, guys. Okay, like let's say the primary button needs to be in this color and he has also given that particular color. Like let's say if, if there is a particular paragraph available here, I'm just copy pasting that. Okay, you can use alt for duplicating all the elements. I'm creating an application for people to live very happily and healthily. And this particular application is going to show you that. Click here to open and reveal the surprise. Okay, I just used Windows button and H option. Guys, you can able to dictate in your phone, no problem. Okay, you can enable voice speech typing. So here I'll just use this text. So for paragraphs, what this guy has mentioned, we'll see. Okay, so he's saying for headers for high importance I'll use 14 pixels. Or maybe I'll use a little higher high importance, I'll use 16 pixels. Okay, actually this section header let me use 23 pixels. Okay, so now it's much easier for me if I use 23 pixels. Let's see how much it is. 23 pixels, right? See now I'm creating a heading. Let's keep this aside. I'm creating a paragraph. See, even If I create 100 pages, I will have a much more consistent way of keeping this guy because I have exactly followed the method what this person has given. And don't worry if you're not able to copy, if you're not able to recreate it. Whenever you click this left side there'll be an option. Left side there'll be an icon. Sorry, the layers will be there. You can able to pick it from there.

Okay.

If you double click it. If you double click this one, See you can find the layer here. Just copy paste this. It's very easy to do a drag and drop or copy paste so that it's already been created like a component and auto layout, you can try it out.

Okay.

Yes, so here the option is available now you want to give some kind of a small option here. So people have given something like this and let's go for some other option. So this guy said primary button can be created with this color. So I'll give one more call to action something like this. Okay, I'LL create a very small frame so that I'll know exactly the what kind of a pixels this guy is looking for. Maybe something like this.

Yeah.

Okay, so happy living. So I'm just trying to rearrange and then see how it can be plug and played for me. Okay, I'm just putting a heading here, maybe in the center. Maybe I'll create a small text around it and people can able to take a call to action. So in order to make it more interesting. So what we'll do is we'll try to make it. I'll create something like this. I'll create a very sharp card, let's say. Okay, so here if I have to use a primary button. So I could even choose some color which has already been defined properly. See, this guy has said for darker backgrounds you could use primary button, something like this. Look, this is what is the system which has been designed. Okay, so now you can able to copy paste some of the headings. Like this is a, this is a call to action button.

Right.

So we'll have something like what you call the primary button could have this color code which we have already taken. Ratio is 4.79 is to 1. So that's up to you. You can maintain the same ratio so that you have to create a consistency. But here I'm not going that much detail. I'm just creating a basic button so that you can know how to integrate that into your design systems very seamlessly. Okay, I'm just taking this heading again if you want to. What do you call open? Okay, I'm just creating this so that people can be open. So instead of just giving open, I'll have to even prompt the user. Hey, how you can able to really create this, what you call open button and everything? Okay, as you can see, I'm moving this button. There is a pixels available here. There is a size available here. Please insert the pixel size and the ratio, whatever has been given so that you will exactly bring it here. Okay, so you can, you can, you can do that. Very, very detaily. When you're building a screen from scratch to scratch, I'm just giving you a fair exam idea. Now you're creating a curiosity for people to come and open it. So our primary button could have something like this, but instead of only saying this, I'll also keep an icon in order to make the actions more clear, make the decision making more precise and clear. Okay, see guys, when I'm moving this, you can see the cursor moving and then the size is also changing.

Right.

So you can able to changes easily using whatever option the pixels what the design system has said and you can able to replicate it. Okay, you can have. And you could have something like this as well.

Okay.

And then you could use what are the. What are the size inside that they have given. So you could go back and see. Like let's say I could go to the typeface and then I can see regular. I can see 14 I can take. Okay, so no, the button could be 14. I would just replicate that same and then I would keep us 14 as well.

Okay. Okay.

So then I'll have to create a button very very what you call precisely accordingly so that I can able to use this particular action carefully. I'll bold it. Okay, See now it makes a sense. Now it's creating a good consistent layout. How it can be what you call done. I'll do it. So in order to add more what you call more option, like let's say I wanted to make the user really go through this particularly and I'll also reduce this so that in order to match that. Because in my design system it has been given like I could also use 14 for doing this. So I'll move this things properly so that I can able to create it.

Right.

So this looks little what you call close. See guys, see how I'm changing the sizes based on the design system now whatever. I assume there's a frame size has got reduced, right? This is what happens when you are in your own. Like let's say for you the big may be different. For the other person the big may be small.

Right.

So you even I could say this is a small remote for somebody, for a kid it could look like a big remote. So the reference comes only with the detailing in the dimension. That is why design systems are very important. See how my screen was earlier and how it has exactly become. So now this is what is going to happen. Like let's say if it's a screen, something like this, even the screen could be even smaller. Ideally speaking, if this is the call to action button and the this could be even smaller. Ideally speaking, this is how it will be. Okay, so you can have your user also coming up here. So what happens like let's say in order to make it open. Let me go go now and check it out. What is the icons available for open? Okay, like let's say I could see something like check and double click it and just copy this 24 by 24 or you can even recreate it. That's okay. But the grid system and all these things could be maintained properly. Okay, I can copy paste here. So here it has come. That will change the color actually in a different color. It's in a black color. Let's change it to white. Oh my God. The background got changed. Okay, just a second. Now I'll not fill this. I'll take a color out. I don't need this multiple color. Okay. I'll just need a black. So I'll just open the strike and then I'll put a white color. Strike is also coming this way. So is the low available in the design system? Let's see. Maybe for the disabled icons. Okay. For disabled only the gray was there. So the primary buttons could have the darker backgrounds, could have the darker borders, could have little tertiary. That's okay. But for the darker background, since we are using primary button. So inside there was no design system mentioned here. So what we could do is we could find which is contrasting for us.

Okay.

I believe white works really good for us. So I can, I can even take white. Okay, Regular white. But if the design system is clearly mentioned, please follow that very carefully. Okay, so I'm just using the option press shift so that the proposition will not change properly. Okay, you can see something like open. Maybe it's not very relevant here, this particular icon. But I'm adding because the user can able to easily what you call take it. Yes. So I could use something like this button.

Okay.

If it is not prompting me like maybe I can able to rearrange this here. Okay, I can able to put the open option here. If you wanted to do it in a more structured way, you can do like an auto layouting as well. Okay, so you can just select this. You can just select this guy and you can select this and then you can press shift A. That means it will fit in auto layout. The beauty of auto layout is the moment when you change it. Like let's say if you wanted to bring this guy this way, you will be guided automatically. Look, let's say if you wanted to bring this open into this side, that could be very easily arranged. Double click it and just move it down.

See.

So what happens is when you're designing responsive screens, this will be much useful. Let's say if you want to create it like a component, you can just select it and then you can press right. And then you can create component the moment when you create it like a component. Like let's say if you're building one more screen like this for now I'll just keep it like this. I'LL take one more icon. Maybe that would be also better. I believe. So you could take one more icon, something like this. Like let's say I'll take maybe Google login, that would be better. Okay, I'll just copy this and then I'll come back here and I'll try to plug it in here in my screen.

Okay.

Because it may seem like a Google login.

Okay.

This would be fine. So already this person has created like a component. In fact if you drag and drop it or if you click it, it will be replicated on all of your screens. This is the beauty of design system to have component like this. Okay, so this is your screen. So now what happens is when I'm screening this, when I'm able to create more screen like let's say if I have to make some change here.

Yeah.

I want to create something like make sure this is all repeated as a particular auto layer because it's not connected. That's why even if I'm changing, it's not coming. Let's go back, let's see why it is not coming. Because sometimes what happens is you will not be able to link it properly. See, I'll just go back to the exact screen. Okay, so here, here is what it happened. So now I'll just go control J. So now we'll have to create it like a component then and only if you're making this in two or three places or maybe in multiple places.

Okay.

You could have a much more clarity on how the changes is being replicated.

Okay.

Because or else there is no point in having design system on its own. You can create create component. Could not create components from non matching selection. So there is some issue which is happening for selection. Okay, that's fine. We are not going much detail. What we'll do is, we'll do for which is available with us right now. This is available. This is available. You can see create component. This has been created component.

Okay.

Because if you have a consistent layouting, if you have a consistent icon and if you have a consistent way of spacing, what happens is component works or else if you're creating component and then you are replicating again and again what happens is the, the options will go here and there. That's why Figma itself suggests you that the lawn the component is not created properly because it will, it will split spoil your screen when you are creating and replicating it more. Okay, like let's say if you are building this into another screen, you can press alt to create a new screen like let's say you want to create healthy living. See, now it's been replicated. Okay, see, because this is not complicated. This is. This is a simple heading and we have created as a component and then this has actually taken like let's say if, if you wanted to add more icon, more element here, you want to add one text here. Okay, I'll just form a new. Let me see in the design system, what has been given so that I can follow this. Okay, for the buttons, for the regular link. Okay, for the link they are saying 16 pixel is good. This is going to be a link. When you're pressing login, it has to go for the link. So. So I'll create 16 pixels for here. Okay, so you could, you can make it normal text. It creates something like this.

Okay.

Then you could create something like center align so that it will be better. So this is like a hyperlink. Hyperlink means you can create something like this. Underline so that it becomes like this. So the moment if I am creating like, let's say in this screen, it is not there. Assume. Okay, it is also not there. Maybe the screen itself is not there. Let's see. Okay, now I will show you how the component creation works. If you select this and then if you create component. So now the component has been created earlier, why it has not happened? It's because of the inconsistent placement of the icons in the text. So Figma itself suggests you that don't do that. Auto layouting is not possible. There is an error message which came. You see that? So now it's been created because we have layouted it properly and then we are replicating. Okay, so now I'll press alt. See, now the screen is getting replicated. Okay, now let's say if I have to create login here, I have to create sign up instead of login. See, this is also created as a sign up. See, whatever you are making changes. Like let's say if you build 200 screens for this particular Healthy Living app or something like this, what happens? You will be literally having so much of what you call work to be done for each and every screen to be replicated. So this is the power of having design system. This is the power of having components. This is the power of having libraries which is already built with you. If you're not able to create that, let me tell you what happens. You will spend endlessly, a lot of time and you will create something very different. What your customer is expecting, what your client is expecting, what your team is expecting, you'll Be making different component, different layout, different kind of systems which is not totally aligned. End of the day, if you take two options, two application, two pages, it will look very different spacing, it will look very different icon, it will look very different type of text, it will look very different type of colors. That is why we are using design system to make it all even to make it all consistent in order to make it scalable. If you are really liking this, comment me. What did you learn in this video? Comment me. What did you really work and create? See, I just shown you. For creating some buttons, I just shown you. For creating some small icons, I just showed you some auto layouting. How we can move here and there. How you can. How you. How you don't have to create a component because the mistake happens. How you can create a seamless components so that it can be replicated in multiple screens using highlights, text and buttons. So you could use even more. You could ease even for elevation, you could use even for even spacing, gridding, composition, everything can be layouted. Because creating design systems will take time. But scaling and implementing will take very lesser time. In order to make hundred screens, 200 screens, time won't be a problem. Okay, it's like same manufacturing. If you make the tools properly, then making the component is easy. But in order to make the tool, first you need to have a system discipline creation component. So that's what exactly I can able to relate it to design systems. Okay, so wait for the next video. We will be using certain AI tools to also speed up this process and make it even more sweeter. Okay, I hope you would have watched all these videos and taken action. If you're doing that, then only the next video is going to make sense. Or else please go back and do it again. Okay, take care.