Designing With Code

Designing With Code

A quick talk on Framer.js that I gave at the LA Hacker News Meetup on August 21, 2014.

49eec51ef4a3335cb3247a41d1f08971?s=128

Jay Stakelon

August 21, 2014
Tweet

Transcript

  1. DESIGNING WITH CODE USING FRAMER.JS For the LA Hacker News

    meetup on Aug 21, 2014 by @stakelon
  2. Creators need an immediate connection to what they're creating. Bret

    Victor, “Inventing on Principle” h ps://vimeo.com/36579366
  3. INTERACTION DESIGN TOOLS

  4. We currently have a few major schools of thinking. They

    roughly fall into 3 categories: Timeline, Signal Flow & Code. Pasquale D’Silva h ps://medium.com/@pasql/the-state-of-interaction-design-tools-f755c6515368
  5. TIMELINE AFTER EFFECTS HYPE EDGE ANIMATE FLASH

  6. SIGNAL FLOW QUARTZ COMPOSER ORIGAMI

  7. CODE FRAMER JS/STUDIO HTML & CSS / ANIMATE.CSS JQUERY /

    VELOCITY.JS
  8. THE TWO-MINUTE PROTOTYPE A QUICK DEMO

  9. FRAMER.JS & FRAMER STUDIO

  10. FRAMER.JS & GENERATOR

  11. FRAMER STUDIO LIGHTWEIGHT IDE

  12. FEEDBACK LOOP & WORKFLOW

  13. DESIGN TOOL INTEGRATION ➡

  14. PROPERTIES & FILTERS 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 # Filters! blur: 5! brightness: 100! saturate: 100! hueRotate: 40! contrast: 50! invert: 100! grayscale: 75! sepia: 50! # Hierarchy! superLayer: VideoContainer
  15. 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! ! # Desktop mouse events! Events.MouseOver | Events.MouseOut! ! # Touch events! Events.TouchStart | Events.TouchMove | TouchEnd! ! # Drag events! Events.DragStart | Events.DragMove | Events.DragEnd! ! # Animation, scrolling and more! Events.AnimationEnd | Events.Scroll | Events.StateDidSwitch!
  16. ✋ # One line of code makes any Layer draggable.!

    BlueBox.draggable.enabled = true DRAGGING WITH ONE LINE OF CODE
  17. ANIMATE ALL THE THINGS # 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' Play with Framer spring animations and bezier curves
 h p://stakes.github.io/framerplayground
  18. UNDER THE HOOD

  19. PREVIEWING ON DEVICE CLEAR BROWSER (iOS) LOCAL WEBSERVER DROPBOX PUBLIC

    FOLDER python -m SimpleHTTPServer
  20. EXAMPLES

  21. RESOURCES

  22. FRAMER Framer Studio
 h p://framerjs.com Framer Studio
 h ps://github.com/koenbok/framer The

    Framer Team
 h p://twi er.com/koenbok
 h p://twi er.com/jornvandijk
 h p://twi er.com/benjaminnathan
  23. RESOURCES The Framer JS Blog
 h p://framerjs.tumblr.com/ The Framer JS

    Facebook group
 h p://facebook.com/groups/framerjs Framer on Hackdesign.org by Cemre Gungor
 h p://hackdesign.org/lessons/41 Prototyping With Framer Workshop
 h p://speakerdeck.com/stakes/prototyping-with-framer
  24. ADD-ONS Hammer.js
 h p://hammerjs.github.io/ Shortcuts for Framer
 h p://github.com/facebook/shortcuts-for-framer Fluid

    Layers for Framer.js
 h p://github.com/stakes/fluid-framer Sublime Text Autocompletion for Framer.js
 h p://github.com/awt2542/SublimeCompletionFramerjs
  25. h p://speakerdeck.com/stakes CREDITS Background Pa erns h p://github.com/qrohlf/trianglify

  26. THX