🤹‍♀️ Animer un graphique avec Figma et l’exporter en vidéo/Gif
L’intérêt. Et si on animait un graphique sans passer par un logiciel de motion design (After Effects pour ne pas le citer) ? Et bien maintenant, c’est possible avec Figma.
Les pré-requis. Maîtriser Figma et notamment la partie “prototype” avec ses options d’animations. Vous ne savez pas faire ? Pas de souci, voici le tuto qu’il vous faut. Pour les besoins de ce DIY, il faudra également installer le plugin Figma Aninix qui servira juste pour l’export vidéo ou Gif. Toute l’animation sera faite uniquement avec les outils disponibles dans Figma.
Les grands principes. L’idée va être de créer 2 états d’un même graphique et d’animer le passage d’une scène à l’autre grâce au mode prototype de Figma et plus précisément aux options “After delay” et “Smart animate”. Une fois votre animation en place, vous pourrez l’exporter avec Aninix.
Ce qu’il faut retenir. Pour être animé, un élément doit se trouver au moins dans deux frames, avoir le même nom, et des paramètres (couleur, taille, position…) différents d’une frame à l’autre. Pour les plus aguerris, utilisez les animations dans les composants variants pour réaliser des animations asynchrones.
Cadeau ! On vous propose de passer directement dans l’outil pour être dans le vif du sujet où on vous a préparé un pas-à -pas à copier. N’hésitez pas à nous partagez vos créa sur les réseaux sociaux en tagguant @we_do_data. Let’s go ⬇️
Un exemple inspirant. Avec un peu de bricolage et une bonne compréhension des logiques d’animation dans Figma, vous pouvez imaginer des déroulés plus complexes. Voici un exemple, réalisé uniquement dans Figma par WeDoData pour l’Institut National de la Propriété Industrielle (INPI) : l’évolution des dépôts de brevets, marques, dessins et modèles depuis 2015.
Cliquez sur l’image pour regarder la vidéo sur la chaîne YouTube de l’INPI
POUR ALLER ENCORE PLUS LOIN
- Pour les habitué·e·s des interfaces d’animation, le plugin Figmotion permet de faire du motion design plus pointu dans Figma. Véritable outil dans l’outil, il propose une timeline, des animations basées sur des expressions et bien plus encore.
