Pour voir la version anglaise, click here.
J’ai utilisé de nombreux outils dans ma carrière dans la visualisation de données. J’ai commencé principalement avec le logiciel Tableau. Durant mes études de maîtrise, j’ai principalement utilisé D3.js. J’ai également essayé Looker avant d’enfin revenir sur Tableau. Maintenant, j’occupe un rôle de designer plus traditionnel en utilisant Figma. En tant que «concepteur de visualisation de données» désignée pour mon équipe, j’ai choisi d’utiliser Figma pour créer des wireframes autour des produits ayant une forte concentration de visualisations de données.
L’objectif principal de la création d’un graphique avec Figma est de communiquer ce à quoi le graphique devrait ressembler et d’interagir avec d’autres parties prenantes et développeurs. Si votre wireframe est transmis aux développeurs pour être ensuite implémenté, votre graphique n’a pas besoin d’être parfait au pixel près par rapport au code, mais doit communiquer exactement ce que vous aviez envisagé. Bien que j’adore les fonctionnalités de Figma (tels que les bibliothèques de composants d’interface utilisateur intégrés, les palettes personnalisées, le prototypage et la facilité de partage du travail), j’ai réalisé qu’il manquait certaines fonctionnalités clés lorsque j’ai été chargée de créer mon premier graphique. J’ai étudié les fonctionnalités disponibles, tel que l’outil pour créer des formes et les outils de dessin, cependant je me suis rendue compte qu’il serait utile de pouvoir générer, avec l’aide d’un programme, un graphique avec des données précises pour éviter de jouer avec l’outil stylo pendant des heures. J’ai donc exploré le monde des plugins graphiques de Figma pour vous, pour que vous n’ayez pas à le faire.
Voici ce que j’ai considéré quand j’ai étudié les plugins de graphique Figma:
- Peut-on importer des données? Ou est-on coincé avec un ensemble de données générées?
- Quels éléments graphiques sont disponibles?
- À quoi ressemblent les couches imbriquées? Le résultat final est-il clair ou faut-il encore faire des ajustements supplémentaires?
- Comment le graphique interagit-il avec le “Frame” (artboard)?
Navigation, téléchargement et utilisation d’un plugin de graphique
Si vous êtes nouveau sur Figma, les plugins Figma sont des extensions construites par la communauté qui varie des créateurs de kits d’interface utilisateur, à la conversion de votre conception en code.
Les plugins se trouvent dans la section Communauté du le panneau latéral gauche.
Vous trouverez tous vos plugins dans la barre d’outils déroulante. En fonction de l’utilisation, vous devrez peut-être sélectionner un “Frame” avant d’utiliser un plugin.
Vous trouverez ci-dessous quelques-uns des plugins de graphique Figma que j’ai essayés.
Datavizer
J’étais assez excitée de trouver ce plugin de graphique construit par Amelia Wattenberger appelé Datavizer. Il a, bien sûr, une très belle interface utilisateur.
J’aime la possibilité d’ajouter les données avec le plugin. Il saisit parfaitement les noms de colonnes des fichiers CSV ou JSON et permet de choisir le triage des dimensions. Les deux seuls inconvénients sont qu’il n’y a que trois types de graphiques et que les graphiques générés n’ont pas d’étiquetage intégré, mais cela reste une préférence. Il est à noter également que le Frame ne détermine pas la largeur ni la hauteur du graphique.
Charts
Charts est une autre option populaire pour créer des visualisations de données dans Figma.
Vous remarquerez que ce plugin a quelques options de graphique supplémentaires mais ne peut pas accepter des données personnalisées; vous êtes donc coincé avec les données déjà générées. Toutefois, ce plugin est une excellente option pour les utilisateurs qui veulent graphique pour leurs wireframes sans avoir besoin d’un graphique reflétant des données réelles. J’adore la possibilité de masquer le quadrillage et de définir des axes avec des marques ou libellés que vous pouvez ensuite personnaliser. Le graphique sera construit dans le cadre sélectionné mais devra probablement être redimensionné pour s’adapter. J’ai remarqué que ce graphique en courbes générait une quantité assez importante de couches et de composants dans des composants, ce qui rend le nettoyage assez difficile.
Chart
Le plugin Chart offre une version gratuite et une version payante. La version payante donne accès à plus de types de graphiques (environ 15 contre environ trois). Il existe également une fonctionnalité appelée «modèles», qui vous permet de saisir du JSON personnalisé, ajouter des coins arrondis ou d’autres interfaces utilisateur spécifiques pouvant être liées à votre marque. La version payante coûte environ 20 USD, mais en vaut la peine si vous travaillez avec beaucoup de graphiques avec Figma.
Il y a tellement de choses que j’aime dans ce plugin. L’intégration des feuilles de calcul Google est impressionnante dans sa facilité d’utilisation et fait gagner beaucoup de temps. Les graduations des axes sont des zones de texte vides, vous permettant de décider de la plage de données ou des nombres. Vous pouvez importer des données de plusieurs manières: générées aléatoirement, copier-collées, à partir d’un JSON ou via l’intégration de la feuille Google méntionnée ci-dessus. Les différents types de graphiques sont excellents et tiennent bien dans un dossier d’interface utilisateur moderne. Le plugin Chart s’adapte parfaitement à la taille du Frame que vous avez, ce qui est un énorme bonus. Un autre avantage: les couches générées sont petites et gérables, ce qui permet une intégration facile avec d’autres composants.
Les plugins graphiques sont pratiques lorsque vous essayez de communiquer ce à quoi un graphique devrait ressembler. Ils éliminent la dépendance à l’outil stylo et la plupart des plugins graphiques sont suffisamment personnalisables pour que vous puissiez les ajuster en fonction des couleurs de votre marque, de votre logo, ou de votre système de conception. J’utilise Chart le plus car il offre la plus grande variété de graphiques et de flexibilité avec les données. Datavizer, Charts et Chart sont ceux que j’ai explorés, mais il y en a probablement plus!
Avez-vous utilisé d’autres plugins graphiques utiles avec Figma? Faites-moi savoir ci-dessous!
Simone is a data visualization designer and developer at one of the world’s largest clinical trial data companies. She has a Master’s in data visualization from Parsons School of Design. She’s also a proud Franco-Ontarienne, currently based in Brooklyn. Say hi on Instagram or Twitter.
