Publié le 2026-10-12 · Par L'équipe MarkupGen
Créer des bannières HTML5 depuis Figma avec MarkupGen : concevoir, convertir et modifier dans Studio Editor
Une bannière paraît terminée dans Figma bien avant de l'être dans le code. Il faut encore reconstruire le titre, le visuel produit et le bouton en HTML et CSS, puis recommencer quand le texte change, que le bouton se décale de 8px ou que la campagne réclame trois formats de plus. L'essentiel de ce temps part dans de petites corrections, pas dans la première version.
MarkupGen raccourcit les deux moitiés du travail. Il convertit un frame Figma en HTML et CSS, puis vous laisse continuer à ajuster le résultat visuellement dans Studio Editor, sans retourner dans Figma à chaque petite retouche. Cet article détaille tout le workflow Figma to HTML5 banner et précise ce que l'outil fait et ne fait pas.
Maquette Figma → plugin MarkupGen → génération HTML/CSS → Studio Editor → vérification → export
Convertir des maquettes Figma en bannières HTML5
Le workflow commence dans le plugin Figma MarkupGen. Sélectionnez le frame de la bannière et envoyez-le. Sa structure, ses textes et ses images arrivent dans votre espace de travail MarkupGen sous forme de projet, et c'est là que vous générez le code.
Une bannière est convertie comme n'importe quel autre frame ; ses composants habituels sont donc conservés :
- Titres et textes promotionnels restent du vrai texte, et non une partie d'une image aplatie.
- Visuels produit et images de fond sont exportés avec le projet.
- Boutons CTA gardent leur fond, leur rayon et leur libellé.
- Formes, calques, typographie et espacements sont lus dans le fichier de design, pas estimés d'après une capture.
Le résultat est un point de départ généralement proche de la maquette, pas la garantie d'une copie au pixel près. Les effets inhabituels, les polices personnalisées absentes de Google Fonts et les calques très superposés sont les premiers points à vérifier. Pour comprendre comment une maquette est lue, voir comment fonctionne la conversion Figma vers HTML/CSS de MarkupGen.
Modifier les bannières directement dans Studio Editor
C'est ce qui fait de MarkupGen plus qu'un générateur de code. Le code généré est rarement la dernière version d'une bannière : la mention légale s'allonge, le CTA a besoin d'air, le client veut un logo plus grand. Dans la plupart des outils, cela veut dire modifier le CSS à la main ou repartir de Figma et reconvertir.
Dans MarkupGen, vous activez l'Éditeur visuel dans la barre d'outils du projet — le mode d'édition du studio du projet — et vous travaillez sur la bannière elle-même.
Capture réelle de l'Éditeur visuel de MarkupGen (interface en anglais), ici avec la maquette d'une page produit. Sélectionner un élément ouvre ses champs de contenu, de lien et de disposition.
Sélectionnez un élément dans l'aperçu ou dans l'arbre HTML : l'inspecteur affiche ce que vous pouvez modifier.
| Ce que vous voulez corriger | Ce que propose Studio Editor |
|---|---|
| Textes et liens | Modifier le texte sur place (double-clic dans l'aperçu), définir un lien et son ouverture dans un nouvel onglet |
| Taille et espacements | Largeur, hauteur, margin et padding côté par côté |
| Position et alignement | Aligner dans un parent flex ou grid, changer l'ordre, définir un z-index, faire pivoter |
| Typographie | Taille, graisse, interligne et alignement du texte |
| Apparence | Couleur de fond et de texte, opacité, bordure, rayon, ombre et filtres comme le flou ou la luminosité |
| Visibilité | Masquer, afficher ou supprimer un élément |
Concrètement :
- Ajustez la mise en page et la position des éléments pris en charge sans ouvrir la feuille de style.
- Affinez taille, espacements et alignement avec des valeurs exactes.
- Faites des retouches visuelles sans repasser par Figma pour chaque petite modification.
- Voyez le résultat immédiatement, annulez ou rétablissez une étape, et enregistrez quand c'est bon.
- Réduisez les allers-retours entre design et code. Chaque modification est réécrite dans le HTML et le CSS : le code exporté est la bannière que vous voyez.
Deux limites à connaître. L'édition se fait en sélectionnant un élément et en modifiant ses propriétés dans l'inspecteur ; ce n'est pas un canevas libre en glisser-déposer. Et les modifications sont à sens unique : elles changent le code généré, pas votre fichier Figma.
Studio Editor est inclus dans l'offre Free, où il partage le quota mensuel de générations, et il est illimité dans les offres payantes.
Plusieurs options de génération de code
Pour la sortie HTML responsive, vous choisissez la boîte à outils CSS dans laquelle le code est écrit :
- Vanilla CSS : du CSS pur, sans dépendance, le plus simple à déposer dans un emplacement publicitaire ou un bloc de CMS.
- Tailwind CSS : des classes utilitaires, utiles si la bannière vit dans un site Tailwind.
- Bootstrap : pour les équipes dont les pages chargent déjà Bootstrap.
Les trois sont disponibles dans l'offre Free. Bulma, Materialize et Pico CSS sont aussi pris en charge et demandent une offre payante. En cas de doute, Vanilla CSS vs Bootstrap vs Tailwind les compare. Pour une bannière autonome, Vanilla CSS donne en général le fichier le plus léger et le plus portable.
L'offre Free comprend 5 générations de code par mois ; les offres payantes ont des quotas quotidiens.
Aperçu, Évaluation IA et ajustements
Après la génération, comparez l'aperçu à l'image de la maquette d'origine dans l'espace de travail et corrigez ce que vous voyez dans Studio Editor.
Avec une offre payante, l'Évaluation IA apporte un second avis. Elle compare le résultat généré à la maquette d'origine et renvoie une note de correspondance de 0 à 10 selon six critères pondérés — structure et mise en page, espacements et alignement, typographie, couleur, contenu et images, dimensions et effets — ainsi qu'une liste d'écarts et un prompt modifiable pour régénérer.
Considérez la note comme un guide pour savoir où regarder. Elle mesure la correspondance visuelle avec la maquette ; elle ne certifie pas qu'une bannière est parfaite au pixel, prête pour la production ou identique dans tous les navigateurs. Comment évaluer du HTML généré par IA passe en revue les vérifications à faire à la main.
Exporter et utiliser votre bannière HTML5
Quand la bannière est au point, enregistrez-la et téléchargez le HTML avec ses images et ses polices dans un .zip, ou copiez le code. Avec une offre payante, la même maquette peut aussi être exportée en composants React, Vue, Svelte ou Angular.
Il est utile de distinguer trois choses que l'on appelle souvent « bannière HTML5 » :
| Ce que c'est | Dans MarkupGen | |
|---|---|---|
| Bannière HTML/CSS | La mise en page de la bannière en balisage et styles | Oui : c'est le workflow principal |
| Animation et interactions | Mouvement, états hover, comportement scripté | En partie : des animations d'entrée prédéfinies (fade, slide, zoom, flip) jouées quand l'élément entre dans le viewport, avec durée, délai et easing ; pas d'éditeur de timeline ni de keyframes |
| Package pour régie publicitaire | Un ZIP conforme aux spécifications d'une régie : suivi des clics, limites de poids, règles de nommage | Non : vous le préparez et le validez vous-même |
L'export est donc un balisage propre qui vous appartient. Si la bannière part vers une régie publicitaire, ajoutez ensuite le code de click-through et le packaging de cette plateforme, puis passez-la dans son propre validateur. Si elle va sur votre site, une landing page ou un CMS, le HTML et le CSS exportés suffisent souvent. Pour les bannières destinées à un email, voir Email Ready.
À qui ce workflow est utile
- Développeurs frontend : ils évitent la reconstruction et consacrent leur temps à ce qui demande du jugement. Voir MarkupGen pour les développeurs.
- Designers et équipes créatives : ils corrigent espacements et textes sur la vraie bannière au lieu de rédiger une demande de modification.
- Équipes de marketing digital : elles transforment une maquette de campagne en balisage utilisable sans attendre un créneau de développement. Voir MarkupGen pour les équipes marketing.
- Agences et équipes de production publicitaire : elles traitent les retours clients par des retouches plutôt que par des reconstructions. Voir MarkupGen pour les agences.
Résumé du workflow
- Concevez la bannière dans Figma, un frame par format.
- Transférez le frame avec le plugin Figma MarkupGen.
- Générez le HTML et le CSS dans la boîte à outils voulue.
- Affinez la bannière dans Studio Editor.
- Vérifiez l'aperçu par rapport à la maquette, et évaluez-le avec l'Évaluation IA si votre offre l'inclut.
- Exportez le code et testez-le là où la bannière sera diffusée.
Questions fréquentes
MarkupGen exporte-t-il un ZIP prêt pour Google Ads ou une autre régie ? Non. MarkupGen exporte le HTML, le CSS, les images et les polices de la bannière. Le suivi des clics, les limites de poids et les règles de packaging propres à chaque plateforme ne sont pas gérés : vous devez les ajouter et les valider vous-même.
Puis-je animer la bannière ? Vous pouvez appliquer des animations d'entrée prédéfinies comme fade, slide, zoom et flip, jouées quand l'élément entre dans le viewport, et régler durée, délai et easing. Il n'y a pas d'éditeur de timeline ni de keyframes.
Studio Editor est-il disponible dans l'offre Free ? Oui. L'édition visuelle est incluse dans l'offre Free et partage son quota mensuel de générations. L'Évaluation IA demande une offre payante.
Mes modifications sont-elles synchronisées vers Figma ? Non. Elles ne changent que le HTML et le CSS générés. Votre fichier Figma n'est pas modifié.
La bannière sera-t-elle identique à ma maquette ? Elle en est généralement proche, mais une correspondance exacte n'est pas garantie. Comparez l'aperçu à l'original et corrigez les écarts dans Studio Editor.
Transformez vos maquettes Figma en bannières HTML5 modifiables
Concevez dans Figma. Générez le code avec MarkupGen. Affinez votre bannière dans Studio Editor.