Si vous avez déjà conçu un ou plusieurs frames de bannière dans Figma, Bannerify peut générer à partir de ces originaux de tout nouveaux frames de bannière dans plusieurs formats.

C’est utile lorsque vous avez finalisé un format maître solide et que vous voulez que Bannerify produise une première version des autres formats publicitaires standard, sans reconstruire chaque mise en page à la main.

Ce que fait cette fonctionnalité

• Elle duplique les frames ou instances Figma de premier niveau sélectionnés dans de nouveaux frames.
• Elle vous permet de choisir plusieurs formats de bannière standard à la fois.
• Elle prend en charge des formats de sortie personnalisés.
• Elle peut, en option, réorganiser les textes, logos, CTA et éléments graphiques pour chaque nouveau ratio.
• Elle laisse vos frames sources d’origine intacts.

Utilisez-la comme un raccourci de production, pas comme un substitut à la relecture créative. Bannerify vous rapproche très vite du résultat, et vous pouvez faire les derniers ajustements de design directement dans Figma.

Étape 1. Ouvrir l’onglet Generate

Ouvrez Bannerify dans Figma, puis passez de l’onglet habituel Load Banners from Figma Frames à l’onglet Generate New Banner Sizes from Figma Frames.

Bannerify analyse la page en cours à la recherche des frames et instances Figma de premier niveau qui peuvent servir de bannières sources.

Étape 2. Sélectionner vos frames sources

Cochez le ou les frames sources à utiliser comme point de départ.

Les bons candidats sont notamment :

• des bannières terminées ;
• un format maître solide, comme 300x250 ou 1200x628 ;
• des frames bien structurés, aux éléments clairement groupés.

Bannerify génère de nouveaux frames à partir des sources sélectionnées ; il n’écrase pas les originaux.

Étape 3. Choisir les formats de sortie

Activez les formats de bannière à générer.

L’onglet Generate propose un ensemble de formats publicitaires courants, par exemple :

• Leaderboard (728x90)
• Medium Rectangle (300x250)
• Large Rectangle (336x280)
• Skyscraper (120x600)
• Wide Skyscraper (160x600)
• Half-Page Skyscraper (300x600)
• Banner (468x60)
• Square (250x250)

Si vous avez besoin d’un format non standard, saisissez une largeur et une hauteur personnalisées, puis cliquez sur Add Custom Size.

Étape 4. Activer la mise en page intelligente (facultatif)

Si vous voulez que Bannerify adapte automatiquement le contenu de chaque nouvelle bannière, activez :

• Auto re-layout new Figma frame content layers (BETA)

Lorsque cette option est activée, Bannerify essaie de redimensionner et de repositionner le contenu de chaque nouveau frame pour qu’il s’adapte plus naturellement au ratio cible. Il essaie aussi de garder le contenu proche de sa position d’origine dans le frame : les mises en page qui étaient chargées vers le haut ou alignées sur un bord risquent moins de dériver vers le centre.

Lorsqu’elle est désactivée, Bannerify crée quand même les nouveaux formats de frame, mais ne redimensionne que le frame extérieur et garde le placement du contenu intérieur plus proche de la mise en page source.

Étape 5. Cliquer sur Generate

Cliquez sur le bouton Generate pour créer les formats sélectionnés.

Bannerify crée de nouveaux frames Figma sur la page, nommés d’après le frame source suivi du format de sortie, par exemple :

• Homepage Promo / Leaderboard (728x90)
• Homepage Promo / Medium Rectangle (300x250)
• Homepage Promo / Half-Page Skyscraper (300x600)

Ce que la mise en page intelligente essaie d’adapter

Lorsque l’option de réorganisation est activée, Bannerify essaie de :

• redimensionner et repositionner les blocs de texte ;
• garder les titres lisibles dans les formats étroits et hauts, ou larges et très bas ;
• garder le contenu placé en haut, au milieu ou en bas proche de sa position d’origine ;
• éviter de trop réduire l’ensemble de la composition lorsque le nouveau format garde un ratio proche de l’original ;
• préserver l’espacement autour des zones de texte larges ;
• déplacer les éléments décoratifs et les formes pour les adapter au nouveau ratio ;
• garder ensemble le contenu groupé lorsque c’est possible ;
• réduire les chevauchements et débordements évidents.

Le résultat exact dépend de la structure du frame source et de l’écart de ratio entre le format d’origine et le format cible.

Quand activer ou désactiver la réorganisation

Activez-la lorsque

• vous voulez une première version rapide de plusieurs nouveaux formats ;
• le contenu de votre bannière source est clairement structuré ;
• vous voulez que Bannerify fasse le gros du travail avant les finitions.

Laissez-la désactivée lorsque

• vous voulez seulement créer rapidement les nouveaux formats de frame ;
• vous prévoyez de tout repositionner vous-même à la main dans Figma ;
• la mise en page source est très spécifique et vous voulez un contrôle manuel précis.

Bonnes pratiques pour de meilleurs résultats

Vous obtiendrez les résultats les plus réguliers si vos bannières sources sont clairement structurées dans Figma.

Gardez les éléments importants en enfants directs ou en groupes logiques

Par exemple :

• un groupe pour le titre ;
• un groupe pour le texte principal ;
• un groupe pour le CTA ou le bouton ;
• un groupe pour le logo ;
• un groupe pour l’image produit.

Bannerify identifie ainsi plus facilement le rôle de chaque élément et peut le réorganiser de façon cohérente.

Évitez un seul grand frame à plat rempli de calques sans rapport

Si tous les éléments sont posés en vrac dans le frame racine, sans regroupement logique, Bannerify dispose de moins d’informations sémantiques.

Donnez aux textes longs une zone de texte adaptée

Si votre bannière contient un long texte juridique ou des mentions légales, donnez au calque de texte une largeur réaliste dans le frame source.

Si le texte doit rester défilant dans les exports HTML, consultez Calques de texte défilant.

N’utilisez les sections que pour les bannières multiscènes

La fonctionnalité Generate crée de nouveaux formats à partir de frames existants.

Si vous voulez combiner plusieurs frames en une seule séquence de bannière animée, consultez Bannières multiscènes.

Après la génération

Les bannières générées sont des frames Figma classiques. Vous pouvez :

• ajuster la mise en page à la main ;
• les animer dans Bannerify ;
• les exporter en HTML, GIF, MP4, WebM ou dans d’autres formats pris en charge.

Si vous modifiez ensuite le design source d’origine, générez un nouveau lot.

Conseils de dépannage

• Si les mises en page générées demandent trop de corrections manuelles, désactivez l’option de réorganisation et redimensionnez les variantes à la main.
• Si les formats chargés en texte demandent encore des ajustements, simplifiez la mise en page source et relancez la génération.
• Si les bannières générées contiennent trop de texte pour les très petits formats, raccourcissez le texte source ou utilisez du texte défilant ou en pop-up.
• Si vous voulez que Bannerify traite plusieurs frames comme une seule bannière, utilisez les sections Figma au lieu de la fonctionnalité Generate.

Résumé

La fonctionnalité Generate est le moyen le plus rapide de transformer une ou plusieurs bannières Figma terminées en un jeu complet de nouveaux formats de bannière.

Sélectionnez vos frames sources, choisissez vos formats de sortie, décidez si vous activez Auto re-layout new Figma frame content layers (BETA), et laissez Bannerify générer les nouveaux frames directement sur la page.