A presentation at Standardisation des design tokens : le futur du design à grande échelle ? by Louis Chenais
Standardisation des design tokens : le futur du design à grande échelle ?
Bonjour 👋 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 @chuckn0risk • louis@specifyapp.com
Au menu
Design Tokens kézako?
🤔 Que sont les design tokens ? Quel problème business voulons-nous régler ?
“Design tokens are cross platform variables that define key design data” — Sarah Federman | @sarah_federman
Les design tokens permettent aux équipes produits de mieux collaborer et assurent la cohérence d’une marque à travers plusieurs plateformes.
🙏 Thanks to the Salesforce team for providing this categorization
Les design tokens doivent être nommés différemment selon leur contexte d’utilisation.
Design option Design decisions
Design options Design decisions Text style text-body-large Text style button-text-default Color purple-500 Color background-button-primary-default Spacing base-space-3 Spacing button-side-padding
background-button-primary-default button-text-default button-side-padding
“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
Qu’est-ce qu’une Design API ?
Situation actuelle 🤕 La création d’expériences utilisateurs cohésives à travers plusieurs plateformes est un véritable défi.
“A design system isn’t a project. It’s a product, serving products.” — Nathan Curtis | @nathancurtis
Design tokens
Design system Design Tokens
Équipe d’accessibilité 👩 Équipe design Design System Équipe marketing Équipe développement
Tool #2 Design API Tool #3 Tool #2
Les Design APIs sont l’évolution logique des design systems.
“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
Pourquoi avons-nous besoin d’un standard?
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.
Les couleurs, icons et images de Figma vers Pitch.
Les images de Dropbox vers Github.
Mettre à jour les design tokens depuis Figma créera un ticket dans Jira.
Les traductions depuis Excel vers Webflow.
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.
“Systems should support how creators work.” — Danny Banks | An Introduction to Multi-Platform Design Systems
Le Design Tokens W3C Community Group à la rescousse!
DTCG | @designtokens
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).
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).
Les modules du Design Tokens Community Group : Colors Spacing Animation Format …
Le futur des design tokens
🏆 Interopérabilité universelle
Interopérabilité universelle pour les design tokens : capacité de définir et de maintenir des design tokens à partir de n’importe quel outil.
Cela nous permettrait : • 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
Shaper | @hihayk
🌓 Le cas du multi-marques
Card Grid Component for Themeable Design System | @brad_frost
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/
🚀 Au delà des produits digitaux
👏 Merci à @AdamSedwick, @calebwilliams12 et @vlh pour leurs recherches sur le sujet.
Démo d’une design API
Shoukran 🙏 @chuckn0risk • louis@specifyapp.com
Here’s what was said about this presentation on social media.
for free. You
can too.