Struggles of Building a Design System

Riya Ramani
Paperclip Design
4 min readNov 25, 2019

--

What is a Design System? A Visual Library? A Style Guide? A Pattern Library? A Design System is all of this.. And much more! A simple definition in layman terms would be: “A Design System comprises of all individual elements used in a product and a set of components that are made from all these individual elements”. These elements are used and re-used throughout the project; design system is very important to maintain efficiency for designers and developers, and maintain consistency for a good user experience.

A Design System is helpful not only to the developers but also to the designers, especially in long term projects. It creates a unified language for your product which helps bridge the gap between multiple designers working on a project and the development team. Without this common language, it’s almost like you are trying to communicate in Gibberish. There is no one way to build a Design System; as your product keeps evolving, your design system also keeps evolving overtime. It is an iterative process that might need iterations even after your product is developed.

Design Systems help save a lot of time; it improves consistency and makes the product more intuitive. Every designer has a different feeling towards a Design System; some rigorously work on it from Day 1 whereas some might not pay much attention towards its necessity.

From personal experience, I have some of my own thoughts on Design Systems to share with y’all today.

Working on a product that I have been designing for a long time now, I realized many different stakeholders involved have their individual inputs over time. This creates numerous inconsistencies in the product. It was not until the time of development and updating my Design System that I created during the initial few weeks of the project, that I realized that I have more than 6 shades of grays and 3 different types of tables amongst many other multiple styles for the same components.

IDENTICAL COLORS USED
TABLE 1
TABLE 2
TABLE 3

This not only created confusion amongst the developers, but also made me question my working process as a designer. I was disappointed with the lack of consistency. Moreover, this would end up creating so much confusion for the user as to what exactly is the difference between these different style of tables, wherein actual, these cards serve exactly the same purpose as each other.

This is a loss not only monetarily but also of our valuable time.

TOGGLE 1
TOGGLE 2
DIFFERENT TOOL TIPS USED

When we handover our designs to the developers, without realizing the several different types of buttons we have used for the same purpose, we blame the developers for ruining our designs. A lot of confusion and miscommunication can be resolved especially in a fast paced project where changes are frequent and many stakeholders are involved.

All of this can be avoided by having a well maintained Design System from the start. There are no shortcuts for this. This is time we have to invest as designers for a better, more efficient product.

You can call a Design System “The Core” of your project. In the future, the developers will only work using this library that you give them. It has to be pixel perfect just as your designs.

Creating a Design System is a challenge in itself and remember — there is no one way of creating it.

“A design system is a process and therefore is simultaneously always ready and never done.”

— Marcin Treder, CEO at UXPin

--

--