A complete Figma design system and a matching coded component library, with live demos, documentation and tokens on every page — so what gets built is what was designed. Self-initiated and built solo at OptinMonster, with AI-assisted development.
The problem
Designs handed over as Figma mockups were being interpreted, and interpretation drifts. Styling came out slightly off, components behaved differently from one screen to the next, and the gaps meant review rounds and corrections that ate time better spent moving projects forward. As the team's first designer, I'd watched it happen enough times to see the pattern: the problem wasn't effort, it was ambiguity. So I set out to remove it before development even started.
The system
I structured it the way a commercially available system is structured, and built out everything a SaaS product runs on: buttons, inputs, selects and search boxes, single-date and range pickers, dropdowns, menus, tabs and more. Around 120 components in all, each with its variants, sizes and every interactive state, designed in Figma with the variables and tokens behind them, so nothing is left for anyone to guess.
A key decision
The key decision was to stop handing developers a picture and hand them the real thing. Every Figma component got a coded Vue 3 twin in a searchable, clearly organized library, where a developer could find a component, try it live, inspect its tokens and copy the code. I made the design and architecture decisions; AI-assisted development sped up the build. About three months, solo, for what would typically take a team of three around nine without AI — an estimate, but a fair one given the scope.
The final result
Three deliverables, working together: the Figma design system, the coded component library, and the documentation platform that ties them together. Each component has its own page, with its styles, sizes and states, interactive examples, props and tokens, usage docs and code ready to copy. A separate Playground goes further, letting developers change a component's properties and explore configurations beyond the examples. It was built to make implementation faster and more accurate, and to cut the design revisions and styling corrections that slow a team down.
