Prototyping with Framer

Part 2: Advanced Topics

Dirty Backends & Sexy UIs · CIID · July 2015

—

Framer Anatomy Brute Force vs. Generative Approach

Framer Anatomy Brute Force

Creating all UI elements manually

Framer Anatomy Brute Force

Creating all UI elements manually

Framer Anatomy Generative Approach

Generating UI elements programmatically

→

Framer Anatomy Animation Theory

Time…

Space…

Physics!

Framer Anatomy Animation Theory (2)

• Ease in/out → curve:“ease-in”

• Spring → curve:“spring(speed, tension, velocity)”

• Bezier → curve:“bezier-curve(0.17,0.67,0.78, 1)”

Curves describe the type of animation

Framer Anatomy Animation Theory (3)

Framer Anatomy Animation Theory (4)

Why use animation in UI?

• Draw focus

• Create more coherent spatial representation

• Make experience feel faster and/or more dynamic

• Affordance

• Sex it up

Framer Anatomy States (1)

Adding states

Switching states

Framer Anatomy States (2)

Switching states (example)

Framer Anatomy Dragging (1)

Enabling dragging

Framer Anatomy Dragging (2)

Constraining dragging

Framer Anatomy Scroll Components (1)

Create scroll component

Framer Anatomy Scroll Components (2)

Wrap content imported from Photoshop

Photoshop

Framer Anatomy Scroll Components (3)

Listen to scroll events

Framer Anatomy Page Components (1)

Create page component and add page layers manually

Framer Anatomy Page Components (2)

Create page component and add page layers generatively

Framer Anatomy Modules (1)

Separate, organize, and re-use parts of prototypes across projects

Framer Anatomy Modules (2)

Open myModule.coffee and create dragging interaction module

Framer Anatomy Modules (2)

Open myModule.coffee and create dragging interaction module

Framer Anatomy Modules (3)

Import module and call makeDraggable function

Framer Anatomy Modules (3)

Import module and call makeDraggable function

Framer Anatomy Modules (3)

Import module and call makeDraggable function

Framer Anatomy Utilities

Custom functions that make certain things easier to do…

• Utils.delay 0.5, ->

• Utils.randomColor (0.75)

• Utils.modulate (5, [0,100],[0,360] )

• etc…

Framer Anatomy Advanced Examples

[ TBD ]

[ Mini-exercise 3 ]