Day 29 - Building a Design System from Scratch

Foreign. The heart circulatory system of your product. How it flows, the data, the network, the systems that makes the product live and scalable. In this week we are going to see about the design and the UX system with respect to cardiovascular system in our body. In the last week we saw about endocrine system. We understood the hormones, change, interaction, habit, ethical, loop, dopamine, everything. In this week we are going to see more about system design, scalability, creating flows and experience. Okay, in this video I'm going to be talking about day 29 of design systems and how the heartbeat of the products are designed. See, companies with the mature design system releases up to 2.5x faster products and reduces UI bugs by up to 40%. If your product is living without a central heartbeat, you are definitely bleeding a lot. Your time is getting more and your dollars and money, what you're spending is really high. In this video we are going to see what is mean by this design system. What are the background and why it is matters and how we can able to have a better scalability in your work. Welcome guys. Welcome to this video. I'm super happy to record this human body system. Last week we saw about endocrine. It was very, very interesting. We saw about how it can be exactly brought this particular context into the user experience and user interface design. This week we are going to see about cardiovascular system. We're going to see design system scalability, circulation network, UX and API for designers under the redundancy and reliability and system check. Okay, so now we will see about what is exactly this design system all about. Design system is something like a heartbeat of a product. I would say many times to my students, it's a DNA of the product. Using the DNA we can able to create anything same like me. But if you're not able to create a design system for your product, you won't be able to replicate it across your multiple teams, across different countries. When you're developing a product version one and two, this is good for having a better version control for your developers, for your designers. It's like a central engine that creates the power and flow across multiple interfaces. What you're designing. Let's say if you want to build a scalable systems, if you want to build a multiple websites, if you need a consistency and speed, you need to build design systems system. This is like an organ of your body. As simple as that, right? Second, the reason why it has been like a system is it is actually rooted in the UI libraries and components reusage inside the Figma in in the week two and three also we've been seeing many design systems so that exactly what it is there. So design system maturity model is very, very important. Like let's say the more and more your company is able to mature a design system and you're able to follow the design system across the product which is used in the market for Google Material design system, Atlassian design system like let's say Airbnb, IBM design system. You have a better clarity towards building your component in a more scalable way, building your solutions and systems and interface in a more scalable way. Okay, so later research found that this is a holistic maturity beyond tokens, right? Design tokens is available inside figma. But having a system clarity and building the tokens based on this will build you a super high quality in your maturity of your product. So this shifts from one product style gets into enterprise system. If you're building a bigger, bigger company and that thing designers now must think about system not exactly to build one screen and leave it. Of course, I told you this is speed to market product. This is to create reusable system. This creates a brand consistency, build trust for the user. Because everybody has to find that is your website, your mobile application, your landing page. They should not feel it's different, right? So that that kind of a seamlessness will be there. It saves a lot of cost and duplication and few bugger bugs and everything. Okay. In fact it can support even multi product ecosystem. If you're building like let's say tomorrow you're building application, tomorrow you want to build physical product. All these things is applicable. So what are the five core elements of design system tokens? Let's say if you're building colors, spacing, typography tokens are very important to generate inside a design system. How do you design a design system with a proper token? I will show you a simple example how we can able to build it properly. Hey, can you build me a design system in order to create a financial application for feeding my figma with a proper design token system with respect to a financial banking application with blue as a colors and trust building factors. Could you please provide me See, I wanted you to use PayPal as a benchmark system and provide me a design system. See now there is an option inside figma where you can able to use even the connectors called. Enter. See now it will exactly produce the output for me with respect to figma. See here I can able to go and run that particular tokens inside Figma and see can all of you see. Figma is being integrated inside and here in Chat GPT you can also go and personalize your setup by giving a proper connector. Like let's say Figma. Can all of you see here I've connected this. If you're also connecting this, you will also get exactly the output like how you wanted it in the figma, right? Like let's say if you open this. Okay, can all of you see this has exactly created one particular flow and you can develop it from here. Design tokens, color palettes, typography, spacing, radius, trust improvement factors, component library, what are the buttons, cards, navigation, system trust cues. You guys can able to find it out exactly inside your screen. Can all of you see here, this is a design token. This is a primary color, this is a secondary color. This is a blue color. This is a trust building elements for your banking app. See, it has given me a proper map towards building the system. If I give this one map to my designer or a developer, he'll be able to build 100 fintech products for me. This is the power of having system. Can all of you see it has even taken the figjam output. From here you can get into Figma and start populating this. You can even generate these tokens and copy paste it into basic Figma files so that you can start building a solution around it. Can all of you see there's actually not an editable file. Let's say if you're building right now, I don't have the plan, but you guys can also try using this. Okay, I don't have anything. Untitled. Okay, let's see this. Yeah, I'm just deleting this part. Okay, like let's say if you go to your assets you can download anything like let's say action sheet or something. Imagine. Okay, I'm just creating this particular thing and here I can able to build even a proper thing inside figma and there is an option called Manage plugin. Okay, you can import this particular thing called tokens. Token Studio. Okay, so the beauty about this particular token is Token Studio is you can go and give the systems whatever you want. Like let's say what are the space, what are the color? You can able to just add it here you can able to add anything. Like let's say sample design token. Okay, in this particular token you can go and add any color you want. Like let's say you can go and see that particular file. See you can go and see what are this particular color you got, Right? This is available. Can all of you see here, Accent blue, right, can be used as a trust score for my user, for my user. And you can create it. That's it. Like this, you can add your radius, you can add your width, you can add your opacity and you can even apply to the selections what you have. That's it. If you just exactly apply to the selection what you're created, it will all change to that particular it is right now I'm not giving you all the details, but you guys can add any details you want. Like let's say space, like let's say if you want to add colors, like let's say I've created this particular color, right, you can also change this. Like let's say if you want to edit it, if you want to double click it, you can go and edit each and every sizing. If you want to add more sizing, if you want to add more spacing, if you want to add more radius and just apply to this selection, you will see all of these things particularly changing here. Right now I don't have much details, but you guys can able to add it over here. So the point is the beauty about Figma is when you have a tokens and then when you apply it properly with the exact elements, whatever you want, wherever you're going and applying the selection for hundreds of screens or 10 or 20 of screens, you will get this completely populated. You don't have to manually go resize this particular radius, you don't have to go and click this double click and you can make the radius change not required. That is the beauty about creating tokens which is in a more scalable and simple way. See, even you can able to export your variables and you can able to import your styles also so that you guys can exactly populate it. Whatever you are importing, it will come here sample or 1 or 2 or 3. And in fact there are many AI tools to also generate it. But you need a pro version to do it, right. So you can do it for numbers, others text, dimensions, assets. So try with basically spacing colors and radiuses that will be really better for you to understand it in an even more better way. Right? So this is an option inside plugin called Token Studio for Figma. You guys can try it out. Are all of you clear? So I will go back to the mind map. Okay, I'll go back to the mind map. Where is the mind map? Oh yeah. So you guys can able to use tokens similarly you can use components, button cards, you can even document this entire work in a proper way so that the person who's next to it can do it. You can have a better version control, you can have a release, you can have a complete release of this entire version and make the other team also exactly follow this. You can have a strategy for adoption like let's say if you have a button, if you have a particular measurement, you guys can able to keep that button measurement and keep it in the design system as a token value. Like let's say the button dimension is this, the radius is this. The other person can able to easily apply this variable for his own screens whatever he's building. You don't have to tell this, you do that, you do. The button is not designed. This is the power of having a recipe for your cooking item. This is the power of having recipe for your product. This is the power of having a recipe for your design tokens inside figma so that the other person can able to replicate it easily and apply it for all of these things. Even if he's using free version. You can use I don't have the premium version or else I would have given you a lot more like let's say AI generation and you can even copy paste it from chat GPT and you can able to import it even more complex options to do it. That is possible, right? So what I would like you to see is take any one global e commerce application and understand a design system from it. Release frequency after rollout, release frequency doubled, development handover times half. See this is a case study which has happened. But you can able to see all of the e commerce platforms available in the world like let's say Amazon and all this big platforms. They will have a proper design system built. Why? Because they were able to scale up all the system because they have a proper design system. You take Amazon Prime, Amazon website, all these things will have a proper call to action and same system. That is why they can able to build products overnight. Designers moved from full screen built to templated proofs results. The UI coherence is much better to have multiple other products. So what I would like you to see is go to any e commerce website and see how these people are building a design system. Compare it with Google Material design system, right? Compare with Atlassian design system. Compare with IBM Carbon design system. This will be very much easy for you if you're building this thing right. So understand this particular case study and try using any one particular application and decipher it. The common mistakes what designers do is they only take care of the visuals. They don't understand the thinking and the process and the system behind it. There is no governance completely drift in adoption. There is they ignore the development feedback and they don't use components at all because to order to replicate it sometimes they over engineer it for a very small time of small team which will waste a lot of their resources treating system as one off project not living exactly the product because many people don't consider system as a property living being in your project you just take care of one more burden. That is why all these designers don't take care of this. So what I would like you to see is audit one of your current design of your project or you can take this e commerce design what I said you in the case study and try to understand the design system behind it and ask me what is the heartbeat of my product and DM me heart so that I'll be able to send you the design system audit kit so that you can able to create a wonderful design system for your own project as well. Click the link below to attend my four hours Designverse workshop to also learn how to put this design system into job application process in order to start getting 3x salary from it. It's not about design system, it's about how do you use the design system in your portfolio to start applying for the right job to get the right CTC for you. Come to my workshop to learn more about that part. Tomorrow we will be seeing something called scalability so that you will understand how the cardiovascular system of UX is very much important for building a more scalable product as wellfit. See you in the next video.