Building a design system TokoRumahan
This project focused on creating a structured, scalable design system to support TokoRumahan’s digital products.
Client
TokoRumahan
Year
2023
Services
UI/UX Design - Figma
When I joined TokoRumahan, I wasn't the only designer on the team, but I immediately shouldered significant responsibilities. Observing the disparity between designs and actual code, it became evident that it was high time to establish a robust and organized design system for all TokoRumahan products.
The Problem is Too Many Variants and Separate Components
I encountered many challenges when designing a system for all TokoRumahan products, including inconsistencies between product designs and between designs and the actual applications. Were developers using different assets from designers? To address my suspicions, I discovered that not only were the assets different, but there were also numerous variations in text fields and other components, and the system lacked proper organization. Additionally, many products under TokoRumahan had their own design systems.
How can I make this helpful for designers and at least assist the developers?
I realized that the need for this design system was crucial not only for designers but also for helping developers visualize and access information. I included the necessary resources by attaching them to relevant links and specifying their purposes.
Prototype (try it yourself!)
The system will expand and be used by multiple people. What helped me keep elements scalable was sticking to atomic design principles, using nested components, and using component properties to simplify variants. It’s still an ongoing learning experience to identify which components will be needed for reuse and which elements are specific for edge cases.
Did it work?
The design system is still a work in progress and is continuously iterated upon. Has the implementation of new components already improved the overall product?
I reached out to other designers and gained some insights into what has been successful and what hasn't.
The components are centralized in one file, making it easier for designers for each project.
A lot of information is available to help utilize components according to their needs.
It is efficient and easy to use.
Creating this design system taught me how to build clarity and consistency across teams. I learned to balance structure with flexibility, improve documentation, and collaborate better with developers. Most importantly, I realized a design system is a living product, always evolving as the product grows.
Next steps
As the design team grows, I hope to gather input from designers on how the system has improved their workflow and orientation. Additionally, I aim to enhance developer assistance by incorporating tokens, CSS classes, and code snippets into the design system. This will facilitate quick education on our thought processes and communication methods for both parties
