À propos de ce cours
Cette leçon explique comment créer des composants réutilisables dans Figma : composant principal et instances, substitutions, variantes rangées par propriétés, propriétés booléennes, de texte et d'échange d'instance, composants adaptables grâce à l'auto layout et aux variables de la charte. Elle présente l'organisation d'une bibliothèque selon l'Atomic Design (atomes, molécules, organismes, gabarits, pages) et sa publication. Trois activités font créer le bouton, la carte de plat et la bibliothèque de CantineCampus.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure 15 (cours et 3 activités) | Débutant, chapitre « Digitaliser le produit avec les outils d'UI » | Découvrir l'interface de Figma | Vous savez créer des composants avec variantes et propriétés, les organiser en bibliothèque et les utiliser dans vos écrans |
-
Objectifs
- Comprendre la relation entre composant principal et instances.
- Créer des variantes et des propriétés.
- Construire des composants qui s'adaptent avec l'auto layout.
- Relier les composants aux variables et aux styles de la charte.
- Organiser une bibliothèque selon l'Atomic Design.
-
Pourquoi des composants ?
- Une application répète les mêmes éléments : boutons, cartes, champs, barre de navigation. Les redessiner à chaque écran prend du temps et crée des différences.
- Un composant est un élément conçu une fois et réutilisé partout. Modifier le composant modifie toutes ses copies.
- Les composants sont la traduction, dans l'outil, de la charte graphique (leçon sur la charte) : ils garantissent la cohérence et accélèrent la conception.
- Ils préparent aussi le développement: un composant de la maquette correspond à un composant du code (React, Angular, Flutter).
-
Composant principal et instances
- Le composant principal (main component, repéré par ◆) est le modèle. On le crée avec Ctrl + Alt + K.
- Une instance (◇) est une copie liée, placée dans un écran. Elle suit toutes les modifications du principal.
- Dans une instance, on peut changer ce qui a été prévu : un texte, une icône, une variante. Ce sont des substitutions (overrides) ; elles restent quand le principal change.
- Détacher une instance (Ctrl + Alt + B) casse le lien : l'élément ne suivra plus la charte. À réserver aux cas exceptionnels.
- Rangez les composants principaux sur la page « Design system », jamais au milieu des écrans.
-
Les variantes
- Un bouton existe en plusieurs versions : principal, secondaire, destructif ; normal, survol, désactivé. Plutôt que neuf composants, on crée un ensemble de variantes.
- Chaque variante est décrite par des propriétés de variante: « Niveau = Principal, État = Survol ». Figma range les variantes en grille.
- Dans un écran, on choisit la version dans deux menus du panneau de droite, sans changer de composant.
- Reprenez les états définis au chapitre précédent (leçon sur les boutons) : normal, survol, focus, appuyé, chargement, désactivé.
-
Les propriétés de composant
- Variante: choisir une version (niveau, état, taille).
- Booléenne: afficher ou masquer un élément (une icône, un badge).
- Texte: modifier un libellé directement dans le panneau de droite.
- Échange d'instance (instance swap) : remplacer un élément imbriqué, par exemple l'icône du bouton, par une autre.
- Avec ces propriétés, un seul composant « Bouton » couvre tous les cas : avec ou sans icône, n'importe quel libellé, tous les niveaux et tous les états.
-
Des composants qui s'adaptent
- Construisez chaque composant en auto layout: le bouton s'élargit avec son libellé, la carte avec son contenu.
- Réglez la largeur : « s'adapter au contenu » pour un bouton, « remplir » pour une carte qui suit la largeur de l'écran.
- Utilisez les variables (couleurs, espacements, rayons) et les styles (textes, effets) de la charte : un changement de couleur primaire met à jour tous les composants, puis tous les écrans.
- Testez chaque composant avec un texte long, un texte court et en mode sombre si vous en avez un.
-
Organiser la bibliothèque : Atomic Design
- La méthode Atomic Design, proposée par Brad Frost, range les éléments en cinq niveaux :
- Les cinq niveaux :
- atomes: couleurs, textes, icônes, bouton, champ ;
- molécules: un champ avec son libellé et son message ; une carte de plat ;
- organismes: la barre de navigation, la liste des plats, le panier ;
- gabarits: la structure d'un écran, sans contenu réel ;
- pages: l'écran final, avec les vrais contenus.
- Nommez les composants avec des barres obliques pour créer des dossiers : « Bouton / Principal », « Carte / Plat », « Navigation / Barre du bas ».
- Publiez la bibliothèque : les autres fichiers de l'équipe peuvent utiliser les mêmes composants et reçoivent les mises à jour.
🍽 Exemple : CantineCampus
- La bibliothèque de CantineCampus compte une vingtaine de composants. Le composant « Carte / Plat » imbrique les atomes « Badge » et « Bouton icône ».
- Quand le rayon des cartes passe de 8 à 12 px dans les variables, toutes les cartes de tous les écrans changent en une fois.
⚠ Piège : un composant pour chaque écran (« Bouton panier », « Bouton accueil ») n'est pas réutilisable. Un seul composant, des propriétés et des libellés différents.
-
Aide-mémoire
-
Activités
Activité 1Le composant bouton · ⏱ 25 min
- Créez le composant « Bouton » en auto layout, avec les variables de votre charte.
- Ajoutez les variantes Niveau (principal, secondaire, tertiaire, destructif) et État (normal, survol, focus, désactivé).
- Ajoutez une propriété booléenne « Icône », une propriété d'échange d'instance pour l'icône et une propriété texte « Libellé ».
📁 Résultat attendu : le composant et ses variantes, et trois instances réglées différemment.
Activité 2La carte de plat · ⏱ 20 min
- Créez « Carte / Plat » à partir d'atomes : photo, nom, prix, badge, bouton icône.
- Ajoutez une variante « Épuisé » (prix barré, bouton désactivé, mention « Épuisé »).
- Placez quatre instances dans l'écran « Menu du jour » avec de vrais contenus.
📁 Résultat attendu : le composant et l'écran rempli.
Activité 3Ranger la bibliothèque · ⏱ 15 min
- Classez vos composants en atomes, molécules et organismes sur la page « Design system ».
- Renommez-les avec des barres obliques (« Bouton / … », « Carte / … »).
- Publiez la bibliothèque et utilisez-la dans un second fichier.
📁 Résultat attendu : une capture de la page « Design system » et du panneau des ressources.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Le même bouton dessiné dix fois | Pas de composant | Un composant principal, des instances |
| Instances détachées partout | Variante ou propriété manquante | Ajouter la variante au composant |
| Bouton qui ne s'élargit pas avec son texte | Pas d'auto layout | Auto layout, largeur « s'adapter » |
| Couleurs saisies en dur | Pas de variables | Variables et styles de la charte |
| Bibliothèque introuvable | Composants éparpillés dans les écrans | Page « Design system », noms avec barres obliques |
-
Bilan
- Un composant se conçoit une fois et s'utilise partout ; ses instances suivent ses modifications.
- Les variantes rangent les versions ; les propriétés rendent le composant simple à régler.
- L'auto layout et les variables rendent les composants adaptables et fidèles à la charte.
- L'Atomic Design organise la bibliothèque, qu'on publie pour l'équipe.
- On ne détache pas une instance : on améliore le composant.
Un composant bien fait, c'est une décision prise une fois et respectée partout.