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

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

Anima App
Anima App
Mar 4, 2019 ยท 4 min read

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

Image for post
Image for post

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

Image for post
Download the Sketch File

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.

Image for post
Image for post

Layout

We go over how to make your prototype responsive and adapt to each and every screen size available. Using Breakpoints, Pins, Stacks, and Padding.

Image for post

Flow

We show how you link different screens and create Overlays.

Image for post

Smart Layers

We add some razzle-dazzle using video background.

Image for post

Animations

We explain how to create animations like this one right here

Image for post
Image for post

Interactions

Here we show how to create interactive components that trigger on events like Hover

Image for post
Image for post

Live Input Fields

Image for post
Image for post

Preview

When everything is ready, Preview in Browser enables us to see it all in action before sharing.

Image for post

Share

This is the part where we amaze our clients and team members with our creation.

Image for post

๐Ÿ’ช 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.

Image for post
Image for post

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.

As always, weโ€™re excited to hear your feedback!

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram. Or, vote for new features at UserVoice.

Stay creative!
โค๏ธ Anima team

Design + Sketch

The best collection of articles, tips, tutorials, andโ€ฆ

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and youโ€™ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer โ€” welcome home. Itโ€™s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store