I’ve been working on some app designs lately and was asked to explain how I would animate the login screen. Prior to today, my go-to has always been to sit next to the developer and explain in words the picture in my mind and then collaborate back and forth until we created a finished animation. Even this is difficult, but now, I have explain through an email message that will likely go through multiple hands before it gets to the development team. I need a better solution. My static images in Sketch accompanied with a text explanation just aren’t going to cut it.

I’m now in search of a UI animation/interaction prototyping tool to visually show interactions throughout my design. After a little research, I messed around with Principle and watched a couple tutorials. It seems easy to use so far and I like its integration with Sketch. There are so many options out there, how do I choose? Framer, Flinto, Proto.io to name a few. (List of 15 with pros and cons.)

Suggestions welcome!

I want to add animation design to my User Experience toolkit and learn to bring my static designs to life. My hope is it will allow me to explain my design intentions much easier and continue to close the gap between designer and developer.