Article original : How to Use Variables in Figma – A Handbook for Beginners

Lors de la Figma Config 2023, l'équipe Figma a dévoilé de nombreuses nouvelles fonctionnalités, y compris les variables. Le lancement des variables dans Figma offre aux designers une nouvelle approche qui les aide à rendre leurs designs plus flexibles et adaptables.

Dans ce tutoriel, vous apprendrez ce que sont les variables dans Figma, et comment créer et implémenter différents types de variables lors de la conception dans Figma.

Prérequis :

Pour tirer le meilleur parti de ce guide, il sera utile d'avoir des connaissances de base sur l'utilisation de Figma et de ses fonctionnalités. Mais notez que cela n'est pas nécessaire, car j'ai écrit ce guide pour tout le monde, indépendamment de leur niveau de connaissance individuel.

Ce guide est destiné à tous ceux qui souhaitent en savoir plus sur les variables, Figma et le design en général.

Table des matières :

Qu'est-ce que les variables ?

Le mot « variable » a de nombreuses définitions. Le dictionnaire Oxford définit le mot variable comme « non constant ou n'ayant pas de motif fixe ; susceptible de changer. » Une autre définition dit « un élément, une caractéristique ou un facteur susceptible de varier ou de changer. »

Les définitions ci-dessus nous disent simplement que les variables sont des éléments dynamiques et sujets à changement. Avec ces définitions, nous pouvons maintenant définir ce qu'est une variable dans Figma.

Dans Figma, une variable stocke des valeurs réutilisables comme les couleurs et les valeurs de texte que vous pouvez appliquer à différentes propriétés de design et prototypes.

Différences entre les variables et les styles dans Figma

Étant donné la définition des variables ci-dessus, vous avez peut-être commencé à voir certaines similitudes entre les variables et les guides de style. Bien que les deux fonctionnalités existent pour améliorer votre travail, il y a quelques différences clés à garder à l'esprit :

  • Les variables sont une fonctionnalité plus avancée, et elles vous permettent de définir et de réutiliser des valeurs comme les couleurs, le texte et l'espacement dans vos designs. D'autre part, les styles sont des ensembles prédéfinis de propriétés de design telles que les styles de texte, les styles de couleur et les styles d'effet.
  • Les variables permettent aux designs de changer lorsqu'elles sont utilisées dans divers contextes, en raison de leur nature dynamique, contrairement aux styles. Par exemple, vous pouvez changer vos designs du mode clair au mode sombre ou avoir des valeurs de remplissage qui changent lors de la conception pour différents appareils. Cela rend les variables utiles pour créer des systèmes de design avec des composants adaptables.
  • Les variables offrent un processus de design plus flexible dans la création de composants de design flexibles, surtout lorsque vous souhaitez changer des valeurs comme le texte ou la couleur des boutons sur différentes instances du même composant. Les styles sont généralement utilisés pour maintenir des éléments de design cohérents comme les styles de boutons, les titres de texte ou les palettes de couleurs.
  • Les variables peuvent stocker des valeurs brutes et uniques, tandis que les styles stockent des ensembles de valeurs.

Pourquoi les variables sont-elles importantes pour le processus de design ?

L'utilisation des variables est assez importante pour un certain nombre de raisons.

Premièrement, les variables aident à maintenir la cohérence dans un système de design. En définissant des variables pour les couleurs, la typographie, l'espacement et d'autres éléments de design, vous garantissez que ces éléments ont une apparence uniforme dans tout votre projet. Cette cohérence est cruciale pour le branding et l'expérience utilisateur.

Les variables rendent également les designs adaptables. Les designers peuvent rapidement expérimenter avec différentes valeurs telles que les schémas de couleurs ou les tailles de police en ajustant les variables. Cette adaptabilité est précieuse lors de la création de designs pour différentes plateformes ou appareils.

Les variables sont également assez efficaces. Lorsqu'une variable est mise à jour, toutes les instances de cette variable dans le design sont mises à jour automatiquement. Cela permet de gagner du temps et des efforts, et élimine le besoin de mettre à jour manuellement chaque instance d'un élément spécifique.

Les variables sont particulièrement utiles dans les grands projets ou les systèmes de design en raison de leur évolutivité et de leur facilité de maintenance. Elles permettent aux designers de faire évoluer leurs designs sans perdre le contrôle.

Puisque les projets évoluent et que les systèmes de design se développent au fil du temps, les variables peuvent être ajustées globalement pour répondre à de nouvelles exigences. Les variables fournissent également un endroit central pour mettre à jour ces changements, garantissant que tous les éléments de design sont modifiés de manière cohérente.

Et enfin, les variables peuvent être bénéfiques pour les développeurs lors du processus de transfert. Les designers peuvent fournir aux développeurs des valeurs précises pour les éléments de design, réduisant ainsi les risques de mauvaise interprétation et simplifiant le processus de mise en œuvre.

Comment créer des variables dans Figma

Les variables sont assez faciles à créer dans Figma. Ci-dessous, je vais vous guider à travers les étapes pour créer différents types de variables dans Figma.

Pour l'instant, nous avons quatre types de variables dans Figma :

  • Couleur : utilisée pour les remplissages de couleur.
  • Nombre : utilisée pour les dimensions, le rayon des coins et les propriétés de disposition automatique.
  • Chaîne : utilisée pour les calques de texte et les propriétés de variante.
  • Booléen : utilisée pour basculer la visibilité des calques.

Nous allons créer et implémenter chacune de ces variables dans Figma, et les utiliser également pour le prototypage avancé.

Comment créer des variables de couleur dans Figma

Le premier type de variable que nous allons créer est une variable de couleur. En tant que designer ou développeur, vous avez probablement utilisé des couleurs dans vos projets. Ainsi, le concept de couleur ne devrait pas vous être étranger d'un point de vue design.

Étape 1 : Ouvrir un nouveau fichier Figma

Supposons que vous souhaitez créer des variables de couleur pour un nouveau projet de design sur lequel vous allez commencer à travailler, comme un site web de magazine par exemple. La première chose que vous devez faire est d'ouvrir un nouveau fichier Figma.

Image Fichier Figma vierge

Étape 2 : Choisir une palette de couleurs

L'étape suivante consiste à choisir une palette de couleurs pour le projet. Chaque projet de design a un ensemble de couleurs utilisées de manière répétée pour établir la cohérence – par exemple, pour les en-têtes et les arrière-plans, pour attirer l'attention sur un bouton principal, et ainsi de suite.

Vous voudrez choisir des couleurs qui se complètent pour votre design. Si vous avez besoin d'aide ici, vous pouvez lire mon article sur la règle 60-30-10 en design.

Image Création d'une palette de couleurs

Étape 3 : Créer des variables pour chaque couleur

Ensuite, nous allons créer des variables pour chaque code de couleur de la palette. Allez dans le panneau sur le côté droit et cliquez sur variables locales.

Les variables locales signifient toutes les variables situées dans le fichier de design.

Image Cliquez sur les variables locales

Cliquez sur créer une variable pour créer la première variable dans le fichier.

Une liste déroulante apparaîtra contenant les quatre types de variables que j'ai expliqués précédemment. Puisque nous essayons de créer des variables de couleur dans cette section, nous choisirons couleur.

Image Créer une variable de couleur

Une section de variable créée apparaîtra, avec deux colonnes : le titre de la variable (Couleur), et la valeur de la variable (le code couleur-FFFFFF).

Image Choisir des variables de couleur

Donnez un nom à votre nouvelle variable – vous pouvez utiliser le rôle de la couleur, par exemple, arrière-plan principal. Dans la colonne suivante, tapez le code couleur ou utilisez un sélecteur de couleur.

Image Renommer la variable et taper le code couleur

Et voilà – vous venez de créer votre première variable de couleur !

Pour voir plus d'options d'édition, survolez la ligne de la variable. Une icône modifier la variable apparaîtra.

Image Modifier la variable

Cliquez dessus pour modifier la variable de couleur à votre goût.

Image Modifier la variable de couleur/ajouter une description

Dans la section d'édition, vous pouvez ajouter une description sur la façon d'utiliser la variable, la masquer de la publication, et ainsi de suite.

Ayant fait cela, suivez les étapes ci-dessus pour créer des variables pour les couleurs restantes de la palette de couleurs.

Image Créer des variables pour d'autres couleurs

Vous pouvez également organiser vos variables en groupes. Pour ce faire, sélectionnez les variables de couleur que vous souhaitez regrouper (maintenez la touche SHIFT enfoncée), et faites un clic droit.

Image Grouper les variables de couleur

Cela fera apparaître quelques options :

  • Nouveau groupe avec sélection
  • Modifier les variables
  • Dupliquer les variables
  • Supprimer les variables

Image Nouveau groupe avec sélection

Choisissez Nouveau groupe avec sélection, double-cliquez sur le nom du groupe, et renommez-le en couleur/bleu.

Image Renommer le groupe

Vous pouvez regrouper vos variables de couleur comme vous le souhaitez – par exemple, couleurs d'arrière-plan, couleurs d'en-tête, différentes nuances d'une couleur particulière, et ainsi de suite.

Image Variables de couleur bleue regroupées.

Violà ! Vous venez de créer un groupe de variables de couleur dans Figma. Cliquez sur la liste déroulante de la collection et choisissez renommer la collection.

Image Renommer la collection

Vous pouvez renommer cette collection primitives.

Primitives signifie basique. Vous pouvez également décider de renommer vos collections ou non. Le choix vous appartient.

Image Collection primitives renommée

Comment créer des variables de couleur pour les tokens

Maintenant, nous allons créer des variables de couleur pour le texte, les surfaces (comme les arrière-plans) et les bordures dont nous avons besoin pour le projet. Nous voulons attribuer différentes fonctions à la palette de couleurs (variables) que nous avons créée précédemment.

Cliquez sur les variables locales et créez une nouvelle collection. Vous pouvez la nommer tokens.

Image Nouvelle collection

Créez une nouvelle variable de couleur et renommez-la "texte principal".

Pour gagner du temps et regrouper vos variables au fur et à mesure que vous les nommez, renommez la variable en texte/principal. Cela formera automatiquement un groupe.

Image Création et regroupement des variables de texte

Cliquez sur la boîte de remplissage et allez dans Bibliothèques pour voir toutes les variables de couleur créées.

Image Attribution de couleur à partir des bibliothèques

Nous choisirons Noir Principal qui se trouve sous couleur/gris.

Image Choix de la couleur noire

Nous pouvons continuer et attribuer d'autres variables de couleur pour différentes fonctions de texte, autant que nous le souhaitons. N'oubliez pas d'ajouter texte/ avant le nom réel de la variable, afin qu'elle forme automatiquement un groupe.

Image Attribution de variables de couleur pour le texte

Ensuite, nous allons créer des variables de couleur pour les surfaces telles que les arrière-plans, et pour les bordures également.

Image Variables de couleur pour les surfaces et les bordures

Certaines des variables de couleur peuvent avoir le même code couleur, mais elles ont des fonctions différentes, donc c'est tout à fait normal. Par exemple, le code couleur pour le texte du bouton est le même que le code couleur pour l'arrière-plan principal.

Comment implémenter des variables de couleur dans vos designs

Ensuite, nous allons implémenter ces variables de couleur dans notre design.

Dans l'image ci-dessous, il y a quatre maquettes mobiles sans couleur ni images (je les ai créées précédemment).

Vous pouvez lire comment créer des maquettes dans cet article : Qu'est-ce que le wireframing ? Comment passer des croquis papier aux maquettes haute fidélité.

Nous allons utiliser les variables de couleur que nous avons créées pour ajouter de la couleur aux boutons et au texte, en veillant à ce que tous les éléments soient cohérents.

Image Maquettes basse fidélité

En commençant par le premier écran, ajoutons de la couleur au bouton. Cliquez sur le bouton, et allez dans Remplissage sur le côté droit de votre écran.

Image Cliquez sur le bouton

Dans la section Remplissage, cliquez sur style (l'icône à quatre points sur le côté). La sélection de style fera apparaître une liste de couleurs dans vos bibliothèques. Sélectionnez la couleur que vous avez attribuée pour le bouton principal afin de l'implémenter.

Image Sélectionnez une couleur de remplissage parmi les variables de couleur dans les bibliothèques

Image Couleur de bouton implémentée

Ensuite, donnez au texte du bouton une couleur blanche en suivant les mêmes étapes.

Image Implémentation de la variable de couleur pour le texte du bouton

Image Couleur de texte de bouton implémentée

Vous pouvez continuer et faire de même pour les autres écrans, en suivant les étapes ci-dessus. N'oubliez pas de mettre à jour le texte et les couleurs également.

Image Mise à jour des variables de couleur pour les autres écrans

Vous pouvez également ajouter des images ou des illustrations pour compléter l'apparence.

Image Ajout d'illustrations au design mis à jour

Remarque : Vous pouvez obtenir vos illustrations à partir de plugins dans Figma comme Storyset by Freepik, Artify Illustrations, et ainsi de suite, ainsi qu'à partir de bibliothèques d'illustrations comme Freepik, Lapa Ninja, et d'autres.

Comment créer différents modes avec des variables

Ensuite, nous allons créer différents modes pour notre design. Par exemple, si vous travaillez sur un projet qui nécessite des modes clair et sombre, au lieu de changer manuellement tous les éléments de design pour accommoder les modes, vous pouvez simplement utiliser des variables pour implémenter cela.

Pour commencer, cliquez sur Variables locales pour créer une nouvelle variable. Une liste de toutes les variables dans le fichier et leurs groupes apparaîtra :

couleur/bleu :

  • Bouton Principal
  • Bleu Principal

couleur/gris :

  • Noir Principal
  • Arrière-plan Principal

Image Ouvrir "Variables locales"

Ensuite, je vais créer une nouvelle collection afin de me concentrer uniquement sur les modes que je suis sur le point de créer. Pour créer une nouvelle collection, cliquez simplement sur l'icône de menu dans l'en-tête des variables.

Notez que la création d'une nouvelle collection n'est pas obligatoire. C'est juste pour vous aider à vous concentrer sur d'autres variables que vous avez déjà créées.

Image Création d'une nouvelle collection

Ensuite, je vais renommer la collection en Modes. Pour renommer une collection, double-cliquez simplement sur le titre et entrez votre titre préféré.

Image Renommer une collection

Image Collection renommée "Modes"

Ensuite, cliquez sur Créer une variable pour créer une nouvelle variable. Je vais choisir Couleur car c'est la variable avec laquelle nous travaillons.

Image Création d'une variable appelée Couleur

La variable de couleur créée apparaîtra avec un code couleur par défaut : FFFFFF.

Image Variable de couleur créée avec le code couleur par défaut : FFFFFF

Ensuite, je vais renommer la variable Arrière-plan car j'essaie de définir les couleurs d'arrière-plan pour chaque mode (clair et sombre).

Image Variable de couleur renommée : Arrière-plan

Maintenant, nous avons travaillé uniquement avec le nom et la valeur des variables que nous avons créées, mais nous pouvons ajouter une autre colonne lorsque nous voulons créer des modes. Pour ce faire, cliquez simplement sur l'icône plus dans l'en-tête pour ajouter un nouveau mode de variable.

Image Cliquer sur l'icône plus

Le nouveau mode comportera trois colonnes :

  • Colonne 1 (le titre de la variable – Arrière-plan)
  • Mode 1 (la première valeur de la variable – code couleur FFFFFF)
  • Mode 2 (la première valeur de la variable – code couleur FFFFFF)

Image Nouveau mode créé

Ensuite, je vais renommer les modes en clair et sombre. Pour ce faire, double-cliquez simplement sur le titre et modifiez le nom.

Image Modes renommés : Clair et Sombre

Maintenant, nous allons attribuer une valeur à l'arrière-plan pour le mode sombre. Pour ce faire, entrez simplement le code/valeur de couleur que vous préférez pour l'arrière-plan. J'utiliserai #0C3272 comme couleur d'arrière-plan pour le mode sombre.

Image Valeur modifiée pour l'arrière-plan du mode sombre

Ensuite, nous allons créer d'autres variables de couleur pour d'autres éléments comme le texte, la couleur du bouton, la couleur du texte du bouton, et ainsi de suite pour les deux modes. Je vais lister les spécifications pour faciliter les choses :

Clair/Sombre :

  • Texte du corps : 1A1A1A/FFFFFF
  • Bouton : 0C3272/FFFFFF
  • Texte du bouton : FFFFFF/0C3272
  • En-tête de l'iPhone : 1A1A1A/FFFFFF

Ensuite, nous allons créer les variables. Suivez simplement les étapes que nous avons suivies précédemment pour créer les variables et attribuer des valeurs pour chacun des modes.

Image Variables créées pour d'autres éléments

Ensuite, nous nous assurons que le design est connecté aux variables que nous avons créées. Pour ce faire, maintenez simplement l'élément et utilisez Remplissage pour le lier à la variable de couleur.

Pour le texte du bouton par exemple, sélectionnez le texte et cliquez sur l'icône de style dans Remplissage.

Image Cliquer sur l'icône de style dans la section "Remplissage"

Ensuite, faites défiler la liste qui apparaît jusqu'à la variable spécifique à laquelle vous souhaitez lier la variable (dans ce cas, Texte du corps).

Image Sélection de la variable Texte du corps.

Faites de même pour les autres éléments du design, y compris l'arrière-plan.

Notez que je vais laisser les illustrations telles qu'elles sont.

Image Écrans connectés aux modes de variable.

Pour vérifier si les modes fonctionnent réellement, cliquez sur l'icône changer de mode de variable dans la section Calque sur le panneau droit de votre écran.

Image Cliquer sur l'icône "changer de mode de variable"

Une liste de tous les modes (Clair et Sombre) apparaîtra et vous pourrez basculer l'écran vers le mode de votre choix.

Image Changement de modes

Une section nommée Modes apparaîtra dans la section Calque, indiquant que l'un des écrans est en mode sombre.

Image Un écran en mode sombre et un en mode clair.

Comment créer des variables numériques dans Figma

Ensuite, je vais vous montrer comment créer des variables numériques dans Figma.

Les variables numériques sont définies par des valeurs numériques, et elles peuvent être appliquées au rayon des coins, au remplissage de la largeur ou de la hauteur, et ainsi de suite. Voici les étapes à suivre pour créer les vôtres :

Étape 1 : Choisir une variable

Tout comme nous l'avons fait lors de la création de variables de couleur, cliquez sur le panneau des variables locales pour sélectionner le type de variable que vous essayez de créer. Ici, vous sélectionnerez nombre.

Image Choisir une variable à créer

Image Sélection de "nombre"

Lorsque vous sélectionnez nombre, il apparaît dans la liste des variables avec une valeur, dans ce cas 0.

Image Variable numérique montrant Nombre avec une valeur par défaut de 0

Maintenant, vous pouvez renommer la variable numérique comme vous le souhaitez. Pour renommer la variable, double-cliquez sur nombre, et changez-le en n'importe quel nom que vous voulez.

Image Renommer la variable numérique

Je vais renommer la mienne en OrderCount, car j'essaie d'implémenter une fonction qui permet à un utilisateur d'augmenter le nombre de portions de nourriture qu'il essaie de commander.

Image Variable numérique renommée

Ensuite, nous allons définir la valeur numérique par défaut à 1.

Image Définit la valeur numérique par défaut

Maintenant, nous allons lier le nombre dans le design à la variable numérique (OrderCount). Pour ce faire, cliquez sur le nombre dans le design.

Image Implémentation de la variable numérique

Ensuite, allez dans Texte sur le côté gauche de votre écran. Cliquez sur l'icône Appliquer la variable pour appliquer la variable.

Remarque : L'icône appliquer la variable n'apparaîtra dans la section Texte que lorsqu'une variable aura été créée.

Image Cliquer sur l'icône "appliquer la variable"

En cliquant sur l'icône, une liste de toutes les variables numériques disponibles dans le fichier apparaîtra. Ensuite, vous sélectionnerez la variable que vous essayez d'implémenter. Je vais choisir OrderCount.

Image Sélection d'une variable numérique

Lorsque la variable aura été implémentée (liée au nombre), elle apparaîtra dans la section de texte, indiquant qu'une variable numérique a été implémentée.

Image Variable numérique implémentée

Maintenant, nous aurons également besoin de deux autres variables numériques pour les autres valeurs numériques dans le design (coût de la nourriture et coût total). Cela permet à ces valeurs de changer également lorsqu'un utilisateur augmente le nombre de portions qu'il commande.

Nous n'inclurons pas les frais de livraison, car ils restent les mêmes quelle que soit le nombre de portions qu'un utilisateur commande.

Ensuite, nous allons suivre le même processus que précédemment pour créer des variables numériques pour celles-ci.

Image Création d'autres variables numériques

Ensuite, nous allons lier les nombres dans le design à leurs variables numériques respectives, comme nous l'avons également fait précédemment.

Remarque : Dans le design principal, j'ai donné au nombre réel (25) un cadre différent du signe dollar (qui est en texte). Cela est dû au fait que lors de la création de la variable numérique, le signe dollar ne sera pas attaché, car c'est un mot, pas un nombre.

Par conséquent, lorsque je lie la variable numérique au design, je l'appliquerai au cadre contenant le nombre seul.

Image Donner au nombre un cadre différent du signe dollar

Ainsi, lorsque j'ai lié le premier nombre à la variable numérique que j'ai créée (Coût-Portion), quelque chose d'intéressant s'est produit. Le nombre dans le design a pris la valeur de la variable. Au lieu de 25,00 qui était sur l'écran précédemment, il est passé à 25 car c'est ce que la variable numérique était définie.

Image La variable numérique change le nombre dans le design

Maintenant, pour éviter tout désagrément, je vais changer les valeurs des autres nombres et les réaligner.

Image Valeurs numériques modifiées et réalignées dans le design

Nous venons de créer des variables numériques pour notre design. Dans la section de prototypage avancé, nous vérifierons si ces variables numériques fonctionnent réellement.

Comment créer des variables de chaîne dans Figma

Ensuite, vous apprendrez à créer des variables de chaîne dans Figma.

Comme je l'ai écrit précédemment, les variables de chaîne sont utilisées pour les calques de texte et les propriétés de variante. Avec les variables de chaîne, vous pouvez changer les titres dans votre design, inverser le texte sur différents écrans, changer les modes de langue, et ainsi de suite.

Pour cet article, nous utiliserons des variables de chaîne pour changer les titres sur les écrans pour chaque mode que nous avons créé précédemment (clair et sombre).

Comme d'habitude, notre première étape consiste à cliquer sur Variables locales et à sélectionner le type de variable que nous voulons créer.

Image Aller aux variables locales pour créer une nouvelle variable

Je vais choisir Chaîne.

Image Choisir "Chaîne" parmi une liste de toutes les variables

Lorsque je fais cela, la variable de chaîne que je viens de créer apparaîtra dans la liste des variables.

Image Variable de chaîne créée

Si vous l'avez remarqué, la variable de chaîne a deux colonnes pour "valeur de chaîne", car j'ai créé la variable dans la collection Modes. Suite à cela, voyons si nous pouvons changer les titres pour chaque mode.

Remarque : La valeur de chaîne est le texte réel que vous essayez de changer.

Ainsi, pour le premier écran dont le titre est "Transactions Made Easy", je veux qu'il change en "Easy Transactions, Less Stress" pour le mode sombre. Pour le deuxième écran dont le titre est "Pay Bills with Ease", je veux qu'il change en "Paid Bills, Easier Life" pour le mode sombre.

Puisque nous changeons les titres pour deux écrans différents, nous allons créer une autre variable de chaîne.

Image Création d'une autre variable de chaîne

Ensuite, nous allons entrer les différentes valeurs pour les différents modes. Pour ce faire, entrez simplement les différents textes pour les deux écrans dans les deux modes.

Image Entrée de la valeur de chaîne

Ensuite, nous allons lier les titres aux variables de chaîne que nous venons de créer. Pour ce faire, cliquez sur le titre particulier et allez à l'icône Appliquer la variable dans la section Texte.

Image Application de la variable de chaîne

Ensuite, faites défiler vers le bas et choisissez la chaîne à laquelle vous l'appliquez.

Image Choix de la variable de chaîne

Une fois que vous avez terminé, une icône de chaîne apparaîtra, indiquant qu'une variable de chaîne a été appliquée au texte.

Image Variable de chaîne appliquée

Faites de même pour la deuxième chaîne :

Image Application de la variable de chaîne au deuxième écran

Ensuite, testons pour voir si la variable de chaîne fonctionne. Sélectionnez les écrans qui ont la variable appliquée, allez dans Calques, et changez le mode de clair à sombre.

Image Sélection des écrans qui ont les variables appliquées

Image Sélection du mode sombre

Le mien fonctionne :

Image Écrans changés en mode sombre

Comment créer des variables booléennes dans Figma

Ensuite, nous allons apprendre à créer des variables booléennes.

Généralement, les variables booléennes sont des variables qui ne peuvent avoir que deux valeurs possibles – vrai ou faux. Dans Figma, les variables booléennes ont la même fonction : elles sont utilisées pour les propriétés de variante ou les composants avec deux valeurs : vrai ou faux.

Vous vous souvenez du basculeur dans le design ci-dessus ?

Image Basculeur dans le design utilisé pour implémenter les variables numériques

Je vais le changer en une case à cocher et utiliser des variables booléennes pour le faire fonctionner.

Pour ce faire, je vais copier le composant et le coller sur un autre cadre. Je vais ensuite ajouter la case à cocher (et la remplacer dans l'écran de design principal plus tard).

Image Case à cocher sur un cadre vide.

Ensuite, nous allons faire de la sélection une variante. Pour ce faire, double-cliquez sur l'icône Créer un composant dans l'en-tête de votre fichier Figma.

Image Double-cliquez sur l'icône "créer un composant"

Une variante apparaîtra automatiquement :

Image Variante du composant

Ensuite, je vais créer différents états pour les cases à cocher : par défaut, survol et rempli.

Image Différents états pour les cases à cocher : Par défaut, survol et rempli.

Maintenant, nous allons créer la variable booléenne.

Pour ce faire, allez dans Variables locales comme d'habitude et sélectionnez Booléen.

Image Ouvrir les variables locales

Cliquez sur Créer une variable.

Ensuite, nous allons choisir Booléen dans la liste.

Image Choisir "booléen" dans la liste

Image Variable booléenne créée

Ensuite, nous allons renommer la variable booléenne SaveFood puisque nous essayons de créer une fonction pour enregistrer un choix de nourriture pour les commandes ultérieures.

Image Variable booléenne renommée

Ensuite, nous allons rendre la variable True par défaut. Pour ce faire, cliquez simplement sur l'icône de bascule à côté de la variable.

Image

Vous avez créé une variable booléenne !

Nous allons créer une interaction pour cette variable booléenne dans la section de prototypage avancé et vérifier si elle fonctionne.

Comment utiliser les variables pour le prototypage avancé

Dans cette section, nous allons apprendre à utiliser les variables pour le prototypage avancé dans Figma, en utilisant les variables de couleur, de nombre, de chaîne et booléennes que nous avons implémentées précédemment dans le design.

N.B : Vous ne pouvez utiliser les fonctionnalités de prototypage avancé sur Figma que si votre fichier est sur un fichier d'équipe payant. Si vous n'avez pas de version d'équipe payante, vous pouvez demander le plan Figma pour l'éducation. C'est une façon pour Figma d'aider les apprenants et les éducateurs en leur donnant accès à des ressources, et à tous les avantages d'une version payante, gratuitement.

Vous pouvez utiliser le prototypage avancé lorsque vous avez beaucoup d'écrans à travailler, et pour simplifier le prototypage.

Prototypage avancé avec des variables numériques

En commençant par les variables numériques que nous avons créées ci-dessus, essayons de vérifier si elles fonctionnent réellement. Mais avant de faire cela, nous devons réellement prototyper le design.

Notez que vous pouvez prototyper des variables numériques pour des designs où votre utilisateur peut augmenter ou diminuer le nombre d'un élément à l'écran. Le prototypage aide à montrer la fonctionnalité et comment cette fonctionnalité particulière fonctionnerait.

Pour commencer, je vais faire du cadre où se trouve le compteur de commandes un composant. Pour ce faire, sélectionnez le cadre et cliquez sur l'icône de composant dans l'en-tête de votre fichier Figma.

Image Sélection du cadre du compteur de commandes

Image Cliquer sur l'icône de composant

Image Le composant du compteur de commandes

Cliquez à nouveau sur l'icône de composant pour en faire une variante.

Image Faire du composant du compteur de commandes une variante

Je vais créer un cadre en dehors de l'écran et y glisser la variante, afin de pouvoir bien travailler sur les interactions.

Image Création d'un cadre en dehors de l'écran

Rappelez-vous que nous voulons implémenter une fonction où le nombre de portions augmente lorsque l'utilisateur clique sur l'icône plus.

Nous allons commencer le prototypage à partir d'ici.

Maintenant, cliquez sur l'icône plus dans la variante par défaut et passez à l'onglet prototype.

Image Cliquer sur l'icône plus dans la variante par défaut

Ensuite, cliquez sur l'icône plus dans la zone des interactions pour ajouter une interaction.

Image Ajout d'une interaction

Un onglet apparaîtra montrant les interactions. Dans ce cas, il est défini par défaut sur On click, et aucune interaction n'a encore été ajoutée (None).

Image Ajout d'une interaction

Maintenant, cliquez sur l'icône de la liste déroulante qui dit None.

Image Cliquer sur l'icône de la liste déroulante

Cela fera apparaître une liste :

  • Naviguer vers
  • Changer pour
  • Retour
  • Définir la variable
  • Conditionnel
  • Faire défiler vers
  • Ouvrir le lien
  • Ouvrir le calque
  • Échanger le calque
  • Fermer le calque

Image Liste suivant la liste déroulante

Choisissez Définir la variable.

Une liste de toutes les variables dans le fichier apparaîtra, et vous pourrez alors sélectionner la variable particulière que vous souhaitez implémenter. Je vais cliquer sur OrderCount.

Image Choisir "définir la variable"

Image Cliquer sur Order Count (la première fois)

Ensuite, je vais cliquer à nouveau sur OrderCount pour écrire une expression mathématique, et toutes les expressions mathématiques disponibles apparaîtront :

Image Cliquer sur Order Count (la deuxième fois) et montrer toutes les expressions mathématiques

Je vais sélectionner Addition, car c'est ce que nous essayons de faire.

Image Choisir l'expression "addition"

Vous remarquerez qu'une icône d'addition est apparue pour signifier que l'expression d'addition a été donnée.

Ensuite, je vais entrer 1 à côté de l'icône d'addition pour montrer que c'est plus 1.

Image Ajout du nombre 1 à l'expression

Terminé !

Maintenant, nous allons suivre les mêmes étapes pour faire de même pour l'icône moins, en faisant de l'expression une soustraction au lieu d'une addition.

Image Interactions ajoutées pour l'icône moins

Terminé !

Remarque : Nous n'avons pas vraiment besoin de la variante que nous avons créée précédemment. Vous pourriez n'utiliser la variante que dans les cas où vous souhaitez créer un état de survol. Je voulais simplement vous montrer à quel point il serait facile de créer une variante en faisant cela.

Ensuite, nous allons simplement copier le composant prototypé et le remettre dans le design principal.

Image Cadre contenant la variable prototypée

Pour mettre le composant prototypé dans le design principal, cliquez sur Assets en haut du panneau de gauche.

Cette section affichera tous les actifs de la page sur laquelle vous vous trouvez actuellement.

Image Affichage de tous les actifs de la page

Ensuite, je vais glisser le cadre vers le design.

Image Actif glissé vers le design principal

Remarque : Si vous ne souhaitez pas suivre le processus ci-dessus pour placer le composant prototypé dans le design, copiez simplement le composant (CTRL + C) et collez pour remplacer le cadre sur le design principal.

Maintenant, vérifions notre prototype. Pour ce faire, vous n'avez pas besoin d'ouvrir le prototype dans un autre onglet. Vous pouvez simplement cliquer sur l'actif et appuyer sur SHIFT + barre d'espace.

Image Actif cliqué

Un autre cadre apparaîtra sur votre écran. Il est interactif et vous pouvez tester votre prototype dessus.

Image Cadre interactif sur votre écran Figma.

Essayez de cliquer sur les icônes moins et plus sur le cadre pour voir si elles remplissent leur fonction.

Après avoir vérifié le prototype, j'aimerais implémenter une logique.

Nous ne voulons pas d'un scénario où le clic sur l'icône moins continue jusqu'à ce qu'elle donne un signe négatif comme -1 comme vous pouvez le voir dans l'image ci-dessous.

Image Icône moins nous donnant des valeurs négatives

Cela n'aurait pas de sens, donc nous allons ajouter une condition.

Une condition est simplement une condition qui définit des règles sur la façon dont l'interaction doit fonctionner.

Pour ce faire, je vais me rendre au cadre contenant le composant que j'ai créé précédemment.

Image Cadre contenant le composant prototypé

Je vais ajouter la condition à l'icône moins puisque c'est la zone qui nous donnerait des valeurs négatives. Donc, je veux que les valeurs s'arrêtent à 1 puisque c'est le minimum qu'un utilisateur peut commander (ils ne peuvent pas commander la moitié ou 0, par exemple).

Donc, nous allons simplement zoomer sur le composant pour ajouter notre condition. Assurez-vous d'être également dans l'onglet prototype.

Image Passer à l'onglet prototype et zoomer sur le composant prototypé

Je vais cliquer sur l'icône de variable à côté du cadre moins.

Image Sélection de l'icône de variable proche du cadre de l'icône moins

Cela fera apparaître les interactions déjà définies :

Image Interactions déjà faites sur le cadre moins

Ensuite, je vais cliquer sur l'icône plus à côté du 'x' dans l'en-tête des interactions.

Image Cliquer sur l'icône plus dans l'en-tête de l'interaction

Je vais choisir conditionnel dans la liste des options qui apparaîtra :

  • Naviguer vers
  • Changer pour
  • Retour
  • Définir la variable
  • Conditionnel
  • Faire défiler vers
  • Ouvrir le lien
  • Ouvrir le calque
  • Échanger le calque
  • Fermer le calque

Image Choisir conditionnel dans la liste des options

Nous allons ensuite écrire la condition. Pour ce faire, cliquez sur Écrire une condition à côté de l'instruction if else.

Image Écrire une condition pour l'interaction

Lorsque nous cliquons sur Écrire une condition, une liste de toutes les variables numériques apparaîtra. Je vais choisir OrderCount.

Image Sélection de ordercount

Cela fera apparaître une liste de toutes les conditions disponibles :

  • Égal à
  • Différent de
  • Supérieur à
  • Supérieur ou égal à
  • Inférieur à
  • Inférieur ou égal à

Je vais choisir Différent de.

Image Choisir la condition "Différent de"

Ensuite, l'icône de la condition que j'ai choisie apparaîtra dans le champ de saisie pour écrire la condition.

Image Condition apparaissant dans le champ de saisie

Ensuite, je vais entrer 0, ce qui signifie que l'interaction n'est pas égale à 0.

Image Entrée de 0 (zéro)

Ensuite, je vais fermer le cadre et essayer de déplacer la section Définir la variable sous la section conditionnelle dans l'interaction. Pour fermer la section Définir la variable, cliquez sur la petite icône de liste déroulante.

Image Cliquer sur l'icône de liste déroulante pour fermer définir la variable

Lorsque vous cliquez sur la petite icône de liste déroulante, la section Définir la variable sera minimisée, vous permettant de déplacer la section sous la section Conditionnelle.

Image Section définir la variable fermée

Ensuite, je vais glisser la section définir la variable sous la section conditionnelle. Pour ce faire, survolez simplement la section définir la variable et utilisez votre pavé tactile ou votre souris pour la glisser.

Image Glisser définir la variable sous conditionnelle

Nous venons d'ajouter une condition à notre interaction ! L'icône du cadre moins changera en une icône de condition, montrant qu'une condition a été ajoutée.

Image Ajout d'une condition à l'interaction moins

Maintenant, vous pouvez tester cette nouvelle interaction pour voir comment elle fonctionne.

La mienne fonctionne certainement ! Elle ne descend plus en dessous de 0.

Comment implémenter la variable de coût par portion

Maintenant, nous voulons que les autres valeurs numériques (coût par portion et coût total) augmentent en réponse au nombre de portions qu'un utilisateur commande.

Nous allons commencer par le cadre de l'icône Plus :

En revenant au composant sur lequel nous avons travaillé...

Image Cadre avec le composant prototypé

Je vais cliquer sur le cadre plus et passer à définir la variable.

Image Ouvrir les interactions pour le cadre plus

Je vais cliquer sur l'icône plus dans l'en-tête des interactions.

Image Cliquer sur l'icône plus dans l'en-tête des interactions

Ensuite, je vais sélectionner définir la variable.

Image Sélection de définir la variable

Une liste de toutes les variables qui ont été créées dans le fichier apparaîtra :

  • Les variables de couleur pour le texte, les boutons, les titres, et ainsi de suite.
  • Variables numériques – OrderCount, Cost-Portion, et ainsi de suite.

Image Une liste de toutes les variables dans le fichier

Je vais faire défiler vers le bas pour choisir cost-portion, qui est le coût par portion de nourriture qu'un utilisateur commande.

Image Choisir "Cost-portion" (la première fois)

Un champ de saisie pour écrire une expression pour la variable apparaîtra.

Image Champ de saisie pour écrire une expression

Pour écrire une expression, cliquez à nouveau sur Cost-Portion et sélectionnez Addition.

Image Choisir cost-portion (la deuxième fois) et sélectionner addition

Image Icône d'addition apparaissant dans le champ de saisie

Ensuite, je vais entrer 25, ce qui signifie que +25 doit être ajouté pour chaque portion de nourriture qu'un utilisateur commande.

Image Entrée de 25

Ayant ajouté l'interaction pour le cadre plus, nous allons suivre le même processus pour le cadre moins. Lorsque vous avez terminé, la section Définir la variable doit être sous la section Conditionnelle.

Image Ajout d'interaction pour le cadre moins

Rappelez-vous qu'il y a une condition pour le cadre moins, donc je vais simplement glisser la nouvelle interaction à l'intérieur de la condition.

Image Glisser la nouvelle interaction "définir la variable" à l'intérieur de la conditionnelle ;

Maintenant, essayez de tester la nouvelle interaction que vous venez d'ajouter. La mienne fonctionne certainement !

Image Test de la nouvelle interaction

Ensuite, nous avons encore une dernière variable à ajouter (Coût Total).

Suivez les étapes ci-dessus pour recréer cette interaction. En commençant par le cadre plus, implémentez la variable pour vous assurer que 25 $ s'ajoute lorsque la commande augmente. Il devrait montrer un espace réservé – Coût Total + 25.

Image Implémentation de la variable Coût Total

Maintenant, faites de même pour le cadre moins et testez l'interaction. N'oubliez pas d'ajouter la nouvelle interaction à l'intérieur de la condition.

La mienne fonctionne !

Image Test des interactions

Vous venez d'apprendre à implémenter des variables numériques avec le prototypage avancé dans Figma. Félicitations !

Prototypage avancé avec des variables booléennes

Ensuite, nous allons créer une interaction pour la variable booléenne que nous avons créée précédemment dans l'article.

Notez que vous pouvez prototyper vos variables booléennes dans des designs où vous avez des fonctionnalités comme des cases à cocher et des basculeurs. Le prototype montrerait comment la case à cocher est censée fonctionner.

Pour créer l'interaction, passez à l'onglet prototype et concentrez-vous sur le cadre contenant les composants booléens.

Image Cadre contenant les composants booléens

Maintenant, notre interaction principale commencerà partir de l'état de survol car c'est à ce moment-là qu'un utilisateur essaie de cliquer sur la case à cocher. Mais nous devons toujours ajouter une action qui amènera l'utilisateur de l'état par défaut à l'état de survol.

Pour ce faire, je vais simplement cliquer sur la première variante et la faire glisser vers la deuxième variante.

Image Connexion de la première variante à la deuxième variante

Je vais changer On-click en While Hovering. Pour ce faire, cliquez simplement sur la liste déroulante On-click et sélectionnez dans la liste qui apparaît :

  • On click
  • On drag
  • While hovering
  • While pressing
  • Key/Gamepad
  • Mouse enter
  • Mouse leave
  • Mouse down
  • Mouse up
  • After delay

Image Cliquer sur la liste déroulante on-click

Image Sélection de "while hovering" dans la liste

Image Sélectionné "while hovering"

Je veux également changer Instant en Smart Animate, donc je vais cliquer sur l'icône de liste déroulante à côté de Instant, et sélectionner dans la liste qui apparaît :

  • Instant
  • Dissolve
  • Smart animate

Image Changer "Instant" en "Smart Animate"

Image À quoi ressemble l'interaction

Donc, nous avons terminé la première interaction et nous allons commencer à connecter la deuxième variante à la troisième variante (Survol - Rempli).

Tout comme nous l'avons fait précédemment, nous allons simplement faire glisser la deuxième variante vers la troisième variante.

Image Connexion de la deuxième à la troisième variante

Image À quoi ressemble l'interaction

Comme je l'ai dit précédemment, l'interaction principale commence à partir de la deuxième variante, donc nous ne suivrons pas les mêmes étapes que nous avons prises pour ajouter la première interaction.

Pour continuer, je vais cliquer sur l'icône plus dans l'en-tête de l'interaction pour ajouter une action, et sélectionner Définir la variable dans la liste qui apparaît :

  • Naviguer vers
  • Changer pour
  • Retour
  • Définir la variable
  • Conditionnel
  • Faire défiler vers
  • Ouvrir le lien
  • Ouvrir le calque
  • Échanger le calque
  • Fermer le calque

Image Cliquer sur l'icône plus dans l'interaction

Image Choisir "définir la variable" dans la liste

Ensuite, je vais cliquer sur Sélectionner la variable cible pour sélectionner la variable booléenne.

Image Cliquer sur "sélectionner la variable cible"

Je vais faire défiler la liste des variables pour choisir la variable que je veux : SaveFood.

Image Sélection de la variable "SaveFood"

Maintenant, pour écrire l'expression pour cette variable, nous allons dire que la valeur sera égale à vrai. Donc, je vais sélectionner Vrai.

Image Écrire l'expression et sélectionner "vrai"

Ayant sélectionné Vrai, l'expression (vrai) ira sous la variable SaveFood, indiquant qu'une expression a été appliquée.

Image À quoi ressemble l'interaction

Ensuite, nous allons simplement copier le composant original et le coller dans notre design afin qu'il se synchronise lorsque nous vérifions le prototype.

Image Coller le composant par défaut dans le design principal

Pour vérifier le prototype directement sur votre page Figma, cliquez sur Shift + barre d'espace.

Le mien fonctionne !

Image

Mais j'ai remarqué quelque chose ; je ne peux pas décocher la case à cocher. Aucune interaction n'a été prévue pour cela. Maintenant, nous allons rapidement ajouter cette interaction pour que notre composant fonctionne parfaitement.

Pour ce faire, nous allons revenir à nos composants, en nous assurant d'être en mode prototype, et faire glisser la connexion de rempli jusqu'à par défaut.

Image Faire glisser la connexion de l'état rempli à l'état par défaut

Maintenant, cela fonctionne parfaitement !

Comment utiliser les variables pour les développeurs – Utilisation des API

Les variables sont très utiles pour les équipes composées de développeurs et/ou de designers.

Les variables sont désormais prises en charge dans l'API de plugins de Figma – pour la création de plugins et de widgets – et dans l'API REST. Comme les variables sont actuellement en bêta ouverte, les fonctionnalités et les fonctions peuvent changer en réponse aux commentaires. – Documentation de Figma

Il existe trois documentations qui contiennent un support pour les variables pour les développeurs sur Figma :

Cette API inclut des points de terminaison pour interroger, créer, mettre à jour et supprimer des variables. – Documentation de Figma

Pour pouvoir utiliser cette API, vous devez être membre d'une entreprise.

Cette API fournit un support pour la création et la lecture de variables, et la liaison de variables à des composants. – Documentation de Figma

  • Pour l'API de widgets : Cette API est connectée à l'API de plugins. Elle est disponible pour les widgets en utilisant l'API de plugins que le widget contient.

Les widgets sont des éléments interactifs qui peuvent être utilisés pour créer des prototypes interactifs. Les widgets étendent la fonctionnalité des fichiers de design et des tableaux FigJam et font souvent partie du système de design plus large, qui est une collection de composants réutilisables.

Conclusion

Les variables existent dans Figma pour améliorer vos designs. Elles sont faciles à utiliser et à créer, et sont utiles dans chaque projet de design. Afin de gagner du temps, assurez-vous d'incorporer des variables dans votre processus de design.

La clé est de pratiquer et d'explorer, et vous vous améliorerez au fur et à mesure.

Merci d'avoir lu cet article, j'espère que vous l'avez apprécié !