Modes de variable dans les prototypes
đ§Les variables sont actuellement en bĂȘta ouverte. Nous continuerons Ă ajouter davantage de fonctionnalitĂ©s et Ă affiner l'expĂ©rience durant ce dĂ©lai. DĂ©couvrez les nouveautĂ©s Ă venirâ
Avant de commencer
Qui peut utiliser cette fonctionnalité ?
Vous pouvez utiliser des variables dans les prototypes avec tous les forfaits. Le nombre de modes de variables disponible par collection dépend de votre forfait.
Toute personne disposant de l'accÚs peut éditer
pour un fichier peut créer des prototypes.
Toute personne disposant de l'accĂšs peut voir
ou peut voir les prototypes uniquement
pour un fichier peut consulter des prototypes.
Chaque variable de votre collection peut avoir plusieurs modes. Vous pouvez sélectionner et utiliser les valeurs de modes spécifiques dans vos actions et expressions de prototypage.
Les modes de variable peuvent ĂȘtre utilisĂ©s de plusieurs façons pour amĂ©liorer votre expĂ©rience de prototypage :
- DĂ©finir les valeurs de mode en fonction du contexte : Utilisez plusieurs valeurs de mode de la mĂȘme variable dans votre conception et modifiez leurs valeurs indĂ©pendamment dans la mĂȘme interaction
- Utiliser les valeurs des modes dans les expressions : Utilisez les valeurs des définitions de mode spécifiques pour construire des interactions et effectuer des calculs
Vous découvrez les variables ? Plus d'informations ici :
Vous souhaitez réaliser des exercices pratiques ?
DĂ©couvrez le fichier d'initiation au prototypage avancĂ© â
Définition des valeurs du mode en fonction du contexte
Lorsqu'une variable possÚde plusieurs définitions de mode, utilisez l'action Set variable et le contexte mode pour modifier la valeur d'une définition de mode spécifique.
Cela peut s'avĂ©rer utile lorsque vous ne modifiez qu'une seule dĂ©finition de mode d'une variable. Lors de l'affichage ou de l'utilisation de plusieurs modes d'une mĂȘme variable dans un design, rĂ©glez leurs valeurs indĂ©pendamment les unes des autres.
Par exemple, regardez le design ci-dessous :
Chaque produit dispose d'un compteur permettant d'ajuster le nombre d'articles ajoutés au panier.
Si une variable numérique à mode unique est utilisée pour représenter le nombre d'articles, une variable et une interaction uniques sont nécessaires pour chaque liste de produits.
Au lieu de cela, vous pouvez utiliser une variable numérique à deux modes, un pour chaque produit unique.
L'utilisation de plusieurs modes permet de mettre à jour séparément le décompte de chaque élément.
- Définissez le mode sur les calques ou objects parents.
- Sélectionnez le calque, le groupe ou l'objet qui contient la variable appliquée. (Par exemple, sélectionnez le cadre qui contient l'image du produit et les informations relatives au melon).
- Dans la section Layer de la barre latérale droite, cliquez sur Change variable mode.
- Survolez une collection de variables et choisissez un mode. (Sélectionnez le mode « melon »).
- Répétez l'opération pour tous les autres objets ou calques qui ne s'appliquent qu'à un mode spécifique. (Appliquez le mode « shiitakes » au cadre qui contient l'image du produit et les informations relatives aux champignons shiitake)
- Modifiez la valeur de la variable appliquée à l'aide de l'action de prototype Set variable. (Par exemple, créez une interaction Set variable sur l'icÎne + pour chaque compteur de produits. Définissez la variable
itemCount
suritemCount + 1
.)
Toute variable contenue dans un calque dont le mode est défini ne mettra à jour que la valeur de cette définition de mode spécifique.
Astuce : Utilisez des composants pour gagner encore plus de temps lors du prototypage avec des modes. Avec les composants, vous n'aurez à créer l'interaction qu'une seule fois. Ensuite, placez plusieurs instances sur le cadre et modifiez le mode appliqué pour chaque instance.
Utilisation des valeurs de mode dans les expressions
Sélection des définitions de mode dans les actions de prototypage
Pour sélectionner des modes de variables spécifiques dans les prototypes :
- CrĂ©ez ou cliquez sur une connexion prototype existante pour ouvrir la fenĂȘtre modale Interaction Details.
- Cliquez sur un nom de variable que vous avez utilisé dans l'interaction.
- Dans le menu déroulant Modes, sélectionnez un mode spécifique de cette variable.
Une fois que vous avez sélectionné un mode, la variable est représentée à la fois par le nom de la variable et le nom du mode :
variableName:modeName
Astuce : Vous pouvez Ă©galement utiliser votre clavier pour gĂ©nĂ©rer des expressions. Pour sĂ©lectionner un mode spĂ©cifique dans le gĂ©nĂ©rateur d'expressions, saisissez une variable. Ensuite, appuyez sur â pour mettre en surbrillance le nom de la variable, et utilisez les flĂšches vers le haut â et vers le bas â pour sĂ©lectionner le mode. Appuyez sur EntrĂ©e pour confirmer.
Génération d'expressions avec des valeurs de mode
Utilisez des expressions avec des modes variables pour calculer les valeurs d'une seule variable.
Cela peut s'avĂ©rer utile lors de l'Ă©criture d'expressions utilisant plusieurs dĂ©finitions de mode pour une mĂȘme variable.
Prenons par exemple le mĂȘme modĂšle que ci-dessus. Cette fois, des champs permettent de calculer le sous-total de chaque produit et un total gĂ©nĂ©ral permet de calculer le prix total de l'ensemble de la commande.
Conseil : afin d'appliquer diffĂ©rents modes de la mĂȘme variable sur un mĂȘme design, appliquez un mode variable au cadre ou au calque de composant.
Examinons maintenant la collection de variables :
Lorsque vous utilisez des expressions, il arrive que vous ayez besoin de valeurs distinctes pour chaque mode de variable. Par exemple, pour calculer l'itemSubtotal
de chaque type de produit, utilisez une expression qui multiplie l'itemPrice
par son itemCount
.
Dans d'autres cas, vous aurez besoin d'une seule valeur de variable pour représenter le total des différents modes. Par exemple, pour calculer le total de la commande, créez une nouvelle collection de variables pour la variable cartTotal
avec un seul mode.
Vous voulez en savoir plus sur les meilleures pratiques en matiĂšre de prototypage avec des variables ? Abonnez-vous Ă la chaĂźne YouTube de Figma.