Programme de Formation
6
module(s)
Durée totale : 360 360
Construisez un design system complet et maintenable. De l'atomic design aux tokens Figma, en passant par les composants avancés et la documentation, ce chapitre vous donne la méthode pour créer une bibliothèque de composants professionnelle.
Module 1 : Qu'est-ce qu'un design system ?
60
Comprenez ce qu'est un design system, sa hiérarchie interne, ce qui le distingue d'un style guide ou d'une UI library, et explorez les design systems de référence de l'industrie.
Module 2 : Atomic Design
60
Maîtrisez la méthodologie Atomic Design de Brad Frost : les 5 niveaux de composition (atomes, molécules, organismes, templates, pages) et leur organisation dans Figma.
Module 3 : Composants Figma avancés
60
Maîtrisez les variants, les component properties et l'auto layout dans les composants Figma pour créer des composants flexibles, maintenables et prêts pour la production.
Module 4 : Tokens et variables Figma
60
Comprenez les design tokens comme source de vérité unique, maîtrisez les variables Figma (collections, modes, aliasing) et créez un système Light/Dark automatique pour votre projet.
Module 5 : Documentation du design system
60
Apprenez à documenter chaque composant de votre design system de manière structurée : usage, variantes, propriétés, accessibilité et exemples de code.
Module 6 : Révision — design system du projet fil rouge
60
Assemblez et vérifiez le design system complet de votre app de gestion financière : fondations, composants, tokens, dark mode et documentation.
Commentaires
0 commentaire
Aucun commentaire pour le moment
Soyez le premier à partager votre avis !
Se connecter pour commenter