Presentation on prototyping with Framer.js originally given at Denver Full Stack Meetup October 2014.

1. Prototyping with Framer.js
Juan Sanchez
Creative Director at Tack Mobile

2. tA Shared Workspace,
Now Open at TAXI
assembly.ws info@assembly.ws

3. PROTOTYPING IS A KEY PART OF
THE CREATIVE PROCESS

4. WHY PROTOTYPE?

5. Static screens aren’t enough

6. Diagrams get you half way there
Photo by @JanLosert

7. Nothing beats direct interaction
Video by Google+ Photos

8. Test more than ideas

9. Get feedback from more sources

10. Refine & maintain fidelity

11. “A prototype is worth a thousand
meetings.”
Or, pictures.

12. PROTOTYPING CAN TAKE
MANY FORMS

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

14. Different goals dictate the tool

15. LET’S TALK ABOUT FRAMER.JS

16. Framer.js is an open source
JavaScript framework for rapid
prototyping

17. Framer.js is an open source
JavaScript framework for rapid
prototyping

18. Framer.js is an open source
JavaScript framework for rapid
prototyping

19. Great documentation

20. Tools
Generator
Studio

21. Use your tool of choice

22. Great community

23. Easy to share a prototypes

24. GETTING STARTED WITH
FRAMER.JS

25. Framerjs.com

26. Core Components
Layers
Animations
States
Events
And more…

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

28. Layer Types

29. Layer Hierarchy
# Two ways to define hierarchy
layerB.superLayer = layerA
layerA.addSubLayer(layerB)
LayerA
LayerB

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

31. Easing Curves

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

33. Events

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

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

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

37. Extend with other frameworks
Add parallax
Add maps
Use real data
Other touch events

38. PUTTING IT ALL TOGETHER

39. Something simple

40. More complex

41. Something advanced

42. A workflow example

43. Some other helpful tools
iOS Simulator Reflector ScreenFlow
MAMP Transmit

44. WHY FRAMER.JS?

45. QUESTIONS?