Design Systems with Figma, NextJS, Storybook, and Adobe Experience Manager
In this project case study, I'll share how I helped build PlayStation's comprehensive design system, creating a unified visual language across web properties serving millions of gamers worldwide.
The goal was to establish a scalable component library with atomic design principles, enabling rapid development while maintaining brand consistency across PlayStation.com and special experiences like the yearly wrap-up.
Client
Gaming
Type
UI/UX
Year
2021
Process
Implementing atomic design architecture
Built a hierarchical component system starting from atoms (buttons, inputs) through molecules and organisms to full templates. Each component was crafted with TypeScript for type safety and comprehensive prop interfaces. Created over 50 base components with multiple variants.
Establishing design tokens
Developed a comprehensive token system for colors, typography, spacing, and motion. Implemented CSS custom properties for runtime theming, enabling dark mode and special event themes. Built tooling to sync tokens between design and development, ensuring pixel-perfect implementation.
Creating searchable documentation
Built an advanced Storybook instance with custom addons for PlayStation's needs. Implemented full-text search across components, props, and usage examples. Created interactive playgrounds where developers could experiment with component configurations in real-time.
Enabling content authors
Developed extensive documentation for Adobe Experience Manager integration. Created visual guides showing how components mapped to AEM authoring dialogs. Built preview tools letting content authors see exactly how their content would render before publishing.
Outcome
The design system powered PlayStation.com's redesign and special campaigns like the yearly wrap-up reaching millions of users. Development velocity increased 40% as teams could rapidly compose new experiences from existing components. The searchable documentation became the single source of truth for PlayStation's web presence.
