Prototyping with Framer.js

Noah Levin - @nlevin

Follow along at nlevin.com/framer

Agenda

  1. Show some cool stuff
  2. What's the big deal?
  3. Some basics to get started
  4. Set up and build things

Show some cool stuff

Prototypes built with framer

If you'd like, follow along on an iPhone5: framer.camp/examples/

Facebook Feed

Show Code

Google Now

Show Code

Steinbeck Doodle

Download Example

Potluck Onboarding

Show code

Potluck Cards

What you'll make today

Simple tap

Dragging

Scrolling

Start downloading this zip file

It contains a bunch of source files and stuff

(but we'll get to that later)

What's the big deal?

Some background

Who?

Why?

Traditional Prototyping

Framer Prototyping

For example

3 Simple Steps

Existing Tools


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

Some basics to get started

Framer Studio

Animation Curves and Properties

            layerName.animate
              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
            curve:
              "linear"
              "bezier-curve"
              "spring"

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

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

Set up and build things

Hands-on

Clicking

Dragging

Scrolling

spring(tension, friction, velocity)

Resources

Additional Tools

Thanks!

@nlevin

Appendix

Credits