Pubblicato il 2026-10-12 · Di Il team MarkupGen
Creare banner HTML5 da Figma con MarkupGen: progetta, converti e modifica in Studio Editor
Un banner sembra finito in Figma molto prima di esserlo nel codice. Qualcuno deve ancora ricostruire titolo, immagine prodotto e pulsante in HTML e CSS, e rifarlo quando cambia il testo, il pulsante si sposta di 8px o la campagna richiede altri tre formati. La maggior parte di quel tempo va in piccole correzioni, non nella prima versione.
MarkupGen accorcia entrambe le metà del lavoro. Converte un frame Figma in HTML e CSS, e poi ti permette di continuare a rifinire il risultato visivamente in Studio Editor, senza tornare in Figma per ogni piccola modifica. Questo articolo percorre l'intero flusso Figma to HTML5 banner e chiarisce cosa lo strumento fa e cosa non fa.
Design Figma → plugin MarkupGen → generazione HTML/CSS → Studio Editor → revisione → esportazione
Convertire i design Figma in banner HTML5
Il flusso parte dal plugin Figma di MarkupGen. Seleziona il frame del banner e invialo. Struttura, testi e immagini del frame arrivano nel tuo workspace MarkupGen come progetto, ed è lì che generi il codice.
Un banner viene convertito come qualsiasi altro frame, quindi i suoi elementi tipici vengono mantenuti:
- Titoli e testi promozionali restano testo vero, non parte di un'immagine appiattita.
- Immagini prodotto e immagini di sfondo vengono esportate con il progetto.
- Pulsanti CTA conservano riempimento, raggio ed etichetta.
- Forme, livelli, tipografia e spaziatura vengono letti dal file di design, non stimati da uno screenshot.
Il risultato è un punto di partenza di solito vicino al design, non la garanzia di una copia pixel-perfect. Effetti insoliti, font personalizzati non presenti su Google Fonts e livelli molto sovrapposti sono le prime cose da controllare. Per capire meglio come viene letto un design, vedi come funziona la conversione da Figma a HTML/CSS di MarkupGen.
Modificare i banner direttamente in Studio Editor
È la parte che rende MarkupGen più di un generatore di codice. Il codice generato raramente è la versione finale di un banner: la riga legale si allunga, la CTA ha bisogno di più respiro, il cliente vuole il logo più grande. Nella maggior parte degli strumenti questo significa modificare il CSS a mano oppure tornare in Figma e riconvertire.
In MarkupGen attivi l'Editor Visuale nella barra degli strumenti del progetto — la modalità di modifica dello studio del progetto — e lavori direttamente sul banner.
Screenshot reale dell'Editor Visuale di MarkupGen (interfaccia in inglese), qui con il design di una pagina prodotto. Selezionando un elemento si aprono i campi di contenuto, link e layout.
Seleziona un elemento nell'anteprima o nell'albero HTML e l'inspector mostra cosa puoi modificare:
| Cosa vuoi correggere | Cosa offre Studio Editor |
|---|---|
| Testi e link | Modificare il testo sul posto (doppio clic nell'anteprima), impostare un link e l'apertura in una nuova scheda |
| Dimensioni e spaziatura | Larghezza, altezza, margin e padding per lato |
| Posizione e allineamento | Allineare dentro un contenitore flex o grid, cambiare l'ordine, impostare uno z-index, ruotare |
| Tipografia | Dimensione, peso, interlinea e allineamento del testo |
| Aspetto | Colore di sfondo e del testo, opacità, bordo, raggio, ombra e filtri come sfocatura o luminosità |
| Visibilità | Nascondere, mostrare o eliminare un elemento |
In pratica:
- Regola layout e posizione degli elementi supportati senza aprire il foglio di stile.
- Rifinisci dimensioni, spaziatura e allineamento con valori esatti.
- Fai modifiche visive senza tornare in Figma per ogni piccolo ritocco.
- Vedi subito il risultato, annulla o ripeti un passaggio e salva quando è a posto.
- Riduci i passaggi avanti e indietro tra design e codice. Ogni modifica viene scritta nell'HTML e nel CSS, quindi il codice che esporti è il banner che vedi.
Due limiti da conoscere. La modifica avviene selezionando un elemento e cambiandone le proprietà nell'inspector; non è una tela libera con drag and drop. E le modifiche sono a senso unico: cambiano il codice generato, non il tuo file Figma.
Studio Editor è incluso nel piano Free, dove condivide la quota mensile di generazioni, ed è illimitato nei piani a pagamento.
Più opzioni di generazione del codice
Per l'output HTML responsive scegli il toolkit CSS con cui viene scritto il codice:
- Vanilla CSS: CSS puro, senza dipendenze, il più semplice da inserire in uno spazio pubblicitario o in un blocco del CMS.
- Tailwind CSS: classi di utilità, utile se il banner vive in un sito Tailwind.
- Bootstrap: per i team le cui pagine caricano già Bootstrap.
Tutti e tre sono disponibili nel piano Free. Anche Bulma, Materialize e Pico CSS sono supportati e richiedono un piano a pagamento. Se hai dubbi, Vanilla CSS vs Bootstrap vs Tailwind li mette a confronto. Per un banner autonomo, Vanilla CSS di solito produce il file più leggero e portabile.
Il piano Free include 5 generazioni di codice al mese; i piani a pagamento hanno quote giornaliere.
Anteprima, Valutazione IA e rifinitura
Dopo la generazione, confronta l'anteprima con l'immagine del design originale nel workspace e correggi ciò che vedi in Studio Editor.
Nei piani a pagamento, la Valutazione IA offre un secondo parere. Confronta il risultato generato con il design originale e restituisce un punteggio di corrispondenza da 0 a 10 su sei criteri pesati — layout e struttura, spaziatura e allineamento, tipografia, colore, contenuti e immagini, dimensioni ed effetti — insieme a un elenco di differenze e a un prompt modificabile per rigenerare.
Considera il punteggio una guida su dove guardare. Misura la corrispondenza visiva con il design; non certifica che un banner sia pixel-perfect, pronto per la produzione o coerente in ogni browser. Come valutare l'HTML generato dall'IA elenca i controlli da fare a mano.
Esportare e usare il tuo banner HTML5
Quando il banner è a posto, salvalo e scarica l'HTML con immagini e font in un file .zip, oppure copia il codice. Nei piani a pagamento lo stesso design può essere esportato anche come componenti React, Vue, Svelte o Angular.
Conviene distinguere tre cose che spesso vengono chiamate tutte "banner HTML5":
| Che cos'è | In MarkupGen | |
|---|---|---|
| Banner HTML/CSS | Il layout del banner come markup e stili | Sì: è il flusso principale |
| Animazione e interazioni | Movimento, stati hover, comportamento tramite script | In parte: animazioni di ingresso predefinite (fade, slide, zoom, flip) eseguite quando l'elemento entra nel viewport, con durata, ritardo ed easing; non c'è un editor di timeline o keyframe |
| Pacchetto per piattaforme pubblicitarie | Uno ZIP conforme alle specifiche di una rete: tracciamento dei clic, limiti di peso, regole di denominazione | No: lo prepari e lo validi tu |
L'esportazione è quindi markup pulito che ti appartiene. Se il banner è destinato a una rete pubblicitaria, aggiungi in seguito il codice di click-through e il packaging di quella piattaforma e passalo nel suo validatore. Se va sul tuo sito, su una landing page o in un CMS, l'HTML e il CSS esportati spesso bastano. Per i banner destinati a un'email, vedi Email Ready.
A chi serve questo flusso
- Sviluppatori frontend: evitano la ricostruzione e dedicano il tempo a ciò che richiede giudizio. Vedi MarkupGen per sviluppatori.
- Designer e team creativi: correggono spaziatura e testi sul banner reale invece di scrivere una richiesta di modifica.
- Team di marketing digitale: trasformano il design di una campagna in markup utilizzabile senza aspettare uno slot di sviluppo. Vedi MarkupGen per i team di marketing.
- Agenzie e team di produzione pubblicitaria: gestiscono i giri di feedback del cliente con modifiche anziché ricostruzioni. Vedi MarkupGen per le agenzie.
Riepilogo del flusso
- Progetta il banner in Figma, un frame per formato.
- Trasferisci il frame con il plugin Figma di MarkupGen.
- Genera HTML e CSS con il toolkit che ti serve.
- Rifinisci il banner in Studio Editor.
- Controlla l'anteprima rispetto al design e valutala con la Valutazione IA se il tuo piano la include.
- Esporta il codice e testalo dove il banner verrà pubblicato.
Domande frequenti
MarkupGen esporta uno ZIP pronto per Google Ads o per un'altra rete pubblicitaria? No. MarkupGen esporta HTML, CSS, immagini e font del banner. Tracciamento dei clic, limiti di peso e regole di packaging delle singole piattaforme non sono gestiti: devi aggiungerli e validarli tu.
Posso animare il banner? Puoi applicare animazioni di ingresso predefinite come fade, slide, zoom e flip, eseguite quando l'elemento entra nel viewport, e impostare durata, ritardo ed easing. Non c'è un editor di timeline o keyframe.
Studio Editor è disponibile nel piano Free? Sì. La modifica visiva è inclusa nel piano Free e condivide la sua quota mensile di generazioni. La Valutazione IA richiede un piano a pagamento.
Le mie modifiche vengono sincronizzate su Figma? No. Le modifiche cambiano solo l'HTML e il CSS generati. Il tuo file Figma non viene toccato.
Il banner corrisponderà esattamente al mio design? Di solito è molto vicino, ma una corrispondenza esatta non è garantita. Confronta l'anteprima con l'originale e correggi le differenze in Studio Editor.
Trasforma i tuoi design Figma in banner HTML5 modificabili
Progetta in Figma. Genera il codice con MarkupGen. Rifinisci il banner in Studio Editor.