How Spotify’s Design System Goes Beyond Platforms | Figma Blog (opens in new tab)

Spotify’s expansion to 45 platforms and more than 2,000 device types exposed inconsistencies between its product experiences. The company evolved Encore from separate mobile and web systems into a cross-platform design system focused on shared foundations and reusable components. Its goal is to make Spotify feel coherent everywhere without erasing the distinctive strengths of each platform.

The Challenge of Consistency at Scale

• Spotify’s 2019 ubiquity strategy aimed to make audio available across TVs, cars, computers, phones, and many other devices.
• The design team needed more than broad platform coverage: users should recognize the experience as distinctly Spotify wherever they use it.
• Components became central to achieving this consistency, from defining their scope to implementing them across products.

The Birth and Evolution of Encore

• When introduced in 2019, Encore had two main subsystems:
  • Encore Consumer Mobile, a flexible catalog of mobile-focused UI components.
  • Encore Web, supporting a wider range of web products.
• Both systems used shared design tokens for foundational decisions such as colors and typography.
• Over time, differences in component sizing, typography, and state treatments revealed that the subsystems needed greater commonality.
• By 2022, flexibility had created too much divergence, prompting Spotify to rebalance the system toward reusable, consistent components.

A Shared Layer Between Foundation and Products

• Spotify created a specialized team focused on reusable components for Encore Mobile.
• This new layer sits between the foundational system and Encore Consumer Mobile.
• It acts as a “first line of defense,” reducing the need for product-specific teams to build every component themselves.
• Developed in collaboration with Encore Web, the layer establishes platform parity from the beginning rather than retrofitting consistency later.

Designing Components Across Platforms

• The overall workflow remained familiar: research, design, and development.
• The major change was coordinating design work across iOS, Android, and Web instead of designing for one platform in isolation.
• Components are intended to share a coherent visual and behavioral language while still adapting to platform-specific requirements.
• This requires collaboration among specialists, since web and mobile designers bring different domain expertise.
• Spotify begins by bringing platform teams together and researching each platform’s unique characteristics before creating the shared component.

Spotify’s approach treats a design system as more than a collection of platform-specific libraries. By establishing shared components early and combining them with platform-aware design, teams can create experiences that feel unified without sacrificing the qualities that make each device and interface effective.