What is a Design System and how does it help in designing products faster?

Akshay S
2 min readJan 16, 2021

Have you been designing websites, apps and dashboards from scratch? Making buttons, form fields, drop-downs, cards, defining shadows, and other UI components every time you start designing a website or an app? Well not anymore, I am going to tell you a trick using it, you will be able to design faster and it gets faster as you practise.

So, the trick is using Design Systems along with Sketch Runner. I’ll show you how at the end. let me tell you what these are first.

What is a Design System?

Have you ever played with a set of Lego? A basic lego set has bricks, plates, studs, tiles, etc. which when used properly you can build a house, car or anything of your choice. A Design System is the Lego of UI design it consists of components like buttons, form fields, dropdowns, cards and other necessary components which are customizable to your need.

Let say, we want to change the Primary colour (Blue) in the above design system to Purple. How would you do it? We’ll just click on one blue button which is a symbol, go to the colour symbol and change the colour to purple. Puuffff! All the blues have not changed to purple. So instead of changing colours on all the components you just have to change colour in one place. It saves a lot of time.

Here is a Design System you should consider checking out.

How will it help you to design faster?

A fully mature design system will have small components which when brought together, fit together to create a balanced interface. Companies, startups, other brands can take advantage of this by designing brand guidelines & design systems and then creating web/app components by hiring a developer. Then all you need is a UX designer with a great strategy/plan to enhance the user yo use your product.

--

--

Akshay S

A Product Designer who’s turning ideas into beautiful apps and websites. Follow articles on UX and for freebies — https://dribbble.com/akshaysalekar