Design System
Design System and Theming a dashboard
Project
Design System
Software
Figma
Year
2022
Context
At DesignMonk, as we set out to bring our MVP to life, we recognized the paramount importance of laying a strong foundation for our design endeavors. With this goal in mind, we initiated the development of a comprehensive design system. We also hold a deep commitment to the idea that every product is an extension of the brand itself. Therefore, in designing our design system, we sought to encapsulate the essence of our brand within its components. This meant carefully considering every visual element, interaction pattern, and typographic choice to ensure they authentically represented our brand's personality and values.
Scaling initial designs
The first step of the process was identifying and making an inventory all the pieces of the puzzle: every text style, colour variation, button, input, checkbox (...)
With that in place we started rebuilding them in Figma to make it easier for our internal use inside the design team.
Before anything else we have to establish our foundation, standard text styles that we can reuse both inside basic components and throughout the product itself. Also the colours, we mapped them and started trying to trim down the amount of redundant appearances.
An important observation that guided our approach was the recognition of striking similarities among various design blocks. Keeping this insight in mind, we deliberately established a unified structural framework for all these components. By doing so, we laid the groundwork for effortless structural adaptations in the future. This approach ensures that as our project evolves, accommodating structural variations becomes a seamless endeavor.
Building and rebuilding
I can't stress enough how important it is to have a consistent component library, at least for basic components such as:
- Buttons
- Input fields
- Radio buttons & check boxes
- Drop-downs
- Lists
- Notifications & banners
- Tooltips
- Tags & badges (in our case)
Keeping this in mind, we adopted a strategy of breaking down the task into smaller parts. We proceeded to refactor existing designs individually, ensuring that each one was adjusted according to project priorities as needed.
Next steps
The next action item is to establish a seamless connection between Figma and production through the implementation of design tokens. This integration, using Zero Height, will eliminate the need for manual updates of minor details, such as hex codes (#9AC8FF to #4A8DF9), freeing up developers from routine and repetitive tasks.
Final Designs
DesignMonk
Explore the journey of Product Validation and the extensive path that led to the creation of our design system.