Getting Started with Framer.js

Framer.js is a really powerful javascript based interaction prototyping tool made by Koen Bok. There are a number of great interaction prototyping tools, and like any other tool - the best one is the one you know how to use. But, for a number of reasons, I think Framer.js is the best solution out there right now and it's only going to keep gaining momentum.

Koen released a great, in-depth look at how Framer works just a week ago. Ale Muñoz and Cemre Güngör are working on a sketch script to export mockups to Framer. Cemre also wrote a great article on an undocumented gestural interaction, Draggable. Bottom line is that Framer has a lot of really great stuff going for it right now. If you don't have an interaction prototyping process, you would benefit greatly from starting to learn and experiment with Framer.

To encourage you in that goal, here is a quick getting started guide for prototyping iOS interaction in Framer.

Photoshop

If you haven't done it yet, go to the Framer website download the framer.app. The basic workflow for prototyping with Framer goes like this -

  • design your app in photoshop
  • fire up framer.app and click "run"
  • open index.html in a browser any way you choose
    • protip: because framer is a javascript app, you can interact with your prototype on your phone over your local network
    • hit the "esc" key to see how your layers got organized in the code
  • hack away on app.js in your favorite text editor, referencing the framer docs for objects and properties

The best way to get started on this is to give it a try. Use any old photoshop file you've got of an iOS design, run the Framer script and open the file.

Important notes

  • layer groups in photoshop are turned into objects using the same name
  • play around with how you organize your layer groups - good, semantic organization will lead to simplicity when writing your javascript

JavaScript

The fastest way to start playing around with the available JavaScript properties is the relatively hidden Framer Editor. Here is the code that Koen goes over in one of the tutorials, but this is the basic context of how writing your JavaScript will work when prototyping in Framer. It's relatively straight-forward, so if the JS is what's scaring you about jumping into Framer, don't be alarmed.

viewA = new View({width:250, height: 250});

viewA.x = 100
viewA.y = 100

viewA.opacity = 1

viewA.animate({
      properties: {y:200},
      time: 1000
});

This is roughly the basic JavaScript that Koen uses in his tutorial, but let's walk through it a bit. Our first line is a simple view instantiation with a defined width and height so there is something on our screen. If you take all the other code out except for the view instantion, you get the red box.

Once our view is on the screen, we can use our object and start applying some Framer properties to it. Framer ships with tons of great, simple geometric properties to easily define and organize positioning of elements. We can add a simple x,y coordinate set to give the box some room off the container.

The main proptety we want to learn about is animate. This is where a lot of the magic sauce for Framer is going down. We can use lots of simple, straight-forward animation properties to make our objects inherit movements, working with simple JavaScript events like onClick you might be familiar with.

Even better still, all of this continues through the browser and works on your phone.

Posted September 2013