Tutoriel vidéo : créer des bannières animées multiscènes dans Figma
Cette vidéo montre comment créer des bannières animées multiscènes dans Figma (et les exporter en HTML ou en vidéo) avec le plugin Bannerify.
Qu’est-ce qu’une bannière multiscène ?
Par défaut, Bannerify traite chaque frame Figma de premier niveau comme une bannière distincte.
Lorsque vous activez Use Figma sections as multi-scene banners, Bannerify traite chaque section Figma comme une seule bannière, et chaque frame de même taille de cette section comme une scène distincte de la même timeline.
C’est idéal pour enchaîner plusieurs états ou messages créatifs dans un seul export de bannière.
Bannerify suit l’ordre visuel des calques de frames Figma à l’intérieur de la section : si vous déplacez les frames de scène dans Figma, l’ordre des scènes dans Bannerify est mis à jour après l’actualisation et le rechargement des bannières.
Configuration rapide
- Créez vos frames de bannière dans Figma comme d’habitude.
- Sélectionnez les frames qui doivent devenir les scènes d’une même bannière.
- Faites un clic droit et choisissez Wrap in new section.
- Dans Bannerify, cliquez sur Refresh All Banners pour revenir à l’écran de chargement.
- Activez Use Figma sections as multi-scene banners.
- Cliquez sur Load Checked Banners (ou Load All Banners).
Vous devriez maintenant voir une bannière par section, avec les calques regroupés par scène dans la timeline.
Workflow étape par étape
1. Lancer Bannerify
Ouvrez Bannerify depuis les plugins Figma. Si vous l’utilisez souvent, enregistrez-le dans votre liste Saved plugins pour y accéder rapidement.
2. Vérifier le comportement par défaut (facultatif)
Avant que vous activiez le mode sections, Bannerify charge les frames de premier niveau comme des bannières distinctes.
C’est utile pour vérifier que vos frames sources sont bien détectés.
3. Regrouper les frames de scène dans une section
Sélectionnez tous les frames à combiner en une seule bannière multiscène, puis utilisez :
Clic droit -> Wrap in new section
En mode sections, cette section devient le conteneur de votre bannière unique.
4. Recharger et passer en mode sections
Cliquez sur Refresh All Banners dans Bannerify, puis activez :
Use Figma sections as multi-scene banners
Bannerify analyse alors les sections au lieu des frames individuels.
5. Charger les bannières de sections
Cliquez sur Load Checked Banners ou Load All Banners.
Vous verrez alors :
- une bannière par section ;
- des regroupements par scène dans la timeline (Scene 1, Scene 2, Scene 3, etc.) ;
- des libellés et des commandes de calques qui tiennent compte des scènes.
Si vous voulez que la Scene 3 apparaisse avant la Scene 2, ou que la Scene 1 passe à la fin, placez les frames de scène dans l’ordre visuel des calques de frames Figma souhaité à l’intérieur de la section, puis actualisez et rechargez la section dans Bannerify.
6. Ajuster la durée de la timeline pour enchaîner les scènes
Si des scènes se chevauchent, augmentez la durée de la timeline (par exemple de 5s à 15s) et cliquez sur Update Timeline Length.
Ajustez ensuite le minutage des calques pour que chaque scène entre et sorte à son tour sur la timeline allongée.
Les modifications de la durée de la timeline s’appliquent immédiatement à l’aperçu et aux exports GIF/vidéo, y compris pour les bannières multiscènes. Vous n’avez pas besoin de recharger les bannières après avoir modifié la durée.
Utilisez les commandes de minutage groupé des scènes pour décaler plus rapidement les blocs de minutage des scènes, au lieu d’ajuster chaque calque un par un.
7. Prévisualiser et exporter
Utilisez la lecture de l’aperçu pour valider l’ordre et le minutage des scènes, puis exportez selon vos besoins :
- export HTML pour les paquets de code destinés aux régies et aux plateformes ;
- export GIF pour une sortie en image animée ;
- export MP4/vidéo pour les livrables vidéo.
Toutes les scènes d’une section sont exportées sous la forme d’une seule séquence de bannière.
Travailler avec plusieurs formats et plusieurs sections
Vous pouvez dupliquer des sections pour créer d’autres formats ou variantes de bannière.
À l’actualisation, Bannerify charge chaque section comme une bannière distincte, chacune avec son propre ensemble de scènes. Vous pouvez ainsi exporter en un seul lot plusieurs dimensions et plusieurs variantes multiscènes.
Condition importante : les frames de scène doivent avoir les mêmes dimensions
Pour être traités comme les scènes d’une même bannière, les frames doivent avoir des dimensions identiques à l’intérieur de la section.
S’il y a ne serait-ce qu’1px de différence sur un frame, Bannerify peut l’exclure de l’ensemble de scènes de cette section.
Exemple : si deux frames mesurent 269x250 et un autre 268x250, Bannerify peut ne charger comme scènes que les frames de même taille.
Dans ce cas :
- Donnez exactement la même largeur et la même hauteur à tous les frames de scène de la section.
- Actualisez les bannières.
- Rechargez la bannière de la section.
Liste de vérification en cas de problème
- Seules certaines scènes se chargent : vérifiez que tous les frames de la section ont des dimensions identiques.
- Les modifications de la section n’apparaissent pas : cliquez sur Refresh All Banners et rechargez.
- L’ordre des scènes est incorrect : réorganisez les frames dans la section Figma, puis cliquez sur Refresh All Banners et rechargez.
- Les scènes se chevauchent trop : augmentez la durée de la timeline et répartissez de nouveau les minutages.
- L’export diffère de l’aperçu : revérifiez le minutage des calques et l’ordre des scènes après avoir modifié la timeline.
En résumé
Utiliser les sections Figma avec Bannerify est le moyen le plus rapide de créer des séquences de bannières plus longues et narratives, sans tout faire tenir dans un seul frame géant.
Concevez chaque scène comme un frame normal, regroupez-les dans une section, activez le mode sections, puis animez et exportez le tout comme une seule bannière.