$30 off During Our Annual Pro Sale. View Details »

Design Tokens in Design Systems

jina
November 15, 2016

Design Tokens in Design Systems

Given at The Mixin

jina

November 15, 2016
Tweet

More Decks by jina

Other Decks in Technology

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