Case study · 8 min read
The library still lived in Sketch. Fifteen poorly structured parts. Docs behind a VPN, so people stopped opening them. I rebuilt it as a token-driven Figma system and treated it as an internal product, with customers, a backlog, and a way to tell if a component was actually ready.
| Field | Detail |
|---|---|
| Role | Product designer. Architecture, tokens, governance, delivery. Team of two. |
| Built with | Figma, auto layout, variants, semantic tokens, in-file documentation. |
| Runs as | One library for a SaaS sales platform covering the full sales cycle. |
| Status | Shipped. Contribution model, health dashboard, and a queue instead of side files. |
Three jobs, in the order the work actually failed:
When I joined, the design component library was a holdover. Sketch in a Figma shop. No more than 15 components, poorly structured. Documentation lived on a custom site that needed VPN. That one constraint did more damage than the missing parts. People stopped being users of the system.
The work was not a nicer kit. It was to make the good path cheaper than a custom file.
Two of us. I owned the end-to-end ecosystem: architecture and roadmap, alignment with product and engineering leadership, governance and adoption, delivery operations.
The legacy system used hard-coded hex. Global change was a find-and-replace. Theming was a fantasy. I started with an audit, not a palette:
I rebuilt the library on current Figma, not a port of the Sketch file:
I also wrote the rule for when to keep one component and when to split it. Button was the test. Primary, secondary, negative, ghost. 862 variants in a single component. Search returned Button. Designers guessed. Splitting by type made picking a decision, not a hunt.
I read public systems for structure, not for decoration. What I kept: clear instructions, a repeating page shape, and guidelines people could act on. VPN docs had already trained the team to skip reading. The new pages had to live where the work lived.
Every component got the same frame:
The guides sit in Figma because that is where people already were. A prettier site they cannot reach is not documentation.
Atomic design looked clean on a whiteboard. We had three files: Components, Modules, Layouts. Then the arguments started. Why is a modal a component if it is made of smaller units, and a sidebar a module? The taxonomy was serving the framework, not the product.
I restructured around real CRM use:
I started with interviews, not a rollout deck. Designers, engineers, the people who had already given up on the old library. Then a workshop to name the actual blockers. Scope and lifecycle were the loudest: nobody could tell if a component was ready, documented, or in code.
A private roadmap is how a system becomes someone else's problem. I put a vote on the backlog so designers could rank what hurt. People contribute to a list they can move.
With product owners, the design director, and the VP of product, the system stopped being a side project. It sat in the same planning conversations as the product it was supposed to serve.
I took the ops. Jira space, slices, owners, dates. Planning that named the work instead of hoping two people would stay aligned by proximity.
The shift that mattered: the system is a product. It has users. Growing is easy. Pruning, queueing, and refusing the extra variant is the job.
This is the public write-up of the decisions. The original project file holds the component set, health dashboard, and contribution model.
Multi-tenant design system →Supply chain platform →
