Back to articles
Design SystemsFrontend

A Design System Is a Product, Not a Folder of Components

The hard-won lessons from building a component library five product teams actually used — why adoption, versioning, and docs matter more than how pretty your Button looks.

Yash Thakur
4 min read
A Design System Is a Product, Not a Folder of Components

The short answer: a design system succeeds when you treat it as a product whose users are engineers, not as a folder of components you ship once and expect everyone to adopt. In practice that means measuring adoption as the only real metric, versioning breaking changes like a public API (semver, changelogs, deprecations, codemods), investing in docs as the product's UI, building design tokens before components, and giving it a steward who can say "no" — the pretty Button matters least.

The first design system I built failed. Not because the components were bad — they were fine — but because I treated it as a folder of components I'd write once and everyone would gratefully adopt. They didn't. The second one, the one that five product teams actually used, succeeded because I finally understood the thing nobody tells you: a design system is a product, and its users are engineers. Here's what that reframing changed.

Adoption is the only metric that matters

A beautiful component nobody uses is worth exactly nothing. My first version had gorgeous primitives and single-digit adoption, because I'd never asked the teams what they actually needed or made it easier to use my Button than to write their own. The second time, I started by auditing what teams were already building, shipped the five components that would delete the most duplication first, and measured adoption like a product manager measures DAU. If a team wasn't using it, that was my bug to fix, not their failure to comply.

Treat breaking changes like you'd treat an API

A design system is an API, and your consumers are other teams on their own schedules. The day I shipped a "small" prop rename and broke three apps in production was the day I started versioning it like the public API it is: semver, a changelog that explains the why and the migration path, deprecations that warn before they break, and codemods for the painful ones. "Just update everywhere" is not a migration strategy when "everywhere" is five independently-deployed apps.

Documentation is the product's UI

For a component library, the docs are the user interface — it's how engineers discover what exists, see the props, and copy a working example. A component without a live, copy-pasteable example might as well not exist; people will rebuild it rather than read the source. I put as much care into the docs site (every component with live props, do/don't examples, accessibility notes) as into the components themselves, and adoption climbed in direct proportion.

Tokens before components

The durable foundation isn't the Button — it's the design tokens underneath it: color, spacing, radius, typography, as named variables with light/dark values. Get those right and theming, consistency, and even a future rebrand become a change in one place. I wasted early effort polishing components on top of ad-hoc values; the real leverage was one layer down, in the vocabulary everything else is built from.

Govern it, or it rots

Left alone, a shared library accretes one-off props and special cases until it's a mess that satisfies everyone slightly and no one well. Someone has to own the "no" — to push a team's genuinely-specific need back into their own code rather than into the shared surface, and to keep the component count small enough to hold in your head. That ownership is unglamorous and essential. A design system without a steward becomes a junk drawer with a build step.

The real payoff

Done right, the payoff isn't prettier UIs — it's velocity with consistency. Five teams shipping features without reinventing a date picker, without three subtly different modals, without a designer re-specifying spacing every sprint. The micro-frontend platform I built leaned entirely on this: independent deploys only stayed coherent because a well-run design system held the visual language together across all of them.

A folder of components is an asset that depreciates. A design system run as a product — with users, versioning, docs, and an owner — is infrastructure that compounds. The difference is almost entirely in how you treat it, not in how good your Button is.

Written by Yash Thakur

Senior React Developer · 8+ years building for the web

More articles

Keep reading