Comment créer et utiliser les composants et variants dans Figma ? | Tutoriel Figma

Tutoriel pour apprendre à créer et utiliser des composants Figma avec des variants et instances.

Les composants sont des éléments de design réutilisables qui vous permettent de maintenir la cohérence de votre interface utilisateur et de faciliter les changements.
Les variantes sont quant à eux des versions modifiées d'un composant qui peuvent être utilisées pour afficher des éléments de l'IU de manière différente en fonction de l'état ou de la condition.

Je vous guide étape par étape dans la création et l'utilisation de composants et de variantes dans Figma, afin que vous puissiez optimiser vos futurs maquettes et IU.

▬▬▬▬▬▬▬▬▬▬▬ L'ARTICLE 📖 ▬▬▬▬▬▬▬▬▬▬▬

▬▬▬▬▬▬▬▬▬▬▬ LES OUTILS 💻 ▬▬▬▬▬▬▬▬▬▬▬

▬▬▬▬▬▬▬▬▬▬▬ TEMPS FORTS ⌚ ▬▬▬▬▬▬▬▬▬▬▬

Composants Variants et Instances Figma 00:00
Digidop Académie 01:35
Créer un composant 01:53
Créer des variants 02:59
Créer une instance 03:50
Ajouter une propriété "Text" 04:10
Ajouter une propriété "Instance Swap" 05:47
Ajouter une propriété "Boolean" 06:37

▬▬▬▬▬▬▬▬▬▬▬ ALLER PLUS LOIN 🤓 ▬▬▬▬▬▬▬▬▬▬▬

▬▬▬▬▬▬▬▬▬▬▬ CONTACT DIGIDOP ⚡ ▬▬▬▬▬▬▬▬▬▬▬

Suivez-nous pour être au courant des meilleurs stratégies web !

#figma #tutorial #component

[keodesign-pz]

Hello, très bon tuto mais je pense qu'il y a eu une MaJ Figma. Instance swap n'apparaît plus sur la droite quand on double clic sur le bouton "Default". Si vous savez ou il ce trouve ce serais genial !

[teleskop]

Excellent tutoriel, clair, précis, et rapide !

[iona]

Très bien vulgarisé ! Court & efficace

[boris]

Comment creer un variant dans nos composants (mère) qui n'etait pas la de base ?
Exemple : tu n'as que des cta avec un effet de hover (dans ton composant d'origine), puis tu veux que certains cta se transforment aussi en drop down menu,
tu es obligé de creer un nouveau composant ? ou tu peux directement rajouter le dropdown dans ton composant d'origine ?