Métadonnées des variables

Les variables portent plus que des valeurs — elles portent aussi l’information sur l’endroit où elles peuvent servir. variable Jar gère trois types de métadonnées dans la grille Master et le panneau de détail.

Les portées et descriptions sont lues depuis Figma lors de la synchronisation, et vos modifications web reviennent dans le panneau des variables de Figma. Les tags sont propres au web — ils ne touchent jamais Figma.

Comme les valeurs, les portées et descriptions peuvent entrer en conflit. Si les portées ou la description d’une même variable ont été modifiées différemment dans Figma et sur le web avant une synchronisation, la bannière de conflit les compte sous Les portées divergent aussi · N / Les descriptions divergent aussi · N, et vous choisissez le côté Figma ou le côté VA ligne par ligne dans cette colonne, comme pour un conflit de valeur (Choisissez ligne par ligne dans la colonne Portée / Choisissez ligne par ligne dans la colonne Description). Le choix et l’application fonctionnent comme décrit dans la section sur les conflits de Synchronisation Figma.

Afficher les colonnes de métadonnées

Appuyez sur l’icône des colonnes dans la barre d’outils (infobulle Affichage — colonnes et couleur) et activez ou désactivez les colonnes Modes · Description · Tag · Portées dans la section Colonnes. Le menu reste ouvert : vous pouvez basculer plusieurs colonnes à la suite.

Avec les trois activées, la grille Master affiche description, tag et portées sur une seule ligne.

Des commentaires peuvent être épinglés sur les cellules Description, Tag et Portées comme sur les cellules de valeur. Si la colonne est masquée, le commentaire est conservé, et naviguer jusqu’à lui réaffiche la colonne masquée.

Portées — où une variable peut s’utiliser

Les portées déterminent dans quels sélecteurs de propriétés de Figma la variable est proposée. Restreignez une variable de couleur au remplissage Texte et elle n’apparaît plus quand quelqu’un choisit la couleur de fond d’un cadre.

• La cellule Portées résume l’état actuel — Toutes (toutes les propriétés prises en charge), Aucune, les noms des portées choisies (p. ex. « Cadre, Texte » — si la colonne est trop étroite, le reste se replie dans un badge +N), ou « — » pour les variables dont les portées n’ont pas encore été récupérées de Figma. Au survol de « — », le message Pas encore récupéré depuis Figma — se fera à la prochaine synchronisation s’affiche.
• Cliquez sur la cellule pour ouvrir une liste avec la même hiérarchie et les mêmes icônes que la boîte de portées de Figma, et basculez plusieurs portées à la suite. La liste ne montre que les portées valides pour le type de la variable — couleur : Remplissage avec Cadre · Forme · Texte en dessous, plus Contour · Effets ; nombre : de Rayon d’angle au groupe Typographie ; chaîne : Contenu du texte · Famille de police · Graisse ou style de police.
• Afficher dans toutes les propriétés prises en charge correspond simplement à toutes les portées cochées à la fois — activez-le et chaque portée s’allume ; décochez-en une seule et la ligne du haut se décoche tandis que les autres restent cochées. Pour les variables de couleur, Remplissage fonctionne de la même façon pour les remplissages de cadre, de forme et de texte.
• Les cellules de portée des booléens sont en lecture seule — Figma ne prend pas en charge les portées pour les variables booléennes.

Description

• Saisissez directement dans la colonne Description ou modifiez-la dans le panneau de détail. Les descriptions font l’aller-retour avec la description de la variable dans Figma.
• Effacer une description sur le web ne supprime jamais celle de Figma — la synchronisation n’efface pas les descriptions côté Figma.

Tags

• Un Tag est un regroupement interne choisi dans une palette de 7 couleurs (Rouge · Ambre · Vert · Bleu · Violet · Magenta · Gris). Cliquez sur une cellule de la colonne Tag pour activer des couleurs dans la palette ; une variable peut porter plusieurs tags.
• La cellule affiche les couleurs des tags en points côte à côte ; au-delà de quatre, le reste se replie en +N. Aucun tag dans la palette les retire tous.
• Les tags sont propres au web — jamais écrits dans Figma, jamais effacés par la synchronisation.

Modifier plusieurs variables à la fois

Ouvrez le panneau de détail depuis l’icône qui apparaît au survol d’une ligne. Avec plusieurs lignes sélectionnées, le panneau passe en Sélection : N et modifie toute la sélection.

• La description saisie s’applique à toutes les variables sélectionnées.
• Les portées et les tags affichent Mixte quand la sélection diverge ; cliquer sur une case de portée ou un point de couleur de tag les unifie tous.
• Les portées ne peuvent pas être modifiées sur des types différents — sélectionnez des variables d’un même type.
• Un seul Ctrl(⌘)+Z annule tout le lot.

Voir l’état en couleur — le graphe

Dans l’onglet du graphe des tokens, les métadonnées peuvent être peintes sur la structure pour être parcourues d’un coup d’œil.

• Dans Colorer par de la barre d’outils du graphe, choisissez Absent de Figma pour mettre en évidence les variables qui n’existent pas encore dans Figma ; chaque niveau de référence affiche un badge Absents de Figma N avec le nombre. Dans la grille Master, cet état s’affiche dès que le projet est relié à un fichier Figma — au survol du point à côté du nom, le message Pas encore dans Figma — disparaît une fois la variable créée par la prochaine synchronisation s’affiche.
• Choisissez Portées et chaque niveau de référence affiche les badges Portée définie N · Tous N · Masqués N (aucune portée — la variable n’apparaît dans aucun sélecteur) · Non récupérés N, pour repérer les tokens inachevés directement sur la structure.
• Les points de couleur des tags apparaissent aussi à côté des tokens dans le graphe.