A design system people use

2 min read

A component library is not useful just because it exists. Product teams need to find the right pattern, understand how it behaves, and trust that the coded version will work.

When any of those parts are missing, teams create local versions and the system slowly loses control.

Audit real use

I compare the Figma library, coded components, and product interfaces. This shows which components match, which have been overridden, and where several patterns solve the same problem.

I speak to designers and engineers using the system. Search terms, missing states, unclear guidance, and difficult contribution steps often matter more than the visual quality of the library.

The audit becomes a working backlog. Components are marked to keep, improve, merge, or retire, with affected products recorded beside them.

Connect design and code

For each component, I align naming, properties, states, and behaviour across Figma and code. Tokens connect shared decisions such as colour, spacing, typography, and motion.

Storybook provides a live place to document the coded component. Teams can test different properties, see loading and error states, and understand responsive behaviour without opening the source code.

Make contribution practical

A contribution path needs clear entry points. Teams should know when to request a change, when to propose a new pattern, and what evidence is needed.

I review proposals against existing use cases, accessibility, content, and technical impact. Small improvements can move quickly. Larger changes are tested with more than one product before becoming shared.

Adoption improves when the system removes work from product teams. The library, documentation, support, and contribution model all have to work together.