Why you Need a Design System and How to Start Building your Own

Before diving into technicalities, it's important to consider the difference between a UI Kit and a Design System because sometimes what you're looking for might not be a Design System, but rather a UI Kit.

What's the difference between a UI Kit and a Design System?

The difference mainly lies in the scope of the project. We can define a UI Kit as a basic sheet where you gather the most fundamental styles: colors, buttons, inputs, dropdowns - those found on the most basic scale of the Atomic Design. More information about Atomic Design can be found here.

Actually, it doesn't have to be only those on the most basic scale; you can add more complex components, but the difference in size will still be quite significant.

In a UI Kit, it's most common to have a single sheet with all the styles gathered. UI Kits usually address relatively simple products with little scalability.

As the project grows, you'll realize that you no longer need just a UI Kit but a Design System.

As the name suggests, it's a whole system where you gather all the details of the system's components. And here's the beauty of it: not only can you include components, but you can also include spacings, grid systems... essentially, where you'll create more extensive documentation.

You would use a UI Kit to collect the styles of a simple project in one place, to ensure that everything is synchronized with components and maintains its consistency.

With a UI Kit, you never intend to complicate it to the point of documenting all possible cases.

And when we talk about scalability, we're talking about a product that has a presence on iOS and Web, for example. Like Booking.

By the way, you can read the full Booking case study here.

Documenting processes

When you start a project, it's important to maintain good documentation if you don't want to waste time, and in a company or project, this translates to resources and money.

Designers need to be in tune with developers, and developers with designers and product. That's why as soon as you start thinking about more detailed cases, you start documenting and expanding; you're moving beyond the UI Kit and entering the Design Systems realm.

When is it advisable to use a UI Kit or a Design System?

We briefly mentioned this before, but you simply have to decide between one or the other depending on the scale of the project, that's all.

If it's a project with little scalability, if you as a designer or developer are going to do a relatively simple web project, use a basic style sheet aka UI Kit.

If you plan to scale the project beyond a marketing landing page to a product, then this product app, then consider using a Design System to leave spaces for documentation with the developers.

This doesn't mean that UI Kits can't be used on large websites; in fact, the fewer components and the simpler everything is, the better. It's just that many times in large projects, you don't need such a high level of detail on things.

And furthermore, now we explain the big mistake of Design Systems.

The big mistake of Design Systems

The biggest problem that exists today is unnecessarily getting big. Design Systems are useful when they are used when they need to be used. The big mistake is wanting to get big unnecessarily.

Getting big means increasing complexity, increasing use cases, and probably sacrificing consistency.

To maintain a consistent project, we must:

• Either maintain a super simple style sheet, and instead of creating new components every time, first evaluate if we can reuse any of the existing ones.
• Extremely well-document processes. This, obviously, is ideal but it's too time-consuming for a project with few resources because the time you spend documenting these processes, you could invest in working on the product. It's a mistake to document small projects in high detail; let's not try to be a Booking with a small product. And vice versa, let's not be a Booking with hardly any documentation. Because without communication, inconsistencies arise.

How to start your own UI Kit

Once you understand that UI Kits are the simplest and most basic versions in each project, to create a UI Kit we will focus on that, on generating the most basic elements of each project.

A Design System is not mandatory, but a UI Kit is. Later on, we'll evaluate whether it's worth expanding it to something else, but you should always have a UI Kit at hand. It will be crucial to maintain consistency in projects.

Let's start defining:

• Buttons
• Inputs
• Forms
• Grid & layout
• Color
• Typography

A good idea is to create one UI Kit for the first time and save it as a template, so when you start a second project, you just have to import the first UI Kit you made and change the styles on the buttons; you don't need to think about what elements you need every time you start a new project.

For this, you can use the Koala UI Kit, which is 100% free; we've already put a lot of thought into defining everything for you.

You just have to take that template and change the colors and styles, so if you want yellow buttons instead of orange ones, you only have to do that.

You can delete what you don't need, but at least you have a base.

The important thing is to keep it as simple as possible. Having a library with these elements is super important to maintain consistency, but the bigger it gets, the more problematic it becomes too.

Only use what you need.

Consistency, efficiency, and teamwork

Something we haven't mentioned until now is the importance of the UI Kit with teamwork. Sometimes, for whatever reason, we may be working with a team of several designers, and to prevent each one from doing things their own way, it's advisable to use these components, rules, and guidelines so that everything designer X does is the same as designer Y does.

You provide all the pieces, and they place them, they don't have to invent anything (unless you want to create a creativity or UI Kit reinvention program).

If you're a designer working in a space, a company, or a group and they're not using any of this, it's highly recommended that you guide them through this process and have them build one. This will make things easier, and in the long run and in small companies, time equals money. And wasting time equals losing money and resources.

Furthermore, as the project grows, you won't have to go element by element modifying things; you'll have everything already organized so that any change is just a matter of clicks. And consequently, validate ideas faster, optimize resources better, and so on.

Making the most of your UI Kit

A good idea is to take this UI Kit that has served you and sell it on marketplaces to make some extra money if you want.

This is good because for many, it could be their first passive income, and for others, it might cover the most basic needs or tools.