Appliquer des variables aux designs

Avant de commencer

Qui peut utiliser cette fonctionnalité

Les utilisateurs de tous les forfaits peuvent utiliser les variables

Toutes les personnes ayant accès à un fichier peuvent utiliser les variables de ce fichier

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

Appliquez des variables à différentes propriétés de calque dans la barre latérale droite. Vous pouvez également appliquer des variables aux propriétés des styles de texte et de couleur. Découvrez les propriétés prises en charge par chaque type de variable.

Vous pouvez utiliser toutes les variables créées dans le fichier actuel, ou les variables de n'importe quelle bibliothèque d'équipe publiée à laquelle vous avez accès.

Appliquer une variable de couleur

Les variables de couleur peuvent être appliquées aux remplissages unis ou aux lignes d'arrêt de dégradé pour les remplissages, les couleurs de tracé et les styles de couleur. Bien que les couleurs d'ombre n'aient pas de lignes d'arrêt de dégradé, vous pouvez toujours appliquer des variables de couleur à la couleur d'ombre.

Les variables de couleur et les styles de couleur sont sélectionnés dans le même sélecteur de bibliothèque.

1. Les variables de couleur sont affichées dans des nuanciers carrés.
2. Les styles de couleur sont affichés dans des nuanciers circulaires.
3. Utilisez la barre de recherche pour effectuer une recherche par nom de variable ou par groupe de variables.
4. Ouvrez le menu déroulant pour filtrer par bibliothèque.

Remplissages solides

Pour utiliser une variable de couleur sur un calque sélectionné :

1. Cliquez sur Appliquer les styles et les variables à partir des sections Remplissage ou Tracé du panneau de droite.
2. Sélectionnez une variable dans le sélecteur pour l'appliquer.

Vous pouvez également appliquer des variables de couleur dans une sélection mixte.

En savoir plus sur les propriétés de remplissage et de tracé.

Lignes d'arrêt de dégradé

Appliquez des variables de couleur aux lignes d'arrêt de dégradé de n'importe quelle propriété de remplissage ou de tracé.

1. Sélectionnez le calque et ajoutez un remplissage ou un tracé s'il n'en existe pas encore.
2. Cliquez sur l'échantillon de couleur pour votre remplissage ou votre tracé.
3. Dans le sélecteur de couleurs, sélectionnez l'icône Dégradé et cliquez sur un échantillon de couleur dans la liste Lignes d'arrêt.
4. Dans le nouveau menu, ouvrez l'onglet Bibliothèques et sélectionnez une variable à appliquer à la ligne d'arrêt de dégradé.
5. Répétez l'opération pour les autres lignes d'arrêt de dégradé.

En savoir plus sur l'utilisation des variables de couleur dans les dégradés.

Effets d'ombre

Pour appliquer une variable de couleur à la propriété de couleur d'un effet d'ombre :

1. Sélectionnez le calque.
2. À partir du panneau de droite, ajoutez un effet d'ombre s'il n'en existe pas encore.
3. Cliquez sur l'icône Paramètres d'effet de l'effet ombre interne ou ombre portée.
4. Cliquez sur la nuance de couleur.
5. Ouvrez l'onglet Bibliothèques et sélectionnez une variable à appliquer.

En savoir plus sur les effets d'ombre.

Styles

Les variables de couleur peuvent être appliquées aux nouveaux et aux anciens styles de couleur ainsi qu'à la propriété de couleur des effets d'ombre.

Style de couleur avec remplissage uni

Pour utiliser une variable dans un style de couleur unie :

1. Désélectionnez tout sur le plan de travail en appuyant sur Échap.
2. Depuis le panneau de droite, modifiez un style de couleur existant ou créez-en un nouveau.
3. Dans le menu, cliquez sur un échantillon de couleur dans la section Propriétés.
4. Ouvrez l'onglet Bibliothèques et sélectionnez une variable à appliquer.

Style de couleur avec lignes d'arrêt de dégradé

Pour utiliser des variables dans un style de couleur dégradé :

1. Désélectionnez tout sur le plan de travail en appuyant sur Échap.
2. Depuis le panneau de droite, modifiez un style de couleur existant ou créez-en un nouveau.
3. Dans la fenêtre, sélectionnez l'icône Dégradé.
4. Sous Lignes d'arrêt, cliquez sur une nuance de couleur dans la liste.
5. Dans le nouveau menu, ouvrez l'onglet Bibliothèques et sélectionnez une variable à appliquer à la ligne d'arrêt de dégradé.
6. Répétez l'opération pour les autres lignes d'arrêt de dégradé.

Style d'effet avec une propriété de couleur

Pour utiliser une variable pour la couleur d'un style d'effet d'ombre :

1. Désélectionnez tout sur le plan de travail en appuyant sur Échap.
2. Depuis le panneau de droite, modifiez un style d'ombre existant ou créez-en un nouveau.
3. Cliquez sur l'icône Paramètres d'effet de l'effet ombre interne ou ombre portée.
4. Cliquez sur la nuance de couleur.
5. Ouvrez l'onglet Bibliothèques et sélectionnez une variable à appliquer.

Appliquer une variable de nombre

Pour appliquer une variable numérique à un objet sélectionné :

1. Cliquez dans le champ des propriétés.
2. Appuyez sur = pour ouvrir le sélecteur de Bibliothèque.

Vous pouvez également utiliser l'une des méthodes suivantes :

Propriété	Méthodes supplémentaires
Taille de police Écart Nombre de guides de mise en page Largeur et hauteur Largeur et hauteur maximales	Ouvrez le menu déroulant et sélectionnez Appliquer la variable
Rayon d'angle Effets Largeur, hauteur, marge, décalage et gouttière du guide de mise en page Marges intérieures	Cliquez sur Appliquer la variable Maintenez Maj enfoncé et cliquez dans le champ
Opacité du calque Espacement des lettres Hauteur de ligne Retrait de paragraphe Espacement des paragraphes Épaisseur du trait	Maintenez Maj enfoncé et cliquez dans le champ Cliquez avec le bouton droit de la souris et sélectionnez Appliquer la variable

Dans le sélecteur de Librairie, sélectionnez une variable. Les variables de nombre sont indiquées par une icône de nombre.

Appliquer une variable de type chaîne

Contenu du texte

Les variables de type chaîne peuvent être appliquées au contenu de texte de n'importe quel calque de texte. Cela signifie que si la variable de type chaîne a la valeur Figma, alors le texte sur le plan de travail s'affichera comme Figma. 

1. Sélectionnez un calque de texte.
2. Dans la section Texte en haut de la barre latérale de droite, cliquez sur Appliquer la variable.
3. Sélectionnez une variable dans le sélecteur de Bibliothèque à appliquer.

Propriétés de la police

Les variables de type chaîne peuvent être appliquées à la famille de polices ou à l'épaisseur et au style de police.

Pour appliquer une variable de chaîne à un calque de texte sélectionné :

1. Ouvrez le menu déroulant pour la famille de polices ou l'épaisseur de la police.
2. Sélectionnez Appliquer la variable.
3. Sélectionnez une variable à partir du sélecteur.

Pour appliquer une variable de type chaîne à un style de texte nouveau ou existant :

1. Modifiez ou créez un nouveau style de texte.
2. Depuis la fenêtre, ouvrez le menu déroulant pour la famille de polices ou l'épaisseur de la police.
3. Sélectionnez Appliquer la variable.
4. Sélectionnez une variable à partir du sélecteur.

Appliquer une variable booléenne

Les variables booléennes peuvent être appliquées à la visibilité du calque.

Si la valeur de la variable booléenne est true, alors le calque sera visible. Si la valeur de la variable booléenne est false, alors le calque sera masqué.

1. Dans la section Apparence de la barre latérale de droite, faites un clic droit sur l'icône visible / caché.
2. Sélectionnez une variable à partir du sélecteur.

Appliquer des variables aux différentes instances

Les variables booléennes, de nombre et de chaîne peuvent être appliquées aux instances avec différentes propriétés pour basculer entre les variantes d'un ensemble de composants. Cela peut vous aider à passer d'une variante à l'autre en fonction du mode de la frame parent.

Découvrez comment créer des modes de variables pour les instances de variantes.

Détacher une variable

Pour détacher une variable :

• Pour les variables de couleur, de type chaîne et booléennes : placez le curseur sur la variable dans la section appropriée de la barre latérale de droite, puis cliquez sur l'icône Détacher la variable.
• Pour les variables de nombre : cliquez dans le champ des propriétés et appuyez sur Supprimer / Espace. Pour certaines propriétés, vous pouvez également cliquer sur l'icône Détacher la variable.

Coller les variables non publiées des fichiers

Lorsque vous copiez et collez un objet d'un fichier à un autre, vous pouvez dupliquer les variables non publiées de l'objet dans le second fichier afin de continuer à modifier les variables de l'objet collé, par exemple lorsque vous créez un prototype. 

Ceci est possible pour les objets qui ont :

• Les variables non publiées sont appliquées directement à leurs propriétés (comme la couleur de remplissage).
• Ou, des styles non publiés appliqués directement à leurs propriétés, où les styles utilisent des variables non publiées. Dans ce cas, l'objet collé perdra sa connexion avec le style non publié lorsque vous choisirez de copier les variables.

Une fois ces objets collés dans un autre fichier, une notification temporaire est déclenchée en bas du fichier. Si vous choisissez de copier les variables, elles seront copiées dans une nouvelle collection et les objets collés seront réaffectés aux nouvelles variables.

Si l'objet que vous avez copié est un composant publié et que le fichier de destination y a accès, aucune réaffectation n'aura lieu.