Accélérez la conception de vos produits
tldr;
Chaque fois que vous pouvez accélérer votre processus, vous gagnez du temps et de l'argent. Nous avons trouvé un moyen d'accélérer le travail de conception de produits en construisant une bibliothèque de composants d'interface utilisateur allégée dans Figma, basée sur le framework de choix des développeurs : Mantine. Désormais, au lieu de passer des semaines à construire et à maintenir une bibliothèque d'interface utilisateur Figma correspondant aux composants des développeurs, notre concepteur de produit peut se concentrer sur le travail à plus forte valeur ajoutée d'amélioration de l'expérience utilisateur. Et nous l'avons rendu gratuit pour que votre équipe puisse l'utiliser aussi.
Pourquoi créer une autre bibliothèque de composants Figma ?
Lors du développement de BonFHIR, nous avions besoin d'un moyen d'aligner les composants d'ingénierie et de conception. Nous avons choisi de construire nos composants BonFHIR en utilisant le framework Mantine parce qu'il fournit un ensemble de composants React accessibles et personnalisables.
Cependant, Mantine ne propose pas de fichier Figma officiel. Au lieu de cela, ils comptent sur l'aide de la communauté mondiale de conception pour créer des composants Figma, selon les besoins. Les résultats, comme on pouvait s'y attendre, n'ont pas été idéaux. La plupart des fichiers Figma de la communauté existante ne sont pas à jour avec la dernière version de Mantine et aucun n'utilise la dernière mise à jour de Figma pour les variables. Nous avons décidé de créer nos propres fichiers à partir de zéro afin d'aligner au mieux les composants de notre livre d'histoire BonFHIR sur ce qu'un concepteur utiliserait dans Figma.
“Sachant que cela pourrait aider d'autres concepteurs, nous proposons désormais notre bibliothèque Lean Mantine sous la forme d'un fichier gratuit de la communauté Figma.”
Au fur et à mesure que cette bibliothèque de composants se développait, nous avons réalisé que nous étions en train de créer une ressource de base qui pourrait être réutilisée dans de futurs projets pour accélérer le processus de conception et d'ingénierie, en économisant du temps et de la main d'œuvre. Sachant que cela pourrait aider d'autres concepteurs, nous proposons désormais notre bibliothèque Lean Mantine sous la forme d'un fichier Figma Community gratuit.
En quoi cela vous aide-t-il ?
1. Adaptation plus rapide du produit au marché
En tant que concepteur de produits, je m'efforce avant tout de créer une excellente expérience pour l'utilisateur. Cela implique de veiller à ce que le design soit visuellement attrayant afin qu'il soit perçu comme facile à utiliser et comme un produit de qualité. Je dois donc également consacrer du temps à la conception des détails de l'interface utilisateur : les couleurs, le poids des traits, l'espacement entre les boutons, l'échelle de la typographie, etc. Toutefois, le flux UX est prioritaire, car un beau produit qui ne résout pas le problème est inévitablement inutile.
Pour les nouveaux produits ou services, il est important de vérifier si votre idée est adaptée au marché. Le meilleur moyen d'y parvenir est de faire tester le produit par les utilisateurs dès le début. Le retour d'information que vous recevez alors de la part des utilisateurs peut vous aider à apporter des ajustements itératifs à la définition de votre produit.
L'utilisation d'une bibliothèque de composants préexistante permet aux concepteurs de réaliser rapidement des prototypes et des itérations en s'appuyant sur des composants préconstruits. Cela leur permet également de se concentrer sur les décisions de conception de haut niveau plutôt que de passer du temps à recréer des éléments d'interface utilisateur de base. Cependant, la plupart des bibliothèques gratuites sont développées par un seul concepteur qui n'a pas le temps de se tenir au courant des nouvelles fonctionnalités et des nouveaux systèmes de Figma, de sorte qu'elles sont rapidement dépassées. Par conséquent, les concepteurs finissent par les corriger ou par créer leur propre bibliothèque à partir de zéro. Cela peut être une énorme perte de temps.
En revanche, notre bibliothèque Lean Mantine sera régulièrement mise à jour au fur et à mesure qu'elle sera utilisée par notre équipe de concepteurs pour de nouveaux produits.
Chaque composant de notre bibliothèque Lean Mantine offre de multiples variantes, états et propriétés aux concepteurs afin qu'ils puissent se concentrer davantage sur des solutions de conception et des interactions utilisateur innovantes et créer plus rapidement des prototypes de haute fidélité.
2. Rationaliser la communication
La bibliothèque Lean Mantine n'est pas seulement un avantage pour le concepteur, mais aussi pour l'ingénierie. Les composants de notre bibliothèque Lean Mantine suivent les mêmes spécifications de noms et de variables que la documentation du développeur, de sorte que les ingénieurs peuvent facilement et efficacement comprendre et recréer les conceptions Figma.
La conception et l'ingénierie peuvent également partager un langage commun car les composants Figma et React sont définis de la même manière et sont créés avec des variables locales qui peuvent être interprétées et mises en œuvre comme des jetons de conception. Cela peut contribuer à réduire les erreurs et les malentendus entre les deux équipes.
3. Cohérence et meilleure évolutivité
La bibliothèque Lean Mantine a été créée en utilisant les variables locales de Figma afin d'être facilement personnalisable et d'assurer la cohérence de l'ensemble de la bibliothèque de composants. Tous les éléments de l'interface utilisateur utilisent le même ensemble de variables primitives et de styles locaux, ce qui permet de modifier rapidement et efficacement l'image de marque des composants. L'utilisation de variables locales permet de personnaliser les propriétés à petite et à grande échelle. Vous pouvez modifier le thème de couleur général de la bibliothèque pour l'adapter à votre marque, ou simplement changer le ton de couleur d'un bouton. Vous avez ainsi la possibilité d'adapter la bibliothèque de composants à l'aspect et à la convivialité que vous souhaitez. Plus important encore, vous pouvez apporter des modifications dynamiques à plusieurs instances simultanément dans tous les fichiers de conception lorsque votre produit se développe.
Pour gagner du temps et économiser des ressources, une bibliothèque de composants à jour est un excellent outil pour accélérer votre processus global et transformer vos idées en réalité. Par la suite, vous serez en mesure de valider vos idées et d'itérer plus rapidement grâce à une communication plus efficace au sein de votre équipe. Au fur et à mesure de votre croissance, une bibliothèque de composants bien structurée garantira une expérience utilisateur plus cohérente pour l'ensemble de votre produit.
Découvrez dès aujourd'hui la bibliothèque Lean Mantine de Toboggan Labs pour Figma.
La conception de produits chez Toboggan Labs est conçue pour rationaliser le développement de produits afin que vous puissiez les lancer plus efficacement.