🎓 Figma + Google sheet = des graphiques dynamiques !

L’intérêt. Connaissez-vous Figma ? C’est le logiciel graphique quasi incontournable des web designers aujourd’hui. C’est aussi un outil qui fourmille de plug-ins en option. Parmi eux, Google Sheets Sync (gratuit), créé par le designer Dave Williames, qui permet d’intégrer du texte et des images dans des maquettes via Google Sheets. Mais aussi… de changer des paramètres d’objets : taille, forme, couleur, etc. Vous nous voyez venir ? Chez WeDoData, on l’a détourné pour créer des graphiques directement branchés à un tableur !

Les pré-requis. Avoir un compte Figma (gratuit), un compte Google (gratuit), et maîtriser les bases de Figma ainsi que celles de Google Sheet. Si besoin, voici où démarrer sur Figma [en anglais 🇬🇧] et Google Spreadsheet.

Le mode d’emploi. Faisons-nous la main sur un graphique à barres horizontales en 3 étapes :

1/ Créez un nouveau projet sur Figma. Placez 5 rectangles (outil R) de la même taille, espacés chacun de quelques pixels. Ce seront les 5 barres de notre barchart. Dans les layers à gauche, nommer ces 5 barres #BARSIZE : le signe # permettra au plug-in d’identifier les objets et d’interagir avec eux.

2/ Créez une feuille de calcul Google Sheet et dans “Partager”, autorisez la lecture du document à “Tous les utilisateurs qui ont le lien” ce qui permettra au plug-in de s’y connecter.

Dans ce tableur, intitulez l’en-tête de la première colonne BARSIZE (sans le #) et remplissez les 5 cellules en-dessous avec vos données suivies de la lettre “w”. Cet ajout permet au plug-in de modifier la largeur (width) d’un objet dans Figma. Par exemple : 100w = 100 pixels.

3/ Sur Figma, installez le plug-in Google Sheet Sync. Dans la box qui apparaît, renseignez l’URL de votre feuille de calcul Google Sheet. Cliquez sur “Fetch & Sync” et… magie 🪄, la taille de vos barres s’est adaptée aux valeurs de votre tableur !

Les limites. Ce plug-in n’étant pas conçu initialement pour faire des graphiques, on peut s’en servir pour des barres simples, des barres empilées, des bulles… Mais pas de graphiques plus évolués.

⚡C’est pourquoi, chez WeDoData, nous avons créé notre propre outil permettant de synchroniser un tableur avec des graphiques sur un document Figma. Il s’appelle AutoGraph et il permet un large éventail de dataviz. N’hésitez pas à nous contacter pour qu’on vous montre ça 😉

Quelques formes graphiques disponibles avec le plugin Figma AutoGraph de Wedodata

POUR ALLER ENCORE PLUS LOIN

• La documentation de Google Sheet Sync, pour celles et ceux qui veulent aller plus loin et maîtriser ce plug-in à la perfection : tout y est expliqué, noir sur blanc [et en anglais 🇬🇧]