How to Create a Spotify-inspired Prototype Using Sketch & Anima
Learn to create a High-Fidelity Prototype that just feels real
Recently, we have released Anima 3.0. For the first time, Sketch users can collaborate on High-Fidelity Prototypes.
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.
Today we open-source the Sketch file for the prototype, along with a detailed explanation for each element.
We go over how to make your prototype responsive and adapt to each and every screen size available. Using Breakpoints, Pins, Stacks, and Padding.
We show how you link different screens and create Overlays.
We add some razzle-dazzle using video background.
We explain how to create animations like this one right here
Here we show how to create interactive components that trigger on events like Hover
Live Input Fields
When everything is ready, Preview in Browser enables us to see it all in action before sharing.
This is the part where we amaze our clients and team members with our creation.
💪 Now it’s your turn: Download Sketch File.
How to update your Anima plugin
If you already installed the Anima Toolkit plugin, you’ll see an update through Sketch top-right corner. Remember to restart Sketch.
Our mission at Anima is to empower designers to own their design.
We are creating a workflow that enables designers to define, specify and architect all of the bits and pieces of User Interface, and get live prototypes & websites.
This allows designers to be independent on other parties of the team such as engineering who sometimes have different priorities than the design team.