Prototyping Advanced Mobile Interactions with Framer

Cemre Güngör

Lesson 41

As motion and animations become more and more important in UI design, designers have started searching for the best tools to help them add a layer of interactivity to their work. You might have heard about After Effects, Quartz Composer or Xcode before in this context.

In this lesson, I want to introduce you to Framer, which is a new framework for making interactive prototypes for desktop and mobile. Framer hits a great spot balancing speed and flexibility, and has an easier learning curve than Quartz Compose or Xcode as it’s based on familiar tools and languages. Let’s dive in!

In this video, Koen, the creator of Framer, explains why being able to prototype motion and interactions is really important for designers, and why the current tools that we are using for interactive design are hindering our workflow. Koen will walk you through the demos from the home page of the Framer website, and then write some examples to show the basics Framer. Skip to 6:43 for a basic example of how views and animations work in Framer, and to 15:00 for adding interactions.

Watch the introduction video to get familiar with the core concepts of Framer.JS.

The most powerful feature of Framer is being able to turn your Photoshop or Sketch mockup into a Framer prototype with one click. This way, you can skip the boring legwork of bootstrapping a prototype from existing assets, and really integrate making interactive prototypes into your daily workflow. Framer has an official Photoshop exporter, and there is an unofficial Sketch exporter as well.

Watch the video to see how the Photoshop exporter works, and try to turn one of your own Photoshop or Sketch mockups into an interactive prototype with the exporter tools.

The strength of Framer lies in being able to prototype all sorts of complex gestures, especially those where how far you swipe or drag an element has a direct effect on its attributes. In this blog post, I set up a simple project to demonstrate a couple advanced drag gestures that can be prototyped with Framer.

Follow the tutorial, examine the source code, and try to add similar swipe interactions to your own Framer prototype that you made in the last step.

Framer's handy live editor lets you examine and tweak example code. To get inspiration about different sorts of things you can do with Framer, check out these examples. You can modify the code on the left pane to see how it affects the prototype.

Facebook
This demo recreates Facebook's home screen with two side panes, and zooming images.

Potluck
This is a prototype we made at Potluck to experiment with different ways to onboard new users.

Google Now
A demo made by a designer at Google who prototyped the transitions of Google Now using Framer.

Since Framer is a very young platform, documentation and examples on the internet are a little sparse. The Framer community, including the creator of Framer and other folks that make tools for Framer, hang out at this Facebook group to show new work and answer each others’ questions.

Join the Facebook group to learn from others who are using Framer and post your own questions.

Support Hack Design

Looking to level up your design education?

Get access to our Slack community when you support Hack Design. Ask for feedback from curators and preview new lessons.