Designing With Code

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

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