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!
-
Introduction to Framer.JS
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. -
Photoshop and Sketch integration
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. -
Prototyping Swipe and Drag Gestures with Framer
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. -
Demos made with Framer
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.
- Facebook
-
Framer Facebook Group
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.
Cemre Güngör
Founder, Branch
My name is Cemre, pronounced GEM-RAY. I hail from Turkey and Finland, and call Brooklyn home. In Summer 2011, I founded Branch.com.
You can follow @gem_ray on twitter.
