Neha Sharma
nehasharma.dev

nehasharma.dev

Day3: How to start with the Design system? #25DaysofDS

Neha Sharma's photo
Neha Sharma
·Jul 7, 2021·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

PS: I am republishing my 2019 blogs on the Design system at the Hash node. However, these blogs are still valid.


You know now what is the design system and when you need it. Now, the question comes is how to start with it. As this is not one person's job. The design system requires inputs from the designer, developer, product people, testers and we also need a design system manager.

Here how one can start the design system:

1. Design Audit

The first and foremost exercise to do is the Design audits of the projects and products one has in the organization. These design audits will help the designers in designing the scope of the Design System. As well, this will be the data for all the design-related decisions. Designers can do the design audit by speaking to the designers from cross teams, talking to marketing teams about the organization's brand guidelines, or by doing surveys. A few areas where this exercise will be helpful is to decide:

  • List of components
  • Design Tokens
  • Color Patellate
  • Typography
  • Type scale
  • Space scale
  • Breakpoints, Heights, etc.

2. Design specs

Designers need to prepare the designs for all the components. It could be SketchApp, XD, Photoshop any preferred format but make sure that the developers are able to access them and so is the rest of the team. Think of them as the end-users deliverables, basically, this can be accessed by the user (not just developers) of the Design System. In addition to this, these should be scalable, which means that in the future whenever any update is coming instead of creating a new design file, designers should update the same file.

3. Tech audit

Just like designers, developers need to do the tech audit to understand which tech stack to use to develop the components and a lot more:

  • List of components
  • Tech for the components building
  • Code guidelines
  • Code Control tool
  • CI/CD
  • Responsive breakpoints
  • Browser and OS support
  • Accessibility level - AA or AAA

4. Bring all on the same page

You cannot build a design system in isolation.

Communication and collaboration is the key for the successful design system. Once Design and tech audit is done bring the team and stakeholders on the same page by doing the workshops, and demo of the design system. Discuss the components list, the scope of the designs, tech decisions, etc.

5. Project Planning

Once the components list is finalized, the project manager can start working on the project sprint and story planning. It is better to do agile development. Make it part of the process.

The design system needs to be part of the process otherwise it is of no use. figure out the ways you can make it part of the process.

Happy Learning!!

 
Share this