Utiliser des variables dans les prototypes – Figma Learn - Centre d'aide

Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible avec tous les forfaits payants.

Quiconque disposant d'un accès en édition au niveau d'un fichier peut créer des prototypes.

Dans Figma, les variables sont des valeurs mémorisées qui représentent des attributs de design ou des statuts enregistrés. Il peut s'agir 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 frames 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 mise en page 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 Définir une 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 de base, ce qui vous permet d'élaborer des prototypes plus avancés avec des valeurs flexibles.
Actions multiples et logique conditionnelle : utilisez les instructions conditionnelles pour vérifier si une condition est satisfaite avant d'effectuer des actions, et accumulez un nombre illimité d'actions sur un seul déclencheur.

En savoir plus sur les variables dans Figma.

Essayer

Vous voulez vous entraîner encore plus ? Découvrez le fichier d'initiation au prototypage avancé →

Vous cherchez plus d'exemples d'utilisation des variables dans les prototypes ? Découvrez d'autres exemples de prototypage avancé.

Configurer vos variables

Pour pouvoir créer des prototypes avec des variables, vous devez :

Créer vos variables : découvrez comment créer et organiser des collections de variables.
Appliquer des variables : découvrez comment appliquer des variables au contenu de texte, aux dimensions des objets, à la visibilité des calques, et plus encore.

Définir 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 fait avancer le prototype) et une ou plusieurs actions (ce qui se passe sous l'effet du déclencheur).

L'action Définir une 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 Définir une variable dans l'interaction d'un prototype :

Créez une interaction de prototype.
Accédez à la fenêtre modale Interaction et sélectionnez un déclencheur dans le menu déroulant.
Dans le menu déroulant Actions, sélectionnez Définir une variable.
Dans le menu déroulant Cible, sélectionnez la variable pour laquelle vous souhaitez définir une nouvelle valeur.
Dans le champ Valeur, entrez une nouvelle valeur pour la variable. Le nouveau type de 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 également être un nombre.
- Valeurs de chaînes : saisissez une chaîne littérale de texte (contenu entre guillemets) ou sélectionnez une variable de chaîne dans le panneau de sélection.
- Valeurs numériques : saisissez une valeur numérique ou sélectionnez-en une dans le panneau de sélection.
- Valeurs booléennes : saisissez vrai ou faux, ou sélectionnez une variable booléenne dans le panneau de sélection.
- Valeurs de couleurs : saisissez un code hexadécimal ou sélectionnez-en un dans le sélecteur de couleur.
Exécutez votre prototype pour tester l'interaction.

Design comportant deux frames. Une action de prototype est définie sur une image dans la première frame. Lorsque l'image fait l'objet d'un clic, la variable profileName met à jour sa valeur, et le prototype navigue vers la frame suivante.

Remarque :

Vos variables ont-elles plusieurs modes ? En savoir plus sur la définition des valeurs de variables sur des valeurs de modes spécifiques.

Astuce :

Utilisez des expressions pour manipuler des variables dans des opérations. Par exemple, vous pouvez effectuer des calculs basiques sur des variables numériques, combiner des variables de chaînes ou utiliser des expressions booléennes.

Essayer

Créez une collection de variables intitulée « Formes ». Cette collection inclura une variable de chaîne qui représente le nom de la forme.

Désélectionnez tous les éléments sur le canvas, puis trouvez la section Variables locales sur la barre latérale droite et cliquez sur Ouvrir les variables.
Cliquez sur Créer une variable et sélectionnez Chaîne.
Dans la colonne Nom, saisissez « shapeName ».
Dans la colonne Valeur, saisissez « cercle ».

Vous pouvez désormais appliquer la variable shapeName à votre design. Par exemple, nous avons créé un design simple qui comprend une frame avec deux formes (un cercle et un carré) et deux calques de texte. Nous voulons lier la variable shapeName au calque de texte inférieur afin qu'elle change en fonction de la forme sélectionnée.

Recréez le design illustré ci-dessous. Ajoutez un objet en forme d'ellipse, un objet en forme de rectangle et deux calques de texte à une frame. Saisissez « Vous avez choisi : » comme contenu du premier calque de texte.
Cliquez pour sélectionner le calque de texte inférieur dans votre frame.
Dans l'onglet Design dans la barre latérale droite, recherchez la section Texte et cliquez sur Appliquer une variable.
Sélectionnez la variable shapeName dans le panneau de sélection de variables pour l'appliquer au contenu textuel.

Ajoutons maintenant une interaction avec une action Définir une variable.

Sélectionnez l'objet en forme d'ellipse.
Dans la barre latérale droite, passez à l'onglet Prototype. Dans la section Interactions, cliquez sur le signe plus pour ajouter une nouvelle interaction.
Dans la fenêtre modale Interaction, créez une interaction avec un déclencheur Au toucher/Au clic et l'action Définir une variable.
Sélectionnez la variable shapeName dans le menu déroulant Cible. Dans le champ valeur, définissez la nouvelle valeur sur « cercle ».
Répétez les étapes 1 à 4 pour l'objet en forme de rectangle. Cette fois-ci, définissez la variable shapeName sur « carré ».

Un objet cercle est sélectionné sur la frame, avec la fenêtre modale Interaction ouverte. Une interaction est définie : le déclencheur est Au toucher, l'action est Définir une variable, la cible est shapeName, et la valeur est cercle.

Vous êtes maintenant prêt à exécuter votre prototype pour le tester. Lorsque vous cliquez sur chaque objet de forme, le calque de texte se met automatiquement à jour en fonction de la nouvelle valeur de variable. Le prototype est en cours d'exécution. Lorsque l'objet ellipse est sélectionné, le calque de texte inférieur se met à jour pour afficher cercle. Lorsque l'objet carré est sélectionné, le calque de texte inférieur se met à jour pour afficher carré.

Créer des prototypes avec des variables et des composants

Une fois que vous avez appris les bases, vous pouvez commencer à utiliser des variables et des composants ensemble dans vos prototypes.

Appliquez des variables aux composants afin que ces derniers se mettent à jour automatiquement lorsque vous modifiez la valeur d'une variable dans un prototype. Modifier la valeur d'une variable met également à jour les autres éléments liés à cette même variable.

La valeur d'une variable peut être modifiée comme suit :

En utilisant l'action Définir une variable
En utilisant l'action Remplacer par dans un composant interactif
En utilisant l'action Définir un mode de variable

Exemple

Un ensemble de composants de bouton interactif a un état par défaut et un état survoler. Le composant utilise l'action Remplacer par, de sorte que lorsque vous survolez la variante valeur par défaut, elle passe à la variante survol (et vice versa).

Une variable booléenne hoverState est appliquée à la fois à une instance de la variante et à la visibilité d'un calque de superposition séparé.

Lorsque vous survolez la variante valeur par défaut dans votre prototype :

L'instance se met à jour vers la variante survol.
La variable booléenne hoverState passe de faux à vrai.
Le calque d'image est rendu visible.

Vous voulez vous exercer avec un exemple similaire ? Consultez la section « Essayez » ci-dessous.

L'endroit où vous appliquez la variable détermine le degré de modifications dans le prototype.

Appliquez la variable à :	Lors du prototypage :
Propriétés de variantes des instances de composants	Changez la valeur de la variable pour mettre à jour la variante de l'instance.
Propriétés de composants	Changez la valeur de la variable pour mettre à jour toutes les instances du composant.

En savoir plus sur l'application des variables aux propriétés des composants et des variantes.

Essayez : Exemple 1

Créez un ensemble de composants interactifs
1. Créez un composant de bouton qui possède une propriété de variante « cliqué » avec des valeurs « vrai » et « faux ».
2. Ajoutez une interaction de prototype sur la variante « faux », en utilisant le déclencheur Au clic et l'action Remplacer par. Désormais, lorsque la variante faux fait l'objet d'un clic, elle passe à la variante vraie.
Placez une instance d'une variante issue de l’ensemble de composants interactifs dans une frame.
1. Ajoutez la variante faux à une frame.
Attribuez une variable à l'instance du composant interactif. La valeur de la variable doit correspondre à une valeur de propriété de variante.
1. Créez une variable booléenne circleVisibility avec une valeur faux par défaut.
2. Sélectionnez l'instance du bouton.
3. Dans la barre latérale droite, survolez la propriété de variante cliqué.
4. Sélectionnez Appliquer une variable.
5. Cliquez pour sélectionner la variable circleVisibility à lier à la propriété.
Attribuez la même variable à un autre calque de votre design.
1. Ajoutez un objet ellipse à la frame.
2. Dans la section Apparence de la barre latérale droite, cliquez avec le bouton droit sur l'icône Masquer.
3. Sélectionnez la variable circleVisibility pour appliquer la variable booléenne à la visibilité du calque ellipse.
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. Cela signifie que si cette même variable est liée à d'autres valeurs, celles-ci seront également mises à jour.

Essayez : Exemple 2

Créez un ensemble de composants avec au moins deux variantes.
1. Créez un ensemble de composants comportant une propriété de variante « forme » avec les valeurs « cercle » et « carré ».
Placez l'instance d'une variante sur une frame.
Attribuer une variable à l'instance. La valeur de la variable doit correspondre à une valeur de propriété de variante.
1. Créez une variable de chaîne shapeType avec une valeur « cercle » par défaut.
2. Cliquez sur l'instance pour la sélectionner.
3. Dans la barre latérale droite, survolez une propriété de variante sur sa droite et cliquez sur Attribuer une variable.
4. Sélectionnez la variable que vous souhaitez lier à la propriété.
Créez une interaction sur un objet de la frame qui utilise l'action Définir une variable. Modifiez la valeur de la variable pour qu'elle corresponde à la valeur de la propriété de variante non utilisée.
1. Ajoutez une interaction de prototype sur un objet, en utilisant le déclencheur Au clic/Au toucher et l'action Définir une variable. Définissez la valeur de la variable shapeType sur « carré ».
Exécutez votre prototype pour tester l'interaction. Lorsque l'interaction est déclenchée et que la variable est modifiée, la variante est également mise à jour.