The Challenge
As a solo designer-developer, maintaining visual consistency across a complex product like TrainerQ — with dashboards, RPG progression screens, coach portals, and a marketplace — quickly becomes unsustainable without a structured system.
The challenge: build a design system that is fast to work with in Figma, maps 1:1 to the actual code components, and scales as the product grows — without requiring a dedicated design systems team.
The Solution
I chose shadcn/ui as the foundation — a component collection built on Radix UI primitives and Tailwind CSS — and extended it with TrainerQ-specific patterns. The Figma library mirrors the codebase component-for-component, so there's zero translation overhead between design and implementation.
- Full component library in Figma with variants, states, and interactive prototyping
- Token-based color system aligned with Tailwind CSS custom properties
- Dark-mode-first design with consistent contrast ratios across all surfaces
- Game-specific components: XP bars, character stat cards, tier badges, achievement modals
- Shared spacing, typography, and shadow scales defined as Figma variables
My Process
The system was built iteratively alongside the product — components were designed only when needed, preventing premature abstraction while keeping everything documented and reusable.
- Audited existing screens to identify repeated UI patterns worth abstracting
- Defined the token layer first: color, typography, spacing, elevation
- Built base components and extended with TrainerQ-specific overrides
- Created usage guidelines and annotation templates directly in Figma
- Validated component fidelity by building screens from library pieces only
