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 ]