UI Kit vs Design System: which tool to choose?
Client: We would like to implement a design system for the creation of our mobile app.
Me: Hmm, okay. Are you referring to a design system or a UI kit?
Do you know the difference between the two?
Client: Uh, no.
Me: Okay, let me explain…
This is usually the kind of conversation I have with my clients. People often confuse these two terms.
And you, do you know the difference between a UI kit and a design system?
Let’s start with some vocabulary…
As I explained to you when setting up a UI kit, it’s like a toolbox for designers and development teams. It’s a tool that is built and evolves throughout the project. In my view, it’s essential in the creation of a digital product.
It includes all the graphic components that the designer uses to build the various screens of an interface. You can find things like navigation, cards, buttons, the color palette, and different typography used.
It helps standardize and harmonize the design of a mobile app or a website. It also ensures graphic consistency between the mobile app and its promotional landing page, for example.
Typically, the UI kit is presented as an Adobe XD or Figma file.
The design system, on the other hand, goes further.
It includes all the graphic elements needed to build the various interfaces of a software. Each component is designed and then coded. In addition, it provides documentation (also called guidelines) on the usage of the different components, typography, colors, and page templates… Moreover, it is also an evolving tool.
It is typically presented as a website accessible either to the public or exclusively to the company’s teams. So, designers have access to the files containing the components, and developers retrieve the component code. This streamlines and optimizes the work and communication among all stakeholders.
When your product is mature, it’s beneficial to implement a design system. Indeed, it doesn’t make much sense to create a design system for the version 1 of a mobile app. When you have several products (web app, mobile app, website, etc.), implementing a design system helps maintain consistency across them.
To get an idea of what a design system looks like, here’s Decathlon’s design system.
How to know which tool to choose?
To determine which tool to implement, you need to go back to the basics: what are your needs?
Do you need a simple tool? A comprehensive one? The time to implement it? The budget to set up a design system? The necessary resources?
As you may have guessed, an UI kit is quick and easy to set up. It requires precise and conscientious work from the designer, and that’s it, unlike implementing a design system, which is a project in itself.
Indeed, this type of project requires the establishment of a team with at least a project manager, a designer, and a developer.
First, all the graphic elements to be integrated into this design system (components, page templates, etc.) are identified and defined.
Next, their design is prioritized by creating a roadmap (yes, the famous roadmap).
Once the organizational part is defined, the operational work of the teams can begin. Designers create the various components (following the order established in the roadmap), such as buttons, making sure to plan for all states (default state, error state, etc.). Once validated, developers code these components. They handle bug fixes and maintain the code of the design system.
Ultimately, the project never really ends because it evolves based on the needs of the design and development teams, as well as the development of your digital products.
Depending on the size of your company, the team working on this project can consist of 2 or 3 people. These same people can handle the implementation of the design system while working on other projects.