Contenu du cours
Ui/Ux Avec Figma
Ui/Ux Avec Figma
Variantes
Qu'est-ce que les variantes ?
Les variantes vous permettent de regrouper plusieurs variations d'un composant, telles que différents styles ou états d'un bouton, dans un seul conteneur. Par exemple, les versions sombre, claire et verte d'un bouton de recherche peuvent être regroupées en un seul ensemble de variantes, simplifiant ainsi la gestion et l'utilisation des ressources.
Créer un ensemble de variantes
- Sélectionnez un groupe de composants.
- Allez dans le panneau de conception et choisissez Créer un ensemble de composants pour regrouper les composants en une seule variante.
- Utilisez des barres obliques (par exemple, bouton/sombre/défaut) pour organiser les propriétés comme le style (sombre, clair, vert) et l'état (défaut, survol).
- Renommez les étiquettes de propriété pour plus de clarté, par exemple en changeant "Propriété 1" en Style et "Propriété 2" en État.
Gérer les variantes
Des instances de variantes peuvent être créées en copiant l'une d'elles. Les propriétés de chaque instance peuvent être ajustées depuis le panneau de conception, vous permettant de passer facilement d'un style ou d'un état à un autre. Pour ajouter plus de variantes, utilisez l'icône plus sous l'ensemble de variantes pour inclure des variations supplémentaires.
Créer des interactions
Pour des prototypes interactifs, connectez un bouton par défaut à son état de survol dans l'onglet Prototype. Réglez le déclencheur sur "Pendant le survol" et l'animation sur "Dissoudre" avec une durée de 500 ms. Utilisez le bouton Aperçu près du point de départ du flux pour tester les interactions directement.
Cette structure simplifiée rend le processus plus facile à comprendre et à suivre. Faites-moi savoir si vous avez besoin d'autres ajustements !
Merci pour vos commentaires !