The Endless debate - UI Kit vs. Design System

Just writing out that sentence made me think of the Mortal Kombat - a game where all participants must skirmish to death and only one must triumph while others face the bitter taste of mortality.?

But interestingly enough, recently I had a colleague narrate the series of dialogues he had with a potential employer and how it turned into a war of sorts over the correct terminology. So here we are, dissecting this flurry of words that do sound similar but just might not be similar at all.

First Opponent: The UI Kit

A UI Kit, as the name suggests is a kit for all User Interface elements that you will be using in your design. Interface being the keyword here. It is a laid out collection of the buttons, icons, headers and other elements on a flat sheet of canvas that covers only what you require in the final design itself.

What makes UI kits great is that they allow you to quickly create a high-fidelity prototype (a prototype that looks almost identical to the final product) and use it for usability testing. Since prototypes look like a real product to test participants, they are?more likely to behave realistically.

Examples:

Apple Design

The?Apple UI Design kit?will help you design apps that match the Apple design system (iOS, iPadOS, macOS, and watchOS). The kit contains the full range of resources required to design an app for the Apple ecosystem. For example, if you plan to design an iOS app, you will find controls, views, and glyphs available to developers using the iOS software development kit. The great thing is that all major components are available in both light and dark UI design.

Google Material Design Kit

If you plan on designing a product with Material Design aesthetics, you should definitely try the?Google Material Design?kit. The kit contains all components, component states, and styles (colors, text styles) you’ll need when designing an Android app. Similar to Apple Design, this kit also comes with light and dark themes.

To dive deeper, Try out this free UI Kit Deck to see what’s included in a generic UI Kit

Second Opponent: The Design Library

Fun fact, The design library and a design system are the same thing in actuality. I am not even sure why people choose to call it different names and bring them up in interviews just to flex - but all in all, The design library, the DLS, Design System are the same thing.

Think of it as a giant warehouse that stores all the digital assets that you will ever need. It has your boots and umbrella for a rainy day and your overbearing coat for snow and even a nice pair of flip flops for summers. It will have all the icons, buttons, fonts along with the rest of the visual components in all its forms.?

Most importantly, it comes with a lot of guidance for your audience - which is not just you. But your product owners, business analysts, solution architects and most importantly, your developers.

With features available in most design softwares, you will be able to turn your library in parent components and any change to the parent component will then also be reflected to wherever it is used - throughout your designs.

Now these components may be;

• Atoms: the basic elements, be it the typography, colour styling, or even the general visual shape of elements you will be using (for example; rounded or square buttons etc.)
• Molecules: groups of elements combined into common assets, such as input fields, forms, header sections, etc.
• Organism: templates built from molecules, such as mobile screens, webpages that can often be replicated throughout the flow of your design.

Examples of Design Systems & Libraries

Apple’s Human Interface Guidelines

Comprehensive set of guidelines by Apple for iOS, MacOS, watchOS and tvOS:?developer.apple.com/design/human-interface-guidelines

• iOS UI library for?Sketch?and?Adobe XD
• macOS UI library for?Sketch?and?Adobe XD
• watchOS UI library for?Sketch?and?Adobe XD
• Other resources

IBM’s Design Language

IBM’s own Design Language, previously “living language” is a shared vocabulary for design. Its open-source Carbon design system is used to build products and experiences within the company:?ibm.com/design/language

• Design kit for?Sketch?and?Adobe XD
• Other resources

Where is the line drawn?

So if you’re wondering which is it that you should take on for your next project then ask yourself this.

Are you building this design across multiple platforms and devices?

If yes, then a design system will lend you the central components that will be implemented across apps, websites and even beyond. If no, and the chances are you will be working on a single platform that will not be changing anytime soon, then UI Kit is the way to go.

Are there going to be many changes in your design?

A design system can support changes from the base up - without having you to worry about changing a single component in thousands of screens. A UI kit is mainly static and that could mean hours of rework.

Do you need to rapidly prototype for the project?

If the answer is yes, then a UI Kit is your best bet. You can stitch together multiple mockups to prototype only with visual changes.

Sources of Truth and the thing about living documents

Both UI Kits and Design Systems are there to ensure that the amount of mistakes in the final product are brought down to a minimum and that there are no inconsistencies in design. With a Kit or a system in place, they can recall existing elements. But all in all, you may say one of them is more advanced, speaks to a larger audience and will always be the foundation of your design work at your company or project. You will have to devise the base of your design work on one thing or the other and it really depends on how you choose to drive it.

My two cents - If you want to design in a scalable and sustainable way, yet still want the support of clearly established visual rules and principles, a design system is the way to go. But if you are leaning towards building a small scale, mostly visual interface design, then a UI kit will be your best friend.