Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing With Code

49eec51ef4a3335cb3247a41d1f08971?s=47 Jay Stakelon
August 21, 2014

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

More Decks by Jay Stakelon

Other Decks in Design

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