Comment les Design Tokens améliorent la collaboration entre product designers et développeurs ?

Christophe de Canteloube, Staff Front-end dev et Catherine Vallet, Senior Product Designer, nous partagent leur expérience de mise en place et l'application des Design Tokens chez ‪@OpenClassrooms‬ , à travers leur Design System, Classify. Un retour d'expérience qui retrace plusieurs mois de travail à établir leur fondation. 📚 Chapitres --------------------- 00:00 Intro 01:14 Présentation d'OpenClassroom 03:19 Programme 05:08 L'Atomic Design 06:57 Définir une nomenclature de tokens 07:52 Token option vs décision 09:20 Méthodologies 09:29 Méthodologie : Style Dictionary 09:53 Méthodologie : Nathan Curtis 12:10 Primary / onPrimary 13:21 Exemples 16:41 Et le dark mode ? 18:04 Organiser les tokens sur Figma 18:36 Par où commencer ? 21:21 Embrasser la cause Tokens 23:08 Avant / Après 25:58 🙋 Comment passer du mode sombre au mode clair via les valeurs ? 28:45 🙋 Comment gérer les tokens dans Figma ? (Espacement / Rayon / Ombre) 29:23 🙋 Pourquoi utiliser Material Design ? 31:48 🙋 Comment mesurer l'expérience globale ? 34:31 🙋 Comment gérer le multi branding avec les Design Tokens ? 37:44 Former les designers aux Design Tokens 38:42 Mauvaise utilisation des styles 40:06 Styles non publiés 40:53 Forcer des choix UX 42:09 Documentation des tokens 42:32 Monitorer l'usage 44:41 Automatiser les tokens 46:30 Télécharger les tokens 47:14 Formater les tokens 50:06 Copier facilement depuis Figma 50:54 Amélioration continue 51:54 Le rebranding 53:19 Prochaines étapes 54:03 Pourquoi se lancer dans la "cause Design Tokens" ? 54:39 Et la collaboration dans tout ça ? 56:14 🙋 Pourquoi utiliser zeroheight pour télécharger les tokens plutôt que Figma directement ? 57:33 🙋 Combien de temps a pris l'industrialisation des designs tokens ? 59:34 🙋 Utilisez-vous la pyramide d'abstraction ? 01:00:43 🙋 Utilisez-vous la typologie du token dans l'objet token ? 01:01:36 🙋 Est-ce que toutes les plateformes intègrent la nouvelle version ? 01:04:00 🙋 Comment promouvoir la mise en place des Design Tokens en interne ? 01:05:56 🙋 Comment faites-vous le lien entre Figma / zeroheight et le code ? 01:08:07 🙋 Utilisez-vous Chat GPT pour optimiser votre Design System ? 01:09:04 🙋 Réflexion sur l'avenir des outils 01:10:42 🙋 Avez-vous un Design System ? 01:11:50 🙋 Comment consommer le Design System ? 01:12:27 🙋 Pourquoi ne pas choisir Tailwind CSS ? 01:13:11 🙋 Avez-vous une limite sur le nombre de Tokens ? 01:14:46 🙋 Quelle est le bon nombre de Design Tokens ? 01:17:12 🙋 Qu'auriez-vous fait différemment ? Quels conseils pourriez-vous partager ? 🌐 Ressources et liens des sources citées pendant la conférence --------------------------------------------------------------------------------------------------------- Présentation sur SpeackerDeck : https://speakerdeck.com/designsystems... https://www.figma.com/fr/ https://storybook.js.org/ 💬 Pour toutes questions ou retours sur le sujet vous pouvez contacter Catherine et Christophe sur: Le Slack de Design System France : https://designsystems.fr 🇫🇷 Design Systems France -------------------------------------------- La communauté dédiée aux concepteurs de Design Systems dans l'éco-système product et tech français https://designsystems.fr #designtokens #designsystem #collaboration