The problem
Finvi's products grew through acquisition and parallel teams. The same table, filter and status pattern existed in a dozen slightly different versions. Designers redrew components for every project, and engineers rebuilt them, so the suite felt like several products sharing a login.
What we did
My team and I created a Figma-based design system, complete with variables, to ease the development process and keep the product consistent.
- Tokens first. Color, type, spacing and radius live as Figma variables with light and dark modes. Their names mirror the CSS variables engineering uses, so handoff is a lookup, not a translation.
- Prioritized by pain. We audited the products and built the components that appeared most often and varied most: data tables, filters, form fields, status badges and page headers.
- Governance. One designer and one engineer co-own the system. Contributions go through a short proposal template, and a monthly review keeps Figma and code in sync.
- Documentation in context. Usage guidance and do/don't examples live next to each component, where designers already work.
Image placeholderFigma variables with light and dark modes
The outcome
- New screens built from the system take roughly 40% less UI development time
- Common patterns went from many variants to one
- Accessibility (contrast, focus states, sizing) is now handled once, in the system
What I learned
A design system succeeds or fails on adoption, not completeness. Starting with the components that hurt most, and co-owning the system with engineering from day one, mattered more than any individual component.