🗜 Avec Figma, préparez des graphiques totalement responsives

L’intérêt. Faire des graphiques de données sur Figma, c’est une chose. Quid de leur intégration dans un projet web où la question du “responsive design” est impérative ? Figma offre évidemment les outils pour créer des interfaces qui s’adaptent à toutes les tailles d’écran. Voici comment appliquer cela sur les graphiques : le barchart nous servira ici de modèle.

Les pré-requis. Avoir un compte Figma (gratuit) et maîtriser les bases de ce dernier. Et plus précisément ce qui concerne l’Auto Layout (si besoin, voici un Playground entièrement dédié au sujet).

Les grands principes. L’idée va être d’utiliser la puissance d’Auto Layout pour que 📊 les barres qui composent votre graphique s’adaptent en largeur lorsque vous augmentez / réduisez le conteneur dans lequel elles se trouvent.

Nous explorons deux cas de figure dans le tutoriel :

• des barres fixes qui se répartissent à distance égale les unes des autres dans leur conteneur
• des barres fluides qui s’épaississent ou s’amincissent en se répartissant également à distance égale les unes des autres

🎁 Cadeau. Pour vous offrir un tuto clair et précis, on vous propose de basculer sur le fichier Figma dédié. Les avantages ? Être directement dans l’outil, pouvoir faire votre propre copie du document, manipuler et récupérer les ressources.

Ce qu’il faut retenir. Une fois la logique d’Auto Layout comprise, on peut imaginer le responsive design d’autres types de graphiques (line chart, treemap, nuage de points…) et aller plus loin en ajoutant des axes, des légendes, etc. Sachez que chez WeDoData, nous avons développé notre plugin Figma maison qui permet d’automatiser ce type de graphique (et bien d’autres) en le branchant à de vraies bases de données : AutoGraph.

📍N’hésitez pas à nous partagez vos créa sur les réseaux sociaux en tagguant @we_do_data.

POUR ALLER ENCORE PLUS LOIN

• Pour celles et ceux qui préfèrent partir d’une libraire Figma existante de graphes responsives “prêts à l’emploi”, jetez un œil sur le fichier Data Visualisation.
• Pour les plus mordu·e·s de responsive design, cet article vous explique comment gérer le responsive design de graphiques plus spécifique (le 🍩 donut pour ne pas le citer).