Les variables dans Dev Mode
En tant que développeur, lorsque vous passez en revue des designs dan Dev Mode, vous rencontrez des variables de couleur, de nombre, de chaîne et de type booléen. Les valeurs de ces variables dépendent de facteurs tels que le mode de la variable, ce qui complexifie parfois l'identification des valeurs exactes que vous souhaitez extraire du design.
Figma propose quelques options dans Dev Mode pour simplifier la gestion des variables :
Détails de la variable
Lorsque vous inspectez un design dans Dev Mode, vous pouvez voir les détails des variables utilisées dans le design. La fenêtre modale Variable details recense les informations concernant une variable, y compris :
- Le nom de la variable
- Un lien vers le fichier qui contient la variable
- Le nom de la collection de variables qui inclut la variable
- Le mode de la variable
- La valeur de la variable et, le cas échéant, la chaîne d'alias vers une valeur brute
- La portée de la variable (où elle peut être utilisée)
- Un extrait de code pour utiliser la variable
Une fonctionnalité utile est la capacité de suivre une chaîne d'alias de variables jusqu'à une valeur spécifique. Par exemple, dans l'image précédente, la variable Background/Positive/Default utilise Green/500 comme alias, ce qui correspond à la valeur de couleur #14AE5C.
Vous pouvez également changer de mode depuis la fenêtre modale Variable details afin de voir les autres valeurs possibles de la variable.
Ouvrir la fenêtre modale des détails de la variable
Il existe deux façons d'ouvrir la fenêtre modale Variable details :
Pour les variables qui apparaissent dans un extrait de code, telles que les jetons de design dans CSS, cliquez sur le nom de la variable dans le panneau Inspect pour ouvrir la fenêtre modale Variable details.
Pour les autres variables, telles que celles qui apparaissent dans la section Selection colors, cliquez sur Variable details dans le panneau Inspect pour ouvrir la fenêtre modale.
Variables suggérées
Dans Dev Mode, lorsque vous inspectez un design, il se peut que vous rencontriez des valeurs brutes au lieu de variables ou de styles. Cela peut se produire pour plusieurs raisons, par exemple si un designer a détaché une variable pendant la phase de design. Lorsque vous rencontrez une valeur brute, vous pouvez vérifier s'il existe une variable déjà définie qui devrait être utilisée à la place.
Pour faciliter l'identification des variables correspondantes, Dev Mode peut suggérer des variables.
Pour suggérer une variable, la variable doit avoir :
- Exactement la même valeur
- L'étendue appropriée
Vous pouvez cliquer sur une variable suggérée pour copier son nom.
Obtenir les variables suggérées
Afin d'obtenir des variables suggérées pour une valeur dans Dev Mode, cliquez sur la valeur pour laquelle vous souhaitez obtenir une suggestion dans le panneau Inspect. La fenêtre modale Suggested variables s'affiche à côté de la valeur sur laquelle vous avez cliqué.
Accéder aux collections de variables locales
Dans Dev Mode, vous pouvez accéder et visualiser les collections de variables locales présentes dans le fichier.
Par exemple, dans l'image précédente, dans la section Collections from this file, la collection de variables Color Primitives est sélectionnée. Ces noms ne sont que des exemples. Les noms réels des collections et des variables correspondent aux variables locales et aux collections de votre fichier.
Sous la section Collections from this file se trouve une liste de tous les groupes de variables qui apparaissent dans la collection, tels que Brand, Black et White. Par défaut, l'option All variables est sélectionnée. Les groupes sont ordonnés de la même manière que dans la fenêtre modale Variables.
Pour le groupe sélectionné, le tableau des variables affiche les variables, ainsi que les valeurs pour chaque mode qu'une variable possède. Si vous avez sélectionné All variables, le tableau est organisé par groupe.
Vous pouvez cliquer sur des variables et des valeurs individuelles pour les copier dans le presse-papiers et pour afficher les détails concernant la variable.
Ouvrir le tableau des variables
Pour ouvrir le tableau des variables, dans la section Variables du panneau Inspect, cliquez sur Open variables. Le tableau des variables se développe pour occuper tout le plan de travail.