Tutoriel vidéo : ajoutez des pop-ups de texte enrichi à vos bannières HTML Figma

Cette vidéo montre comment ajouter des pop-ups de texte enrichi à vos bannières HTML Figma avec le plugin Bannerify.

Si votre bannière doit inclure une pop-up de texte enrichi défilant (et refermable), qui s’ouvre quand on clique sur un calque précis de la timeline, sélectionnez les calques déclencheurs voulus dans chacune de vos bannières, puis choisissez les options d’animation de la section Generate Popup Overlay Disclaimers dans la fenêtre des actions en masse, en bas du plugin (elle apparaît lorsque plusieurs calques sont cochés dans votre timeline).

Une fois les réglages d’animation de la pop-up définis, cliquez sur le bouton Create Popup Links : le plugin crée automatiquement un composant « Popup » (avec un calque de texte et un bouton de fermeture) sur votre page Figma, et relie chacun des calques sélectionnés, en tant que déclencheur, à ce nouveau composant Popup grâce aux liens de prototype natifs de Figma.

Vous pouvez modifier le contenu du calque de texte, ajuster la taille de police et changer les couleurs de remplissage unies du fond de la pop-up, de l’icône de fermeture et du calque de texte.

Lorsque vous exportez vos bannières HTML, le plugin recherche automatiquement ces liens de prototype Figma et le composant Popup vers lequel ils pointent, puis génère le code des déclencheurs cliquables et de la pop-up dans le jeu de bannières exporté.

Personnaliser le style des barres de défilement

Pour personnaliser le style de la barre de défilement des calques de texte tronqué défilant ou du texte des pop-ups, activez Inject Custom Code dans vos réglages d’export HTML, puis collez ce code dans le champ Custom CSS.

:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

Modifiez les valeurs en haut du code pour changer la couleur de la barre, la couleur de la piste, la largeur, la hauteur et le rayon des coins. Certains navigateurs et appareils mobiles peuvent continuer d’afficher les barres de défilement avec le style natif du système, mais le CSS s’applique partout où le client autorise la personnalisation des barres de défilement.

Remarque : ce composant est volontairement très simple, avec un seul calque de texte (pour les mentions légales) et le bouton de fermeture. Vous pouvez personnaliser le texte, les styles de police et les couleurs, mais toute autre personnalisation ou tout calque supplémentaire risque de casser le HTML exporté.