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

Transcript

1. Standardisation des design tokens : le futur du design à grande échelle ?
2. Bonjour @chuckn0risk • louis@specifyapp.com 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
3. 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
4. Design Tokens kézako? 1.
5. Que sont les design tokens ? Quel problème business voulons-nous régler ?
8. "Design tokens are cross platform variables that define key design data" — Sarah Federman | @sarah_federman
12. Les design tokens permettent aux équipes produits de mieux collaborer et assurent la cohérence d'une marque à travers plusieurs plateformes.
13. Thanks to the Salesforce team for providing this categorization
14. Les design tokens doivent être nommés différemment selon leur contexte d'utilisation.
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
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. Qu'est-ce qu'une Design API ? 2.
21. La création d'expériences utilisateurs cohésives à travers plusieurs plateformes est un véritable défi. Situation actuelle
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 Équipe design Équipe développement Équipe marketing Équipe d'accessibilité
26. Design API Tool #2 Tool #2 Tool #3
27. Les Design APIs sont l'évolution logique des 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. Pourquoi avons-nous besoin d'un standard? 3.
30. 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.
31. Les couleurs, icons et images de Figma vers Pitch.
32. Les images de Dropbox vers Github.
33. Mettre à jour les design tokens depuis Figma créera un tiquet dans Jira.
34. Les traductions depuis Excel vers Webflow.
35. 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
36. 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.
37. "Systems should support how creators work." — Danny Banks | An Introduction to Multi-Platform Design Systems
38. Le Design Tokens W3C Community Group à la rescousse!
39. 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
40. 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).
41. 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).
42. Les modules du Design Tokens Community Group : Format Colors Spacing Animation ...
43. Le futur des design tokens 4.
44. Interopérabilité universelle
46. Interopérabilité universelle pour les design tokens : capacité de définir et de maintenir des design tokens à partir de n'importe quel outil.
48. • 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 :
49. Shaper | @hihayk
50. Le cas du multi-marques
51. Card Grid Component for Themeable Design System | @brad_frost
52. 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/
53. Au delà des produits digitaux
54. Merci à @AdamSedwick, @calebwilliams12 et @vlh pour leurs recherches sur le sujet.
55. Démo d'une design API 5.
56. Shoukran @chuckn0risk • louis@specifyapp.com