Les plugins sur Figma à installer pour un UX designer
Figma est un outil de design UX/UI collaboratif, destiné à la conception d’interfaces utilisateur des produits digitaux, comme les sites internet, les applications web et mobiles, etc. Figma se base sur le concept de design system, afin de créer des maquettes, des wireframes et des prototypes efficaces et alignés sur les normes de conception appropriées aux contraintes du projet de design. Ce système crée un langage unifié entre les équipes prenantes, permettant d’accentuer l’agilité et l’organisation du travail de conception. Pour rendre le travail des designers plus agréable, Figma offre des milliers de plugins pratiques et faciles d’usages. Découvrez dans cet article les 22 plugins les plus intéressants à ne pas bâcler.
Figma : l’outil incontournable pour tout UX designer
Figma est en train de confirmer sa présence parmi les outils les plus stratégiques pour tout UX designer. Grâce à sa richesse fonctionnelle, le designer UX peut travailler sur son design avec plus de fluidité et en réalisant un gain de temps plus considérable. Notamment, Figma permet de :
- Instaurer une collaboration plus poussée, grâce à la centralisation de toutes les ressources de design (les guides de style, les librairies de composants UI, les librairies des patterns, etc) dans un design system. Grâce à cette bibliothèque de données, toutes les parties prenantes autorisées peuvent accéder aux mêmes ressources pour les utiliser dans leurs propres usages ou pour les mettre à jour, de manière collaborative selon les exigences du projet. Ce qui élimine les tâches répétitives et favorise la réutilisation des composants dans une démarche de conception plus agile.
- Créer un design authentique en utilisant des polices de caractère à l’image de la marque de l’entreprise, lui permettant de se distinguer de la concurrence et de laisser une impression unique chez ses clients.
- Créer un responsive design plus facilement, à l’aide des composants UI flexibles qui s’étirent et se rétrécissent automatiquement, en fonction des propriétés des éléments qu’ils contiennent et des composants parents qui les englobent.
- Générer rapidement les codes correspondant aux propriétés définies par l’UX designer (margin, padding, width, height, etc). Ce qui facilite par la suite le travail du développeur web.
- Fluidifier la conception grâce à la palette diversifiée de plugins Figma. Cet outil offre aux UX designers plusieurs plugins qui assurent un processus de conception plus facile et une meilleure interopérabilité avec les autres outils d’UX/UI design.
Découvrons dans ce qui suit des plugins attractifs, que tout UX designer a tout intérêt à utiliser.
22 plugins Figma intéressants pour tout UX designer
Figma to HTML, CSS, React
Ce plugin est très utile pour convertir facilement les conceptions Figma en HTML, CSS, React, Vue, Liquid, Solid, etc. C’est le moyen idéal pour aider les UX designers, surtout ceux qui ne sont pas à l’aise avec ces langages, à obtenir en quelques clics le code équivalent au design figma exporté.
Grâce à ce plugin, les designers UX peuvent obtenir des styles prêts à l’emploi, qu’ils peuvent s’en servir pour développer leurs maquettes et prototypes.
Figmoji
Figmoji est une bibliothèque abondante d’émojis (émojis de Twitter), permettant à l’UX designer de dynamiser son design et y donner une touche nettement sympathique. Il suffit de sélectionner l’élément désiré et Figmoji se charge d’intégrer le SVG correspondant dans la conception.
Ce plugin est pratique et facile d’usage. Notamment, les émojis sont classés par catégorie, pour simplifier la sélection des éléments envisagés. Il est aussi un plugin open source, de ce fait, il est possible d’accéder à son code pour le modifier ou le distribuer de manière collaborative et décentralisée.
Iconify
Iconify est une bibliothèque géante d’icônes, qui compte plus de 100 packs renfermant plus de 100 000 icônes. Elle contient notamment des icônes : Material Design, Jam Icons, Dashicons, Noto Emoji, EmojiOne, Twitter Emoji, etc. Le designer UX peut les importer facilement dans son projet Figma sous un format vectoriel.
Isometric
Isometric est le plugin de choix pour créer des conceptions isométriques de manière facile et plus rapide. Avec Isometric, le designer UX ne doit plus ajuster ses composants UI manuellement. En effet, il peut utiliser les boutons de déplacement qui remplissent la fonction de la molette de la souris et les objets intelligents qui accomplissent les fonctions de la molette et du bouton droit de la souris. Grâce à ce plugin, la conception d’objets isométriques devient plus facile.
Dark Mode Magic
Dark Mode Magic est le plugin merveilleux dont le concepteur UX a besoin pour convertir, en un seul clic, un thème clair en un thème sombre. Il suffit de sélectionner l’écran à convertir et de choisir l’option “dark mode magic”, à partir de la palette des options du plugin et le thème sera automatiquement appliqué.
Feather Icons
Feather icons assure l’accès à la bibliothèque d’icônes open source Feathericons qui permet d’importer gratuitement plusieurs icônes au design simple et minimaliste.
Draw Connector
Draw Connector est le plugin utilisé pour mettre en exergue les liens entre les composants d’une page, à travers des connecteurs orthogonaux. L’UX designer peut personnaliser les propriétés de ces connecteurs (bornes, couleur, largeur, style, etc) selon ses besoins. Ces connecteurs sont flexibles et s’adaptent automatiquement aux nouvelles modifications effectuées sur les composants qui y sont reliés.
LottieFiles
LottiFiles assure l’accès à une bibliothèque contenant des milliers d’animations SVG ou GIF, cross-platform, que le concepteur UX peut importer gratuitement pour accentuer la convivialité de l’interface utilisateur. Grâce à ce plugin, le designer UX peut insérer des animations de haute qualité. Ou bien, il peut créer ses propres animations en important ses propres fichiers LottieFiles, en seulement quelques clics.
Mapsicle
Mapsicle épargne au designer UX la peine de réaliser des captures d’écran des cartes à insérer dans son projet Figma. Ce plugin assure une intégration directe des cartes dans l’interface UI, ce qui donne un rendu nettement interactif, qui permet de rechercher aisément un emplacement dans n’importe quel point dans le monde.
Mapsicle se base sur des cartes Mapbox pour offrir de nombreuses possibilités de personnalisation concernant le style, la taille, les propriétés de la caméra, etc, permettant d’intégrer une carte harmonieusement avec les autres éléments de la maquette.
Remove BG
Remove BG permet de supprimer un arrière-plan en un simple clic et d’obtenir une image PNG parfaitement nette. Toutefois, l’UX designer doit avoir un compte sur “remove bg”, pour pouvoir utiliser ce plugin.
UIGradients
UIGradients offre une palette exotique de couleurs contenant plus de 350 dégradés, que le designer UX peut ajouter dans son projet Figma en un clic.
Unsplash
Unsplash offre au concepteur UX le confort d’importer directement des images libres de droit et de haute qualité à partir de cette bibliothèque. De ce fait, le designer n’est plus obligé de quitter son espace de travail pour chercher ces ressources ailleurs et les intégrer dans son projet.
Typescale
Typescale permet de créer une échelle typographique modulaire, pour personnaliser les tailles de polices à intégrer et les adapter aux contraintes du projet. Pour ce faire, le designer UX doit configurer essentiellement ces paramètres : la taille de base, le multiplicateur à travers lequel il peut augmenter et diminuer la taille d’une police par rapport à la taille de base, le nombre de tailles au-dessus ou en dessous de la taille de base.
Autoflow
Autoflow est l’outil idéal pour créer un user flow de manière rapide et très facile. Il s’agit de sélectionner les formes et les connecteurs désirés et la connexion entre ces éléments sera créée automatiquement.
Arrow-Auto
Arrow-Auto permet de créer des flèches souples et harmonieuses entre les éléments de la conception, dans plusieurs sens (gauche-droite, gauche-gauche, etc) et avec différents formats (avec un cercle ou une pointe de flèche à l’extrémité).
L’UX designer peut personnaliser facilement l’apparence de chaque flèche ou des groupes de flèches selon ces préférences. De plus, il peut déplacer certains éléments dans son design, tout en gardant les flèches connectées.
Blush
Blush permet à l’UX designer d’accentuer l’originalité de son design grâce à l’intégration d’illustrations authentiques de la bibliothèque Blush. Grâce à ce plugin, il peut créer et personnaliser ces illustrations gratuitement, selon ses besoins.
Le rendu sera un design unique à l’image de l’identité de l’entreprise et approprié aux besoins de l’utilisateur final. Il est possible d’exporter les créations réalisées aux formats small ou large PNG. Toutefois, il faut acquérir un forfait payant pour pouvoir les télécharger au format SVG.
Chart
Chart est l’outil dédié à la génération de graphiques populaires à partir de données réelles ou aléatoires. Ces données peuvent être récupérées à partir de plusieurs sources : Excel, Google Sheets, API REST, fichier JSON distant, fichier CSV local, etc.
La bibliothèque de Chart renferme 16 types de graphiques que le designer UX peut les instancier et les personnaliser à sa guise. Bien évidemment, il peut les mettre à jour à tout moment pour illustrer sa conception avec des données fiables et des graphiques sophistiqués.
Clean Document
Clean Document aide le designer UX à nettoyer et organiser son document Figma. Cet outil permet de :
- éliminer les calques superflus ou cachés,
- renommer et ranger les calques,
- ajuster les dimensions des calques au pixel le plus proche,
- trier les calques selon leurs positions X et Y et tout en gardant le même ordre d’empilement des couches.
Ainsi, le designer UX peut travailler sur un document bien ordonné qui fait gagner du temps et assure un meilleur confort dans le travail.
Content Reel
Content Reel est un plugin développé par Microsoft. Il permet au concepteur UX de créer un contenu personnalisé, intégrant tous les éléments nécessaires à cet effet : des images, des icônes, des chaînes de texte, des avatars. Ce contenu peut être partagé avec les autres parties prenantes utilisant Figma, ce qui assure une collaboration plus cohérente entre les acteurs du projet.
Bien évidemment, l’UX designer peut garder son contenu privé et restreindre l’accès à son design à lui seul. Pour plus de praticité, le contenu en cours de production est épinglé automatiquement à l’écran d’accueil. De ce fait, le designer reste toujours avisé des créations les plus fréquemment consultées et éditées.
Batch Styler
Batch Styler est un outil pratique qui permet au concepteur UX de changer plusieurs styles, couleurs et polices de caractères, qui disposent de la même valeur, en un seul clic. Ce plugin fait gagner un temps précieux au designer et le débarrasse de la modification fastidieuse de chaque élément à part.
Breakpoints
Breakpoints est un outil performant pour créer facilement des mises en pages responsives. Le designer UX peut s’en servir sans que la fenêtre de plugin ne soit ouverte. Le plus grand avantage apporté par cet outil est que les autres utilisateurs de figma, qui sont impliqués dans le projet, peuvent redimensionner le layout en question, sans avoir besoin d’installer le plugin.
Le redimensionnement s’effectue de manière rapide à l’aide de points d’arrêts, permettant de redimensionner la hauteur et la largeur du layout selon des valeurs personnalisées par le designer UX.
Les layouts générés sont flexibles et peuvent s’adapter parfaitement à différents usages, tels que les conceptions pour le Web, Android, iOS, etc.
Mot de la fin
Figma est un outil collaboratif en ligne de conception d’interfaces utilisateur. Il vise à renforcer l’interactivité de la collaboration entre toutes les parties prenantes, en accédant à une seule URL pour interagir en temps réel, partager les ressources et les idées, corriger et optimiser l’ensemble du projet de manière plus agile.
De ce fait, l’équipe UX design peut exécuter directement Figma sur le navigateur, à travers cette URL, sans avoir besoin d’effectuer aucune installation ou téléchargement de plugin intermédiaire.
Dans un esprit Design system, Figma permet à l’équipe de design UX de partager une compréhension unique de l’expérience qu’elle est chargée de concevoir et des guidelines à suivre pour utiliser convenablement les ressources mobilisées, telles que les images, les fonts, les couleurs, les patterns, etc.
Dans l’objectif de maximiser le confort d’usage de figma et de simplifier le processus de conception, cette plateforme propose plusieurs plugins efficaces qui rendent le travail de conception plus passionnant, à l’exemple de Figmoji, Icon Resizer, Dark Mode, etc.
by 
