How Spotify’s Design System Goes Beyond Platforms | Figma Blog
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.
Read original(opens in new tab)