Creating Your First Prototype with Framer

Experimenting with Interaction

Update: More Framer tutorials can be found at Prototyping with Framer.

No longer can your product just be usable and look good. Beautiful, subtle movement enhances the user experience and makes products more engaging, dynamic, and memorable. Paul Stamatiou, designer for Twitter, recently wrote that motion design is now a required skill for designers.

With so many prototyping tools popping up, I wanted to give Framer Studio a shot. Framer is a Javascript framework for prototyping interactions and animations. I had heard people raving about it on the Twittersphere before so what better way to kick the tires then trying to build a simple prototype.

To get started, I downloaded the free 14 day trial version and went over the learn section on their website, which contained basics around creating animations, properties, states, events, and more.

When you first open the app, you are presented with a code editor on the left pane and an instant preview of the code on the right. This makes experimenting with the code pretty easy.

I personally learn best looking at other code and then modifying it to figure out what is going on. Luckily, Framer provides many examples of different kinds of interactions and even some prototype projects as well, like the onboarding flow of Carousel.

Once I had a basic idea of how everything worked, it was time to create my first prototype. An app that does animation well is HotelTonight. The interaction in the app is pretty simple but is never excessive or gratuitous as to obstruct the app flow. My goal was to mimic the interaction from the hotel results screen to the hotel detail screen.

I took screenshots of the home and detail screen and separated the assets I would be animating in different layers using Sketch.

A great feature of Framer is the ability to import designs from Sketch or Photoshop documents.

Once imported, the following code was inserted:

htLayers = Framer.Importer.load “imported/ht

Images from my Sketch file also appeared in the preview window.

The “htLayers” variable name provides access to all the layers in my Sketch file, including the hidden ones. You can change the name to anything you want — I changed “htLayers” to just “ht” to keep it simple and short. You can then access your layers in one of two ways.

1. Add the layer name to brackets. For example, ht[‘detailLogo’] would access the layer named “detailLogo” in your imported Sketch or Photoshop file.
2. Append a period and the layer name. For example, ht.homeTitle would access the layer named “homeTitle” in your imported Sketch or Photoshop file.

While hidden layers are imported, they are hidden from view so you’ll need to first change their visibility to true.

# show hidden frames
ht[‘detailBottom’].visible = true
ht[‘detailImage’].visible = true
ht[‘detailBack’].visible = true
ht[‘detailArrow’].visible = true
ht[‘detailLogo’].visible = true

Since I didn’t want the detail page layers to be shown for the default view, I also had to set their opacity to 0 to start.

# hide frames
ht[‘detailBottom’].opacity = 0
ht[‘detailImage’].opacity = 0
ht[‘detailBack’].opacity = 0
ht[‘detailArrow’].opacity = 0
ht[‘detailLogo’].opacity = 0

When the user clicked on the “Hollywood Roosevelt Hotel” image (homeTop layer), it needed to transition to the the detail screen. Here’s all that needed to happen:

1. Move the Hollywood Roosevelt image and weather section up off screen and fade out a bit
2. Move section below the Hollywood Roosevelt image down off screen and fade out a bit
3. Move “Hollywood Roosevelt Hotel” text down
4. Fade out the Search icon
5. Fade away the Profile icon
6. Move and fade out “HotelTonight” title to the left
7. Fade in hotel detail information
8. Fade in hotel image
9. Move and fade in “Back” text from right to left
10. Fade in “Back Arrow” icon
11. Move and fade in “HotelTonight” logo from right to left

To achieve this, I added a state called “detail” to each of the layers and set their properties:

# add detail state to each layer
ht[‘homeTop’].states.add
 detail: { y: -500, opacity: .5 } 
ht[‘homeBottom’].states.add
 detail: { y: 1500, opacity: .5 }
ht[‘textRoosevelt’].states.add
 detail: { y: 996 }
 
ht[‘homeSearchIcon’].states.add
 detail: { opacity: 0 }
ht[‘homeProfileIcon’].states.add
 detail: { opacity: 0 } 
ht[‘homeTitle’].states.add 
 detail: { x: 0, opacity: 0 } 
 
ht[‘detailBottom’].states.add
 detail: { opacity: 1 }
ht[‘detailImage’].states.add
 detail: { opacity: 1 } 
ht[‘detailBack’].states.add
 detail: { opacity: 1, x: 40 }
ht[‘detailArrow’].states.add
 detail: { opacity: 1 } 
ht[‘detailLogo’].states.add
 detail: { opacity: 1, x: 340 } 

I then created a click event to go to the “detail” state for when the Hollywood Roosevelt image was clicked.

# click top section for detail view 
 
ht[‘homeTop’].on Events.Click, ->
 ht[‘homeTop’].states.switch(“detail”)
 ht[‘homeBottom’].states.switch(“detail”)
 ht[‘textRoosevelt’].states.switch(“detail”)
 ht[‘homeProfileIcon’].states.switch(“detail”)
 ht[‘homeSearchIcon’].states.switch(“detail”)
 ht[‘homeTitle’].states.switch(“detail”)
 ht[‘detailBottom’].states.switch(“detail”)
 ht[‘detailBack’].states.switch(“detail”)
 ht[‘detailArrow’].states.switch(“detail”)
 ht[‘detailImage’].states.switch(“detail”)
 ht[‘detailLogo’].states.switch(“detail”)

At this point, the prototype should be working but it was a little too slow so I played around with some of the animation times and curves.

# add animation options
ht[‘homeTop’].states.animationOptions =
 time: 0.6
ht[‘homeBottom’].states.animationOptions =
 time: 0.6 
 
ht[‘textRoosevelt’].states.animationOptions =
 curve: “spring(100,10,0)”
ht[‘homeSearchIcon’].states.animationOptions =
 time: 0.5
ht[‘homeProfileIcon’].states.animationOptions =
 time: 0.5
ht[‘homeTitle’].states.animationOptions =
 time: 0.5
 
ht[‘detailLogo’].states.animationOptions =
 curve: “linear”
 time: 0.4
ht[‘detailBack’].states.animationOptions =
 curve: “linear” 
 time: 0.4
ht[‘detailImage’].states.animationOptions =
 time: 1 

Finally, I added the ability to click the Back button to go back to the home screen by going to the next state, which is the default view.

# click back for default view 
ht[‘detailBack’].on Events.Click, ->
 ht[‘homeTop’].states.next()
 ht[‘homeBottom’].states.next()
 ht[‘textRoosevelt’].states.next()
 ht[‘homeProfileIcon’].states.next()
 ht[‘homeSearchIcon’].states.next()
 ht[‘homeTitle’].states.next()
 ht[‘detailBottom’].states.next()
 ht[‘detailBack’].states.next()
 ht[‘detailArrow’].states.next()
 ht[‘detailImage’].states.next()
 ht[‘detailLogo’].states.next()

Here is what the final result looks like:

It took relatively little time to put together a prototype after learning the basics, putting together the Sketch file and writing the code. You should be aware that Framer is code heavy so it helps to know basic JavaScript, although not required if you are not doing anything too complex. If you need help, you can always join their community on Facebook and ask questions.

Should you use it? My recommendation would be to dedicate a few hours during the week and try it out. Just from building this simple prototype, I can already tell Framer is really great if you know a little bit of code and you want to do dynamic and complex interactions. For simple animations, there are other tools that get the job done without needing to know any code. As a UX designer, being able to create interactive prototypes to test and show the developers has been invaluable in communicating with developers what happens between two mockups. By adding motion design to your repertoire, you’ll be a better designer now and towards the future.

Want to learn more about Framer?

Check out additional Framer tutorials, including what I would have done differently with this Hotel Tonight prototype knowing what I know now.

If you’re interested in a video course, where I take you step by step through the process of creating interactive prototypes with Framer, check out:

Rapid Prototyping with Framer
from O’Reilly Media

Watch the first few videos for FREE!

What do you think of Framer? Share your thoughts with me on Twitter (@kennycheny) and check out UX Design Weekly — a hand picked, curated list of the best user experience design links every week, published and delivered to your inbox every Friday for free.