What makes up a Design System?

Design system is a kit of elements and a platform that helps to collaborate, design, develop a product and provides developers with necessary information for handling the small details to create a website or an app. It saves time for collaborators by making certain that everyone is on the same page rather than having inconsistency in their team.

As a designer we need to know the key insights of a design to make a design system. In a design system, we add so many small details to make a final product. Every design system has different information based on their product. I have used a program called Zeroheight to create my design systems. There are so many other platforms like Zeroheight which are really helpful for designer and developers to finalize the product. Some other good ones are: Frontify, Design System Manager (DSM) and Nuclion. Some of the platforms provide their plugins like Zeroheight to work faster and efficiently to help developers and designers.

Below is a link to one of my design system for a project I worked on and I have provided the outline for that design system below as well including the categories and sub-categories I used to divide my work so it’s more scannable for the viewer. Feel free to check and out and let me know what you think!

Click here to see design system: https://zeroheight.com/7dbfa0fa7

· Cover page

· Introduction: Goals, Design Principles

· Style: Colors, Typography, Layout, Icons, Logo

· Photography: Guidelines

· UI Components: Buttons, Navigation, Cards, Text Input, Drop-downs, Microinteractions

· Resources: Tools

Lastly, I would like to say that creating a design system really helps a designer explain their thought process to someone else like a developer. It is the like an instruction booklet in an Ikea furniture box, it helps you build something from scratch or at least direct you on how it should be done.

Umair Jeelani

UX/UI Designer