Design Systems - Revamping Products for Consistent UIs

Hello, I'm Talia Mirza from Pakistan. I work as a software engineer at Karim. My most of the experience revolves around solving complex UI problems and improving front-end.

This is about P and we are going to talk about design systems in this talk. You must have heard about a few popular design systems like Material, Tailwind, Bootstrap or maybe some others. Over the last decade it has been seen that design has become a crucial part of product development and companies are investing heavily in improving user interfaces and user experiences of their products.

Let's quickly see what is the focus of my talk. So this talk is about learning how the design system is going to be another step towards improvement in design and development of products at the moment and how it enables how it enables the consistency among the products. So we will explore the core components of the design system along with the key benefits and challenges while building the design system. In the end, we will also briefly discuss do you need a design system for your products or not.

Before exploring the core components, let's start from the beginning. You have to imagine a door from your dream house. So imagine a door it may be like this in your mind or maybe this or maybe this or maybe none of them because we all think in different ways through different perspectives. Similarly when we talk about design for our products maybe for our component let's say button. We will all have a different image in mind, right? So that leads to inconsistent user interfaces. So to build use user interfaces that are consistent consistent across all your products. We need a system for design. So if you have a couple of products underneath a brand you can have a design system for your company. So for example, you have a website for your business. You have a marketing site. You have a documentation site or maybe more of the products. You can all of them should have consistency in design for a design system to build. So let's see how we can build a design system which can create consistency across all the products.

So there are three core components of design system. These are design language component laboratory and style guide. Let's see them in order. So the first thing is design language. It is the first component that needs to be created in order to create a design system. This is the set of standards which guide the creation of a suite of products underneath a brand. So these are the kind of rules or principles for the foundation of design system.

This can include a typography color, accessibility, grade, motion icons, overall, the identity for our product. So we need to select what types we will be using in our product, what will be the valid sizes for fonts, what are the chances of our brand colors as primary or secondary color or maybe tertiary. We need to fix the grades and spacing options standards for accessibility, motion and icons for the products. This is what we will refer as design language.

After that we need to code those components that needs to be consistent across the product. So component library is a library of a stand-alone components which turns a design language into building blocks of the application. So we need to create reusable components for the product. We all know that in this modern era, when we talk about print and design, we don't create whole webpages at once. So we divide the user interfaces into components that enables us to use those components and work faster. We can use any of the frontend libraries or a framework, but for the context of this talk, we will be using React examples. You can also create your design system in vanilla JS as well.

So we will be seeing a single component and how we can create multiple variants along maintaining the consistency. So we know in React the concept of props, right? So we are going to see how props can help us in creating multiple variants from the single component. So let's create a component for a button. You all know how to create a button component, but what props we will be having. So for a default button like this, we must have some required props like label and OnClick that will be handling our button functionality. So this will be our default button. I'm not going into the on implementing the button, but what we can do, we can see in this examples. So with by default button up, when we add a single prop called icon, we can have that icon option prop optional, like an optional prop icon and we can add a icon in our button through this prop. We can also have a prop like type, which can help us in creating primary or secondary type according to our design language colors. By adding a size prop, we can create some fixed sizes of our buttons like a small, medium, and large. With theme prop, we can enable our component to respond according to the theme. So this is the way we can add another prop. And so these can be props or buttons through which we can create multiple variants. You see how we are creating variants. We have the flexibility, but we are consistent for all the products. In this way, we can have consistency of design and also flexibility to adapt changes through our variants from a single component. In design system, we build all components in the similar way.

The third thing is documentation for our design language and the component library. So you must have seen multiple design systems documentation, so it has all required information about the components, variants, and give us the ability to use them efficiently.

So we build our style guide in the similar way. You can see an example of linked component in the primary design system. You can see here, the component props, what are their ties, what are their defaults, and what values it can expect. So this is the way we can create our style guide of our design system, and we can also add the technology stack we have used, that is optional.

So let's conclude now. Design systems enable us, what benefits. So these are the benefits we can have while building the design system. First of all, the brand identity, consistency across the products, flexibility to adapt to changes through our variants, responsiveness throughout all the devices, accessibility standards. We can increase development speed, we can have a single source of growth, so maintenance is easy, it's ever evolving, so we can respond to the changes over the time through our variants, less time in onboarding new employees, so you have this style guide, you can easily see how can use a single component and we can also add the code examples as well.

So, now comes to the challenges of building design system. Building design system is time-consuming, you cannot build it one time and use it forever. It's a living thing that keep evolving, so it needs commitment and dedication of the team and stakeholders. A design system is not a project, it's a product that serves multiple products, so it demands that the same commitment you have for your products. The main challenge is not building but scaling. So, we need collaboration between engineers, designers and product owners to refine it in an iterative manner with a positive attitude towards feedback so it can evolve over time. Design systems may take time in becoming stable in the initial phase. It may take up to weeks, months or maybe years for complex products, but when it is built it will be useful for our organization.

So, the main goal of design system is to increase the speed of development while preserving the consistency across the board. Companies are often struggling to scale and maintain their digital products in a fast and consistent manner especially large companies with many employees and teams. So, a design system value is realized when products features rapidly using parts from those systems. So, in those scenarios, design systems become crucial component that includes the developing of their mission. So, unfortunately not all the companies see it that way. In many cases, the investment required in order to create such a product that is often labeled as a waste of time and money but thanks to a growing competitive space in almost all industries that the mentality is rapidly changed forced by a desire of still being in the game among the giants.