Prototyping Advanced Mobile Interactions with Framer
Cemre Güngör
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!
-
Watch the introduction video to get familiar with the core concepts of Framer.JS.
-
Photoshop and Sketch integration
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
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.
-
Join the Facebook group to learn from others who are using Framer and post your own questions.
-
- 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