This document discusses advanced topics for prototyping with Framer, including generative versus brute force approaches to creating UI elements, animation theory using curves and physics, adding and switching states, enabling dragging and constraining it, creating scroll and page components, separating functionality into reusable modules, and utilizing utilities to simplify common tasks.

1. Prototyping with Framer
Part 2: Advanced Topics
Dirty Backends & Sexy UIs · CIID · July 2015
—

2. Framer Anatomy
Brute Force vs. Generative Approach

3. Framer Anatomy
Brute Force
Creating all UI elements manually

4. Framer Anatomy
Brute Force
Creating all UI elements manually

5. Framer Anatomy
Generative Approach
Generating UI elements programmatically
→

6. Framer Anatomy
Animation Theory
Time…
Space…
Physics!

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

8. Framer Anatomy
Animation Theory (3)

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

10. Framer Anatomy
States (1)
Adding states
Switching states

11. Framer Anatomy
States (2)
Switching states (example)

12. Framer Anatomy
Dragging (1)
Enabling dragging

13. Framer Anatomy
Dragging (2)
Constraining dragging

14. Framer Anatomy
Scroll Components (1)
Create scroll component

15. Framer Anatomy
Scroll Components (2)
Wrap content imported from Photoshop
Photoshop

16. Framer Anatomy
Scroll Components (3)
Listen to scroll events

17. Framer Anatomy
Page Components (1)
Create page component and add page layers manually

18. Framer Anatomy
Page Components (2)
Create page component and add page layers generatively

19. Framer Anatomy
Modules (1)
Separate, organize, and re-use parts of prototypes across projects

20. Framer Anatomy
Modules (2)
Open myModule.coffee and create dragging interaction module

21. Framer Anatomy
Modules (2)
Open myModule.coffee and create dragging interaction module

22. Framer Anatomy
Modules (3)
Import module and call makeDraggable function

23. Framer Anatomy
Modules (3)
Import module and call makeDraggable function

24. Framer Anatomy
Modules (3)
Import module and call makeDraggable function

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

26. Framer Anatomy
Advanced Examples
[ TBD ]

27. [ Mini-exercise 3 ]