James Smet
Leadership·2022–2025·Design System Lead / Design Manager

Building a Design System from the Ground Up

Tokens, components, and the cultural work of adoption

Design SystemsTokensDev CollaborationProcess

Situation

Vagaro's product had grown organically for over a decade. We had three separate web apps, a mobile app, and dozens of one-off components with no shared foundation. Designers worked in silos, engineers rebuilt the same patterns repeatedly, and visual inconsistency had become a customer complaint. Every new feature started from scratch.

My Role

I led the initiative from concept through rollout—working directly in Figma and collaborating daily with our front-end engineering lead. I also managed the organizational side: getting stakeholder buy-in, setting adoption milestones, and building the habit of system-first thinking across the design team.

How I Brought Order

I started with an audit, not a wishlist. I catalogued every existing component across our three apps and identified the highest-leverage patterns to standardize first. I established a token architecture in Figma—color, typography, spacing, and motion—that mapped directly to our front-end design tokens in code. I held weekly sync sessions between design and engineering to maintain alignment as the system evolved.

Design Work

Built a full component library in Figma with auto-layout, component properties, and documentation baked in. Created a token naming convention that worked for both designers and engineers. Designed the onboarding experience for the system itself—how new team members learn it, how existing members migrate their work, and how we communicate breaking changes.

Impact

Within six months of launch, new feature screens took 40% less time to design. Engineering reported a 30% reduction in design-related back-and-forth. Visual consistency scores in our quarterly design reviews went from 'flagged' to 'passing' for the first time. The system became the shared language between design and engineering.

Reflection

The hardest part wasn't the design work—it was the cultural work. Getting designers to design with the system instead of around it took sustained effort. I learned that adoption requires more than documentation; it requires making the system the path of least resistance. That meant improving the system based on real feedback, not perfect theory.

Outcomes

  • 40% reduction in time-to-complete for new feature screens
  • 30% fewer design–engineering clarification cycles
  • First passing visual consistency score in quarterly reviews
  • Shared token architecture adopted by both Figma and front-end codebase
← Back to all work