Sketch (despite some bugs its still a great app with tonnes of plugins).
At the same I've also been using tools such as InVision and Marvel to put together basic, clickable walk throughs. But I wanted to dig a bit deeper and improve my hands on knowledge of interaction design, so I decided to have a look at Framer Studio.
NB: This post isn't meant to be a primer for Framer Studio, there are loads of good resources on the Framer website where you can learn the basics.
I started by downloading the awesomely free Now UI Kit from InVision. I didn't really have a plan for what I was going to prototype, so I just picked a few random mobile screens from the Sketch file (login, home and off-canvas navigation) and got stuck in.
I then opened up Framer Studio, set the viewer to iPhone 6 (as this is the smartphone I have), fired up Frameless App on my device (for testing) and just started playing around with different animation settings (colour saturations, scale, opacity etc.).
My code logic went something like this:
The beauty of Framer Studio is that you can quickly tweak your animation settings using the live preview feature.
After a few hours of playing around (and getting a little side tracked) I ended up with a prototype that did the following:
Check out this link in Chrome, Safari or on your iOS device to see the prototype in action.
I also captured the animation on device using QuickTime on my mac. Check out the video below.
The code I wrote for the prototype is pretty basic, repetitive and has plenty of redundancy. Once my coffee script gets better I'll start using conditions, loops, functions and tighten things up a bit.
I also didn't set up any thresholds for the interactions, use any spring curves or fine tune the transitions. I also wouldn't hold up the example above as a killer example of interaction design or app usability. There is also an initial lag which affects the animation due to fact that all the Sketch assets are loading. Give your browser (a soft) refresh and it should look a bit slicker.
Yes for sure. I think Framer is particularly useful for prototyping those interactions that are beyond InVision and Marvel.
Framer definitely has it's place and I wouldn't recommend using it to prototype out a whole app, as your code will soon get pretty bloated. But for micro interactions and transitions between screens/views I think it is invaluable.
I've included a ZIP file with the Sketch and Framer source files if you want to see what I've done.