Tutoriel vidéo : animez et exportez vos bannières en HTML depuis Figma
Cette vidéo montre comment animer et exporter en quelques secondes des bannières HTML prêtes pour la production depuis Figma.
Partir d’une page Figma vierge
Pour vous aider à concevoir rapidement vos propres bannières, Bannerify propose de créer automatiquement quelques formats de bannière standard lorsque vous lancez le plugin sur une page Figma vide.
Structurer les calques de vos frames de bannière Figma
Les calques enfants directs de chaque frame servent par défaut d’éléments de chaque bannière. Comme vous le verrez dans les sections ci-dessous, chacun de ces éléments peut être animé individuellement dans le plugin Bannerify pour créer vos bannières.
Les calques enfants masqués sont inclus dans vos frames de bannière. Tout calque enfant direct masqué dans Figma apparaît quand même dans la timeline des calques de Bannerify. Cela vous permet de masquer visuellement des calques enfants pendant que vous concevez des bannières dont certains éléments doivent apparaître et disparaître en plusieurs étapes. Bannerify affiche automatiquement ces calques masqués comme s’ils étaient visibles.
Masquer des calques Figma dans la timeline. Si vous ne voulez pas inclure un calque de votre frame Figma dans la timeline, renommez-le avec le préfixe hide- (par exemple hide-RectangleBackground). Ce calque ne sera alors inclus ni dans la timeline du plugin ni dans les exports de vos bannières.
Partir de bannières déjà conçues
Si vous avez déjà conçu des bannières dans Figma, lancer le plugin Bannerify sur votre page charge automatiquement la liste des frames ou instances de votre fichier qui peuvent servir de bannières.
Vous pouvez cocher ou décocher uniquement les bannières que le plugin doit charger, puis cliquer sur le bouton Load Checked Banners, ou cliquer sur le bouton Load All Banners pour les charger toutes automatiquement.
Actualiser ou recharger plusieurs bannières ou toutes les bannières
Si vous ajoutez ou modifiez des calques dans votre fichier Figma alors que Bannerify est déjà ouvert, ils ne sont pas mis à jour automatiquement. Il existe toutefois deux façons d’actualiser vos bannières.
Pour actualiser toutes les bannières de votre timeline ou charger de nouvelles bannières depuis votre fichier Figma, cliquez sur l’icône Refresh dans le menu de l’en-tête principal du plugin.
L’écran initial de sélection des bannières s’affiche de nouveau : vous pouvez cocher ou décocher uniquement les bannières que le plugin doit charger, puis cliquer sur le bouton Load Checked Banners, ou cliquer sur le bouton Load All Banners pour les charger toutes automatiquement. Les calques modifiés apparaissent dans la timeline de Bannerify et dans les aperçus en temps réel.
Actualiser une seule bannière
Si vous ajoutez ou modifiez des calques dans votre fichier Figma alors que Bannerify est déjà ouvert, ils ne sont pas mis à jour automatiquement. Il existe toutefois deux façons d’actualiser vos bannières.
Pour actualiser rapidement une seule bannière, cliquez sur l’icône Refresh dans la barre d’en-tête de cette bannière : seuls ses calques sont actualisés, et les calques modifiés apparaissent dans la timeline de Bannerify et dans les aperçus en temps réel.
Définir une couleur de fond unie pour la bannière
Pour définir la couleur de fond unie d’une bannière, réglez le Fill uni de ce frame sur la couleur voulue dans Figma. Cette couleur peut être visible brièvement avant le chargement de vos images.
Faire défiler automatiquement les bannières jusqu’à l’affichage
Pour passer facilement d’une bannière à l’autre, Bannerify fait automatiquement défiler la timeline jusqu’à une bannière lorsque vous cliquez sur le calque correspondant (ou sur l’un de ses calques enfants) dans la page Figma.
Cela fonctionne aussi dans l’autre sens : si vous cliquez sur l’icône frame ou instance au-dessus de l’aperçu d’une bannière dans la timeline, Figma fait automatiquement défiler et zoomer la page jusqu’au calque correspondant.
Redimensionner la fenêtre du plugin
Si vous utilisez un écran plus grand (ou plus petit), Bannerify vous permet de redimensionner la fenêtre du plugin pour l’utiliser plus confortablement et mieux voir la timeline selon la taille de votre écran. Vous pouvez choisir une taille de fenêtre, de la plus petite à la plus grande (4K), dans la liste déroulante des tailles du menu de l’en-tête principal du plugin.