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

Standardisation des design tokens :  le futur d...

Louis Chenais
September 28, 2020

Standardisation des design tokens :  le futur du design à grande échelle ?

1. Design tokens, kézako ?
2. Qu'est-ce qu'une design API ?
3. Pourquoi avons-nous besoin d'un standard ?
4. Le futur des design tokens
5. Démonstration d'une Design API

Louis Chenais

September 28, 2020
Tweet

More Decks by Louis Chenais

Other Decks in Design

Transcript

  1. Bonjour @chuckn0risk • [email protected] Co-fondateur & Développeur Front-End • Membre

    du W3C Design Tokens Community Group • Auteur de "Design Tokens for Dummies" Et avant Front-End Developer @ SportEasy, 5emeGauche & Ultranoir
  2. 1. Design tokens kézako ? 2. Qu'est-ce qu'une Design API

    ? 3. Pourquoi avons-nous besoin d'un standard ? 4. Le future des design tokens 5. Démo d'une Design API Au menu
  3. "Design tokens are cross platform variables that define key design

    data" — Sarah Federman | @sarah_federman
  4. Les design tokens permettent aux équipes produits de mieux collaborer

    et assurent la cohérence d'une marque à travers plusieurs plateformes.
  5. 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
  6. "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
  7. "A design system isn’t a project. It’s a product, serving

    products." — Nathan Curtis | @nathancurtis
  8. "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
  9. Pour que l'identité de marque d'une organisation puisse être appliquée

    facilement, ses design tokens doivent pouvoir transiter librement d'un outil à un autre.
  10. 3. Why do we need a standard? / Prerequisite 1.

    Both parties must provide API writing and/or API reading access 2. Design tokens transiting from one system to another must respect the respective API data format
  11. Notre marché a réellement besoin d'un standard pour les design

    tokens, largement utilisé afin que chaque décision design puisse transiter librement à travers les outils d'une organisation.
  12. "Systems should support how creators work." — Danny Banks |

    An Introduction to Multi-Platform Design Systems
  13. DTCG | @designtokens 1. Créé en 2019 par Kaelig Deloumeau-Prigent

    pour rassembler la communauté des design tokens 2. Le besoin d'un standard est plus fort que jamais : un appel aux éditeurs est fait en Février 2020 3. En Juin 2020 tous les éditeurs sont trouvés et répartis sur différents modules de recherche
  14. Objectif #1 Fournir un standard pour les design tokens. Il

    permettra aux créateurs d'outils et à leurs consommateurs d'avoir un design de qualité à grande échelle grâce aux design APIs. Dirigé par Kaelig Deloumeau-Prigent (UX Developer @ Shopify).
  15. Objectif #2 Gérer la communauté des design tokens et promouvoir

    les meilleurs pratiques liées aux design tokens. Dirigé Jina Anne (Design System Lead @ Asana).
  16. Interopérabilité universelle pour les design tokens : capacité de définir

    et de maintenir des design tokens à partir de n'importe quel outil.
  17. • D'éditer nos design tokens directement depuis un simple fichier

    YAML/JSON • De voir, d'éditer et d'utiliser nos design tokens depuis un outil design • D'utiliser nos design tokens dans des applications tel que Google Docs/MS Word et de créer des templates ou des thèmes à partir de ces derniers • D'utiliser nos design tokens depuis un CMS ou un système tierce comme Webflow, Squarespace, Wordpress ou encore Shopify Cela nous permettrait :
  18. Un unique composant Card appliqué à trois marques différentes :

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