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.
Below is a list of common points to discuss and agree between engineering and design teams. This is by no means an exhaustive list, however we can use it as a starting point for collaboration
Usually design system consists of:
Common language. Naming is a crucial element of design system as it is carried over to the codebase. Designers and engineers must use same name for the components in both design system and codebase. This solves communication problem between them.
3 types of components:
When deciding where to add a new component ask yourself: "Can this component be used in any other application?". If the answer is "Yes!", then it's a UI Kit component.
Sizing, blocks and spaces
Colors and themes
Micro animations, screen transitions on mobile
Responsive design, breakpoints, etc
Example copy with both long and short examples (think buttons in german for example)
To get more out of design system developers need to be involved early on in a design process and be part of the collaborative process. Great starting point is to pick a CSS framework of your choice and extend it to suite your application.
We default to Tailwind - utility-first CSS framework as a foundation in most of our work.
In addition to elements of design system described above it's useful to see UI prototypes, Customer Journey maps and screen descriptions that will help developers fully immerse into solution before implementing it.
Finally, developers value a design system that is well organized and maintained, so that they can easily find what they need when working with it.