Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern Tools for Moving from Pixels to Prototype to Production


Published on

FITC events. For digital creators.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at

Modern Tools for Moving from Pixels to Prototype to Production
with Patrick Keenan

Front-end frameworks are becoming more accessible and design tools are looking more like IDEs. This overlap between designer and developer can be a delightful partnership or a powerful skill-set. However, as these disciplines come closer together, the tools we use must evolve as well; and they have.

In this session, we’ll look at a duo of modern tools for moving designs from pixels to code fast. With the visual language of material design, we’ll review commons screens then see how to define the motion between them.


A brief overview of where design tools are at and an in-depth look at moving through the process faster by prototyping.


Designers who code, coders who design, and anyone looking to improve communication between UX and engineering. All software reviewed is Mac based.


Knowledge of JavaScript or CoffeeScript.


Basics of the material design language
Why it’s important to prototype before going to production
How Sketch makes it quick to iterate on screens
How Framer works with Sketch to make prototyping easy
The value of a prototype when moving to production

Published in: Internet
  • Be the first to comment

Modern Tools for Moving from Pixels to Prototype to Production

  1. 1. Preface THESE VIEWS ARE MY OWN
  2. 2. Code is where design happens What I’ve learned
  3. 3. Engineers to think like designers Designers to think like engineers (If only just once a week) What I want
  4. 4. 1. Where the design process fails 2. Tools that are changing the process 3. Designing in code in Sketch & Framer Today’s session
  5. 5. The art of throwing things over the wall ACT 1
  6. 6. GO GO Tale of two buttons
  7. 7. Make bad decisions in private LESSON ON RELEASES
  8. 8. Why design in code?
  9. 9. The fastest way to communicate is through a working prototype LESSON ON CASES
  10. 10. Aren’t images faster?
  11. 11. If a picture is worth 1000 words, a 60fps prototype is… a lot more LESSON ON FLOWS
  12. 12. What does this mean in a world with weekly, daily, continuous release cycles?
  13. 13. “Release daily… to stakeholders” LESSON IN PACING
  14. 14. 1 Control your vision as the designer. Your prototype becomes the front-end. 2 Get the team to consider trade-offs and value UX. The front-end becomes a design tool.
  15. 15. They’re out for your job from their playground ACT 2
  16. 16. Modern tools
  17. 17. Modern tools
  18. 18. Everyday automation & Everyday design WHAT IF?
  19. 19. The switch
 ACT 3
  20. 20. Android Wear Notification Prototype of a notification animation seen in Android Wear. by Jorn van Dijk
  21. 21. Contacts Scroll Prototype of a scrollable and sortable list of people. by Benjamin den Boer
  22. 22. Type Tester Prototype of Type Tester app with sliders to adjust the text. by Benjamin den Boer
  23. 23. Material Maps Prototype of a Maps app, with Google Maps integration. by Min-Sang Choi
  24. 24. framerfitc
  25. 25. Framer docs Framer examples Framer community
  26. 26. Framer + Sketch July 28, 2014 BASIC CONCEPTS: LAYER 
 # Positioning
 x: 0
 y: 0 z: 0
 opacity: 0.5
 rotation: 250
 # Size
 scale: 1.5
 width: 500
 height: 800 
 # Hierarchy
 subLayers superLayer 
 # Filters
 blur: 10
 invert: 10
 brightness: 1
 contrast: -.5
 hueRotate: .5
 saturate: 1.5
 # Shadows
 shadowX: 10
 shadowBlur: 16 shadowColor: "rgba(0,0,0,.5)" 
 # EXTRA style, html, states...
  27. 27. Framer + Sketch July 28, 2014 BASIC CONCEPTS: ANIMATION 
 # Animating a layer
 properties: y: 0 time: 1 curve: "bezier-curve(0.4, 0.0, 0.2, 1)" # Types of curves "linear" "ease-in" "ease-out" "ease-in-out" "bezier-curve(0.0, 0.0, 0.2, 1)" "bezier-curve(0.4, 0.0, 1, 1)" "bezier-curve(0.4, 0.0, 0.2, 1)" 
 # The spring
 curve: "spring" curveOptions: tension: 260 friction: 30 velocity: 0 tolerance: 0.01
  28. 28. Framer + Sketch July 28, 2014 
 # Assigning an event to a layer
 layer.on Events.Click, -> alert("hello!") # Assigning an event after an animation
 animation.on Events.AnimationEnd, -> alert("finished!") BASIC CONCEPTS: EVENT 
 # Types of events
 Click TouchStart TouchMove TouchEnd MouseOver MouseOut AnimationStart AnimationStop AnimationEnd DragStart DragMove Scroll StateWillSwitch StateDidSwitch
  29. 29. Maybe nothing’s changed CONCLUSION
  30. 30. Teams are still the best unit
  31. 31. People are still the purpose
  32. 32. The mind is still the constraint
  33. 33. Empathy is still king
  34. 34. But let’s move faster
  35. 35. Thanks! @patrickkeenanme