Do you want to elevate your user experience to a whole new level? Join this session to learn how motion and animation improve user experience, drive deeper engagement, and add personality to your user interfaces! See how Salesforce's UX team uses a timing grid to create sequenced animations in CSS and JavaScript with the Salesforce Lightning Design System.

1. Choreographed Animations with
Salesforce’s New Lightning Design System
Amy Lee
UX Engineer Lead
@amster
Adam Doti
Principal Product Designer
@doti

2. Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize
or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the
forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any
projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding
strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or
technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for
our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate
of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with
completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability
to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our
limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential
factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year
and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are
available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and
may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are
currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

3. #designsystem
user experience

4. #designsystem
engineers designers
researchers
UX

5. #designsystem
UX
Amy Lee
UX Engineering Lead
@amster
Prototyping
Supporting Engineering
Design System
Adam Doti
Principal Product Designer
@doti
Designing UIs, assets
Validating with Researchers
Design System

6. #designsystem

7. #designsystem
engineers designers
Code snippets
CSS framework
Design Tokens
Vocabulary
Icons, font
Open source
Design patterns
Guidelines, principles
Design Tokens
Vocabulary
Icons, font
Color palettes
Design Language

8. #designsystem
engineers designers
Code snippets
CSS framework
Design Tokens
Vocabulary
Icons, font
Open source
Design patterns
Guidelines, principles
Design Tokens
Vocabulary
Icons, font
Color palettes
Design Language

9. #designsystem
Why motion & animation?

10. #designsystem https://en.wikipedia.org/wiki/Fovea_centralis#/media/File:Schematic_diagram_of_the_human_eye_en.svg

11. #designsystem

12. #designsystem

13. #designsystem
Sharp (2°)
Fovea centralis
6.4 M

14. #designsystem
Sharp (2°)
Fovea centralis
Contrast Contrast
6.4 M 120 M120 M
http://webvision.med.utah.edu/book/part-xiii-facts-and-figures-concerning-the-human-retina/

15. #designsystem
Sharp (2°)
Fovea centralis
Contrast Contrast
MovementMovement
Detail
+
Color

16. #designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion

17. #designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion

18. #designsystem
lightningdesignsystem.com
> Resources
> Design Tokens
Timing Design Tokens
Named Programmatic Values

19. #designsystem
lightningdesignsystem.com
> Resources
> Design Tokens
Timing Design Tokens
Named Programmatic Values

20. #designsystem
.someDiv {
top: 0;
transition: top
0.4s linear;
}
.someDiv.on { top: 100px; }
Sass Design Tokens
Using the Sass CSS preprocessor

21. #designsystem
Sass Design Tokens
Using the Sass CSS preprocessor

22. #designsystem
Sass Design Tokens
Using the Sass CSS preprocessor

23. #designsystem
Sass Design Tokens
Using the Sass CSS preprocessor

24. #designsystem
@import “design-tokens.scss”;
.someDiv {
top: 0;
transition: top
$duration-slowly linear;
}
.someDiv.on { top: 100px; }
Sass Design Tokens
Using the Sass CSS preprocessor

25. #designsystem
@import “design-tokens.scss”;
.someDiv {
top: 0;
transition: top
$duration-quickly linear;
}
.someDiv.on { top: 100px; }
Sass Design Tokens
Using the Sass CSS preprocessor

26. #designsystem
$duration-instantly
0s
$duration-slowly
0.4s
$duration-quickly
0.1s
$duration-promptly
0.2s
Sass Design Tokens
Using the Sass CSS preprocessor

27. #designsystem
Creating the Timing Design Tokens
1.0s0s 2.0s
60 frames0 frames 120 frames
6 12 18 24 30 90
0.1s aligns on a frame boundary, 60 fps

28. #designsystem
Creating the Timing Design Tokens
1.0s0s 2.0s
30 frames0 frames 60 frames
3 6 9 12 15 45
0.1s aligns on a frame boundary, even for 30fps

29. #designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion

30. #designsystem
— RACHEL NABORS, WEB ANIMATION ENGINEER
Purposeful animation can be used to guide
users through a workflow in the same way that
good typography should underscore the
hierarchy of information in a document.”
“

31. #designsystem
Entrance & Exit

32. #designsystem
Entrance & Exit
PROTOTYPE

33. #designsystem
Emphasis

34. #designsystem
Emphasis
PROTOTYPE

35. #designsystem
Transitional

36. #designsystem
Transitional

37. #designsystem
Personality & Branding

38. #designsystem
Personality & Branding

39. #designsystem
Personality & Branding

40. #designsystem
The sequence of steps and movements.
“choreography”

41. #designsystem
+ Components on the screen
+ Sequence of motion and animation
+ Specific CSS properties
+ Timing values from Design Tokens
= Choreography

42. #designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion

43. #designsystem
Motion Effects
fade in
fade out
color grow

44. #designsystem
fade in - fade out - color - grow - shrink - raise - pop -
punch - shake - jiggle - slide - flip - roll - spin - tilt - twist
- fade in - fade out - color - grow - shrink - raise - pop -
punch - shake - jiggle - slide - flip - roll - spin - tilt - twist
- fade in - fade out - color - grow - shrink - raise - pop -
punch - shake - jiggle - slide - flip - roll - spin - tilt - twist
- fade in - fade out - color - grow - shrink - raise - pop -
punch - shake - jiggle - slide - flip - roll - spin - tilt - twist
- fade in - fade out - color - grow - shrink - raise - pop -
punch - shake - jiggle - slide - flip - roll - spin - tilt - twist
- fade in - fade out - color - grow - shrink - raise - pop -
punch - shake - jiggle - slide - flip - roll - spin - tilt - twist

45. #designsystem
Chatter Feed Example

46. #designsystem

47. #designsystem

48. #designsystem

49. #designsystem

50. #designsystem

51. #designsystem

52. #designsystem

53. #designsystem
Chatter Choreography
New post opening animation
1. User mouses onto the text field

54. #designsystem
1. User mouses onto the text field
2. User clicks
Chatter Choreography
New post opening animation

55. #designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
Chatter Choreography
New post opening animation

56. #designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
4. Share button’s color fades out
Chatter Choreography
New post opening animation

57. #designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
4. Share button’s color fades out
5. To: and tools fade in
Chatter Choreography
New post opening animation

58. #designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
height 0.4s
4. Share button’s color fades out
background color 0.5s, top 0.1s
5. To: and tools fade in
opacity 0.4s
Chatter Choreography
New post opening animation

59. #designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
height 0.4s
4. Share button’s color fades out
background color 0.5s, top 0.1s
5. To: and tools fade in
opacity 0.4s
Chatter Choreography
New post opening animation

60. #designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
height 0.4s
4. Share button’s color fades out
background color 0.5s, top 0.1s
5. To: and tools fade in
opacity 0.4s
0.4s
0.4s+0.1s
0.1s
0.4s
Chatter Choreography
New post opening animation

61. #designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
height 0.4s
4. Share button fades to color
background color 0.5s, top 0.1s
5. To: and tools fade in
opacity 0.4s
$duration-slowly
$duration-slowly + $duration-quickly
$duration-quickly
$duration-slowly
Design Tokens
Chatter Choreography
New post opening animation

62. #designsystem
+ Components on the screen
+ Sequence of motion and animation
+ Specific CSS properties
+ Timing values from Design Tokens
= Choreography
Chatter Choreography
New post opening animation

63. #designsystem
Resources

64. #designsystem
Lightning Design System
Design Guidelines
CSS Framework
Resources
Tutorials & Documentation
lightningdesignsystem.com/resources/downloads

65. #designsystem
http://sforce.co/1FFAToW

66. #designsystem
dreamforce-ux.herokuapp.com

67. #designsystem
Design HQ
Come to the 2nd floor of Moscone West to chat
with some of the world’s best designers,
researchers, and UX engineers.

68. Share Your Feedback, and Win a GoPro!
3
Earn a GoPro prize entry for
each completed survey
Tap the bell to take a
survey2Enroll in a session1

69. #designsystem
Before you leave, get your Quest stamp!

70. Thank you
#designsystem