FITC events. For digital creators. Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca Modern Tools for Moving from Pixels to Prototype to Production with Patrick Keenan OVERVIEW 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. OBJECTIVE A brief overview of where design tools are at and an in-depth look at moving through the process faster by prototyping. TARGET AUDIENCE Designers who code, coders who design, and anyone looking to improve communication between UX and engineering. All software reviewed is Mac based. ASSUMED AUDIENCE KNOWLEDGE Knowledge of JavaScript or CoffeeScript. FIVE THINGS AUDIENCE MEMBERS WILL LEARN 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

1. Preface
THESE VIEWS ARE MY OWN

3. Code is where
design happens
What I’ve learned

4. Engineers to think like designers
Designers to think like engineers
(If only just once a week)
What I want

5. 1. Where the design process fails
2. Tools that are changing the process
3. Designing in code in Sketch & Framer
Today’s session

6. The art of throwing
things over the wall
ACT 1

7. GO
GO
Tale of two buttons

8. Make bad decisions in private
LESSON ON RELEASES

9. Why design in code?

10. The fastest way to communicate is
through a working prototype
LESSON ON CASES

11. Aren’t images faster?

12. If a picture is worth 1000 words, a
60fps prototype is… a lot more
LESSON ON FLOWS

13. What does this mean in a world with weekly,
daily, continuous release cycles?

14. “Release daily… to stakeholders”
LESSON IN PACING

15. 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.

16. They’re out for your job
from their playground
ACT 2

18. Modern tools

19. Modern tools

20. Everyday automation
& Everyday design
WHAT IF?

21. The switch
ACT 3

25. Android Wear Notification
Prototype of a notification
animation seen in Android Wear.
by Jorn van Dijk

26. Contacts Scroll
Prototype of a scrollable and
sortable list of people.
by Benjamin den Boer

27. Type Tester
Prototype of Type Tester app with
sliders to adjust the text.
by Benjamin den Boer

28. Material Maps
Prototype of a Maps app, with
Google Maps integration.
by Min-Sang Choi

29. http://tinyurl.com/
framerfitc

30. Framer docs
framerjs.com/docs.html
Framer examples
examples.framerjs.com
Framer community
facebook.com/groups/framerjs/

31. 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...

32. Framer + Sketch July 28, 2014
BASIC CONCEPTS: ANIMATION
# Animating a layer
layer.animate
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

33. 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

36. Maybe nothing’s
changed
CONCLUSION

37. Teams are still the best unit

38. People are still the purpose

39. The mind is still the constraint

40. Empathy is still king

41. But let’s move faster

42. Thanks!
@patrickkeenanme
patrickkeenan@google.com
http://bit.ly/1LjH4Fg