Différence entre les variables et les styles

Alors que Figma étend son ensemble de fonctionnalités en intégrant des variables, vous vous demandez peut-être quelle est la différence entre les variables et les styles. Quand dois-je choisir l'un plutôt que l'autre ? Les styles vont-ils devenir obsolètes ?

Après tout, ils semblent fonctionner de la même manière :

• Les deux servent de sources de vérités.
• Les deux peuvent être publiés dans les bibliothèques d'équipe et réutilisés dans l'ensemble des designs.
• Les deux permettent une gestion efficace du design system, car la modification d'une variable ou d'un style entraînera la mise à jour de tous les designs qui les utilisent.

Les styles et les variables présentent des distinctions majeures qui en font des éléments précieux dans différentes situations.

Cet article vous explique leurs différences pour vous aider à décider si vous devez utiliser l'un ou l'autre élément, ou les deux, dans vos créations.

Différences fondamentales

Il existe quelques différences clés entre les styles et les variables : les types de valeurs qu'ils utilisent, leur apparence sur le plan de travail et l'utilisation des modes.

Les styles peuvent contenir une variété de propriétés :

• Une propriété avec une seule valeur brute, telle qu'un remplissage uni #FFFFFF ;
• Une propriété avec plusieurs valeurs brutes, comme un dégradé de couleurs ;
• D'autres formats tels que les modes de fusion, les images, les GIF, les vidéos.

Les styles sont conçus pour contenir une combinaison de valeurs, où toutes les valeurs sont exprimées en même temps. Par exemple, vous pouvez stocker simultanément dans un style de texte les propriétés de la famille, de la taille et de l'épaisseur des polices. Lorsque vous appliquez le style de texte à un calque de texte, toutes les propriétés seront appliquées simultanément sur le calque de texte. 

Prenons un autre exemple avec les styles de couleur, qui peuvent associer plusieurs types de remplissage et des variables, le tout structuré en pile de haut en bas. Un style de couleur peut être comparé à une pile de cartes observée du dessus, chaque carte correspondant à un type de remplissage. Si la couleur du haut est suffisamment transparente, vous pouvez voir la couleur qui se trouve en dessous. Vous pouvez également réorganiser manuellement le remplissage pour modifier ce que vous voyez en haut de la pile.

Les variables peuvent stocker des valeurs brutes individuelles. Par exemple, les valeurs brutes peuvent inclure des remplissages unis comme #FFFFFF, des nombres comme 16 ou -32,75, et des valeurs booléennes true et false. 

Les variables sont conçues pour contenir une ou plusieurs valeurs uniques et réutilisables, mais seule une valeur peut être exprimée à la fois. Chaque valeur correspond à un mode de variable différent. Ceci est vrai pour tous les types de variables. Contrairement aux styles, une variable est comme un jeu de cartes dans lequel vous ne pouvez voir qu'une seule carte, et la carte que vous pouvez voir dépend de son contexte.

Par exemple, supposons que nous ayons une collection de variables avec des modes clair et sombre. Nous les appliquons à différents calques dans une frame et réglons la frame sur le mode sombre. Tous les calques avec ces variables exprimeront les valeurs du mode sombre. Si nous passons la frame en mode clair, les variables changeront leurs valeurs exprimées en mode clair.

Même si les modes sont conçus pour les variables, Figma permet de les appliquer aux styles.

Supposons que nous ayons une variable numérique pour une taille de police par défaut. La variable présente deux valeurs brutes distinctes : 16 pour le mode mobile et 18 pour le mode bureau. Nous appliquons cette variable à la propriété de la famille de polices d'un style de texte, ainsi qu'à d'autres variables et valeurs pour d'autres propriétés.

Maintenant, nous pouvons changer le mode de n'importe quel calque de texte en utilisant ce style de texte, car il utilise une variable avec plusieurs modes.

Apprenez à utiliser des variables dans vos styles.

Évolutivité et gestion

L'aliasing des tokens est l'une des techniques les plus efficaces pour organiser et développer un design system.

• Un token de design est un terme du secteur qui désigne des valeurs réutilisables, destinées à maintenir la synchronisation entre le design et le code.
• L'aliasing est une méthode d'organisation d'un design system qui permet à chaque token de design d'hériter de la valeur d'un autre token.

Les variables permettent précisément cela.

Par exemple, supposons que la variable « brand-400 » (qui est l'un de nos tokens de design) présente une valeur #EAEA00. Nous souhaitons que la variable « icon-default » (un autre token de design) soit un alias de « brand-400 », ce qui signifie qu'elle héritera de la valeur « brand-400 ».

Si la valeur de « brand-400 » est modifiée, « icon-default » s'adapte en conséquence, tant qu'il est toujours lié à « brand-400 ».

Les styles ne prennent pas en charge l'aliasing. En d'autres termes, ils ne peuvent pas être appliqués aux variables et aux autres styles. Les variables peuvent être appliquées aux deux éléments.

Étant donné que les variables prennent en charge l'aliasing, elles offrent un support plus robuste pour des structures de token complexes et évolutives. Elles permettent de définir des valeurs primitives qui peuvent être propagées à travers d'autres tokens et éléments de votre design system. Cela facilite également la mise à jour et la gestion des design systems.

Par exemple, disons que nous créons une variable qui agit comme un token global et que nous l'utilisons pour définir d'autres variables à différents niveaux. Si le token global est modifié, tout ce qui se trouve en aval le sera aussi.

Si nous voulons modifier uniquement certains tokens, cette structure nous permet de choisir le token en question en amont et de le modifier sans avoir à retravailler manuellement tout ce qui se trouve en aval.

L'aliasing est pris en charge pour tous les types de variables. Apprenez à créer des alias pour les variables.

Fonctionnalités prises en charge

Définir la portée des variables

La définition de la portée est entièrement prise en charge pour les variables numériques, mais sera étendue à d'autres types de variables à l'avenir.

Définissez la portée des variables pour limiter les propriétés auxquelles une variable peut s'appliquer.

Par exemple, vous pouvez limiter une variable de couleur aux seuls remplissages de tracé, de sorte qu'elle ne puisse pas être appliquée à d'autres propriétés de remplissage. Cela vous permet de mieux contrôler les situations où la variable peut être utilisée et vous évite les conjectures en matière de design.

Découvrez comment définir la portée des variables.

Créer des prototypes avec des variables

Lors du prototypage, les variables sont utilisées pour stocker l'état ou les propriétés des objets. Les interactions des prototypes sont utilisées pour modifier les valeurs des variables, ce qui peut changer l'apparence, le contenu ou la visibilité des objets dans un design, le tout grâce à quelques simples frames.

Apprenez à utiliser les variables dans des prototypes avancés.

Syntaxe de code avec des variables

La syntaxe de code est en cours de développement et sera bientôt disponible.

Lorsque vous ouvrez la fenêtre modale d'édition d'une variable, vous verrez une section intitulée Syntaxe de code. La syntaxe de code représente les variables dans le code à l'aide de noms de variables valides. Ces informations apparaîtront dans Dev Mode et aideront les designers et les développeurs à bénéficier d'une expérience plus fluide lors de la passation de projet.

En savoir plus sur la syntaxe de code.

Réflexions finales

Le choix d'utiliser des variables ou des styles dépend largement de vos objectifs. Vous pouvez choisir de vous focaliser exclusivement sur les variables afin de bénéficier de l'évolutivité des tokens de design. Sinon, il se peut que l'utilisation des styles soit plus adaptée à vos projets. Ou vous pourriez choisir d'utiliser une combinaison des deux !

Les styles resteront une fonctionnalité clé dans Figma Design. Malgré leurs similitudes, les variables ne peuvent pas remplacer les styles. Au contraire, ces deux concepts s'ajoutent à l'ensemble des fonctionnalités clés de Figma.