Télécharger pour lire hors ligne
DesignSystem
- 1.
- 2. SOMMAIRE Qu’est-ce qu’un DesignSystem Pourquoi ? Comment ça marche ? Principes Un composant Formulaires (Formik) Tableaux (Headless UI) Etat des lieux A venir
- 3. QU’EST CE QU’UN DESIGNSYSTEM
- 4. QU’EST-CE QU’UN DESIGNSYSTEM Bibliothèque de composants graphiques Composants JS Style CSS Ligne directrice Palette de couleurs Typographie Iconographie Composants UI Grille de structures, espaces, tailles…
- 5. QU’EST-CE QU’UN DESIGNSYSTEM Palette de couleurs Couleurs principales Brand color, functional color Déclinaisons
- 6. QU’EST-CE QU’UN DESIGNSYSTEM Typographie Police Tailles de polices
- 7. QU’EST-CE QU’UN DESIGNSYSTEM Iconographie Bibliothèque d’icones Ajouts possibles Illustrations
- 8. QU’EST-CE QU’UN DESIGNSYSTEM Composants UI Eléments
- 9. QU’EST-CE QU’UN DESIGNSYSTEM Grid Responsive
- 10. QU’EST-CE QU’UN DESIGNSYSTEM Espacements Tailles Font Size Line-height
- 11.
- 12. EXEMPLES DE DESIGN-SYSTEM EtatFrançais
- 13. EXEMPLES DE DESIGN-SYSTEM EtatFrançais
- 14. EXEMPLES DE DESIGN-SYSTEM Decathlon(Vitamin)
- 15.
- 16.
- 17. POURQUOI UN DESIGN-SYSTEM? En général, enjeux design Projet mené par le design -> à destination des développeurs Respect de la charte graphique Uniformiser les pratiques UI/UX Composants utilisables pour le maquettage D’autres enjeux chez Spikee
- 18.
- 19. POURQUOI UN DESIGN-SYSTEM? On pourrait utiliser Material, Bootstrap, Mui… Customisable Thèmes modifiables Paramétrable Beaucoup de propriétés prédéfinies Démarrage rapide
- 20. POURQUOI UN DESIGN-SYSTEM? ou des libs UI pour chaque composant Datepicker Slider Modal
- 21. POURQUOI UN DESIGN-SYSTEM? Besoins de la librairies Accessibilité Thèmes modifiables Thèmes Dark / Light, Thèmes différents Unique Ne pas ressembler à Material Support navigateur Fonctionnalités Use Cases spécifiques Contrôle complet des comportements Maintenabilité Simple à améliorer et maintenir Ne pas se poser de questions si c’est faisable Nir Ben-Yair Frontend Team lead Headless components in React and why I stopped using a UI library for our design system
- 22. POURQUOI UN DESIGN-SYSTEM? Choix initial : Material UI + React-Bootstrap Nouvelles fonctionnalités De plus en plus de demandes Use cases spécifiques Ne répond plus au besoin Perte de temps à essayer de tordre la lib Contournements non satisfaisants Difficile à maintenir Nir Ben-Yair Frontend Team lead
- 23. POURQUOI UN DESIGN-SYSTEM? Récrire des composants en entier ? Contrôle total Améliorations possible sans restrictions Réécrire un Select Accessibilité Compatibilité navigateur Navigation clavier Autocomplete Affichage paramétrable Nir Ben-Yair Frontend Team lead “Can’t select a dropdown item on some iOS devices on Safari (BUG-34939)” Pedro Duarte / Radix UI Next.js conf (2021)
- 24. POURQUOI UN DESIGN-SYSTEM? Headless UI Se charge uniquement des comportements Totale liberté dans le rendu Nir Ben-Yair Frontend Team lead
- 25. POURQUOI UN DESIGN-SYSTEM? Headless UI Nir Ben-Yair Frontend Team lead Headless lib Custom render
- 26. POURQUOI UN DESIGN-SYSTEM? Uniformiser les pratiques UI/UX Charte graphique Ergonomie Total contrôle des composants Rendu Comportements Maintenabilité Gain de temps Après un investissement maitrisé On ne réinvente pas ce qui est très couteux
- 27.
- 28. PRINCIPES Peu de dépendances Aucunelib UI Lib headless React-table Lib utilitaires Formik, Yup Partis pris importants Composants simples Comportements par défaut Extensibles si besoin La priorité est : simplifier la construction d’application Déporter la complexité dans le design-system L’utilisateur finale se concentre sur le code métier Le moins de code Js possible Zéro CSS
- 29. PRINCIPES Déporter la complexitédans le design-system Complexité essentielle Complexité obligatoire Complexité accidentelle Complexité essentielle Complexité obligatoire Projet classique Design-System Projet avec Design-system
- 30.
- 31.
- 32. STRUCTURE D’UN COMPOSANT Structured’un composant Source .jsx Style .scss Doc .mdx Tests
- 33. STRUCTURE D’UN COMPOSANT React Props Read-only State Modifiable Peut-êtreasynchrone Props State
- 34. STRUCTURE D’UN COMPOSANT Source.jsx In : Props Return JSX
- 35. PRINCIPES Cas d’utilisation &Rendu DOM
- 36.
- 37.
- 38.
- 39. FORMULAIRES Formik Gestion des états Gestiondes événements
- 40.
- 41.
- 42.
- 43. TABLEAUX Peut être assezcomplexe Beaucoup d’options (tri, pagination, sélection, recherche…)
- 44. TABLEAUX Utilisation Doit être laplus simple possible
- 45. TABLEAUX Définition du composant react-table: Headless lib
- 46.
- 47. ETAT DES LIEUX Utilisations BillingLabs Intranet
- 48.
- 49. ETAT DES LIEUX Environnementde dev Bac à sable
- 50. ETAT DES LIEUX Thèmes Gestionde thèmes Variante Dark/Light Thèmes à développer BillingLabs Variante Light
- 51. ETAT DES LIEUX Utilisations BillingLabs Intranet Storybook Environnement de dev Bac à sable Thèmes Gestion de thèmes Variante Dark/Light Release / CI Stabiliser les composants Accessibilité
- 52.
- 53. A VENIR Priorité :Release des librairies Semantic release Doc développeur Storybook Guidelines Thèmes Theme Billing Labs Starter kit Démarrer un projet rapidement avec le design system Composants plus larges Organismes / Templates Accessibilité Headless UI Identité
- 54. LE PROJET Front >design-systems > spk-design-system-react # npm install @spk/design-system-react
- 55.