Utilisation de variables dans les prototypes

Avant de commencer

Qui peut utiliser cette fonctionnalité ?

Disponible avec tous les forfaits payants.

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.

Dans Figma, les variables sont des valeurs mémorisées qui représentent des attributs de design ou des statuts enregistrés. Elles peuvent être des types de chaînes, de nombres, de couleurs ou de valeurs booléennes.

Vous pouvez définir et modifier les valeurs des variables avec des actions de prototypage, ce qui vous permet de créer des prototypes immersifs qui changent dynamiquement en fonction de la sélection de l'utilisateur, à l'aide de seulement quelques cadres et interactions simples. Ainsi, vous pouvez utiliser des actions de prototypage pour :

• mettre à jour du contenu textuel avec des variables de chaîne ;
• changer des dimensions d'objet, des rayons d'angle ou des propriétés de disposition automatique avec des variables numériques ;
• passer d'une visibilité de calque à des variables booléennes.

Pour commencer à utiliser des variables dans des prototypes, définissez vos variables, puis utilisez l'action Set variable pour changer les valeurs de vos variables.

Une fois que vous avez pris l'habitude d'utiliser les variables et les prototypes ensemble, essayez des fonctionnalités plus avancées pour élargir encore plus leurs capacités :

• Expressions : manipulez des variables avec des opérations basiques, ce qui vous permet d'élaborer des prototypes plus avancés avec des valeurs flexibles.
• Multiple actions and conditionals : utilisez les instructions conditionnelles pour vérifier si une condition est respectée avant d'effectuer des actions, et accumulez un nombre illimité d'actions sur un seul déclencheur.

Vous découvrez les variables? En savoir plus sur les variables dans Figma →

Configuration de vos variables

Avant de pouvoir créer des prototypes avec des variables, vous devez effectuer les actions suivantes :

1. Créez vos variables : Découvrez comment créer et organiser des collections de variables →
2. Appliquez des variables : Découvrez comment appliquer des variables au contenu de texte, aux dimensions des objets, à la visibilité des calques, et plus encore →

Définition des valeurs de variables

Une fois que vous avez créé et appliqué des variables dans tout votre design, vous pouvez commencer à les utiliser avec des prototypes.

Chaque interaction de prototype a un déclencheur (ce qui provoque l'avancée du prototype) et une ou plusieurs actions (ce qui se passe sous l'effet du déclencheur).

L'action Set variable vous permet de définir ou de modifier la valeur d'une variable sous l'effet d'un déclencheur de prototype.

Pour utiliser l'action Set variable dans l'interaction d'un prototype :

1. Créez une interaction de prototype.
2. Accédez au panneau Interaction details et sélectionnez un déclencheur dans le menu déroulant.
3. Dans le menu déroulant Actions, sélectionnez Set variable.
4. Dans le menu déroulant Pick target variable, sélectionnez la variable pour laquelle vous souhaitez définir une nouvelle valeur.
5. Dans le champ Write expression, saisissez une nouvelle valeur pour la variable. Le type de la nouvelle valeur doit correspondre au type de variable que vous modifiez. Par exemple, si vous avez sélectionné une variable numérique, la nouvelle valeur doit aussi être un nombre.
   • Valeurs de chaînes : saisissez toute chaîne littérale de texte (contenu entre guillemets) ou sélectionnez toute variable de chaîne depuis le panneau de sélection.
   • Valeurs numériques : saisissez toute valeur numérique ou sélectionnez toute variable numérique depuis le panneau de sélection.
   • Valeurs booléennes : saisissez true ou false, ou sélectionnez toute variable booléenne depuis le panneau de sélection.
   • Valeurs de couleurs : saisissez tout code hexadécimal ou sélectionnez un code hexadécimal depuis le sélecteur de couleurs.
6. Exécutez votre prototype pour tester l'interaction.

Prototypage avec des variables en pratique

Une fois que vous avez appris les fondamentaux, vous pouvez commencer à utiliser les prototypes et les variables de nombreuses façons différentes.

Utilisation des variables avec des variantes de composant

Vous pouvez appliquer des variables à des variantes de composant. Cela vous permet de mettre automatiquement à jour votre composant en utilisant l'action Set variable.

1. Créez un ensemble de composants avec au moins deux variantes. (Par exemple, créez un ensemble de composants qui présente une propriété de variante « shape » avec les valeurs « circle » et « square ».)
2. Placez l'instance d'une variante sur un cadre.
3. Attribuez une variable à l'instance. La valeur de la variable doit correspondre à une valeur de propriété de variante. (Par exemple, attribuez une variable shapeType avec une valeur « circle » par défaut à l'instance.)
   1. Cliquez sur l'instance pour la sélectionner.
   2. Dans la barre latérale droite, passez le curseur à droite de la propriété d'une variante et cliquez sur Assign variable.
   3. Sélectionnez la variable que vous souhaitez lier à la propriété.
4. Créez une interaction sur n'importe quel objet situé dans le cadre qui utilise l'action Set variable. Changez la valeur de la variable de sorte qu'elle corresponde à la valeur de la propriété de la variante inutilisée. (Par exemple, définissez la valeur de la variable shapeType sur « square ».)
5. Exécutez votre prototype pour tester l'interaction. Lorsque l'interaction est déclenchée et que la variable est modifiée, la variante se met également à jour.

Utilisation de variables avec des composants interactifs

Comme dans l'utilisation de variables avec des variantes de composant, vous pouvez appliquer des variables à des composants interactifs.

Lorsque vous cliquez sur un composant interactif :

• la variante se met à jour ;
• la variable se met à jour, ce qui met ainsi à jour tout autre élément lié à cette même variable.

Pour utiliser des composants interactifs avec des variables :

1. Créez un ensemble de composants interactifs. (Par exemple, créez un composant interactif de type bouton qui présente la propriété de variante « clicked » avec les valeurs « true » et « false ».)
2. Placez l'instance d'une variante à partir de l'ensemble de composants interactifs dans un cadre.
3. Attribuez une variable à l'instance de composant interactif. La valeur de la variable doit correspondre à la valeur de propriété d'une variante. (Par exemple, attribuez à l'instance une variable booléenne circleVisibility avec la valeur « false » par défaut.)
   1. Sélectionnez l'instance.
   2. Dans la barre latérale droite, sélectionnez le menu déroulant pour choisir une des propriétés de variante.
   3. Sélectionnez Assign variable.
   4. Cliquez pour sélectionner une variable à lier à la propriété.
4. Exécutez votre prototype pour tester l'interaction. Lorsque l'interaction est déclenchée et que le composant est modifié, la valeur de la variable change également. Par conséquent, si cette même variable est liée à toute autre valeur, celle-ci se mettra aussi à jour.