Prototyping with Framer

Noah Levin · @nlevin

June 4th, 2015

Follow along at nlevin.com/whitespace

Agenda

Show some examples
Why framer?
Play with the basics
Importing and Mirroring

Show some examples

Prototypes built with framer

Why Framer?

How it stacks up against other tools

2014: Why Prototype?

Save lots of developer time and make better decisions
We have the look, let's dictate the feel
Have a frame of reference for what "buttery" feels like
Convince the team your ideas are worth building
Tools significantly affect our design decisions

Strengths and weaknesses

(Not to scale)

Some questions to ask

Process: How far in the product development cycle are we?
Constraints: What can my engineers actually build?
Context: Does this need to be responsive? Work with real data?
Personal comfort: Can you code? Prefer to work visually?
Time: How much time do you have?

Some basics to get started

Coffeescript, Events, and Animations

Get Framer Studio

Coupon for the class: [REDACTED]

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