How to Create a Spotify-inspired Prototype Using Sketch & Anima

Learn to create a High-Fidelity Prototype that just feels real

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Unlike Low-Fidelity Prototypes which focus on the flow between screens, Anima’s High-Fidelity Prototypes empower you to focus on micro-interactions, animations, and user experience that happens within each screen.

This workflow allows a conversation between designers and engineers at much higher bandwidth.

“High-Fidelity Prototypes enable conversation between designers and engineers at much higher bandwidth” — Click to Tweet

This Music Player prototype was created completely in Sketch with Anima. No developers were harmed or otherwise involved in the process.

Whether you want to impress your clients, your team members or explain your ideas better to engineers, High-Fidelity Prototypes will get the job done.

For those of you that have visited our website recently, you might have noticed we have a live example of such prototype. The example we’ve created is inspired by a product we use, love, and appreciate its UX — you guessed it, it’s Spotify.

What’s Inside

Today we open-source the Sketch file for the prototype, along with a detailed explanation for each element.