Framer: Creating Micro-interactions

There are a lot of prototyping tools out there, last week our class spent some time working with Axure. I wasn’t a huge fan — the interface seemed unintuitive and I didn’t want to invest more time in the Axure ecosystem. I decided to check out Framer, a design and prototyping tool built on top of CoffeeScript. Framer looks and feels very much like Sketch, but it includes a code tab that allows you to code with CoffeeScript. I hadn’t used CoffeeScript prior to launching the application and my coding skills are pretty basic, but I really enjoyed working with this tool. I created a quick prototype of the Starbucks app, I’ve included a couple examples of how to create these interactions with CoffeeScript below.

Icon Animation

CoffeeScript states allow you to work with different layers and animate objects in Framer. To complete this interaction I used two hearts, one with a grey outline and the other a green solid shape. I set the default opacity of the solid green heart to zero in the design tab. After switching over to the code tab, I used states to change the opacity and cycle back and forth when the button is tapped.

Logo Fade-in

Framer allows you to easily animate different elements like a logo.

Once again, I set the opacity of the logo to zero in the design tab. After switching over to the code tab, Framer gives you options to animate different layers. This enables the user to figure things out without having to understand all of the ins and outs of CoffeeScript. The opacity and duration of the fade can be customized.

Overall, it did take some time for me to wrap my head around the Framer code tab. There is a learning curve and constraints to using any tool out there, but I think Framer is a program that will improve my prototypes with micro-interactions.