Multi-Screen Flows in Framer

Here's the deck from a brief talk I gave at Disney Seattle on July 9, 2015. In it, I quickly covered an approach for creating multi-screen prototypes using Framer JS, and then showed off a new module I built to help with screen-to-screen transitions.

Watch the video on YouTube:
https://www.youtube.com/watch?v=ZA9TKn_bIVY

Grab the module on GitHub:
https://github.com/chriscamargo/framer-viewNavigationController

Transcript

1. Multi-Screen Flows A FramerJS talk by @chriscamargo
2. Chris Camargo Sr Interaction Designer @ Disney Parks & Resorts Digital Roughly 12 years of experience in design (mostly at startups) Hadn’t built anything with FramerJS before working at Disney (7 months ago)
3. Why multi-screen flows?
10. How hard could it be?
11. superLayer
12. superLayer myView  =  new  Layer          width:  Screen.width          height:  Screen.height          backgroundColor:  “white”
13. superLayer myView  =  new  Layer          width:  Screen.width          height:  Screen.height          backgroundColor:  “white” myHeader  =  new  Layer          width:  Screen.width          height:  64          backgroundColor:  “red”
14. superLayer myView  =  new  Layer          width:  Screen.width          height:  Screen.height          backgroundColor:  “white” myHeader  =  new  Layer          width:  Screen.width          height:  64          backgroundColor:  “red”          superLayer:  myView
15. states
16. states myView.states.add          pushLeft:    {x:  -­‐Screen.width}          pushRight:  {x:  Screen.width}          center:        {x:  0}
17. Take a Tour Next Create an account SuperNifty App Easy enough for a simple flow, right? Here’s why this app is rad Even more awesomeness Sign In
18. Take a Tour Next Create an account SuperNifty App this app is rad awesomeness Sign In button_takeTour.on  Events.Click,  -­‐>          view_intro.states.switch  pushLeft          view_tour1.states.switch  center button_tour1_back.on  Events.Click,  -­‐>          view_intro.states.switch  center          view_tour1.states.switch  pushRight Just a few functions to handle clicks…
19. button_takeTour.on  Events.Click,  -­‐>          view_intro.states.switch  pushLeft          view_tour1.states.switch  center button_tour1_back.on  Events.Click,  -­‐>          view_intro.states.switch  center          view_tour1.states.switch  pushRight button_tour2_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushLeft button_tourNext.on  Events.Click,  -­‐>          view_tour1.states.switch  pushRight          view_tour2.states.switch  center button_tour2_createAcct.on  Events.Click,  -­‐>          view_createAcct.states.switch  center          view_tour2.states.switch  pushLeft button_tour3_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushRight button_createAcct_facebook.on  Events.Click,  -­‐>          view_tour1.states.switch  center   …wait a minute.
20. button_takeTour.on  Events.Click,  -­‐>          view_intro.states.switch  pushLeft          view_tour1.states.switch  center button_tour1_back.on  Events.Click,  -­‐>          view_intro.states.switch  center          view_tour1.states.switch  pushRight button_tour2_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushLeft button_tourNext.on  Events.Click,  -­‐>          view_tour1.states.switch  pushRight          view_tour2.states.switch  center button_tour2_createAcct.on  Events.Click,  -­‐>          view_createAcct.states.switch  center          view_tour2.states.switch  pushLeft button_tour3_back.on  Events.Click,  -­‐>          view_tour1.states.switch  center          view_tour2.states.switch  pushRight button_createAcct_facebook.on  Events.Click,  -­‐>          view_tour1.states.switch  center   …wait a minute. This is just for 3 screens?
21. Create Account chriscamargo •••••••• Get Started You’re all set! What about more complex flows? Sign Up SuperNifty App Log In Log In chriscamargo •••••••• •••••••• Open Last Project Welcome back! Take a Tour
22. The overhead grows quickly!
23. How do developers deal with this?
24. Navigation View Controllers
25. Navigation View Controllers iOS – UINavigationController Android – FragmentManager
26. An Ideal Controller - Keeps track of which view is current view - Keeps track of history for Back functionality - Provides built-in transitions - Provides events for willTransition, didTransition, etc
27. But we don’t have view controllers in Framer…
29. DEMO TIME!
30. Get the module on GitHub https://github.com/chriscamargo/framer-viewNavigationController/ Thanks!