Design Tokens in Design Systems

Given at The Mixin

Transcript

1. THE MIXIN // SAN FRANCISCO // 15 NOVEMBER 2016
   DESIGN TOKENS

   IN DESIGN SYSTEMS
   @JINA // LEAD DESIGNER // SALESFORCE LIGHTNING DESIGN SYSTEM
   #
   D
   ESIG
   N
   SYSTEM
   

   View Slide

2. @JINA
   LEAD DESIGNER // SALESFORCE LIGHTNING DESIGN SYSTEM
   ORGANIZER // CLARITY
   DESIGNER // SASS
   

   View Slide

3. View Slide

4. FORWARD-LOOKING STATEMENTS
   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.
   

   View Slide

5. LIGHTNINGDESIGNSYSTEM.COM
   

   View Slide

6. “IT USED TO BE THAT 

   DESIGNERS MADE AN OBJECT 

   AND WALKED AWAY.
   TODAY THE EMPHASIS MUST 

   SHIFT TO DESIGNING THE 

   ENTIRE LIFE CYCLE.”
   — PAUL SAFFO // TECHNOLOGY FORECASTER
   

   View Slide

7. DESIGN SYSTEMS RULE
   EVERYTHING AROUND ME
   

   View Slide

8. BLOG.ENGINEYARD.COM/2011/FRONT-END-MAINTAINABILITY-WITH-SASS-AND-STYLE-GUIDES
   

   View Slide

9. LIVING STYLE GUIDES FTW
   

   View Slide

10. SASS-LANG.COM
    

    View Slide

11. SASS-LANG.COM/STYLEGUIDE
    

    View Slide

12. COULD THE SASS & STYLE GUIDE
    SHARE A SINGLE SOURCE?
    

    View Slide

13. COLORS.YAML
    swatches:
    - name: "hopbush"
    value: "c69"
    - name: "bouquet"
    value: "b37399"
    

    View Slide

14. _COLORS.SCSS.ERB
    <% data.colors.swatches.each do |swatch| %>
    $<%= swatch.name %>: #<%= swatch.value %>;
    <% end %>
    

    View Slide

15. STYLE-GUIDE/COLORS.HTML.HAML
    - for swatch in data.colors.swatches
    %li{class: "swatch-" + swatch.name}
    %code
    = "$" + swatch.name
    = "#" + swatch.value
    

    View Slide

16. SASS-LANG.COM/STYLEGUIDE/COLOR
    

    View Slide

17. A DESIGN SYSTEM CONTAINS
    WHATEVER YOUR ORGANIZATION
    NEEDS TO COMMUNICATE 

    DESIGN DECISIONS
    

    View Slide

18. “…STYLE GUIDES. NOW, IT’S
    DESIGN SYSTEMS. IS THIS JUST A
    CHANGE IN THE MARKETING?
    OR ARE THESE THINGS ACTUALLY
    DIFFERENT FROM ONE ANOTHER?”
    — JARED SPOOL // FOUNDER // USER INTERFACE ENGINEERING
    

    View Slide

19. “A STYLE GUIDE IS AN ARTIFACT

    OF DESIGN PROCESS.
    A DESIGN SYSTEM IS A LIVING, 

    FUNDED PRODUCT WITH A ROADMAP 

    & BACKLOG, SERVING AN ECOSYSTEM.”
    — NATHAN CURTIS // FOUNDER // EIGHTSHAPES
    

    View Slide

20. FORMER SALESFORCE1 STYLE GUIDE
    

    View Slide

21. WHY DID SALESFORCE 

    NEED A DESIGN SYSTEM?
    

    View Slide

22. SCALING ENTERPRISE 

    DESIGN IS TRICKY!
    

    View Slide

23. 17
    YEARS OF LEGACY
    

    View Slide

24. 20K+
    EMPLOYEES
    

    View Slide

25. LOTS OF PRODUCTS
    Sales Cloud
    SalesforceIQ
    Salesforce Quote-to-Cash
    Data.com
    Financial Services Cloud
    Health Cloud
    Commerce Cloud
    Service Cloud
    Desk.com
    Analytics Cloud
    Wave Apps
    Community Cloud
    Chatter
    Marketing Cloud
    Pardot
    App Cloud
    AppExchange
    Force.com
    Heroku Enterprise
    IOT Cloud
    

    View Slide

26. CONSIDER THE 

    WHOLE ECOSYSTEM
    

    View Slide

27. View Slide

28. GREAT TEAM COMMUNICATION 

    IS CRITICAL
    

    View Slide

29. WHERE CAN I FIND THE ICONS?
    WHAT COLOR IS THE BUTTON BORDER?
    WHERE CAN I FIND THE ICONS?
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. 106 UNIQUE TEXT COLORS
    

    View Slide

34. 120 UNIQUE BACKGROUND COLORS
    

    View Slide

35. 73 UNIQUE FONT SIZES
    

    View Slide

36. DESIGN PAGES
    

    View Slide

37. “A FRACTURED PROCESS 

    MAKES FOR A FRACTURED 

    USER EXPERIENCE.”
    — NATE FORTIN // VP DESIGN // EVERNOTE
    

    View Slide

38. DESIGN SYSTEMS
    

    View Slide

39. L IG H T N I N G E X P E R I E N C E
    

    View Slide

40. LIGHTNING DESIGN SYSTEM
    Design Guidelines
    CSS Framework
    Icons
    Resources & Documentation
    Design Tokens
    

    View Slide

41. “TRUE COLLABORATION ISN’T
    THROWING DESIGNS OVER THE WALL.
    IT’S DESIGNERS, ENGINEERS, 

    & THE REST OF THE TEAM 

    SHARING THE RESPONSIBILITY

    TO BUILD A QUALITY PRODUCT.”
    — DIANA MOUNTER // DESIGN SYSTEMS LEAD // GITHUB
    

    View Slide

42. EMPOWER DESIGNERS 

    & DEVELOPERS
    

    View Slide

43. ACCESSIBILITY
    

    View Slide

44. LOCALIZATION
    

    View Slide

45. Red = Down
    RED = DOWN
    

    View Slide

46. Red = Up
    RED = UP
    

    View Slide

47. LOTS OF

    PLATFORMS & DEVICES
    

    View Slide

48. HOW DO WE SCALE DESIGN
    ACROSS OUR ECOSYSTEM AND ALL
    ITS PLATFORMS & DEVICES?
    

    View Slide

49. HOW DO WE MAKE FUTURE
    VISUAL DESIGN CHANGES FASTER?
    

    View Slide

50. HOW DO WE KEEP OUR DESIGN 

    SYSTEM AGNOSTIC?
    

    View Slide

51. SINGLE SOURCE OF TRUTH
    

    View Slide

52. CSS Preprocessors introduced Variables in
    CSS for better consistency, efficiency, &
    maintainability.
    SASS, LESS, STYLUS, ETC.
    

    View Slide

53. View Slide

54. DESIGN TOKENS
    

    View Slide

55. MEDIUM.COM/EIGHTSHAPES-LLC/TOKENS-IN-DESIGN-SYSTEMS-25DD82D58421
    

    View Slide

56. “DESIGN TOKENS ARE
    DESIGN DECISIONS
    PROPAGATED THROUGH
    A SYSTEM.”
    — NATHAN CURTIS // FOUNDER // EIGHTSHAPES
    

    View Slide

57. TYPES OF DESIGN TOKENS
    Spacing
    Sizing
    Rounded Corners
    Font Weights
    Font Sizes
    Line Heights
    Font Families
    Border Colors
    Background Colors
    Shadows
    Text Colors
    Animation Durations
    Z-Indexes
    Media Queries
    …etc.
    

    View Slide

58. “DESIGN TOKENS ARE AN
    ABSTRACTION FOR
    EVERYTHING IMPACTING
    THE VISUAL DESIGN OF
    AN APP/PLATFORM”
    — SÖNKE ROHDE, VP, UX ENGINEERING, SALESFORCE
    

    View Slide

59. NO MORE HARD-CODED VALUES
    

    View Slide

60. View Slide

61. THEO
    Open source tool for generating 

    Design Tokens
    

    View Slide

62. JSON
    {
    "name": "COLOR_TEXT",
    "value": "#000",
    "properties": "color"
    }
    

    View Slide

63. YAML
    COLOR_TEXT:
    value: "#000"
    properties: "color"
    

    View Slide

64. DESIGN TOKENS CONVERTED TO
    Lightning
    Sass
    Less
    Stylus
    JSON (iOS)
    XML (Android)
    style guide
    color swatches
    

    View Slide

65. DESIGN TOKENS ENABLE US TO
    SCALE OUR DESIGN ACROSS ALL
    THE PERMUTATIONS.
    

    View Slide

66. THEO CAN EXPORT TO PROPER COLOR FORMATS
    CSS — HEX, RGBA
    IOS — RGBA
    ANDROID — 8-DIGIT HEX
    

    View Slide

67. THEO CAN EXPORT TO PROPER SIZING UNITS
    CSS — PX, EM, REM
    IOS — PT
    ANDROID — SP, DP, DIP
    

    View Slide

68. $color-text-button
    

    View Slide

69. t(colorTextButton)
    

    View Slide

70. INSTEAD OF THIS:
    .slds-button {
    color: #0070d2;
    }
    

    View Slide

71. SASS
    .slds-button {
    color: $color-text-button;
    }
    

    View Slide

72. LIGHTNING
    .THIS {
    color: token(colorTextButton);
    }
    

    View Slide

73. .ASE

    Adobe Photoshop

    Adobe Illustrator

    Adobe InDesign
    .CLR

    other design apps on Mac
    COLOR SWATCHES
    

    View Slide

74. DESIGN TOKENS:

    PROBLEM SOLVED
    

    View Slide

75. TESTING & ENFORCEMENT
    Enforcement of correct token on correct property
    Accessibility suite of tests
    

    View Slide

76. FORM FACTOR OVERRIDES
    Allow us to override tokens on our various supported form factors
    We’re mobile first, so overrides are specific to medium & large form factors (tablets & desktop)
    

    View Slide

77. BONUS!!!
    

    View Slide

78. View Slide

79. View Slide

80. APPLY DESIGN DECISIONS 

    WITH CONFIDENCE
    

    View Slide

81. NO PRODUCT TOO LARGE,

    NO PRODUCT TOO SMALL
    

    View Slide

82. View Slide

83. “JUST BECAUSE SOMETHING IS 

    HARD DOESN’T MEAN IT’S NOT 

    WORTH PURSUING…
    IT’S OUR JOB TO SOLVE THOSE 

    PROBLEMS. AFTER ALL, WE’RE IN

    THE INTERFACE BUSINESS.
    — BRAD FROST // WEB DESIGNER // ATOMIC DESIGN AUTHOR
    

    View Slide

84. KEEP THE MOMENTUM GOING
    

    View Slide

85. A DESIGN SYSTEM IS 

    NOT A SIDE PROJECT
    

    View Slide

86. ZOMBIE

    STYLE GUIDES
    

    View Slide

87. IT MUST BE LIVING
    

    View Slide

88. “BE REGULAR AND ORDERLY IN YOUR
    LIFE, SO THAT YOU MAY BE VIOLENT
    AND ORIGINAL IN YOUR WORK.”
    — GUSTAVE FLAUBERT // NOVELIST
    

    View Slide

89. STYLEGUIDES.IO
    

    View Slide

90. LIGHTNINGDESIGNSYSTEM.COM
    

    View Slide

91. LIGHTNINGDESIGNSYSTEM.COM
    

    View Slide

92. OPEN SOURCE AT GITHUB.COM/SALESFORCE-UX
    

    View Slide

93. DESIGNSYSTEMS.HEROKUAPP.COM
    

    View Slide

94. CLARITYCONF.COM
    

    View Slide

95. SASSNEWS.COM
    NEWS
    

    View Slide

96. THANKS!
    @JINA
    @THEMIXINSF
    

    View Slide