Nous aimons utiliser les jetons de conception pour minimiser les tâches répétitives, assurer la cohérence et, en fin de compte, libérer du temps pour plus de créativité. C'est pourquoi nous sommes très enthousiastes à propos de Variables, une nouvelle fonctionnalité qui prend en charge la mise en œuvre des jetons de conception dans Figma ! Cet outil révolutionnaire permet aux utilisateurs d'adopter une approche plus systématique de la mise à l'échelle et de la maintenance de leurs systèmes de conception.
Lisez la suite pour découvrir comment fonctionnent les jetons de conception et comment exploiter le puissant potentiel des variables dans Figma.
Comment fonctionnent les jetons de conception?
Les jetons de conception sont une collection de valeurs prédéfinies pour des éléments tels que les couleurs, la typographie et l'espacement. Ils sont stockés dans un format indépendant de la plateforme, mais peuvent être transformés à l'aide d'outils spécifiques à la plateforme, tels que Variables dans Figma.
Il est essentiel que les jetons de conception soient partagés par vos équipes de conception et de développement. L'objectif est de les traiter comme une source unifiée de vérité. Toute modification des jetons de conception doit être effectuée à un endroit central et devrait mettre à jour l'ensemble du système de conception.
Utiliser des jetons de conception pour plus de cohérence et d'efficacité
Avant l'apparition des jetons de conception, les concepteurs devaient saisir manuellement des valeurs pour les couleurs, les polices et d'autres éléments de conception. Ce saisie pouvait se produire des centaines de fois au cours d'un projet. Cela prenait un temps précieux et augmentait le risque d'erreur humaine.
L'un des principaux avantages des jetons de conception est l'automatisation qu'ils apportent au processus de conception. Les concepteurs peuvent créer un ensemble de variables pour la couleur, la typographie, l'espacement et bien d'autres choses encore, puis les intégrer tout simplement dans leurs conceptions. De plus, il suffit d'apporter une modification une seule fois pour qu'elle se propage instantanément dans l'ensemble du projet. Vous économisez ainsi des heures d'ajustements manuels fastidieux, vous garantissez l'intégrité de votre conception et vous pouvez même réduire le temps consacré à l'assurance qualité.
Les avantages de l'utilisation des variables dans Figma
Les variables dans Figma peuvent être utilisées pour définir un ensemble de valeurs pour vos éléments de conception, y compris des variations pources valeurs. Cela permet des changements dynamiques au sein d'un même élément de conception, ce qui vous aide à accélérer le processus de conception et à créer des process de prototypage complexes.
Supposons par exemple que vous souhaitiez concevoir des boutons primaires, secondaires et tertiaires. Vous pouvez utiliser des variables pour définir des attributs cohérents, tels que l'espacement et le style de police, ainsi que plusieurs variations de couleur. D'un simple geste, vous pouvez passer d'un style de bouton à l'autre sans avoir à procéder à des ajustements manuels supplémentaires !
De même, vous pouvez faire en sorte que l'espacement soit immédiatement mis à jour pour différents appareils, ou prévisualiser rapidement le flux de texte dans différentes langues.
Lorsque vous apportez des modifications à une variable, vous pouvez vous assurer que la mise à jour est appliquée uniformément à l'ensemble de votre projet de conception. Cela change la donne pour les projets comportant des systèmes de conception extensifs, car cela minimise la nécessité de rechercher et d'ajuster chaque élément de conception individuellement.
La fonction Variables renforce également les avantages de Figma en matière de collaboration. Les équipes peuvent accéder aux mêmes variables et les modifier, ce qui garantit que tout le monde est sur la même longueur d'onde en ce qui concerne la cohérence de la conception. Cette fonction est particulièrement utile pour les projets de grande envergure et les équipes multidisciplinaires.
En matière de prototypage, les possibilités sont infinies. Variables vous permet de tout faire, depuis la création d'un panier d'achat entièrement fonctionnel jusqu'à la construction d'un quiz interactif utilisant une logique conditionnelle.
Voici un exemple amusant de ce qui est possible : une version jouable de Flappy Bird construite avec des Variables Figma ! Ce jeu fantaisiste utilise 46 variables et propose des scores, des mouvements basés sur la physique, une logique de collision et un placement pseudo-aléatoire des tuyaux.
Guide rapide de l'utilisation des variables dans Figma
Tout d'abord, vous devez créer une collection. Celle-ci sert de conteneur pour les variables. Veillez à donner à votre collection un nom concis mais descriptif.
Ensuite, vous définirez des catégories au sein de votre collection. Il s'agit d'organiser les variables dans une structure hiérarchique en fonction de leurs besoins spécifiques, facilitant la recherche et l'utilisation efficace des variables.
Vous pouvez maintenant créer vos variables. Actuellement, Figma vous permet de choisir entre quatre propriétés :
- Couleur - pour les remplissages en couleur.
- Nombre - pour des éléments tels que les dimensions, le rembourrage, les marges et le rayon des coins.
- Chaîne - pour réutiliser des chaînes de texte courantes telles que les titres.
- Booléen - permet de faire basculer un état vrai/faux pour des éléments tels que la visibilité d'un calque. Ceci est particulièrement utile pour la mise en œuvre du responsive design.
Améliorations à venir pour les variables
Variables est actuellement en version bêta ouverte. Il continuera à s'améliorer et à évoluer dans les mois à venir. Voici ce que Figma prévoit d'ajouter :
- Type de variable typographique. Elle permettra de passer d'une combinaison de propriétés typographiques à une autre, comme les familles de polices, les tailles et l'espacement.
- Prise en charge de propriétés supplémentaires. Vous pourrez bientôt appliquer des variables à des champs de propriétés supplémentaires tels que l'épaisseur du trait, les couleurs d'effet, l'opacité des calques, etc. Figma travaille également à la prise en charge de types de propriétés de composants supplémentaires (actuellement, vous ne pouvez assigner des variables qu'aux propriétés variantes).
- Collections étendues (fonctionnalité réservée aux entreprises). Figma étudie les moyens de gérer la thématisation des sous-marques, qui sont souvent gérées par différentes équipes dans les grandes organisations. Les utilisateurs pourront appliquer des règles directrices à une collection de variables existante et publier ces changements en tant que modes supplémentaires. Nous nous attendons à ce que cette fonctionnalité soit très utile pour les établissements d'enseignement supérieur, les agences gouvernementales, etc.
L'intégration des variables dans Figma révolutionne la façon dont nous abordons les systèmes de conception. Les équipes peuvent tirer parti de cette puissante fonctionnalité pour rationaliser leurs processus de travail et automatiser les modifications,assurant la cohérence et libérant un temps précieux. Si vous ne l'avez pas encore fait, plongez dans le monde des jetons de conception et des variables Figma pour tracer votre chemin vers un processus de conception plus efficace, plus collaboratif et plus créatif !