Prototyping With Framer

Prototyping With Framer

UPDATE 4/2015: The example files can now be found at http://bit.ly/framerworkshop-updated where they will stay for ETERNITY.

A workshop for designers that introduces Framer Studio and basic CoffeeScript. Start merely curious and finish having prototyped responsive interactions and a basic mobile app.

I taught this workshop at Fullscreen as a tech talk on July 11, 2014, and again at General Assembly in Santa Monica on July 16, 2014.

49eec51ef4a3335cb3247a41d1f08971?s=128

Jay Stakelon

July 16, 2014
Tweet

Transcript

  1. PROTOTYPING WITH FRAMER A workshop for designers by @stakelon

  2. HI THERE

  3. JAY STAKELON VP Product Design @Fullscreen ! ! ! !

    ~10 years experience design, web engineering, product management, startups @stakelon
  4. GET THE MATERIALS & FOLLOW ALONG h p://bit.ly/framerworkshop

  5. WHY PROTOTYPING?

  6. Concept & develop what you’re building. Build shared understanding of

    products. Get real feedback & validate your work.
  7. h p://www.google.com/design/spec/material-design/introduction.html Motion provides meaning.

  8. Designers define not just how interfaces look, but also how

    they react and adapt to user input. Static mockups only get halfway there. Touch devices continue to allow for greater and greater expression through gesture and motion. Animation can literally make users perceive your interfaces as faster, more responsive and more pleasant to use. CONCEPT & DEVELOP YOUR IDEAS Disney’s 12 principles of animation, applied to UI design
 h p://www.smashingmagazine.com/2012/10/30/motion-and- animation-a-new-mobile-ux-design-material/
  9. Get out of the deliverables business. h p://www.flickr.com/photos/64519085@N00/4305366199/ Jeff Gothelf

    h p://www.smashingmagazine.com/2011/03/07/lean-ux-ge ing-out-of-the-deliverables-business/
  10. Don’t struggle to find the right words. Instead, literally put

    your designs into the palms of your teams’ hands. In addition to (or instead of) sharing mockups and wireframes, prototypes act as living documentation. Instead of burning through design-engineering cycles to dial in the feel of an interface, get it dialed in on your own. CREATE SHARED UNDERSTANDING
  11. Ideas are cheap. Building things is expensive. h p://www.cashcats.biz/

  12. You can use prototypes to prove, or disprove, an idea

    cheaply and quickly compared to building and shipping production so ware. For user testing—whether usability/task completion or overall concept validation—high-fidelity prototypes can be almost as good as the real thing. GET FEEDBACK & VALIDATION
  13. WHY FRAMER?

  14. BUILT FOR DESIGNERS ➡ Export directly from Photoshop or Sketch

    to a Framer project.
  15. NEAR-REAL-TIME Framer Studio minimizes the feedback loop between code and

    visual context.
  16. IT’S JUST JAVASCRIPT Javascript is the language of the modern

    web. Coffeescript is a language that compiles to Javascript, but arguably has a cleaner and easier-to-learn syntax. Get into Coffeescript
 h p://coffeescript.org/
 h p://www.codeschool.com/courses/coffeescript
  17. WHEN TO USE FRAMER Framer shines for native-feeling animations and

    complex interactions. Framer works incredibly well for prototyping mobile interactions and seeing how they work directly on the device. Framer’s not necessarily what you’d use to string together flows, to test information architecture or to prototype an entire website. Use an application prototyping tool like InVision, Axure or even Keynote. Use Framer in conjunction with application prototyping tools if you want higher fidelity for detailed interactions or UI elements.
  18. Framer Examples

  19. MOBILE PROTOTYPING Framer is awesome for prototyping mobile UIs with

    native-feeling interactions. Present prototypes on your laptop or interact with them directly on the device.
  20. TABLET & MULTITOUCH Framer allows designers to create prototypes for

    any touch device. Add a library like hammer.js for advanced touch interactions. Since it’s just Javascript you can mix in other libraries and create your own.
  21. WEB PROTOTYPING Though a less commonly-discussed use case, designers use

    Framer to prototype web apps and desktop interfaces.
  22. SO MANY MORE “OFFICIAL” EXAMPLES AT h p://examples.framerjs.com/

  23. THE WORKSHOP

  24. RESPONSIVE INTERACTION BASIC ANIMATION WHAT WE’LL BUILD APP PROTOTYPE

  25. THE EXERCISES Each lesson has an exercise. One lesson has

    two! Most lessons include .psd and Sketch files for reference. All of them include the solution (suffixed -solution). Don’t use the solutions unless you’re stuck :) Lessons 2 and onward include starter projects (suffixed -exercise) that have code comments providing hints, and the stuff you’ve already learned completed for you. You can start here rather than generating a new project from the .psd.
  26. DOWNLOAD THE EXERCISES h p://bit.ly/framerexercises

  27. LESSON 1 HELLO, FRAMER

  28. FRAMER STUDIO

  29. ERRORS & THE INSPECTOR Framer Studio highlights problematic code in

    red and prints error messages in the lower le For superpowers, click the icon in the lower le to open the Web Inspector. Use the Console to debug and to console.log
  30. LAYERS “A layer is just a rectangle that draws stuff

    in the browser” - Framer Docs Shortcut: create an image layer by dragging any .png file into the Preview panel Layers can live inside other layers. A Layer’s position is relative to its superLayer BigSquare BigSquare LittleSquare LittleSquare.superLayer # BigSquare! BigSquare.subLayers[0] # LittleSquare
  31. PROPERTIES Set properties when you initialize a new 
 Layer,

    or anytime a erwards Framer docs list ‘em all, including sexy
 filters (yes, blur) and shadows # Commonly used properties include! MyLayer = new Layer! # Positioning! x: 100! y: 100! # Size! height: 500! width: 500! scale: 1! # Visual! visible: true! opacity: 1! rotation: 0! backgroundColor: '#333'! clip: true! # Hierarchy! superLayer: VideoContainer
  32. EVENTS You’ll always use this one
 Events.Click (it’s the same

    as Events.TouchEnd and triggered if a user clicks or taps) Standard DOM events
 Events.MouseOver, Events.MouseOut Touch events
 Events.TouchStart, Events.TouchMove, Events.TouchEnd Drag events
 Events.DragStart, Events.DragEnd, Events.DragMove And more events for scrolling, animation start/stop/end, and states switching Events are things that happen to layers, o en caused by user interaction
  33. LISTENING FOR EVENTS # Listen for an event with Layer.on!

    BlueBox.on Events.Click, (evt)->! # Perform the actions below when the event occurs! BlueBox.opacity = .5! BlueBox.x = evt.x + 100 # Move BlueBox 100px to the right ✋
  34. EXERCISE 1: INTRO Create a new Framer project. Import the

    three .png files in the IntroImages folder into Framer by dragging them into Framer’s preview pane on the right. Lay them out using their x and y properties. Hide the Heart layer when you click on it by listening for Events.Click. Extra credit
 Make the Heart a subLayer of the Card layer using the superLayer property.
  35. PREVIEWING View in Framer’s presentation mode or use the prototype

    directly on your device If you’re working with @2x images make sure that you adjust the viewport meta tag in the autogenerated index.html file to initial-scale=0.5 initial-scale=0.5
  36. PREVIEWING Using Dropbox public folder is a simple way to

    get prototype to the device. Codekit and Cactus are two other solutions On iOS devices use Clear Browser to run your prototype ▻ ▻ UPLOAD FRAMER PROJECT TO YOUR PUBLIC FOLDER OPEN THE PUBLIC LINK IN CLEAR BROWSER IT’S ALL 
 GOOD
  37. LESSON 2 ANIMATION BASICS Also includes Generating From Photoshop/Sketch

  38. GENERATING Import your Photoshop or Sketch docs directly to Framer

    Studio Use layer sets or groups to organize your mockup
  39. PHOTOSHOP & SKETCH Every layer set or group becomes a

    Framer Layer Name each layer uniquely or Framer will do it for you (and you won’t like it) If a layer set or group’s visibility is off, it won’t export to Framer
  40. IMPORTED LAYERS Refer to imported Layers by the name you

    gave the layer set or group Declu er the view by hiding Layers that you don’t initially need # Framer will import generated layers and load them into an object! # I change the object's name to just "Layers" for simplicity! Layers = Framer.Importer.load "imported/AnimationBasics"! ! # These are both references to the PhotoCard! Layers["PhotoCard"]! Layers.PhotoCard! ! # Both of these will hide the layer from view! # visible = false will hide the layer and it won't receive events! Layers.PhotoCard.visible = false! # opacity = 0 will hide the layer but it will still receive events! Layers.PhotoCard.opacity = 0
  41. ANIMATING LAYERS # A more detailed animation, ! # written

    out the "long way"! myLayerAnimation = new Animation! layer: MyLayer! properties:! opacity: 1! x: 200! curve: 'spring-rk4'! curveOptions:! tension: 150! friction: 15! velocity: 5! time: .25! delay: .25! Animation.start() # An animation that uses the! # Layer.animate shorthand! MyLayer.animate! properties:! opacity: 1! time: .25! curve: 'ease-in-out' Layer.animate is the quickest way to create and run an animation
  42. BASIC CURVES The default animation curve is “linear” Other defaults:

    “ease”, “ease-in”, “ease-out”, “ease-in-out” Use springs and bezier curves for finer-grained control LINEAR EASE EASE-IN EASE-OUT EASE-IN-OUT
  43. EXERCISE 2a: BASIC ANIMATION Create a new Framer project and

    generate layers from AnimationBasics.psd. Hide the Heart layer by making it transparent. When the user clicks on the now-hidden Heart layer, fade it in using an animation. Use the “ease-in-out” curve and run the animation over .25s.
  44. BEST PRACTICES Try to keep animations shorter than .5 seconds

    A good default for bu on animations and direct responses is .25 seconds Transitions between views can go longer Generally “linear” animations feel stilted; use “ease” or “ease-in-out”
  45. USING THE STATE MACHINE States can help manage Layers that

    have multiple positions and sizes There’s always a default state that reflects the Layer’s initial properties # Add a few states to a layer! MyLayer.states.add! stateOne: { opacity: .5, x: 200 }! sdf: { opacity: 1, x: 400 }! # Specify how the animations should look! MyLayer.states.animationOptions =! curve: 'ease'! time: .25! # Animate to stateOne! MyLayer.states.switch ‘stateOne'! # Animate the layer to the next state! MyLayer.states.next() default stateOne secondState
  46. Open StateMachine-exercise.framer in Framer Studio. The Heart layer’s opacity is

    set to 0 by default. Use states to specify an on state for the Heart layer that sets opacity to 1. Use states.animationOptions to specify an animation curve and timing. Toggle between the two states on click by using states.next(). The heart should fade in and out alternately when you click it. Extra credit
 Add user delight by pulsing the heart’s outline (the Outline layer) when you like and unlike the photo. EXERCISE 2b: STATES
  47. LESSON 3 DRAGGING & ANIMATION CURVES

  48. DRAGGING ✋ # One line of code makes any Layer

    draggable.! # Click or tap and drag the Layer, and it will! # remain where you release it.! BlueBox.draggable.enabled = true
  49. DRAG EVENTS Remember, dragging emits events when the user starts

    and stops, as well as while the Layer is being dragged Events.DragStart ✋ Events.DragEnd Events.DragMove Events.DragMove Events.DragMove
  50. BEZIER CURVES & SPRINGS Use these curves to create expressive

    
 animations that can feel natural or exaggerated Omit the time property when you use springs The best way to learn how bezier curves work
 h p://cubic-bezier.com Play with Framer spring animations and bezier curves
 h p://stakes.github.io/framerplayground MyLayer.animate! curve: 'bezier-curve'! curveOptions: [.25, 1, .25, 1]! time: .25! ! MyLayer.animate! curve: 'spring-rk4'! curveOptions:! tension: 150! friction: 15! velocity: 5! ! MyLayer.animate! curve: 'spring-dho'! curveOptions:! stiffness: 150! damping: 10! mass: 1! velocity: 0
  51. Make both thumb images invisible and enable dragging for the

    PhotoCard layer. Use Events.DragEnd to reset the PhotoCard layer back to its original position when it’s released. Hint: note the custom addition of an originalFrame property that stores the original properties on the layer itself. Animate the PhotoCard layer using the “spring-rk4” animation curve. Extra credit
 Use Events.DragStart to provide an affordance that implies that the card is draggable. Either scale the card down or up slightly when the user touches it. EXERCISE 3: DRAGGING
  52. LESSON 4 RESPONSIVE UI Also includes Coffeescript Concepts

  53. VARIABLES Variables let you store something by name. They’re containers

    for information If you try to get the value of a variable that doesn’t exist, it returns undefined You’ve been using variables this whole time! The Layers object, for instance
  54. FUNCTIONS A function is a reusable block of code that

    takes input and generates output Create functions to run code later, or to do something multiple times setPosition = (newX)->! BlueBox.animate! properties:! x: newX! ! setPosition(300)! setPosition(600) setPosition(300) setPosition(600) More about functions in Coffeescript
 h p://coffeescript.org/#literals
  55. CONDITIONALS Use if, else if and else to define your

    prototype’s logic and to perform different actions depending upon conditions Way more detail about functions AND conditionals
 h p://arcturo.github.io/library/coffeescript/02_syntax.html BlueBox.on Events.DragEnd, ()->! if BlueBox.x > 100! BlueBox.animate! position: { x: 300 }! else if BlueBox.x < -100! BlueBox.animate ! position: { x: -300 }! else! BlueBox.animate! position: { x: 0 }
  56. DYNAMISM Dynamic interfaces respond on-the-fly to user input or interaction

    Set layer properties based on the changing value of another property ✋ # As BlueBox is dragged, rotate and scale it! BlueBox.on Events.DragMove, ()->! # Moderate how the x value maps to a scale value! BlueBox.scale = BlueBox.x / 300! # Moderate the value differently for rotation! BlueBox.rotation = BlueBox.x / 10
  57. EXERCISE 4: RESPONSIVE UI Write a function called resetPosition that

    animates the PhotoCard layer back to its original position. Call this function on the PhotoCard’s Events.DragEnd event. On Events.DragMove, fade the ThumbsUp or ThumbsDown layer depending on the direction and distance you’ve dragged on the x axis. The opacity value of the thumb should increase as you drag further away from the original position. Make sure you reset the opacity of both thumbs to 0 on Events.DragEnd. Iterate on this drag interaction by also rotating the PhotoCard depending on which direction you drag it on the x axis. Extra credit
 If you drag the PhotoCard layer more than 250px either way on the x axis, animate the card out of view.
  58. LESSON 5 PROTOTYPING AN APP Also includes Scrolling Layers

  59. SCROLLING You can scroll a layer’s contents in both directions

    or just one Enable scrolling, make sure the layer has an explicit width/height, and set the clip property to true for that layer # Enable vertical scrolling for! # everything in the Container! Container.height = 1136! Container.clip = Container.scrollVertical = true! # Or just enable scrolling in both planes! Container.scroll = true Container TallLayer TallLayer Container
  60. EXERCISE 5: SNAPCAT Set up the feed to scroll up

    and down. Hint: all of the cards in the feed are subLayers of the Container layer. Create an animated slide-out side navigation that shows when you tap the NavBu on layer and hides when you tap the Menu layer containing nav items. When you tap the PhotoBu on layer, reveal the Camera layer and contents. To hide it, tap the CameraCloseBu on layer. Extra credit
 Enhance the slide-out side navigation by animating the MenuItems layer.
  61. APPENDIX

  62. FRAMER RESOURCES The official Framer site, including examples and documentation


    framerjs.com Koen Bok, the creator of Framer and Cactus
 koenbok.com The Framer JS Facebook group
 facebook.com/groups/framerjs Framer on Hackdesign.org by Cemre Gungor
 hackdesign.org/lessons/41 Framer on Github
 github.com/koenbok/Framer
  63. FRAMER ADD-ONS Shortcuts for Framer by Cemre Gungor
 github.com/facebook/shortcuts-for-framer Sublime

    Text autocompletion for Framer.js by Andreas Wahlstrom
 github.com/awt2542/SublimeCompletionFramerjs Fluid Framer Layer extensions by some guy named Jay Stakelon
 github.com/stakes/fluid-framer
  64. COFFEESCRIPT RESOURCES CoffeeScript documentation
 coffeescript.org The Li le Book on

    CoffeeScript by Alex MacCaw
 arcturo.github.io/library/coffeescript The CoffeeScript Cookbook
 coffeescriptcookbook.com
  65. THX