Figma - Les variables

Introduction 

Les variables permettent de gérer et d'appliquer des valeurs réutilisables à divers éléments d'une conception. Elles participent à maintenir de la cohérence, à optimiser le flux de travail, et facilitent les modifications à grande échelle.

Source : specifyapp.com

🤓 À la fin de cette quête, vous saurez

✅ Comment créer & utiliser des variables ✅ Appliquer des thèmes ✅ C’est qu’est un design token

À quoi servent les variables dans Figma ?

Pourquoi utiliser des variables ?

Les variables permettent de créer, de stocker et d'utiliser des valeurs réutilisables dans tous nos projets Figma. Elles offrent donc de nombreux avantages 👇

• Cohérence : Les variables aident à maintenir une apparence cohérente à travers un Design System. En définissant des variables pour les couleurs, la typographie, les espacements et d'autres éléments de conception, le projet sera harmonieux et uniformisé.

• Adaptabilité : Les variables offrent de la flexibilité, permettant d'expérimenter avec différentes valeurs, comme des jeux de couleurs ou des tailles de police, en ajustant simplement les variables. Cette adaptabilité est également précieuse lors de la création de designs pour différentes plateformes ou appareils.

• Efficacité : Lorsqu'une variable est mise à jour, toutes les instances de cette variable dans le design se mettent à jour automatiquement. Cela permet de gagner du temps et des efforts, en éliminant le besoin de mettre à jour manuellement chaque instance d'un élément spécifique.

• Évolutivité : Les variables sont particulièrement utiles dans les grands projets ou les Design systems en raison de leur évolutivité et de leur facilité de maintenance.

• Facilité de mise à jour : Comme les projets grandissent et que les Design systems évoluent avec le temps, les variables peuvent être ajustées globalement pour répondre aux nouvelles exigences. Elles assurent que tous les éléments sont modifiés de manière cohérente.

• Développement : Les designers peuvent fournir aux développeurs des valeurs précises pour les éléments, réduisant les risques de mauvaise interprétation et simplifiant leur intégration.

Les types de variables

Source image

• Color : Les variables de couleur utilisent des valeurs de couleur unie, telles que #000000 ou #FFCD29. Elles peuvent être utilisée pour organiser la palette de couleur ou créer des modes clairs et sombres ("dark mode").

Sur cet exemple, les couleurs qui constituent la palette utilisée sont renseignée en tant que variables.

• Number : Les variables de type Number vont être utilisées pour définir des valeurs numériques. Elles sont par exemple utilisées pour des espacements (margin, padding), des tailles ou des arrondis.

Sur cet exemple, des variables de type nombre sont utilisées pour des attributs typographiques (taille du texte, espacements)

• String : Ces variables de texte permettent de créer des chaînes de caractères spécifiques qui peuvent être intégrées dans n’importe quel texte, y compris les textes imbriqués dans les instances de composants. Elles sont par exemple utilisées pour créer une variante de mise en page dans une autre langue. Sur cet exemple, nous utilisons une variable de type String pour indiquer le texte contenu dans les boutons. Associé aux modes, que nous verrons un peu plus tard dans cette quête, il est possible d'avoir des variantes de ce texte dans différentes langues.

• Boolean : Les variables booléennes dans Figma prennent comme valeur "vrai" ou "faux" et permettent la création d'une logique conditionnelle, dans laquelle les éléments peuvent être affichés ou masqués en fonction de la saisie de l'utilisateur ou d'autres conditions. Les variables peuvent aussi être utilisées lors du prototypage ! Sur cet exemple, une variable nommée CircleVisibility prend la valeur "faux" par défaut, mais lorsque l'on clique sur le composant interactif (nommé button), celui-ci est modifié et la valeur de la variable change également pour passer à "vrai".

Utilisation des variables

Pour commencer à te familiariser avec les variables dans Figma, regarde cette vidéo qui propose une vue d'ensemble de cette fonctionnalité 👇

Création de variables

La création de variables est accessible depuis le panneau latéral droit Local variables. En cliquant sur + Create variable, nous pouvons choisir le type de variable, puis renseigner la valeur souhaitée et nommer la variable d’après ses propriétés intrinsèques. Par exemple, nous créons une variable de type "color" et lui assignons la valeur hexadécimale « #ff0050 », elle pourrait être nommée « red » en référence à la teinte de cette couleur.

Il est ensuite possible de regrouper nos valeurs par sous-catégories avec une sélection multiple puis clic droit New Group with selection. Ces sous-catégories permettront de segmenter les valeurs de notre collection ; par exemple, dans une collection nommée « colors » nous retrouverons « brand » et « neutral » avec respectivement les couleurs de la marque et les tons neutres.

Source : figma.com

Implémentation de variables

À l'instar des styles, pour appliquer une variable de couleur à un élément, il suffit de la sélectionner via le pictogramme Style formé de 4 points. Les styles y seront représentés par des formes circulaires et les variables par des formes carrées.

Les variables de valeurs seront quant à elles attribuables depuis le pictogramme hexagonal Apply variable en forme d'écrou et adjacent à un champ de saisie de valeur numérique.

Les modes

Les modes vont permettre de créer des thèmes spécifiques englobant des variables différentes. On pense notamment à un thème sombre dont les tokens auraient leurs valeurs de couleur inversées (les fonds clairs deviennent foncés et inversement pour les textes).

Pour créer un mode, il suffit de cliquer sur le + (New variables mode) de la rangée Name d'une collection de tokens. Une seconde colonne adjacente nommée « Mode 2 » apparait.

Il est ensuite possible d'éditer le nom des modes et d'affecter différentes valeurs à nos tokens afin d'en faire un mode visuellement distinct.

La bascule entre les différents modes se fait ensuite via le pictogramme hexagonal Change variable mode en double écrous du panneau Layer en ayant une frame ou un élément comportant des variables sélectionnés.

Source : figma.com

Variables VS Styles

Au contraire des styles, les variables vont permettre une imbrication multi-niveaux et ainsi introduire l’utilisation de design tokens.

Source : uxdesign.cc

En outre — et contrairement aux variables — les styles vont permettre de contenir plusieurs valeurs (qu'elles soient définies ou non au sein de variables). Ainsi, ils resteront utiles pour l’utilisation de dégradés, de styles typographiques ou d’effets tels que des ombres portées par exemple.

Les Design Tokens

Définition

Un design token est une valeur prédéfinie qui représente un attribut visuel spécifique, tel qu’une couleur, une taille de police ou une dimension. Il s’agit d’un élément clé utilisé dans la conception d’interfaces utilisateur.

A contrario d’affecter une valeur à notre élément, nous allons utiliser un design token qui va référer à cette valeur. Cela offre une meilleure cohérence et facilite la maintenance et les modifications du design. En effet, la modification de la valeur de ce token affectera ainsi tous les éléments auquel il a été attribué.

Structure

Usuellement, nous allons trouver la hiérarchisation de tokens suivante :

• Token global : valeur primitive du Design System, référencée par un nom décorrélé de son contexte d’utilisation (ex : « yellow » ou « brand-color »). Ces valeurs peuvent être ensuite utilisées par les autres types de jetons.

• Token alias : référence à l’usage spécifique du token global (ex : « cta-background-color »)

• Token relatif : référence à une variante d’utilisation, en fonction du contexte et de l’imbrication de l’élément concerné (ex : « card-cta-background-color »)

D’autres tokens peuvent être créés pour répondre à une récurrence d’utilisation (ex : « card-cta-primary-background »), ce qui permet une meilleure maintenance du Design System.

Implémentation dans Figma

Afin de sur-imbriquer nos variables pour leur donner une valeur d'usage et en faire des tokens alias, nous créerons une nouvelle collection dédiée à une utilisation concrète. L'option Create collection est accessible depuis la section déroulante supérieure gauche du panneau Local variables.

Une fois cette collection créée, nous pourrons attribuer des alias en indexant de nouvelles valeurs d'usage à nos valeurs primaires. Nous irons les affecter depuis l'onglet Librairies lorsque l'on souhaite sélectionner une valeur.

Maintenance

Par leur nature, les tokens offrent une grande flexibilité en matière de modification grâce à la distinction entre option (token global) et décision (tokens alias & relatif).

Avec une option de design « color-blue » nous pouvons créer une décision de design « header-background : color-blue ». Dans ce cas, le token header-background pointe vers le token « color-blue ». Cependant, cette décision peut être amenée à changer. Il suffira alors de faire pointer le token « header-background » vers un nouveau token de couleur.

Sémantique

La nomenclature des tokens devra respecter les conventions de nommage des variables CSS. On proscrit ainsi l’utilisation de majuscules, de caractères spéciaux tels que des accents ou des espaces que l’on remplacera par des tirets.

Source : uxdesign.cc

Dans sa forme la plus exhaustive, la sémantique sera structurée selon les valeurs d’usage en décomposant successivement la catégorie, la propriété, la surface, la variante et l’état.

☝️ Résumé

• Une variable est un conteneur qui stocke des valeurs et permet de les réutiliser.

• Un design token est une valeur prédéfinie qui représente un attribut visuel spécifique, utilisé pour maintenir la cohérence et faciliter la gestion du design dans les interfaces utilisateur. En ces faits, les variables de Figma favorisent leur utilisation à travers une imbrication multiniveaux des valeurs. Au-delà d'offrir une maintenance aisée du Design System, les design tokens vont également rendre plus fluide le travail d'intégration en structurant la déclaration des variables CSS.

💪 Challenge

Pratique les variables en dupliquant (via le bouton "Open in Figma") ce Playground Figma, qui te guide pas à pas dans la prise en main de cette fonctionnalité. Essaie d'aller au moins jusqu'à la partie "Apply Variables".

Ce challenge est en auto-validation, tu n'auras pas besoin de soumettre une solution