Créer et gérer des variables et des collections

Avant de commencer

Qui peut utiliser cette fonctionnalité

Toutes les personnes avec tous les forfaits

Toute personne disposant d'un accès de type peut éditer pour un fichier peut créer et modifier des variables.

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

Accéder à la fenêtre modale Variables

Utilisez la fenêtre modale Variables pour créer et gérer les éléments suivants :

1. Collections de variables
2. Variables
3. Modes de variables
4. Groupes de variables

Pour accéder à la fenêtre modale Variables :

1. Deselectionnez tout sur le canevas en appuyant sur Échap ou en cliquant sur le canevas.
2. À partir de la barre latérale droite, cherchez la section Local variables.
3. Cliquez sur Open variables.

Vous pouvez cliquer sur Activer/désactiver la barre latérale (Toggle sidebar) pour voir des options supplémentaires dans la fenêtre modale Variables.

Créer une variable

1. À partir de n'importe quelle collection, cliquez sur + Create variable.
2. Sélectionnez un type de variable dans le menu déroulant.
3. Donnez un nom à la variable dans la première colonne et une valeur dans la deuxième colonne.

Chaque collection peut avoir jusqu'à 5 000 variables.

Pour dupliquer une variable, sélectionnez une ou plusieurs variables et appuyez sur ⇧ Maj Entrée.

Pour supprimer une variable, cliquez sur celle-ci avec le bouton droit de la souris et sélectionnez Delete variable.

Créer un alias

Créer un alias pour une variable afin de lier sa valeur à une variable existante. Cela vous permet de mettre en œuvre des jetons de design et de gérer plus efficacement les mises à jour de vos designs.

Par exemple, supposons que vous ayez plusieurs variables de couleur faisant référence à la même variable de couleur. Si celle-ci doit être mise à jour, il suffira de mettre à jour la source au lieu de mettre à jour manuellement chaque instance de la couleur.

Une variable peut faire référence à d'autres variables du même type.

Pour créer un alias pour une variable :

1. Ouvrez la fenêtre modale Variables.
2. Cliquez avec le bouton droit sur la valeur d'une variable et sélectionnez Créer un alias.
3. À partir de l'onglet Bibliothèques, choisissez une variable pour définir un alias. Vous pouvez utiliser la barre de recherche pour chercher une variable par nom ou parcourir les bibliothèques disponibles.

Pour détacher un alias, survolez le champ de valeur et cliquez sur Detach alias.

Copier et coller les variables

Vous pouvez copier et coller des variables dans n'importe quelle collection, y compris les collections qui se trouvent dans un fichier différent.

1. Ouvrez la collection souhaitée à partir de la fenêtre modale Variables.
2. Sélectionnez une ou plusieurs variables.
   • Maintenez la touche ⌘ Command (Mac) ou ⌃ CTRL (Windows) enfoncée pour sélectionner plusieurs variables.
   • Maintenez la touche ⇧ Maj enfoncée pour sélectionner une plage de variables.
3. Cliquez avec le bouton droit sur la sélection et choisissez Copier.
4. Dans n'importe quelle collection, faites un clic droit et sélectionnez Coller.

Éditer une variable

Survolez la rangée d'une variable et cliquez sur l'icône Edit variable pour ouvrir sa fenêtre modale d'édition.

À partir de là, vous pouvez :

1. Modifier le nom de la variable.
2. Ajouter une description pour expliquer comment la variable doit être utilisée.
3. Modifier les valeurs de la variable.
4. Ajouter de la syntaxe de code.
5. Masquer la variable de la publication.
6. Définir la portée d'une variable pour limiter les propriétés auxquelles la variable peut s'appliquer.

Définir la portée d'une variable

Définissez la portée d'une variable pour limiter les propriétés auxquelles la variable peut s'appliquer. Ainsi, vous n'aurez plus à vous poser de questions lorsque vous devrez décider quelles variables utiliser dans vos designs.

Par exemple, si vous définissez la portée d'une variable numérique sur le rayon d'angle, la variable ne pourra être appliquée qu'au rayon d'angle et n'apparaîtra pas en tant qu'option pour d'autres propriétés prises en charge.

La définition de la portée est disponible pour les variables de type nombre, couleur et chaîne.

Pour définir la portée d'une variable :

1. Cliquez avec le bouton droit de la souris sur une variable ou plusieurs variables, puis sélectionnez Modifier la variable. Vous pouvez également cliquer sur l'option Modifier la variable, située à droite de n'importe quelle variable.
2. Ouvrez l'onglet Portée.
3. Utilisez les cases à cocher pour activer ou désactiver la disponibilité de la variable dans cette propriété. Cochez Afficher dans toutes pour rendre la variable disponible pour toutes les propriétés prises en charge.

Ajouter une syntaxe de code

La syntaxe de code vous permet de représenter les variables dans le code en utilisant des noms de variables valides afin de faciliter la passation d'un projet. La syntaxe de code d'une variable apparaîtra dans des extraits de code en Dev Mode lorsque vous inspecterez des éléments à l'aide de la variable. Actuellement, les extraits de code pour les variables sont pris en charge dans CSS, SwiftUI et Compose. 

Vous pouvez créer un nom par plateforme, y compris pour le Web, Android et iOS. Cela permet d'avoir jusqu'à trois syntaxes de code par variable. 

Pour ajouter la syntaxe de code à une variable :

1. Dans la section Syntaxe de code de la fenêtre modale Modifier la variable, cliquez sur Ajouter une syntaxe de code.
2. Dans le menu déroulant, choisissez Web, Android ou iOS.
3. Utilisez la zone de saisie pour entrer le nom d'une variable. Un aperçu vous montre comment le nom de la variable s'affiche dans les extraits de code.

Modifier les variables en bloc

Pour modifier plusieurs variables simultanément :

1. Ouvrez n'importe quelle collection depuis la fenêtre modale Variables.
2. Sélectionnez plusieurs variables à l'aide des shortcuts du clavier :
   • Maintenez la touche ⌘ Command / CTRL enfoncée et cliquez pour sélectionner des variables individuelles
   • Maintenez la touche Maj enfoncée et cliquez pour sélectionner une plage de variables.
3. Cliquez avec le bouton droit de la souris sur une variable sélectionnée et cliquez sur Modifier les variables.
4. À partir de la fenêtre modale Modifier les variables, vous pouvez :
   • Définir la portée des variables, si cela est pris en charge par le type de variable ;
   • Masquer les variables de la publication.

Créer et gérer des collections de variables

Une collection est un ensemble de variables et de modes. Les collections peuvent être utilisées pour organiser des variables liées ensemble. Par exemple, utilisez une collection pour localiser du texte dans différentes langues, et une autre collection pour les valeurs spatiales.

Créer une collection de variables

Pour créer une collection de variables, allez dans la barre latérale de la fenêtre modale Variables et cliquez sur Plus d'options > Créer une collection.

Si une variable n'a pas été créée dans un fichier, vous devrez d'abord en créer une pour pouvoir créer de nouvelles collections de variables.

Renommer une collection de variables

Pour renommer une collection de variables :

1. Dans la barre latérale de la fenêtre modale Variables, ouvrez le menu déroulant des collections et choisissez la collection que vous souhaitez modifier.
2. Cliquez sur Plus d'options et sélectionnez Renommer la collection.

Supprimer une collection de variables

La suppression d'une collection de variables supprime également toutes les variables qu'elle contient. Les propriétés qui utilisaient les variables ne seront plus liées à la variable ni aux modes existants. Les variables et la collection ne peuvent être restaurées qu'en annulant immédiatement l'action ou en restaurant une version antérieure du fichier. 

Pour supprimer une collection de variables :

1. Dans la barre latérale de la fenêtre modale Variables, ouvrez le menu déroulant des collections et choisissez la collection que vous souhaitez modifier.
2. Cliquez sur Plus d'options et sélectionnez Supprimer la collection.

Réorganiser les collections de variables dans un fichier

Réorganisez vos collections de variables afin de mieux les classer et de les retrouver plus rapidement pour les utiliser dans les designs. Modifier l'ordre des collections de variables affectera l'ordre dans lequel elles apparaissent dans le sélecteur de mode de variable et les sélecteurs de variables.

Pour réorganiser les collections de variables dans un fichier :

1. Dans la barre latérale de la fenêtre modale Variables, cliquez sur Plus d'options et sélectionnez Réorganiser les collections.
2. À partir de la fenêtre contextuelle Collections, vous pouvez :
   • Cliquer sur les collections et les faire glisser pour les réorganiser, ou ;
   • Cliquer sur Trier de A à Z pour organiser les collections par ordre alphanumérique.

Regrouper une sélection de variables

Vous pouvez également organiser les variables plus précisément en les ajoutant à des groupes au sein d'une collection. Par exemple, utilisez un groupe pour les couleurs utilisées pour le texte, et un autre pour les couleurs utilisées sur les traits.

Pour organiser des variables dans un groupe :

1. À partir de la fenêtre modale Variables, sélectionnez plusieurs variables :
   • Maintenez ⌘ Command / Control enfoncé pour sélectionner plusieurs variables
   • Maintenez ⇧ Shift enfoncé pour sélectionner une plage de variables
2. Cliquez sur la selection avec le bouton droit de la souris et sélectionnez New group with selection.

Cliquez sur des groupes faites-les glisser dans la barre latérale de la fenêtre modale Variables pour les réorganiser. Vous pouvez également cliquer sur des groupes et les faire glisser dans d'autres groupes pour les imbriquer. 

Renommer un groupe

1. Dans la barre latérale de la fenêtre modale Variables, double-cliquez sur le nom du groupe.
2. Saisissez un nouveau nom pour le groupe de variables.

Gérer un groupe

1. Dans la barre latérale de la fenêtre modale Variables, faites un clic droit sur le nom du groupe dans la barre latérale.
2. Dans le menu, choisissez l'une des options suivantes :
   • Dégrouper
   • Duplicate group
   • Delete group