Building your — First Design System

It's going to be a big achievement in your career once you master building design systems. Building a Design System is tough work, but this pays off with time plus increases in your work speed.

You can always follow other design systems such as Material Design System(Google), Human Interface Guidelines(Apple), Atlassian Design System, and many more.

Let us understand the core of a design system. The purpose of creating a design system comes from the concept of Atomic Design. Where the interface is divided into small blocks and grouped separately.

“ A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels ” — by Nielson Norman Group

Steps were taken before building a Design System

• Understand why are they asking for a design system. Is it an early-stage product or a test product?
• Introduce to other systems available. Cause this will cut huge amounts of time and cost. (Refer: any design system)
• Now bring the developer to the table. Finalize the breakpoints/ resolution/layout/asset sharing platform.
• Now define the breakpoints and start creating from the base of the product

1. Resolutions/Breakpoints(Desktop/Tablet/Mobile)
2. Layout & Orientation (Decide the padding and margin need to maintain)
3. Padding (* Tip: Maintain the spacing divisible by 4)
4. Navigation options(Make all of the common; Refer: Material Design)
5. Colors & Typography (* Tip: Maintain the sizing divisible by 4)
6. Other Assets: Corner Radius/Overlays/Error screen/Loader Screen
7. Components(Buttons, Input Field, Progress Bar, Thumbnail, Search Box)
8. Present the Image or Illustration style with some reference Screen

* Tip: Maintain the sizing divisible by 4, cause this will help the developer in creating responsive design. And also reduce the work for designers/developer

At last, it's an iterative process that takes time and needs to be maintained. Bring all the teammate and introduce so that they can be part while building the design system.