Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Tokens: To Infinity and Beyond

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

Louis Chenais

September 28, 2020
Tweet

More Decks by Louis Chenais

Other Decks in Design

Transcript

  1. Bonjour @chuckn0risk • [email protected] Co-founder & Front-End Developer • W3C

    Design Tokens Community Group Member • Author of "Design Tokens for Dummies" Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir
  2. 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
  3. "Design tokens are cross platform variables that define key design

    data" — Sarah Federman | @sarah_federman
  4. 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
  5. "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
  6. "A design system isn’t a project. It’s a product, serving

    products." — Nathan Curtis | @nathancurtis
  7. "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
  8. 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.
  9. Our market direly needs a design tokens standard widely spread

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

    An Introduction to Multi-Platform Design Systems
  11. 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
  12. 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).
  13. Objective #2 Manage the design tokens community and promote design

    tokens best practices. Lead by Jina Anne (Design System Lead @ Asana).
  14. • 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:
  15. 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/