Tutoriel vidéo : ajouter du HTML, du CSS et du JavaScript personnalisés aux exports de bannières Figma

Cette vidéo montre comment ajouter du HTML, du CSS et du JavaScript personnalisés aux exports de bannières Figma avec le plugin Bannerify.

Si vous devez ajouter votre propre code HTML/CSS/JavaScript à tous vos exports de bannières HTML, activez l’option Inject Custom Code dans les réglages d’export. Vous pouvez alors ajouter du HTML personnalisé avant la balise fermante </body> (pour ajouter du contenu) ou </head> (pour ajouter des balises meta ou des liens vers des ressources), ajouter du CSS personnalisé dans une nouvelle balise style, ou ajouter du code JavaScript personnalisé dans une nouvelle balise <script></script>.

Exemple de fenêtre de mentions légales affichable. Vous pouvez vous inspirer de cet exemple de code HTML/CSS/JS sur CodePen, un exemple simple d’usage courant de cette fonctionnalité, qui injecte au-dessus de vos bannières une fenêtre de mentions légales que l’on peut afficher ou masquer. N’hésitez pas à copier et à modifier les styles et le contenu selon vos besoins.

Préréglages de code personnalisé enregistrés (facultatif)

La fonctionnalité Saved Custom Code Presets vous permet d’enregistrer et de réutiliser différentes configurations de code HTML, CSS et JavaScript personnalisé lors de l’export de vos bannières. Pour l’utiliser, remplissez les quatre zones de code disponibles (Head HTML, Body HTML, CSS et JavaScript), saisissez un nom descriptif, puis cliquez sur Save as New Preset pour enregistrer cette configuration et la réutiliser plus tard.

Une fois un préréglage enregistré, vous pouvez le charger rapidement depuis le menu déroulant Load Saved Preset (Optional) pour remplir instantanément toutes les zones de code avec la configuration enregistrée. Vous n’avez plus besoin de copier-coller manuellement des extraits de code chaque fois que vous exportez des bannières aux exigences différentes. Vous pouvez gérer vos préréglages en supprimant ceux dont vous n’avez plus besoin, ou mettre à jour un préréglage existant en le chargeant, en le modifiant, puis en l’enregistrant sous le même nom. Tous les préréglages sont stockés localement dans votre application Figma actuelle (grâce à l’API clientStorage de Figma) et sont conservés chaque fois que vous rouvrez le panneau de code de Bannerify, quel que soit le fichier Figma : vous gardez ainsi facilement le même code d’une session d’export à l’autre.

Ajouter des polices personnalisées au texte HTML modifiable

Utilisez un fichier de police web pour chaque graisse et chaque style utilisés par votre texte modifiable. Installer une police dans Figma ne l’inclut pas dans un export HTML.

1. Procurez-vous les fichiers .woff2 ou .woff approuvés par la marque pour un usage web.
2. Activez l’export du texte en paragraphes. Laissez le texte modifiable déverrouillé dans Figma.
3. Dans le panneau d’export HTML, activez Inject Custom Code, puis choisissez Add custom CSS styles.
4. Collez une règle @font-face dans le champ CSS, sans balise <style> autour. Remplacez la famille d’exemple par le nom de famille exact utilisé dans Figma et dans la déclaration font-family du texte exporté, et faites correspondre la graisse et le style réels de la police.

@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

5. Ajoutez une règle distincte pour chaque graisse ou style supplémentaire (par exemple 700 pour le gras ou italic pour un fichier italique).
6. Exportez et décompressez la bannière. Placez les fichiers de police dans un dossier fonts à côté du fichier HTML de chaque bannière, puis recompressez l’ensemble du contenu de cette bannière. Bannerify injecte le CSS, mais ne copie pas ces fichiers de police locaux dans le ZIP. Les URL de police relatives sont résolues à partir de l’emplacement de la feuille de style ; ajustez le chemin si le CSS est enregistré dans un autre dossier.
7. Testez le paquet via un serveur web local ou l’aperçu de la plateforme de destination, y compris sur un appareil où la police n’est pas installée. Vérifiez le chargement des polices, les retours à la ligne et les textes de remplacement plus longs. Les fichiers de police comptent dans le poids du paquet, et la destination doit les autoriser.

Vous pouvez aussi utiliser l’URL HTTPS directe d’un fichier de police hébergé si votre plateforme publicitaire autorise les requêtes de polices externes. Le serveur de polices doit autoriser le chargement de polices cross-origin. Consultez la référence MDN sur @font-face.