A design system in Figma and in code

Context

Our design team supports several sub-brands, from consumer insurance shopping to Medicare to tools for licensed agents. Each runs on different technology, but customers and agents should feel the same quality everywhere.

How it works

• One shared Figma library that every designer on the team contributes to. It's a team practice, not one person's project.
• Coded libraries per technology and brand, matched to the Figma components so design and engineering use the same names, properties and states.
• Design tokens as the bridge, so a brand change happens once instead of in every file.

My role

1. Architected the original library, planning which design components matched which engineering components, so Design and Engineering spoke the same language.
2. Own and wrote the Storybook library for our agent-facing brand: React components, token architecture and automated Playwright tests.
3. Documented the hard-won fixes for accessibility, font loading and styling regressions, so the next person doesn't relearn them.
4. Leading a migration that pulls proven components out of a production portal into a shared library other products can use.

A design system is how a team agrees, in advance, on a thousand small decisions.

What's next

The same library is the foundation for AI-assisted design-to-code: when Figma and code agree, AI can build with the real components instead of guessing.