Formulaire de contact
Oops! Something went wrong while submitting the form.
Nous vous répondrons le plus rapidement possible.
Formulaire de contact
Nous vous répondrons le plus rapidement possible.
.png)
Le 21 Juin 2023 a eu lieu l’évènement CONFIG. Organisé par Figma, c’est le moment de l’année ou tous les aficionados du logement découvrent les nouveautés qui vont s’intégrer dans notre outil de conception préféré. L’une des nouveautés annoncées était sûrement celle attendue par tous les Designers qui m’entourent : Les Variables.
Une fois la joie et l'excitation ressenties par cette annonce, je n’avais qu’un seul objectif en tête : explorer et tester cette fonctionnalité pour en déterminer à la fois les usages les plus intéressants mais aussi les limites actuelles.Dans cet article, j’ai à cœur de vous proposer le guide le plus complet possible sur comment fonctionne et la manière dont vous pouvez utiliser les Variables dans Figma pour faire passer vos designs au niveau supérieur. Vous êtes prêts ? C’est parti !
Pour comprendre ce que sont les Variables dans Figma, penchons-nous sur la définition des Variables dans le domaine informatique :
“En informatique, les variables sont des éléments qui associent un nom (l’identifiant) à une valeur. La valeur peut être de nature différente : nombre, texte, etc. Les variables sont physiquement implantées dans la mémoire du système programmé (ordinateur, carte microprocesseur, etc.)”
Dans Figma, il s’agit de la même logique. Les Variables nous permettent de créer, stocker et utiliser des valeurs réutilisables dans tous nos projets sur Figma, comme des couleurs ou du texte. On peut créer et utiliser une valeur numérique pour représenter la taille d’un spacing, d’un padding, ou définir une couleur toujours destinée à être utilisée comme la couleur background d'un bouton.
Actuellement, il existe quatre types de Variables :
Figma a annoncé que trois autres types de variables devraient être disponibles fin 2023 :
Pour cela, rien de plus simple : pour créer sa première variable, il faut se rendre sur la fenêtre des variables, où elles sont créées et gérées. Pour cela, cliquez sur le canevas de votre fichier Figma, il ne faut qu’aucun calque ou objet ne soit sélectionné pour que l’option apparaisse.
Dans le panneau de conception se trouve une nouvelle section nommée : "Local variables". C’est ici que vous pourrez accéder à la fenêtre des variables. Pour créer une variable il vous suffit ensuite de cliquer sur le bouton “Create Variable” et de choisir le type de variable que vous souhaitez créer ! C’est aussi simple que ça.
Maintenant que vous avez créé votre première variable, vous allez pouvoir l’utiliser. En fonction du type de variable que vous souhaitez utiliser, la marche à suivre n’est pas exactement la même. Nous allons donc voir où et comment utiliser votre variable fraîchement créée.
Affecter une variable de type couleur se fait exactement de la même manière qu’affecter un style de couleur. Lorsque vous avez sélectionné un objet, cliquez sur l'icône Variable dans les sections de remplissage (Fill) ou de contour (Stroke) du panneau de conception.
Tips : Dans cette liste, vous verrez apparaître à la fois les styles et les variables, mais les aperçus des styles seront représentés par des cercles, tandis que les aperçus des variables seront désormais affichés sous forme de carrés ce qui permet de les différencier facilement du premier coup d'œil.
Pour affecter une variable numérique, il suffit de se rendre directement sur le champ de saisie où se trouve la valeur.
Il existe deux méthodes d’affectation d’une variable numérique qui dépend de ce que vous souhaitez paramétrer :
Pour affecter une variable de type texte : Lorsque vous sélectionnez un calque de texte, l'icône apparaît dans la section Texte du panneau de conception. En cliquant sur cette icône, vous avez la possibilité de sélectionner les variables textes disponibles.
Pour affecter une variable booléenne afin de contrôler la visibilité d’un calque, commencez par sélectionner le calque en question. Ensuite, faites un clic droit (ce n’est pas très intuitif mais actuellement seul le clic droit fonctionne pour accéder à cette option) sur l’icône visibilité de la section Layer dans le panneau de conception. Une liste de variables booléennes s'affiche, et vous pourrez affecter celle que vous souhaitez au calque sélectionné.
Il est également possible de lier une variable booléenne à la propriété booléenne de l’instance d’un composant. L'icône variable apparaît à côté de la propriété en question.
Note : Pour l'instant, cette fonctionnalité de lier une variable booléenne au contrôle d’une propriété fonctionne uniquement pour les instances d'un composant, cela n’est pas encore possible sur le composant principal lui-même.
Pour exploiter à son plein potentiel la puissance des variables, il est important d’avoir des variables bien structurées.
Pour cela, nous allons voir comment utiliser cette nouvelle fonctionnalité avec toutes les possibilités qu’elle nous offre.
Les Groupes permettent une consolidation étroite des variables. Une comparaison intéressante consiste à considérer les groupes comme des dossiers capables de contenir des ensembles de variables. Par exemple, la couleur principale de votre marque va être déclinée sous plusieurs teintes au sein de votre Design System : $blue-30, $blue-50 et bien plus encore. Dans ce cas, il serait avisé de former un groupe qui rassemble les couleurs similaires, afin de les rendre aisément accessibles et facilement identifiables.
La création d'un groupe est simple : il vous suffit de faire un clic droit sur une ou plusieurs variables, puis de choisir "new group with selection".
Tips : il est également possible de créer un groupe en utilisant le caractère “/” dans le nom de la variable, par exemple la variable color/blue/50 va créer un groupe color et un sous-groupe blue
Les Modes offrent un contexte supplémentaire à une collection de variables, comme des thèmes (Light ou Dark Mode) ou des spécifications de taille (Desktop ou Mobile). Lorsque vous créez une nouvelle variable, par défaut, une seule colonne est utilisée pour représenter la valeur de la variable, sans nécessairement être un mode. Les modes apparaissent uniquement lorsque deux colonnes ou plus de valeurs sont présentes.
Pour initialiser un nouveau mode, il faut simplement cliquer sur l’icône “+” présente à droite de la colonne “Value”. La première colonne deviendra alors “Mode 1” tandis que la nouvelle colonne s’appellera “Mode 2”. Inutile de préciser que vous êtes libre de nommer les Modes en fonction du besoin.
Les collections désignent des ensembles spécifiques de variables, de groupes et de modes. Elles nous permettent d'organiser et de regrouper étroitement les variables.
Par exemple, vous pouvez utiliser les Collections pour établir certaines fondations de votre Design System comme les couleurs.
Pour créer une nouvelle collection, sélectionnez le menu déroulant en haut à gauche de la fenêtre modale des variables, puis choisissez "Create collection".
Le concept d'aliasing, consiste à lier une variable à une autre variable déjà existante. Cette fonctionnalité permet de rendre le processus de création ou de gestion des mises à jour plus efficace, car plusieurs éléments liés peuvent faire référence à une seule variable.
Pour illustrer comment les alias peuvent être utiles dans le processus de conception, prenons l'exemple où je souhaite associer une couleur de background à mon bouton. Pour ce faire, je créerais cette variable :
button-secondary-background-color
J'aimerais lui attribuer une certaine valeur de bleu :
#8AF1FF
Cependant, au lieu de le faire directement, je vais créer une première variable dans une première collection dédiée (souvenez-vous, on en parle plus haut!) qui va stocker l’ensemble de mon Color System décrivant cette couleur de manière plus précise :
blue-50 = #8AF1FF
Ensuite, j'appliquerais cette variable à mon bouton en créant une seconde variable mais cette fois-ci dans une collection dédiée à stocker les tokens liés à mes boutons :
button-secondary-background-color = blue-50
C’est ainsi que les alias fonctionnent. La prochaine fois que j'aurai besoin de changer la couleur de background de tous mes boutons secondaires, ce sera plus simple : je n'aurai qu'à modifier la valeur une seule fois dans la définition de la variable blue-50. Ainsi, tous les boutons utilisant la variable button-secondary-background-color pour définir leur couleur seront automatiquement mis à jour.
Note : Les alias fonctionnent également avec les variables de type texte, booléen et nombre !
Pour créer l’alias d’une variable, faites un clic droit sur la valeur d'une variable déjà définie, puis choisissez "Create alias". Ensuite, sélectionnez l'onglet "Libraries", qui affiche toutes les variables compatibles, prêtes à être liées.
Lorsque vous créer des variables pour vos différents projets, il est important de considérer comment et où ces variables devraient être affectées, ainsi que les situations où elles ne devraient pas l'être. Cela ne vise pas à restreindre, mais plutôt à améliorer l'expérience des designers lorsqu'ils interagissent avec les variables.
Idéalement, les variables numériques créées pour être affectées à des valeurs de spacing et de padding devraient être restreintes à ces choix spécifiques et ne devraient pas être employées pour paramétrer les border radius (par exemple). De la même manière, les variables de couleur qui définissent les options de remplissage ou de contour ne devraient pas être proposées lorsqu'il s'agit de choisir la couleur d'un texte. Cette option permettant de délimiter le périmètre d’utilisation d’une variable dans Figma est appelée "Scoping", une fonctionnalité disponible pour tous les types de variables !
Pour accéder au Scoping, cliquez sur l'icône de configuration située à la fin de la ligne de la variable. En cliquant sur ce bouton, la fenêtre modale "Edit variable" s'ouvrira, vous permettant de préciser l'utilisation d'une variable et d'appliquer des limitations à sa portée.
Tips : Vous pouvez définir le scoping de plusieurs variables simultanément. Pour réaliser cette opération il suffit de sélectionner plusieurs variables, en faisant un clic droit, l’option “Edit Variables” apparaîtra et permettra au clic, de paramétrer le scoping de plusieurs variables simultanément.
Le Code Syntax permet de représenter les variables dans votre code en leur attribuant des noms de variable valides. Le Code Syntax d'une variable sera visible dans des extraits de code en Dev Mode lorsque vous inspectez les éléments qui utilisent cette variable. Actuellement, cette fonctionnalité est disponible dans les langages CSS, SwiftUI et Compose.
Vous avez la possibilité de créer un nom spécifique à chaque plateforme, que ce soit pour le Web, Android ou iOS. Cela signifie que vous pouvez avoir jusqu'à trois Code Syntax différentes pour une même variable.
A la lecture de cet article, vous vous êtes sûrement demandé à plusieurs reprises :”Mais pourquoi ne pas plutôt utiliser les styles ?”, et je vous rassure, je me suis posé de nombreuses fois cette même question à la découverte des variables.
Dans ce cas, il paraît naturel de se poser la question sur la bonne fonctionnalité à utiliser ? Figma nous permet d'utiliser les deux et d'obtenir des résultats presque identiques, mais pas exactement en fait..
Tout d’abord, les variables sont bien plus avancées, et si vous mettez en place un Design System ou effectuez des travaux de prototypage plus poussés, optez pour elles ! En revanche, certaines propriétés comme les dégradés ou les effets ne sont (pas encore) prises en charge par les variables, l’utilisation des styles est donc la seule alternative possible.
Deuxième point, les variables sont plus atomiques ; elles stockent des valeurs uniques, tandis que les styles peuvent être un ensemble de valeurs.
Plusieurs valeurs surviennent lorsque vous avez deux ou plus de deux valeurs de couleur impliquées. La situation la plus courante où cela se produit est avec les dégradés, qui nécessitent un mélange de plusieurs couleurs.
De plus, l'aliasing est pris en charge pour tous les types de variables. Les styles ne peuvent pas être utilisés comme alias. Vous pouvez utiliser des variables de couleur pour définir d'autres variables de couleur et des styles de couleur, mais les styles ne peuvent pas être utilisés pour définir quoi que ce soit. Cela signifie également que les styles sont limités en termes de complexité et de mise à l'échelle des tokens de conception.
Il serait difficile de lister toutes les possibilités offertes par l'introduction des variables dans Figma. Tout comme dans la communauté des développeurs, on pourra toujours compter sur l'ingéniosité des designers pour trouver des nouveaux usages plus incroyables les uns que les autres quant à l'utilisation des variables.
Il existe plusieurs raisons pour lesquelles vous pourriez souhaiter rendre certaines collections de variables privées et ainsi ne pas les publier. Par exemple, vous pourriez vouloir masquer les valeurs primitives et ne rendre visibles que les tokens.
Pour rendre les collections privées, tout comme avec les composants, ajoutez un point "." ou un tiret bas "_" en préfixe du nom de votre collection et ainsi, l’intégralité de la collection sera privée et ne sera donc pas publiée.
Si vous ne souhaitez pas que certaines variables apparaissent dans le panneau de sélection des couleurs et risquent de perturber les designers dans d'autres fichiers Figma, vous pouvez choisir de ne pas les publier et ainsi éviter toute confusion. Pour cela, dans la fenêtre d’édition d’une variable, cochez l'option "Hide from publishing" et cette dernière ne sera pas publiée.
Automatiquement les collections sont organisées par ordre alphabétique. Cela signifie que vous ne pouvez pas (encore ?) les faire glisser et déposer pour les personnaliser comme les styles.
Malheureusement, cela signifie que dans le fichier principal, vous verrez toutes vos variables privées en haut de la liste des calques car elles commencent par "." ou "_". Le reste d'entre elles peut être mieux organisé grâce à une bonne convention de nommage : les collections peuvent commencer par des chiffres par exemple.
Swap Styles to Variables
https://www.figma.com/community/plugin/1253585487427690087/Styles-to-Variables-Converter
Apply variables automatically
https://www.figma.com/community/plugin/1264259625007726988/Apply-variables
Bazzle : A Variable Builder
https://www.figma.com/community/plugin/1275190440535606253/bazzle-a-variable-builder
Les variables, les groupes, les modes et les collections illustrés dans cet article existent à titre purement démonstratif. Pour certains exemples, il ne s’agit pas de la bonne manière d’organiser ses variables. Si vous souhaitez en savoir plus sur la bonne manière de structurer ses variables, je vous invite à découvrir cet article qui est très intéressant sur le sujet.
https://medium.muz.li/figma-variables-complete-guideline-and-learning-documentation-9d5014a14c54
https://www.thalion.pro/post/figma-variables-ultimate-guide
https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma
https://medium.com/@joeyabanks/a-guide-to-variables-in-figma-b500b80d4e4
Abonne toi à notre newsletter pour recevoir l’essentiel de l’actualité Design toutes les deux semaines dans ta boîte mail !
.png)
