Save 37% off PRO during our Black Friday Sale! »

Design Tokens: To Infinity and Beyond

88447dbb966c62206c23f5ffd402af3b?s=47 Louis Chenais
September 28, 2020

Design Tokens: To Infinity and Beyond

1. Design tokens kézako?
2. What is a Design API?
3. Why do we need a standard?
4. The Future of design tokens
5. Demo of a Design API

88447dbb966c62206c23f5ffd402af3b?s=128

Louis Chenais

September 28, 2020
Tweet

Transcript

  1. Design Tokens: to infinity and beyond

  2. Bonjour @chuckn0risk • louis@specifyapp.com Co-founder & Front-End Developer • W3C

    Design Tokens Community Group Member • Author of "Design Tokens for Dummies" Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir
  3. 1. Design tokens kézako? 2. What is a Design API?

    3. Why do we need a standard? 4. Future of design tokens 5. Demo of a Design API Summary
  4. Design Tokens kézako? 1.

  5. What are design tokens? What business issue do we want

    to address?
  6. None
  7. None
  8. "Design tokens are cross platform variables that define key design

    data" — Sarah Federman | @sarah_federman
  9. None
  10. None
  11. None
  12. Design tokens allow product teams to better collaborate and ensure

    brand consistency across any platform.
  13. Thanks to the Salesforce team for providing this categorization

  14. Design tokens should be named differently according to their context

    of usage.
  15. Design option Design decisions

  16. text-body-large Text style purple-500 Color Design options Design decisions button-text-default

    background-button-primary-default Color Text style base-space-3 Spacing button-side-padding Spacing
  17. button-text-default background-button-primary-default button-side-paddi ng

  18. None
  19. "Design tokens are useful for describing core design values, but

    their full power emerges when used to describe the specs of UI components." — Cristiano Rastelli | @areaweb
  20. What is a Design API ? 2.

  21. Crafting cohesive user experiences across several platforms is a real

    challenge. Current situation
  22. "A design system isn’t a project. It’s a product, serving

    products." — Nathan Curtis | @nathancurtis
  23. Design tokens

  24. Design system Design tokens

  25. Design System Design team Engineering team Marketing team Accessibility team

  26. Design API Tool #2 Tool #2 Tool #3

  27. Design APIs are the logical evolution of design systems.

  28. "An interoperable, guessable design API is the foundation of a

    fully networked design system, [...]. It’s the next step in the evolution of design systems." — Matthew Ström | A design API in practice
  29. Why do we need a standard? 3.

  30. As an organization's brand identity must be used and applied

    as easily as possible, its design tokens must be able to transit freely from one tool to another.
  31. Colors, icons and images from Figma to Pitch.

  32. Images from Dropbox to Github.

  33. Updating design tokens in Figma will create a ticket in

    Jira.
  34. Locales from Excel to Webflow.

  35. Our market direly needs a design tokens standard widely spread

    so that design decision can transit freely across an organization tools ecosystem.
  36. "Systems should support how creators work." — Danny Banks |

    An Introduction to Multi-Platform Design Systems
  37. Design Tokens W3C Community Group to the rescue!

  38. DTCG | @designtokens 1. Created in 2019 par Kaelig Deloumeau-

    Prigent & Jina Anne to gather the design tokens community 2. The need for a standard is now stronger than ever: a call for editors is made in February 2020 3. In June 2020 all editors are found and officially spread across different design tokens modules
  39. Objective #1 Provide a standard for design tokens. It will

    alIow tool creators and tool consumers to have quality design that scales thanks to design APIs. Lead by Kaelig Deloumeau-Prigent (UX Developer @ Shopify).
  40. Objective #2 Manage the design tokens community and promote design

    tokens best practices. Lead by Jina Anne (Design System Lead @ Asana).
  41. Design Tokens Community Group modules: Format Colors Spacing Animation ...

  42. The future of design tokens 4.

  43. Universal interoperability

  44. None
  45. Universal interoperability for design tokens: ability to define and maintain

    design tokens from any tool.
  46. None
  47. • Edit all design tokens directly from a simple YAML/JSON

    file • See, edit and use all design tokens from a design tool • Use design tokens from apps like Google Docs/MS Word and create templates or themes from them • Use design tokens from a CMS or a third-part system like Webflow/Squarespace/Wordpress/Shopify This would allow us to:
  48. Shaper | @hihayk

  49. The multi-brand use case

  50. Card Grid Component for Themeable Design System | @brad_frost

  51. A unique Card component is applied to three different brands

    : Verywell.com, TheSpruce.com, and TheBalance.com. https://bradfrost.com/blog/post/creating-themeable-design-systems/
  52. Beyond digital products

  53. Thanks to @AdamSedwick, @calebwilliams12 and @vlh for their thorough research

    on the subject.
  54. Demo of a design API 5.

  55. Shoukran @chuckn0risk • louis@specifyapp.com