prototyping with framer.js

Prototyping with Framer.jsJuan Sanchez Creative Director at Tack Mobile

tA Shared Workspace, Now Open at TAXI

assembly.ws [email protected]

PROTOTYPING IS A KEY PART OF THE CREATIVE PROCESS

WHY PROTOTYPE?

Static screens aren’t enough

Diagrams get you half way there

Photo by @JanLosert

Nothing beats direct interaction

Video by Google+ Photos

Test more than ideas

Get feedback from more sources

Refine & maintain fidelity

“A prototype is worth a thousand meetings.”

Or, pictures.

PROTOTYPING CAN TAKE MANY FORMS

Paper

There’s a range of fidelity

POP

InVision Proto.io Flinto FieldTest

Edge Animate

After Effects

Briefs Axure

Quartz Composer Avocado Origami

Framer.js

Pixate

Native

LOW HIGH

jQuery Mobile Sencha

Quartz Code

Different goals dictate the tool

LET’S TALK ABOUT FRAMER.JS

Framer.js is an open source JavaScript framework for rapid

prototyping

Great documentation

Tools

Generator

Studio

Use your tool of choice

Great community

Easy to share a prototypes

GETTING STARTED WITH FRAMER.JS

Framerjs.com

Core Components

Layers

Animations

States

Events

And more…

Layers

# Create a layer layerA = new Layer backgroundColor:”#0092D2", x:0, y:0, width:100, height:100

Layer Types

Layer Hierarchy

# Two ways to define hierarchy layerB.superLayer = layerA layerA.addSubLayer(layerB)

LayerA

LayerB

Animation

layerA.animate properties: opacity: 0.5 curve: "ease" repeat: 1 delay: 2 time: 1

Easing Curves

States

# The default state layerA = new Layer opacity:1 !# A new state titled "fade" layerA.states.add fade: {opacity:.5}

default fade

Events

Events & States

# Toggle states on click layerA.on Events.Click, -> # Cycle through all states imageLayer.states.next() ! # Cycle through chosen states imageLayer.states.next(“spin","fade") ! # Jump to a specific state imageLayer.states.switch "spin"

Dragging

# Make the layer draggable layerA.draggable.enabled = true # Set dragging speed layerA.draggable.speedX = 1 !# Prevent vertical dragging layerA.draggable.speedY = 0

Scrolling

# The superLayer layerA = new Layer height:100 !# The subLayer layerB = new Layer height:200, superLayer:layerA !# Enable scrolling on the superLayer layerA.scroll = true

Extend with other frameworks

Add parallax

Add maps

Use real data

Other touch events

PUTTING IT ALL TOGETHER

Something simple

More complex

Something advanced

A workflow example

Some other helpful tools

iOS Simulator Reflector ScreenFlow

MAMP Transmit

WHY FRAMER.JS?

QUESTIONS?

prototyping with framer.js

Design