Carousell’s design system had drifted. Components were hard to reuse, docs were out of date, and designers and engineers used different names for the same things. I led the revamp with a clear update process, a reorganized Figma library and docs that link design to code.
A design system is a product too, and its users are designers and engineers. So I started with them: a survey of engineers about their pain points, and a workshop with designers. Many designers detached components and changed them, because the originals weren’t flexible enough. Even experienced designers struggled to find what they needed.
No consistency. No clear guidelines, components built on old Figma features, and no process for keeping the system up to date.
Hard to find things. No links between design and code, components that were hard to search by name, and no easy way to see what had changed.
Poor communication. Different names for the same thing, scattered channels and no structured feedback.
Before changing everything, I tested the approach on the Button, which is used on every platform. I invited a developer to the trial, and we compared the Button in production with the one in the system.
It showed the whole problem in one place:
I also looked at how other companies run their design systems, and read what their teams had written about it.
Together with the trial, that gave us three changes to repeat for every component:
I presented the Button trial to the team and senior management. The feedback was positive, so we took the same approach to every other component.
A revamp like this can’t be done by one person. I led it and set up the way the team would work:
Clear owners. A spreadsheet gave each component an owner, based on which team used it most, and tracked progress.
A handbook. A step-by-step process for updating the system, so everyone worked the same way.
A weekly update. A Slack post kept designers, engineers and stakeholders in the loop.
Every component now follows the same layout: docs on the left, variants on the right, and notes that point engineers to the matching code.
Properties and variants keep each component flexible, so designers no longer need to detach it. Each component also lists its code names for Android and iOS.
Engineers also told us the library was easier to navigate, and that matching design and code made building faster.
I set the foundation before I left Carousell. The plan from there: semantic color tokens, then font styles, spacing and shadows, all stored as Figma variables with modes.
Designers are users too. Asking them early, instead of working alone, shaped every decision. A design system is also a team effort: trusting people and giving them clear ownership mattered more than any single component. And there is no one-size-fits-all system. The best one fits your team’s situation and builds on what already exists.
