Is it too early to build a Design System.md

Is it too early to build a Design System?

The Start

This is an interesting question and a very common question that all of us have. That's also because we are part of the industry or better way to put it is culture where things move at fast pace and everyone is just hustling and build products at a rocket speed. It's fine there's nothing against it. But there are certain principles that remains constant regardless of the speed we are building products. One such thing is Design System

Let's go one step backward from where we started and break them in sequence of events

• We start with the idea of building an amazing and beautiful product

• We start putting down our thoughts about our product by defining the flows a.k.a defining the User experience of our product.

• Until now things were just black and white so to add some charm to our product what we do next is we start by defining some colors for our product which also help us think about brand colors so people can relate to our product instantly. Few examples to relate to what I mean:

  • As soon as we look at Orange color we think about Swiggy
  • As soon as we look at Red we think about Zomato
  • As soon as we look at shade of Pink we think about Myntra
  • As soon as we look at Black and Copper color we think about Cred
  • As soon as we look at Green we think about Dunzo

These colors have left a mark in our heads so we always relate with them whenever we look at the shades of these colors. So the point here is we end up defining the color pallete to make things consistent across our product.

• Next we decide the fonts and their different sizes we want to use across our product so which means we are thinking about typography in technical terms.
• After this we have enough things so we get started and begin with putting some elements on the screen and we realise okay I need a consistent spacing between them so we end up defining a scale of spaces.

Hmmm, so if you look at the above points we do these steps regardless of what stage of the product we are in and to put them in simple terms here's what we already have defined until now

1. Colors
2. Typography
3. Sizes
4. Spaces

What did we just do? We have defined the Design Tokens 🤩

What's next? You end up creating the basic elements that you will be using to build your product let's say it's in early stage which means you're building an MVP and hence you know there are few basic elements that you'll need at the moment. So the next step you do is define these basic elements for example Buttons, Text Inputs, Headings, Links. Building these wouldn't take time since we already have Design Tokens defined. These elements are also known as atoms.

Let's take a pause here and revist what all things we already did

1. Define Tokens
2. Build atoms using the tokens

We didn't do something extra ordinary here it's basically the lifecycle of any product. Next we do is use these tokens and atoms to build layouts or pages and then we realise we need some more basic elements then we go back and build them and of they fit the category of smallest element of our design we put them under atoms.

Whoa! Did we just build a Design System without explicitly defining that we are building a Design System? Yes we just did! 🚀

The TL;DR

Design System is basically set of principles and guidelines that we use to build our products. It's never ending and it keeps on evolving. Since we kind of defined our guidelines in form of tokens it becomes much easier to evolve our Design System as our product grows and matures since there will be more use cases that will pop up in our product's journey.

So the question whether it's too early to build a design system can be tweaked as what are basic guidelines and elements we need to build for our MVP. You need not cover the entire spectrum of components in one go and rather build it as and when the need comes when the product evolves.

If you think about UI kits that are readily available for different tools like Figma/Sketch/XD they are nothing but some guidelines and few elements that helps you build UI quickly for your product's MVP.

Again to close it, these are just personal opinions and it doesn't define that something is right or wrong. In the end it all depends if you really want to do it or not as per your ease and the state of product building you're in 😊

Ritesh(https://twitter.com/ritz078) has put it in a very nice way here about Design Systems and Products https://twitter.com/ritz078/status/1277926243757731841?s=20