How we built our Spotify Playlist Edition Concept
Hola amigos! Greetings all the way from Minami. Last week we published this dribbble shot where we showcased a concept idea to help better manage playlists in Spotify. We received a lot of positive feedback, thanks for all the love! We also saw several comments asking how we built the shot, so here we provide all the answers :)
The tools we used 🧰
For this prototype we only used two tools: Figma and Principle. We used Figma to design all of the screens — starting with the wireframes all the way to the final screens — and used Principle to design the animations.
Minami tip: Once you’ve finalized the designs for your final prototype, copy those frames into Principle and start thinking of them as a storyboard. Remember that when you animate stuff you’ll need a start and final state (this article might help). Pro tip: it’s much easier to manipulate layers in Figma than in Principle.
Time to do some magic 🧙♀️
As I mentioned before, Principle did most of the heavy lifting for this prototype and based on our experience… it’s the best tool for prototyping drag and drops interactions.
When using Principle to design this kind of stuff, it’s useful to know how the drag interaction works and to understand the magical properties of drivers. To do this, we recommend checking out JP Design Academy on Youtube:
For us, the biggest challenge we faced while working on this concept was dealing with multitouch. Principle doesn’t currently support this type of interaction, so we had to figure out a way to make it work. We settled for faking the multitouch and luckily that turned out really well (hopefully multitouch support is on the way soon 🙏🏽).
Minami tip: Keep an eye on the naming of your layers in Figma, as Principle bases the auto animation on the layer names; so just saying: be careful with that. Also, remember that you can fine tune animations using the “Animate” panel inside Principle. Go and try to get familiar with Drivers as they could be your best friend for these kinds of animations.
Time to shoot 🤳🏻
The last part was fairly simple. We used a DJI Osmo Gimbal to get the steady shots of the iPhone where we played with our prototype. Then, we did some color correction and applied a light background blur. Once final editing was complete, our shot was ready to be exposed to the world
We love to share 👨🏽🏫
Here we shared a brief description of our process, but we would love to know what else people are interested in hearing more about. If a more in-depth explanation of a particular step would be helpful or you want additional information or resources, please comment below and we would be happy to help you out.
Don’t forget to follow us on Dribbble to see in what else we are working on and stay tuned for new shots. Thanks for reading!
