Guide des variables dans Figma

Dans Figma Design, les variables stockent des valeurs réutilisables qui peuvent être appliquées à toutes sortes de propriétés de conception et d'actions de prototypage. Elles permettent de gagner du temps et de réduire les manipulations lors de l'élaboration des designs, de la gestion des design systems et de la création de flux de prototypage complexes.

Vous pouvez, par exemple :

• Créer des jetons de design pour gérer les design systems plus efficacement
• Changer de format d'affichage pour une frame afin que l'espacement s'ajuste automatiquement selon le système spatial défini.
• Prévisualiser l'agencement du texte dans différentes langues en changeant le contenu d'une frame.
• Créer un design de panier d'achat entièrement fonctionnel qui calcule le total d'une commande sur la base des articles ajoutés au panier
• Élaborer le prototype d'un quiz interactif qui utilise une logique conditionnelle pour montrer si l'utilisateur répond correctement ou non à une question.

Il y a trois principales façons d'utiliser les variables dans Figma :

1. Designs et design systems ↓
2. Prototypage avancé ↓
3. API Figma ↓

Variables pour les créations et les design systems

Utilisez des variables et des modes afin de mettre en œuvre des tokens de design pour votre design system, et adaptez les designs à différents contextes, tels que les thèmes clair et sombre. Avec les variables, vous pouvez créer des designs plus efficacement et construire un design system plus performant.

• Tutoriel Figma : Introduction aux variables

  Cette tutoriel vidéo vous explique les bases des variables, leur utilisation pour représenter les tokens de design ainsi que la manière d'employer les variables de couleur et les variables numériques pour prendre en compte différents modes et thèmes.
• Tutoriel Figma : Variables pour la typographie

  Ce tutoriel vidéo vous explique comment utiliser des variables sur les propriétés des polices de caractères, intégrer des variables dans un système typographique existant et les utiliser pour dynamiser un design adaptatif.
• Article : Aperçu des variables, des collections et des modes →

  Lancez-vous dès maintenant dans l'univers des variables ! Explorez les différents types de variables et familiarisez-vous avec les collections et les modes de variables.

• Article : Créer et gérer des variables →

  Apprenez à créer des variables et des collections, à vous référer à d'autres définitions de variables et à déterminer la portée des variables à utiliser dans vos designs.

• Article : Appliquer des variables aux designs →

  Découvrez comment appliquer des variables existantes aux propriétés de design.

• Article : Modes des variables →

  Découvrez comment créer plusieurs définitions pour une variable, chacune associée à un mode. Apprenez également à les utiliser pour passer rapidement d'un contexte de design à l'autre.

• Article : 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 ?

• Article : Variables en Dev Mode →
  

  Découvrez comment accéder aux variables en Dev Mode lors de l'inspection des designs. Sachez notamment comment voir les détails des variables et des suggestions de variables, ainsi que visualiser les collections locales à l'aide du tableau des variables.

• Fichier de la communauté : Playground des variables →

  Vous voulez acquérir une expérience pratique avec les variables ? Obtenez une copie du fichier d'initiation aux variables pour vous exercer.

Variables pour le prototypage avancé

Les variables vous permettent de créer des prototypes haute fidélité en utilisant moins de frames. Utilisez des variables avec d'autres fonctionnalités avancées telles que des expressions et des logiques conditionnelles pour faire passer vos prototypes au niveau supérieur.

Lors du prototypage, les variables sont utilisées pour stocker l'état ou les propriétés des objets. Utilisez les interactions des prototypes 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.

• Tutoriel vidéo : Créer des prototypes avec des variables

  Regardez le contenu et apprenez à utiliser des variables dans les prototypes en suivant un exemple concret. Vous apprendrez à modifier les valeurs des variables, à construire des expressions simples et à utiliser des actions multiples ainsi que la logique if/else (si/sinon) pour évaluer les vérifications conditionnelles.
• Article : Utilisation des variables dans les prototypes →

  Apprenez les bases de la création de prototypes avec des variables dans Figma, notamment la façon de configurer vos variables, d'utiliser l'action Set variable (Définir une variable) pour modifier les valeurs des variables et d'exploiter les variables avec des variantes de composants et des composants interactifs.

• Article : Utiliser des expressions dans les prototypes →

  Apprenez à utiliser les expressions et les variables dans les prototypes pour générer des valeurs de chaînes dynamiques, effectuer des opérations mathématiques de base avec des valeurs numériques, ou même évaluer des expressions booléennes.

• Article : Actions multiples et logique conditionnelle →

  Apprenez à utiliser plusieurs actions pour accumuler un nombre illimité d'actions sur le même déclencheur, ou à exploiter des logiques conditionnelles pour vérifier si une condition est remplie avant d'effectuer une action en utilisant la logique if/else.

• Article : Modes de variable dans les prototypes →

  Apprenez à utiliser les modes de variables dans vos prototypes. Vous pouvez définir les valeurs des modes spécifiques en fonction du contexte, ou utiliser les valeurs des modes spécifiques dans vos expressions.

• Fichier de la communauté : Bac à sable de prototypage avancé →

  Copiez notre fichier bac à sable de prototypage avancé pour vous familiariser davantage avec les variables pour le prototypage.

Variables utilisant des API

Les variables sont désormais prises en charge dans l'API du plugin de Figma (pour la création de plugins et de widgets) et dans REST API. 

• Documents pour les développeurs : Pour REST API →

  La prise en charge des variable dans REST API inclut des endpoints permettant la consultation, la création, la mise à jour et la suppression de variables.

• Documents pour les développeurs : Pour l'API du plugin →

  La prise en charge des variables dans l'API du plugin inclut la création et la lecture de variables, ainsi que la liaison des variables aux composants. Par exemple, un plugin peut être développé pour importer ou exporter des variables ou pour convertir des styles en variables.

• Documents pour les développeurs : Pour l'API du widget →

  Les widgets peuvent accéder aux variables en utilisant l'API du plugin. Les widgets peuvent créer et lire des variables, mais les propriétés des widgets ne peuvent pas être associées à des variables.

• Tutoriel Figma : Synchroniser une variable avec GitHub

  Ce tutoriel vidéo vous apprend à synchroniser vos variables avec votre base de code. Nous vous expliquerons comment utiliser notre exemple de référentiel GitHub Action pour synchroniser vos variables Figma et votre base de code.
• Fichier de la communauté : Synchronisation des design systems à l'aide de variables REST API →

  Découvrez comment utiliser les variables REST API de Figma pour mettre en place des workflows automatisés afin de synchroniser les modifications entre les fichiers de design et votre base de code.