PlayStation’s Design System

The Problem

  1. The Mobile & Web Design Library lacked documentation and parity with the GitHub Storybook.

  2. UX Designers and Engineers wasted time cross-referencing libraries, leading to inefficiencies.

User sentiment

Quote Source

“Mobile/Web seems out of date/inconsistent with what's in production, missing a lot of components, and requires lots of cross-referencing with documentation and screenshots.”

Quote Source

“It’s not clear what components are for web and what are for mobile. The developers are using other components, and the final product is unlike the original design.”

Process & Solution

All different buttons found in web interfaces

Work we did

🔎 Phase 1: Audit & Inventory

  1. Conducted a full audit of the Mobile & Web Design Library.

  2. Created an inventory of all web interfaces & libraries.

  3. Analyzed inconsistencies and gaps.

Ecosystems review

What was found

📌Phase 2: Identifying Key Issues

  1. 60% lack of parity within web components.

  2. ~330 hours wasted customizing components in the code.

  3. Mobile & Web components were mixed in Figma, while GitHub libraries were independent.

Slit libraries image

How we solve it

✅Phase 3: Implementation & Standardization

  1. Built a Web-only Design Library in Figma for clearer separation.

  2. Aligned nomenclature and properties with each GitHub Library.

  3. Introduced design tokens for scalable updates and consistency.

Let’s take a look

  • Web-only Component.

    Web-only Component.

    - The original mobile/web library didn’t support hover and error states.

    - Followed properties as are written in the GitHub Web Library. We now support all states.

  • Clean Variants.

    - The original mobile/web library was messy because the team migrated all components from Sketch Symbols.

    - These new components are made in Figma and optimized using nested variants and toggles.

  • Description.

    - We lacked context or resources about the components in any library.
    -This initiative was approved and added to other libraries like PC and PS5.

  • Organized File.

    - The original mobile/web library had all components in one Figma Page, but designers often complained about how difficult it was to find a component that way.
    - Created a component per page.

  • Tokens.

    Impact:

    - 🫱🏼‍🫲🏽 Enhanced teamwork between design and engineering

    - 👁️ Boosted accessibility

    - 👩🏻‍💻 Decreased technical debt

  • Responsive breakpoints.

    Optimized breakpoints for web 🖥️💻📱 (desktop, laptop, tablet, and mobile – including our grids!)

Documentation site

Documentation

📖 Phase 4: Documentation & Guidelines
Created dedicated documentation for each platform, including:

  1. Clear property & token explanations.

  2. Component usage guidelines with Do’s & Don’ts.

  3. Image examples for clarity.

  4. Accessibility constraints & WCAG 3.0 rules.

🚀 Impact & Results 🚀

📊 Efficiency Gains

  1. Reduced cross-referencing time for designers & engineers.

  2. Improved component adoption rates in Figma.

🤝 Stronger Collaboration

  1. Worked closely with engineers, PMs, POs, and designers to align needs.

  2. Standardized communication between UX & development teams.

💡 Lessons & Next Steps

  1. Implementing continuous tracking of component adoption.

  2. Expanding documentation to cover edge cases & custom implementations.

Dashboard showing web design library analytics with graphs and tables displaying component insertions and statistics, including top teams and details on various component names, total variants, instances, inserts, and detaches over 60 days.

Figma statistics after 60 days of adoption