Prototyping with Framer

Noah Levin · @nlevin

June 4th, 2015

Follow along at



  1. Show some examples
  2. Why framer?
  3. Play with the basics
  4. Importing and Mirroring

Show some examples

Prototypes built with framer

Why Framer?

How it stacks up against other tools

2014: Why Prototype?

2015: Which tool? (there's a lot...)

"The state of Interaction Design tools" · Pasquale D’Silva

Strengths and weaknesses

(Not to scale)

Some questions to ask

Some basics to get started

Coffeescript, Events, and Animations

Get Framer Studio

Coupon for the class: [REDACTED]

Animation Curves and Properties


                # Positioning
                x: 0,
                y: 0,
                opacity: 0.5,
                rotationX: 250,

                # Size
                scale: 1.5,
                width: 500,
                height: 800,

                # Filters
                blur: 100,
                invert: 100,
                brightness: 150,
                contrast: -50,
                hueRotate: 150,
                saturate: 50

                # Shadows
                shadowX: 10
                shadowBlur: 16
            # Curve types

              # For linear and bezier
              "ease-in", "ease-out", "ease-in-out", [.4,0,.2,1]
              # For springs. Shorthand: spring(tension,friction,velocity)
              tension: 900
              friction: 25
              velocity: 30

            # For Bezier's and Linear
            time: 1 # in seconds
            delay: 0 # in seconds
            repeat: 0

Importing and Mirroring

Sketch and your phone

3 Simple Steps

For example

Download this zip file

It contains the sketch file we'll be using

spring(tension, friction, velocity)