Prototyping Advanced Mobile Interactions with Framer

Cemre Güngör

Cemre Güngör

@gem_ray

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!

  1. Introduction to Framer.JS

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

  2. 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.

  3. 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.

  4. Framer Facebook Group

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

  5. Demos made with Framer

    • 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.