Figma continue de se démarquer en tant qu'outil de conception en perpétuelle évolution. Lors de l'événement Figma Config 2023, une toute nouvelle fonctionnalité a été dévoilée : les Variables dans Figma. Parmi de tant d'autres, les Variables se sont distinguées en tant que puissant outil offrant aux designers une nouvelle approche de la conception et du prototypage. Dans cet article, nous reprenons les principaux aspects des Variables dans Figma et vous expliquons en quoi elles révolutionnent notre façon de concevoir des maquettes.

Qu'est-ce que les Variables dans Figma?

Les variables représentent une nouvelle approche pour définir les propriétés d'un projet dans Figma. Elles permettent aux concepteurs de stocker des valeurs réutilisables, appliquées à toutes sortes de propriétés de design et/ou d'actions de prototypage. Vous gagnerez en temps et en efforts lors de la création de vos maquettes, de la gestion des design system et de la création de flux de prototypage sur Figma.

Au premier abord, les variables peuvent être comparées aux Styles dans Figma, mais elles vont bien au-delà. Contrairement aux Styles, qui permettent de définir des styles uniformes pour les éléments de design, les variables vous permettent de créer des collections de données interconnectées, établissant des relations et définissant des propriétés plus complexes à plusieurs niveaux.

Les Variables sont organisées dans une toute nouvelle interface dans Figma, qui ressemble à un tableau, vous permettant de créer et d'attribuer des valeurs à vos variables de manière structurée. Cette approche s'apparente à une véritable base de données ou à un CMS intégré dans Figma, facilitant ainsi l'organisation et la gestion des différentes propriétés de votre projet.

Avantages des Variables dans le design

Les Variables offrent de nombreux avantages, notamment :

1. Flexibilité et Cohérence : Les Variables permettent d'uniformiser les éléments de votre conception et de faciliter les mises à jour ultérieures en modifiant simplement la valeur d'une variable. Par exemple, en définissant des variables pour l'ensemble des couleurs de votre projet telles que Grey-900, Grey-800, Grey-700, etc., vous pouvez modifier rapidement une couleur et voir les changements se propager à tous les éléments de la maquette liés à cette couleur.
2. Gestion des Collections : Les Variables peuvent être organisées en Collections, ce qui facilite la gestion des différentes propriétés du projet, telles que les couleurs, les espaces, les polices, etc. Au-delà de créer de simples styles, les collections permettent d'attribuer à chaque variable des propriétés supplémentaires en les associant les unes aux autres. Par exemple, vous pouvez utiliser un "Semantic naming" pour les variables de couleurs afin de définir les cas d'utilisation de chacune d'entre elles, comme attribuer une couleur à chaque type de texte (primaire, secondaire, etc.).
3. Modes pour des Variantes : Les Modes permettent de créer des variantes pour vos variables, comme le Dark Mode et le Light Mode, vous permettant de tester différentes apparences en un clic. Cela vous donne la flexibilité d'explorer différents thèmes et contextes de design sans avoir à recréer des éléments séparés.
4. Productivité Améliorée : En utilisant les Variables, vous pouvez effectuer des modifications plus rapidement et éviter de devoir modifier manuellement chaque élément dans votre conception. Les variables vous offrent une approche plus efficace pour gérer et mettre à jour votre design, ce qui vous permet de gagner du temps et de vous concentrer davantage sur la créativité et l'innovation.

Avec les Variables dans Figma, vous disposez d'un outil puissant qui optimise votre flux de travail de conception, vous permettant ainsi de créer des designs cohérents, flexibles et efficaces.

Comment Utiliser les Variables ?

Les Variables introduisent une nouvelle manière passionnante de concevoir des maquettes web. Bien que cette fonctionnalité puisse sembler complexe au premier abord, nous vous encourageons à regarder notre prochaine vidéo YouTube prévue le 30/07 (👉 Abonnez-vous pour ne rien rater) pour bien comprendre comment créer, éditer et organiser les variables dans Figma.

En reprenant les principales étapes de création :

1.1 Créer des variables

Pour commencer, vous pouvez créer une variable en cliquant sur "Create Variable" dans le panneau des propriétés design. Vous avez alors le choix parmi différentes options pour créer la variable qui correspond le mieux à vos besoins :

1. Color : Cette option vous permet de définir des couleurs pour vos éléments. Vous pouvez créer des remplissages (solid fills) pour les couleurs de fond, des couleurs de texte (text colors), ainsi que des couleurs pour les contours (stroke colors).
2. Number : Cette option vous permet de définir des valeurs numériques pour vos éléments. Vous pouvez utiliser les variables numériques pour des Frames, des coins arrondis (corner radius), des largeurs/hauteurs minimales et maximales, des autolayout, ainsi que pour gérer les marges et les espaces entre les éléments (padding et gap).
3. String : Cette option vous permet de définir des blocs de texte et des variantes de mots. Par exemple, vous pouvez utiliser les variables de type String pour créer une variante d'un layout dans une autre langue.
4. Boolean : Cette option vous permet de définir des valeurs booléennes (vrai/faux) pour vos éléments. Les variables booléennes sont utiles pour gérer la visibilité conditionnelle d'éléments, ainsi que pour les instances de variantes ayant des valeurs vrai/faux.

1.2 Créer des groupes et des Collections

Une fois que vous avez créé vos variables, vous pouvez les organiser dans des Groupes et des Collections pour une meilleure gestion. Par exemple, vous pouvez créer un groupe pour les couleurs, un autre pour les polices, etc.

En créant des Groupes, vous pourrez rassembler des variables similaires, ce qui rendra la navigation et l'édition plus faciles et plus intuitives.

Les Collections vous permettent quant à elles de regrouper les éléments ayant la même fonction, vous permettant ainsi de créer des correspondances entre vos variantes Figma.

1.3 Utiliser les Modes

Les Modes vous offrent la possibilité de créer des variantes Figma pour vos variables. Vous pouvez ainsi facilement basculer entre différentes versions de votre maquette, comme le Dark Mode et le Light Mode, pour tester différentes apparences en un clic.

Les Modes vous donnent une flexibilité accrue pour explorer différentes thématiques et contextes de design sans avoir à recréer des éléments séparés. Ils constituent un outil puissant pour vous aider à visualiser rapidement et efficacement vos conceptions dans différents états et situations. Grâce aux Modes, vous pourrez prendre des décisions éclairées concernant le look final de votre projet tout en optimisant votre processus de conception.

2. Variables pour la conception et les design system

L'utilisation des variables Figma va au-delà de simples styles. Les variables vous aideront à uniformiser vos maquettes, en définissant des valeurs spécifiques pour chaque éléments de votre projet. C'est par exemple le cas pour les spacings de vos maquettes. En créant des variables pour vos horizontal padding, vertical padding et gap, vous serez sûr d'utiliser des valeurs fixes sur l'ensemble de votre projet. Votre design sera ainsi plus cohérent, et vous pourrez le faire évoluer en seulement quelques clics depuis vos variables.

Elles jouent également un rôle clé dans la mise en place d'un design system en permettant l'implémentation de design tokens. Cette approche, connue sous le nom de Tokenisation, consiste à coder les différentes variables d'un projet pour définir précisément dans quelle situation les utiliser. En intégrant les variables dans votre design system, vous facilitez la gestion des propriétés du projet et contribuez à sa scalabilité. Grâce à cette méthodologie, vous pouvez créer des conceptions cohérentes et évolutives tout en économisant du temps et des efforts.

3. Prototypage avancé avec les Variables

Les variables offrent de nouvelles perspectives pour le prototypage avancé avec moins de Frames. Vous pouvez tirer parti des Expressions et des Conditionals visibility pour créer des interactions avancées dans vos prototypes. En associant les variables à d'autres fonctionnalités avancées de Figma, vous pouvez développer des prototypes hautement interactifs et réalistes, tout en maintenant une approche simplifiée de la gestion des différents états de votre design. Les possibilités sont vastes et vous permettent d'explorer des interactions dynamiques et complexes, tout en restant efficace dans votre processus de prototypage.

4. Variables dans les APIs de Figma

La puissance des variables Figma s'étend également à l'écosystème des développeurs grâce à l'intégration dans l'API de Figma. Cette fonctionnalité permet de construire des plugins et des widgets personnalisés qui tirent parti des variables. Que vous souhaitiez importer ou exporter des variables, convertir des styles en variables, ou simplement interagir avec les propriétés du design, l'API de Figma vous offre une multitude de possibilités pour intégrer les variables dans votre workflow de développement.

Les variables dans Figma représentent une avancée majeure dans l'efficacité du processus de conception et les capacités de prototypage. Que vous gériez des design systems, créiez des prototypes interactifs ou construisiez des plugins personnalisés, les variables permettent aux concepteurs de faire davantage avec moins d'effort. Nous vous encourageons vivement à prendre en main cette fonctionnalité dans Figma et l'intégrer dans vos futurs process de conception pour les faire évoluer.