How Spotify Is Upleveling Their Entire Design TeamHow Spotify Uses Framer X

In this video case study, Spotify shares how their Framer X toolkit is empowering designers to prototype with data.

September 10, 2019

There’s no doubt that Spotify has changed the way we consume and stream music. But with a recent IPO and a reported 232 million monthly active users, the Swedish-grown entertainment platform has had to scale rapidly—both in team size and product capabilities. Over the years, the company has formed a cultural DNA that empowers initiative from the bottom up, allowing product teams to stay nimble even as the company grew. But as market leaders, the need to innovate was stronger than ever and leadership was looking to tooling to solve for some of their biggest roadblocks.

Challenge

Thanks to a belief in interactive design as a core element of the product workflow, Spotify was a pioneer in their formation of a Design Prototyping team, who mainly partner with embedded designers to bring their static concepts to life. But the team has had so much success they’re now looking to simultaneously automate themselves and uplevel the greater design team’s prototyping skills. To do this, they needed to offer a toolkit that would empower all designers, regardless of technical ability. To top it off, the toolkit would need to be able to tap into the Spotify API and access the trove of data that was the backbone of the company’s success.

Solution

A toolkit to empower everyone

Initially, the Design Prototyping team took the core design system and started implementing the basic elements in React. Buttons, typography, cards, colours and other core elements of the app were imported. Then the team spent some time deciding on how to balance between the company’s prototyping needs: fast iteration and creative freedom. For example, should designers be able to override a font size in a header component? Thanks to the flexibility of Framer X as a React-based design tool, the team didn’t need to compromise much.

Framer X gives us the ability to set and then expose the customizable properties of a component in the UI of the app. This gives even non-technical designers the ability to creatively customize a component for crazy little effort on our side.

Rob Walsh, UX Prototyper

Prototype with data on the canvas

One of the main goals of the toolkit was to create a system where anyone can design with visual components in Framer X, but still use live data inside them. For example, creating a new design for an album card is as simple as designing that layout on the canvas and setting the properties in the panel, allowing content to be populated dynamically from Spotify’s own web API. The ability to pull personalized data like up-to-date playlists, artist images and full-track playback into prototypes was a primary factor in the Design Prototyping’s team choice of Framer X.

Other tools often force you to make trade-offs, such as no live data or inability to play media, all of which are particularly inconvenient for our use case. We’re trying to make sure this toolkit ‘just works’ and comes packed with all the bells and whistles one might need.

Achal Varma, UX Prototyper

The Team Store as a single source of truth

Even at scale, Spotify is mindful of staying lean. Instead of allocating valuable months of time and resources to create a new toolkit from scratch, the Design and Prototyping team took a gradual and additive approach to introducing new components to their Framer X toolkit. With every new project, the team made sure that any components they made were as extensible and as reusable as possible, so it could be adopted into the wider toolkit, housed in the Framer X Team Store and available for wider use. But beyond increasing productivity between designers, the team was envisioning a grander vision, one that unlocked Framer X’s full potential as a bridge between design and development.

Having a single source of truth for our design tokens and components will be an enormous gain for both productivity and consistency as we will no longer need to check both the design assets against the developed version.

Tyce Clee, Senior Web Engineer
Small Teams Plan

Supercharge your design workflow.

Get started today ›

Company

Founded in Sweden in 2006, Spotify is the most popular streaming service in the world, serving 79 countries globally. The company’s mission is to unlock the potential of human creativity by creating a platform where musicians can share their music and fans can listen and be inspired. Accounting for 40% of the total music streaming market, they are proud to say that they are the largest driver of revenue in the music industry today.

  • 232 million monthly active users
  • 108 million paying subscribers
  • Over 1.7 billion hours of music played monthly
  • 4,000+ employees working across 16 offices

Featured Team

  • Doug DeMarco, Design Prototyping Manager
  • Rob Walsh, Senior UX Prototyper
  • Achal Varma, UX Prototyper
  • Tyce Clee, Senior Web Engineer
  • Amanda Lasnik, Senior UX Writer
  • Mike Brand, Designer
  • Lu Han, Designer
  • Megan Ellis, Design Director

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.