Design System! Why, How and What?

Design System! Why, How and What?

Tl;dr Product to design products better, faster and scalable

It was June 2014 when Google brought Material Design to the world and got everyone’s attention. Soon after in 2016, Brad Frost coined the term Atomic Design, which laid the foundation of the design system. Atomic Design facilitated the process of breaking down complex components into primitives. It was then when every design-driven organisation redefined the process of building their own digital products. Organisations started to design a system serving products as their core strength instead of dealing with the UI nuances. Microsoft launched its design system called Fluent, IBM named Carbon and Spectrum by Adobe. The United States government also designed its design system called USWDS: United States Web Design System.

So, Why we need a Design System?

Innovation and technological advancements bring rapid shifts and new discoveries in the market. The user is continuously evolving so the organisation needs to build and iterate the product quickly. Building faster and scalable products while maintaining consistent and cohesive experience is the new metric for product and business to succeed.

This urge to build products better, faster and scalable leads to the Design System.

Let us consider Outlook, One-drive and PowerPoint by Microsoft. Each one of these have very different functionalities and are available across different devices. But the experience is consistent and cohesive since it is governed by Microsoft Fluent Design System.

How can I start building a Design System?

To build a Design System, you can start with the resources you have. Document and understand the existing components, their context and functionality. Now facilitate these components into primitives in a similar way organism breaks down to atoms (Refer Atomic Design-Chapter 2). These primitives are used to design interrelated and interdependent parts called UI Patterns. These patterns will be governed by guidelines that are established by analysing context and functionality.

“Standing on the shoulders of giants”. Organisations like Google, IBM, Microsoft have an open-source design system. A lot can be taken from these existing design systems.

Building a design system is a continuous improvement cycle and evolves as the product matures. If a design system component doesn’t support the required functionality or context, it should be designed and added using the primitives.

Hence, what is the Design System?

InVision defines design system as

design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

The design system is a set of guidelines and reusable components with functionality across different devices that speeds up the building, delivering and iterating process while maintaining the product quality. The design system consists of the style-guides, components, coding conventions and policies that govern it, with the fundamental purpose to facilitate the work of the teams.

Wrapping up

Design System is basically a product to design products. It keeps evolving itself as the products mature. As a Product designer, we have the challenge to design faster, better and scalable to which the solution is a Design System.

Fynd Design System- Nitrozen

We at Fynd have created our own Design System- Nitrozen to design better and build faster. Nitrozen is inspired by human-centered design and focused on conversion and hyper-productivity for the next generation of consumers and professionals. It is inherently responsive and adaptive to any device it is thrown at. Moreover, Nitrozen is reusable and scalable to design and build new product ideas to life.

Special thanks to Sumi Modi for the illustrations.

This article originally appeared on Muzli

Want to improve your User Experience?

There’s a lot to think about, when it comes to user experience. That’s what we’re here for and it’s what we love doing. We place people (users) at the heart of everything we do throughout our design process.

It’s our aim to make our clients and users lives easier and more successful.

If you have a UX project you want some help with, we have the right solution for you.  Email us at or visit our website for more information.