![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…](https://image.slidesharecdn.com/framerpart2advanced-150714215342-lva1-app6892/85/Framer-part2-advanced-25-320.jpg)
![Framer Anatomy
Advanced Examples
[ TBD ]](https://image.slidesharecdn.com/framerpart2advanced-150714215342-lva1-app6892/85/Framer-part2-advanced-26-320.jpg)
![[ Mini-exercise 3 ]](https://image.slidesharecdn.com/framerpart2advanced-150714215342-lva1-app6892/85/Framer-part2-advanced-27-320.jpg)
Framer part2 advanced
- 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 →
- 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
- 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 ]