💡 Design System 2.0
The Design System 2.0 is now a core tool for our team, powering projects across the board. As one of the designers of Design System 1.0, I spearheaded the 2.0 rebuild, ensuring it addressed past challenges. Designers love how it now streamlines everything—from rapid prototyping ideas to crafting detailed designs for delivery.
📽️ Background
All elements are centralized in a single file. Designers have dedicated workspaces to create and refine incomplete components before transferring them to official pages.
Due to the overly simple component creation process, many components lack proper documentation and are scattered across the canvas.
Challenge
One System, Many Voices: Confronting the Pain Points of Multiple Stakeholders
We initially attempted to leverage existing resources to co-create a reusable Storybook for developers. However, after several workshops and discussions, we realized that resource limitations made this approach unfeasible.
As a result, we refocused on rebuild a new design system in Figma. The key stakeholders for the design system were:
Primary: Product designers
Secondary: Developers, testers, and branding teams
Tertiary: Other project- and product-related stakeholders
Each group faced unique challenges based on their roles and needs.
🤔️
How might we develop a system that is sustainable and easy to use for everyone?
🧙 Product Designers
We add to, maintain, and work with the design system everyday
When using the design system, the first-level hierarchy (Atoms, Molecules, Modules) doesn’t help me easily filter the components I need.
Many variants of components are confusing and lack proper categorisation by properties, making them hard to find and inflexible to use.
When adding components, the hierarchy, naming conventions, and spacing rely heavily on personal understanding.
The colour system lacks clear functional definitions, leading to frequent questions like “Should I use Gray-200 or Gray-300?” in group chats.
The design of our products differs significantly due to vendor limitations, but alignment is still necessary. However, when all components are placed in one design system, it leads to duplication—such as two buttons that serve the same purpose but look different.
There is no quality or version control in the design system, making it difficult to maintain and leading to unintentional changes in existing design documents during updates.
Without knowing the exact name, browsing for the desired component is challenging.
Duplicated components led to confusion.
🧑💻 Developers
We ensure the alignment between delivery and design
When developing or testing, it’s difficult to view all the states and use cases of a component in one place.
The structure and spacing of components are inconsistent, making them hard to follow.
The components lack compatibility design across different devices and themes, requiring extra effort from developers to address these issues.
Tracking the development progress of different components is challenging, that many developers in the same team prefer to rebuild components from scratch.
Incomplete dark mode designs either forced our products to default to light mode or required developers to spend extra effort fixing them individually.
🧑🎨 Brand
Ensuring product alignment with our brand
Before launching any project or product, a brand review is required, significantly increasing my workload.
When I suggest revisions, the process involves designers, developers, and testers, which lengthens the revision cycle.
The scope of my review responsibilities and tasks is often unclear.
At times, I need to spend extra time learning the products or technical knowledge, such as preparing a testing environment, before I can begin.
Unclear review tasks led to lengthy review processes and extended revision cycles.
🧑💼 Other Stakeholders
I want the design to reflect real user experiences
When I review designs or prototypes, the interactions often have bugs or do not accurately reflect real-life use cases.
Opportunity
Right Timing
At this point, Figma released a new feature—Variables—that opened up more possibilities for the design system’s structure.
Fortunately, my project was in the research and preparation phase for a large-scale iteration, with no immediate need for detailed design, allowing enough time to transition to the new design system.
Restructure
A New Blueprint
Development
How I Kickstarted the First Draft
I started by importing the brand guidelines to establish the foundational colour palette. To ensure comprehensive colour coverage, I used a plugin to expand the palette. For spacing and sizing, I defined a base set of numbers derived from multiples of 8.
Text styles was created based on the brand guidelines and a basic set of radius, spacing, and border widths were defined using consistent numerical values.
Collaborating with other designers, we compiled a list of all components we could think of with naming we all agreed and prioritised the 10 most essential ones to kickstart the system.
I progressively migrated components from the original design system while creating any missing ones. During this process, I defined clear guidelines for how colours should be used across components.
🧱 A component is like a brick, but it's also built by smaller bricks.
👀 Meet Design System 2.0
A system which is Consitent
Maintains uniformity in visuals, interactions, and logic. Avoiding confusion or redundancy.
A system which is Flexible
Components within the system can adapt to various use cases, meeting diverse needs effectively.
A system which is Inclusive
Adheres to accessibility standards, such as contrast ratios and font sizes, ensuring usability for all people.
A system which is Compatible
Supports different devices (e.g., mobile, tablet, desktop) and themes (e.g., dark mode, light mode).
⏰ With the new design system, a standardized form like this can be created in under 5 minutes—and even handed directly to the developer.
Iterate
How to Maintain and Collaborate
The design system is built for leveraging team’s work and cannot rely solely on me for maintenance. To ensure its long-term success, I focused on addressing key challenges:
How do we lower the barrier to using the design system?
How do we ensure transparent communication for version updates?
How do we establish clear ownership for each component?
The answer: Documentation!
I created a descriptive framework for all elements in design system, making it intuitive and easy to understand how each one should be used.
I introduced an edit log to record every update, ensuring a transparent history of changes. This not only clarifies ownership of changes but also gives credit to the contributors.
With the amazing collaboration of my fellow designers, it’s grown to version 2.4, now spanning 50+ pages. It’s transformed our workflow, making design faster and more consistent, and it’s continuing to expand and influence more areas.
