Modes de variables

Avant de commencer

Qui peut utiliser cette fonctionnalité

Toute personne disposant d'un forfait Éducation, Professionnel, organisation ou Entreprise peut créer et utiliser des modes pour les variables.

Le nombre de modes que vous pouvez créer par collection de variables dépend de votre forfait.

Vous recherchez plus de ressources sur les variables ? Consultez notre guide sur les variables →

Les variables permettent de stocker des valeurs réutilisables qui peuvent être appliquées à différentes propriétés de conception, telles que la couleur, les valeurs d'espacement et les dimensions.

Les modes de variables nous permettent de représenter différents contextes de nos designs sans avoir à créer plusieurs frames pour chaque contexte nécessaire. En effet, les variables peuvent contenir plusieurs valeurs, organisées selon des modes de variables, où chaque mode stocke une valeur par variable.

Par exemple, pour créer des versions en mode clair et sombre pour un design :

Sans les modes de variables, nous pouvons créer des designs pour le mode clair (notre mode par défaut), puis dupliquer ces designs et modifier tous les remplissages de couleur nécessaires pour le mode sombre.

Avec les modes de variables, nous pouvons créer une collection de variables avec deux ensembles de valeurs (ou modes) : l'un pour le mode clair (notre mode par défaut) et l'autre pour le mode sombre. Nous pouvons appliquer les variables à un ensemble de designs. Ensuite, nous pouvons rapidement basculer entre les designs en mode clair et en mode sombre.

Si nous avons besoin d'un troisième thème de couleur, il nous suffit de créer un nouveau mode et de saisir les valeurs pour ce thème. Nous n'avons pas besoin d'appliquer à nouveau les valeurs à nos designs.

Les modes de variables peuvent être utilisés dans de nombreux contextes. Voici quelques conseils pour vous aider à vous lancer :

• Créez des thèmes de couleurs accessibles, comme un mode à fort contraste ou des thèmes différents pour les personnes daltoniennes, en utilisant des variables de couleur.
• Localisez le texte de l'UI pour voir comment il s'intègre dans les designs à l'aide de variables de chaîne.
• Prenez en compte différentes tailles d'appareils, comme les montres, les mobiles et les ordinateurs, pour voir comment les éléments réagissent aux différentes tailles d'espacement et de marges intérieures à l'aide des variables numériques.

Créer un mode

1. Désélectionnez tous les objets en cliquant n'importe où sur le plan de travail.
2. Ouvrez la fenêtre modale Variables en cliquant sur Ouvrir les variables dans la section Variables locales de la barre latérale de droite.
3. Ouvrez la collection dans laquelle vous souhaitez créer un nouveau mode.
4. À partir d'une variable existante, cliquez sur Nouveau mode de variables à droite des en-têtes de colonne. Figma duplique les valeurs de la première colonne dans la nouvelle.

Vous pouvez également dupliquer un mode en cliquant avec le bouton droit de la souris sur l'en-tête du mode et en sélectionnant Dupliquer le mode.

Modifier le mode par défaut

Dans la fenêtre modale Variables, le mode par défaut d'une collection de variables est la colonne de mode située le plus à gauche.

Lorsqu'un objet utilise un objet variable ou qu'une page contient des objets utilisant des variables, l'objet ou la page utilisera les valeurs du mode par défaut jusqu'à ce que vous définissiez explicitement un mode spécifique pour l'objet ou la page.

Modifiez le mode par défaut d'une collection de variables en réorganisant les modes.

Pour changer le mode par défaut :

1. Dans la fenêtre modale Variables, ouvrez la collection de variables où se trouve le mode de variables.
2. Trouvez le mode et effectuez l'une des opérations suivantes :
   • Cliquez avec le bouton droit de la souris et sélectionnez Définir par défaut, ou ;
   • Cliquez et faites glisser le mode de variables vers la colonne la plus à gauche.

Si le mode de variables d'un objet ou d'une page a été défini sur « Auto » ou « Par défaut » à la place d'un mode spécifié, il héritera du nouveau mode par défaut.

Si un objet ou une page a été explicitement défini sur un mode qui se trouve être le mode par défaut, il restera lié à ce mode même si ce n'est plus le mode par défaut.

Réorganiser les modes

Pour réorganiser les modes dans une collection de variables, deux options s'offrent à vous :

• Cliquez avec le bouton droit de la souris et sélectionnez Déplacer la colonne vers la droite ou Déplacer la colonne vers la gauche.
• Sinon, cliquez et faites glisser la colonne vers la gauche ou vers la droite.

Si vous déplacez une colonne complètement à gauche dans une collection de variables, cette colonne deviendra le mode par défaut.

Basculer entre les modes

Activez le mode sur un objet ou une page pour que les designs utilisent les valeurs de variables que vous souhaitez. Vous pouvez passer d'un mode à l'autre dans les éléments suivants :

• Les calques
• Les frames
• Les composants et ensembles de composants
• Les sections
• Les groupes
• Les pages

Changer les modes sur un objet

Pour les calques : vous pouvez changer de mode s'il y a au moins une variable appliquée et si la variable possède plusieurs modes.

Pour les groupes, les frames, les composants, les ensembles de composants et les sections : vous pouvez changer leurs modes si les calques imbriqués ont au moins une variable appliquée et que cette variable possède plusieurs modes.

Pour changer de mode sur un objet :

1. Sélectionnez le calque, le groupe ou l'objet conteneur.
2. Dans la section Apparence de la barre latérale de droite, cliquez sur Appliquer le mode de variables.
3. Survolez une collection de variables et choisissez un mode. 

Une fois que vous avez spécifié un mode sur un objet, une étiquette avec l'icône du mode et le nom du mode apparaîtra à côté du nom du calque dans le panneau des calques de la barre latérale gauche. S'il existe plusieurs modes, survolez l'étiquette avec la souris pour afficher la liste des modes.

 

Changer de mode sur une page

Vous pouvez changer de mode sur les pages si une collection locale de variables contient plusieurs modes.

1. Désélectionnez tous les éléments sur le plan de travail.
2. Dans la section Page de la barre latérale de droite, cliquez sur Appliquer le mode de variables.
3. Survolez une collection de variables et choisissez un mode.

Régler sur le mode auto (objets uniquement)

Le mode par défaut des objets avec des variables est défini sur Auto. Cela signifie que ces objets adoptent le mode de leur conteneur parent.

• Lorsque le conteneur parent est également en mode Auto, les objets continuent de remonter la hiérarchie des calques jusqu'à atteindre un conteneur avec un mode spécifié.
• Si aucun conteneur parent n'a de mode spécifié, les objets reviennent au mode par défaut de la collection, qui est indiqué entre parenthèses.

Utilisez avec des instances de variantes

Les variables booléennes, de nombre et de chaîne peuvent être attribuées à des instances de composants avec des propriétés de variante.

Variables de chaîne et numériques

Les variables de chaîne et de nombre peuvent être associées à des instances de variantes, de sorte qu'elles passent à une variante différente lorsque leur mode change. Pour ce faire, la valeur de la variable doit correspondre aux valeurs de la propriété de variante.

1. Créez une variable de type chaîne ou nombre avec plusieurs valeurs (ou modes).
2. Définissez les valeurs de la variable pour qu'elles correspondent aux valeurs de la propriété de variante.
3. Saisissez une instance de composant de la variante et passez la souris sur la propriété de la variante dans la barre latérale de droite.
4. Cliquez sur Assign variable (Attribuer une variable) et choisissez la variable.

Désormais, l'instance passera à une variante différente à chaque changement de mode.

Variables booléennes

Les variables booléennes peuvent être associées à des propriétés de variantes avec des valeurs true et false.

1. Créez une variable booléenne avec plusieurs valeurs (ou modes).
2. Créez deux instances de variante au sein du même ensemble de composants.
3. Définissez la valeur d'une variante sur True et celle de l'autre sur False.
4. Saisissez une instance de composant d'une des variantes, puis survolez la propriété de variante avec la souris dans la barre latérale de droite.
5. Cliquez sur Assign variable (Attribuer une variable) et choisissez la variable booléenne.

Apprenez à utiliser les variantes et les variables dans les prototypes →

Instances imbriquées

Vous pouvez également lier des variables aux propriétés de variantes sur des instances imbriquées.

1. Créez un composant avec une instance imbriquée d'un autre composant.
2. Créez une variable booléenne, de chaîne ou de nombre avec plusieurs valeurs (ou modes).
3. Définissez les valeurs de la variable pour qu'elles correspondent aux valeurs des propriétés du composant d'instance imbriqué.
4. Créer une instance du composant.
5. Attribuez la variable à la propriété de variante de l'instance imbriquée.

Désormais, l'instance imbriquée passera à une autre variante à chaque changement de mode.

Conflits de modes

Tous les modes en conflit afficheront une icône d'information à côté d'eux dans l'interrupteur de mode. Des conflits surviennent lorsque des objets dans un fichier utilisent différentes versions d'une même variable.

Si vous sélectionnez un mode avec un conflit, le mode n'est appliqué qu'aux calques capables de le prendre en charge. Le calque doit utiliser une version de la variable qui contient ce mode.

Pour résoudre les modes en conflit :

1. Ouvrez le fichier contenant la variable principale et publiez-le dans les bibliothèques de l'équipe. 
2. Examinez et acceptez les mises à jour de la fenêtre modale Bibliothèque à partir du fichier qui est à l'origine du conflit.

N'oubliez pas que seules les personnes disposant d'un accès en édition à un fichier peuvent le modifier, le publier et examiner et accepter les mises à jour de la bibliothèque. 

Éviter les conflits de modes

Des conflits de mode peuvent survenir si un mode est supprimé ou ajouté à la variable, et que les mises à jour n'ont pas encore été appliquées à un fichier ou à un objet. 

Voici quelques exemples de conflits qui peuvent survenir et ce que vous pouvez faire pour y remédier.