The design system is the key tool when developing a visual part of the product. It makes sense to create design system from day 1 when working on a large-scale application with several teams involved. Having a design system makes the workflow more consistent. At the same time, it comes as a single source of truth for all team members, which ensures alignment between Product Managers, Designers, and Developers.
Having a design system allows teams to do the following:
When teams do not have a clear design system, their work is more tactically oriented. It means that the strategic direction of the product development is missing.
For instance, when developing a specific screen layout, team members start thinking locally and ignoring the existing application and what is already available in the codebase. As a result, we have a less scalable approach to frontend and UI development.
It inevitably leads to increased technical debt and time wasted on developing components that cannot be reused in the long run. As a result, teams see the degradation of the code quality, which makes it harder to maintain. Having a design system, allows teams to establish a scalable approach with a set of reusable components.
There are several ways to develop the design system. The key steps involve:
Do not start with design system when working on smaller initiatives and pre-product/market fit. As at that stage you'll have way too many back and forth.
However, it is vital in the case of full-scale development with several teams involved as it helps to keep designers, developers, and product managers aligned having a single source of truth.