Guida Utente MarkupGen
Tutto quello che devi sapere per trasformare i design Figma in codice pronto per la produzione — funzionalità, piani, limiti e come ottenere i risultati migliori.
Benvenuto su MarkupGen
Cos'è MarkupGen, a chi è rivolto e cosa lo rende diverso.
Cos'è MarkupGen?
MarkupGen è una piattaforma che trasforma i design Figma in codice front-end pronto per la produzione. Un plugin Figma dedicato esporta il frame su cui stai lavorando; MarkupGen lo converte in HTML e CSS e — sui piani a pagamento — in un componente React, Vue, Svelte o Angular. Un editor integrato a doppia modalità (editor di codice più un editor visivo click-to-edit) ti permette di perfezionare il risultato prima di esportarlo.
A chi è rivolto
Sviluppatori frontend e freelance che preferiscono non tradurre a mano ogni layout partendo da un file di design, piccole agenzie che devono convertire rapidamente i design dei clienti in pagine funzionanti, e chiunque stia creando un template email HTML che deve funzionare correttamente su Gmail, Outlook e Apple Mail.
Il problema che risolve
Trasformare un file Figma in markup funzionante a mano è ripetitivo ed è facile commettere piccoli errori. La conversione di base di MarkupGen si basa su un motore prevedibile e basato su regole, guidato dai nomi dei layer Figma e dalle impostazioni di Auto Layout, così lo stesso design viene convertito sempre allo stesso modo. Un insieme mirato di funzionalità IA si aggiunge poi sopra questa base — per interattività, varianti responsive, valutazione qualità e correzioni con un clic — esattamente dove l'IA aggiunge valore reale.
Casi d'uso principali
- Convertire un singolo frame o componente Figma in una pagina HTML autonoma.
- Produrre una landing page responsive che si adatta a desktop e mobile.
- Generare un template email HTML con stili inline per la compatibilità cross-client.
- Esportare un design come componente React, Vue, Svelte o Angular per il tuo codebase (piani a pagamento).
- Costruire una libreria personale o di team di punti di partenza riutilizzabili con i Template.
Per Iniziare
Dalla creazione di un account alla revisione della tua prima pagina generata.
- 1
Crea un account
Registrati con Google in un clic, oppure con email e password. Il percorso via email richiede di superare una rapida verifica e di confermare la tua email prima di poter accedere.
- 2
Accedi
Usa lo stesso metodo con cui ti sei registrato. Cinque tentativi di password falliti bloccano il tuo account per 15 minuti — usa "Password dimenticata" per reimpostarla via email in qualsiasi momento.
- 3
Esplora la tua dashboard
La tua dashboard mostra un pulsante Crea da Figma, il numero dei tuoi progetti e il punteggio medio di qualità IA, un lanciatore Quick Convert e i tuoi progetti aggiornati più di recente.
- 4
Comprendi i Workspace
Ogni progetto vive all'interno di un Workspace — uno spazio condiviso per te e i tuoi collaboratori. All'interno di un progetto puoi passare dal Code Editor (ogni piano) al Visual Editor (Starter, Pro, Business).
- 5
Crea il tuo primo progetto
Installa il plugin MarkupGen dalla Figma Community, aprilo in Figma, seleziona un frame o un componente e clicca su Export & Send.
Un nuovo progetto compare nella tua dashboard MarkupGen.
- 6
Esegui la tua prima conversione
Apri il nuovo progetto e clicca su Generate Code. Osserva l'avanzamento mentre MarkupGen si connette ai dati del tuo design, analizza i layer, estrae le immagini e scrive l'HTML/CSS.
Una pagina HTML/CSS funzionante, più un punteggio di qualità automatico da 0 a 10.
- 7
Rivedi il risultato
Usa la scheda Code per un editor HTML/CSS/JS a schermo diviso, oppure il pannello Preview per controllare le viste Desktop (1280px), Tablet (768px) e Mobile (375px).
- 8
Esporta il tuo codice
Scarica HTML/CSS puro con qualsiasi piano. I piani a pagamento possono esportare un singolo componente framework, oppure tutti i framework insieme come pacchetto ZIP.
Funzionalità Principali
Ogni funzionalità del prodotto, quale piano richiede e come funziona.
Importazione da Plugin Figma
Esporta un singolo frame, componente o gruppo selezionato da Figma — incluse le icone vettoriali come veri SVG, immagini di sfondo, font e struttura Auto Layout.
Installa dalla Figma Community, accedi una volta, seleziona un frame e clicca su Export & Send.
Un frame per esportazione — al momento non esiste un'importazione multi-frame o dell'intera pagina in blocco.
Code Editor
Un editor di codice professionale a schermo diviso per il tuo HTML, CSS e JS generati, con evidenziazione della sintassi e formattazione automatica.
Visual Editor
Modifica direttamente sull'anteprima dal vivo con click-to-edit: ispeziona gli elementi, modifica gli stili con drag-and-drop, modifica il testo inline, gestisci i link in sicurezza e mostra/nascondi con transizioni.
Richiede un abbonamento a pagamento attivo, verificato lato server.
Conversione Elementi Semantici con IA
Trasforma i blocchi di layout statici in veri controlli di form interattivi — pulsanti, campi di input, textarea, select — usando l'IA.
Tre livelli di precisione:
Analizza la struttura HTML attuale, lo stile e l'immagine di anteprima.
Incrocia i dati con il design originale per una precisione extra.
Analisi strutturale completa per classificare con precisione i componenti complessi.
JavaScript e Componenti Interattivi con IA
Rileva i pattern di interfaccia — slider, carousel, accordion, modali, tab, validazione dei form — e genera il JS e il CSS funzionanti per riprodurli.
Generatore di Layout Responsive con IA
Ristruttura una conversione desktop in un layout ottimizzato per un'altra dimensione di schermo, con un'anteprima prima/dopo affiancata.
Supporta due direzioni di destinazione — mobile e desktop — con un breakpoint configurabile (320–2000px).
Valutazione Qualità e Confronto con IA
Valuta il tuo codice generato da 0 a 10 rispetto al design originale su sei criteri ponderati: Layout, Spaziatura, Tipografia, Colore, Contenuto e Dettagli.
Convenzione dei colori del punteggio
Eccellente
Corrisponde quasi perfettamente al design originale.
Buono
Corrispondenza complessivamente vicina, con alcune differenze percepibili.
Da Migliorare
Differenze significative rispetto al design originale.
Correzione Codice Intelligente con 1 Clic
Applica patch mirate generate dall'IA per le discrepanze individuate dal Quality Score, senza toccare il resto del tuo codice.
Validazione Automatica di Sintassi e Codice
Controlla e ripara i problemi di sintassi dell'HTML/CSS generato prima del salvataggio.
Elaborazione Prioritaria ad Alta Velocità
Limiti di generazione più alti al minuto e al giorno, con elaborazione più veloce sul piano Business.
Esportazione Componenti
Scarica il tuo design generato come HTML/CSS puro, come singolo componente framework o come pacchetto multi-framework completo.
React (JSX/TSX), Vue 3 SFC, Svelte 5 o Angular Standalone, più un pacchetto ZIP e un'opzione di test per client email.
Output Framework CSS
Genera il tuo CSS in uno di sei stili: Vanilla, Tailwind, Bootstrap, Bulma, Materialize o Pico CSS.
Vanilla, Tailwind e Bootstrap sono disponibili su ogni piano. Bulma, Materialize e Pico CSS richiedono un piano a pagamento.
Modalità di Output
Standard Web Page (conversione diretta Flexbox/Grid), Responsive Layout (multi-schermo fluido) o Email Template (tabelle con CSS inline per Gmail, Outlook e Apple Mail).
La modalità Email Template non può riprodurre rotazioni, blend mode non standard o effetti ombra/sfocatura — questi vengono semplificati o rasterizzati come immagine.
Template
Contrassegna uno qualsiasi dei tuoi progetti come Template riutilizzabile, visibile in una galleria ricercabile per il tuo workspace.
Flusso di Lavoro da Figma al Codice
Come preparare, convertire e verificare un design dall'inizio alla fine.
Figma pulito in ingresso, codice pulito in uscita
Non è solo un incoraggiamento — è così che funziona il motore. I tag HTML semantici, le etichette accessibili e i livelli di intestazione sono dedotti direttamente dai nomi dei tuoi layer Figma e dalla struttura Auto Layout. Un file con nomi descrittivi e Auto Layout coerente produrrà una conversione misurabilmente migliore rispetto a un file pieno di forme non raggruppate con nomi predefiniti come "Rectangle 4".
Preparare il tuo file Figma
Assegna ai layer nomi che ne descrivono la funzione — "Header", "Add to Cart Button", "Hero Image" — non i nomi generati automaticamente da Figma. Usa Auto Layout ovunque puoi: i frame con Auto Layout vengono convertiti direttamente in CSS Flexbox, mentre i frame senza vengono esportati come blocchi a dimensione fissa. Mantieni i singoli frame ben al di sotto di circa 2.000 layer e 120 megapixel di area renderizzata — suddividi i design grandi in frame più piccoli.
Importazione
L'esportazione avviene tramite il plugin Figma, un frame, componente o gruppo per esportazione. Al momento non esiste un modo per importare più frame o un'intera pagina in un'unica azione — converti ogni frame come un progetto MarkupGen a sé stante.
Opzioni di configurazione
Scegli la tua modalità di output (Standard Web Page, Responsive Layout o Email Template), il tuo framework CSS (Vanilla, Tailwind e Bootstrap su ogni piano; Bulma, Materialize e Pico CSS sui piani a pagamento) e un formato immagine per gli asset esportati (Original, PNG, AVIF, WebP o JPG).
Verificare l'HTML generato
Il motore genera veri tag semantici — header, nav, main, footer, aside, article, section — dedotti dai nomi dei tuoi layer, con i livelli di intestazione dedotti da dimensione e peso del font. I pulsanti con sola icona ricevono vere etichette ARIA, le immagini di contenuto ricevono testo alt descrittivo, e le immagini decorative o vettoriali ricevono correttamente un alt vuoto con aria-hidden.
Verificare il CSS
I frame con Auto Layout diventano Flexbox con gap, padding e allineamento corrispondenti. I frame senza Auto Layout mantengono le dimensioni in pixel fisse e la posizione dal tuo file Figma.
Comportamento responsive
La conversione di base rispecchia il tuo frame Figma a una dimensione fissa — non è automaticamente responsive. Per un layout che si adatta ai vari dispositivi, scegli la modalità di output Responsive oppure usa il Generatore di Layout Responsive con IA (direzioni mobile e desktop).
Tipografia, colori, spaziatura, immagini e icone
I livelli di intestazione sono dedotti da dimensione e peso del font. I colori vengono letti direttamente dai riempimenti (fill) del tuo Figma. La spaziatura segue gap, padding e allineamento dell'Auto Layout, oppure le posizioni fisse quando l'Auto Layout non viene usato. Le immagini vengono esportate nel formato scelto; le icone vengono estratte come veri SVG ove possibile, con riempimenti o maschere complesse rasterizzate come composizioni PNG.
Componenti, layout e vincoli
I componenti e i set di componenti Figma vengono letti durante l'esportazione, ma MarkupGen attualmente non ricostruisce un'unica definizione di componente condivisa e riutilizzabile per ogni componente Figma — ogni conversione è una pagina o un frammento a sé stante. Il layout deriva dall'Auto Layout e dai riquadri di delimitazione assoluti; le impostazioni dei vincoli (constraint) di Figma (fissa a sinistra/destra, scala) al momento non vengono lette né riprodotte.
HTML semantico, accessibilità e SEO
L'HTML semantico e l'accessibilità sono funzionalità reali e implementate, descritte sopra e nelle Funzionalità Principali. L'output SEO non è incluso — MarkupGen non aggiunge un titolo di pagina, una meta description, tag Open Graph o dati strutturati al codice che genera. Aggiungili tu stesso una volta integrato l'output nel tuo progetto.
Cosa influisce sulla precisione, e come ottenere il miglior output
La qualità dei nomi dei layer Figma è la leva singola più importante per un output semantico e accessibile, seguita dall'uso dell'Auto Layout, dalla complessità del frame e dal fatto che il tuo design usi effetti che la modalità di output scelta può riprodurre (la modalità Email Template in particolare non può riprodurre rotazioni, blend mode o ombre).
Qualità dell'Output
Cosa controlla MarkupGen, cosa dipende dal tuo input e cosa viene misurato.
Controllato da MarkupGen
- Il motore di conversione e le euristiche per i tag semantici
- La generazione di etichette accessibili e testo alt
- I livelli IA per valutazione, correzione, responsive e JS (piani a pagamento)
Controllato dal tuo input
- La qualità dei nomi dei layer Figma
- L'uso dell'Auto Layout
- La complessità del frame e l'uso degli effetti
Precisione e fedeltà visiva
Misurata automaticamente dall'AI Quality Score (piani a pagamento): da 0 a 10 su Layout, Spaziatura, Tipografia, Colore, Contenuto e Dettagli. Non esiste una percentuale di precisione globale separata — la qualità dipende dal design.
Struttura e semantica HTML
Veri tag semantici e livelli di intestazione, subordinati a quanto descrittivamente sono nominati i tuoi layer Figma.
Qualità e manutenibilità del CSS
Basato su Flexbox per i frame con Auto Layout, a posizione fissa per gli altri. La manutenibilità dipende dal framework CSS scelto, dallo stile di denominazione delle classi e dalla denominazione dei layer.
Comportamento responsive, accessibilità e prontezza SEO
Il layout responsive è opzionale tramite la modalità di output Responsive. L'accessibilità include vere etichette ARIA e testo alt generati automaticamente. I metadati SEO non sono inclusi — aggiungi i tuoi dopo l'esportazione.
Lingue Supportate
L'interfaccia è disponibile in dieci lingue.
Inglese, Tiếng Việt, Francese, 中文 (semplificato), Giapponese, Hindi, Italiano, Spagnolo, Thailandese e Russo. L'inglese è la lingua predefinita; l'app non passa automaticamente alla lingua del tuo browser, quindi un link condiviso si apre sempre nella lingua prevista.
Cambia la tua lingua da Impostazioni → Lingua. MarkupGen converte il testo presente nei tuoi layer Figma così com'è — la disponibilità delle funzionalità è determinata interamente dal tuo piano, non dalla lingua dell'interfaccia.
Piani e Prezzi
Tutte le cifre riportate qui sotto provengono direttamente dalla configurazione di fatturazione.
| Funzionalità | Free | Starter | Pro | Business |
|---|---|---|---|---|
| Prezzo | $0 | $10 / mese | $20 / mese | $100 / mese |
| Generazioni di codice | 5 / mese | 50 / giorno | 150 / giorno | 1.000 / giorno |
| Nuovi progetti | 10 / mese | 100 / giorno | 300 / giorno | 2.000 / giorno |
| Limite di velocità generazione | 2 req/min | 10 req/min | 20 req/min | 60 req/min, modello IA più veloce |
| Framework CSS | Vanilla, Tailwind, Bootstrap | Tutti e 6 i framework | Tutti e 6 i framework | Tutti e 6 i framework |
| Visual Editor | Non incluso | Incluso | Incluso | Incluso |
| Valutazione qualità e correzioni con IA | Non incluso | Incluso | Incluso | Incluso |
| Esportazione componenti | Solo HTML / CSS | 1 framework alla volta | Tutti i framework + Export Studio | Tutti i framework + Export Studio |
| Assistenza | Community | Assistenza via email | Assistenza email prioritaria | Assistenza dedicata 1-a-1 |
Tutti i piani a pagamento sono fatturati solo mensilmente — non esiste un'opzione annuale. Le quote non sono rimborsabili salvo quanto previsto dalla legge. Paga con carta tramite Stripe o Lemon Squeezy, oppure tramite bonifico bancario vietnamita istantaneo con QR via SePay.
Piano Free
Ideale per provare il prodotto o per una conversione occasionale: 5 conversioni assistite da IA al mese, download HTML/CSS puro, e CSS Vanilla, Tailwind o Bootstrap. Il Visual Editor, la valutazione qualità con IA e l'esportazione framework non sono inclusi.
Piani a pagamento
Starter è adatto a sviluppatori individuali e progetti freelance. Pro aggiunge il pacchetto completo Export Studio per professionisti e piccole agenzie che gestiscono più progetti client. Business offre il volume più alto e l'elaborazione più veloce per i team. Passa a un piano superiore quando raggiungi il tuo limite di generazione, hai bisogno del Visual Editor o della valutazione qualità, oppure ti serve un vero componente framework invece di HTML puro.
Crediti, Utilizzo e Limiti
MarkupGen non usa un sistema di crediti a punti — usa un semplice conteggio delle generazioni per piano.
- Come viene conteggiato — un'azione "Generate Code" equivale a un'unità della tua quota di generazione.
- Cadenza di reset — Free si azzera con il mese di calendario; ogni piano a pagamento si azzera ogni giorno.
- Riporto — nessuno; la quota non utilizzata non passa al periodo successivo.
- Scadenza — la quota semplicemente si azzera a ogni periodo; non scade a metà periodo.
Quota di creazione progetti
Separata dalla quota di generazione, ed è sempre esattamente il doppio del limite di generazione del tuo piano per lo stesso periodo (ad esempio, Free: 10 progetti/mese; Pro: 300 progetti/giorno). Se sei esattamente al tuo limite, un progetto in più può comunque essere salvato in modo da non perdere mai il lavoro — ma viene posto in stato Quota Locked e non può generare codice finché non passi a un piano superiore o il periodo si azzera. L'eliminazione di un progetto non libera quota per quel periodo.
| Limiti per esportazione | |
|---|---|
| Numero di layer per frame Figma | ~2.000 layer per esportazione |
| Area di esportazione del frame Figma | ~120 megapixel |
| Dimensione totale di upload per esportazione | 50 MB |
| Timeout upload del plugin | 3 minuti |
| Lunghezza delle istruzioni IA personalizzate | 3.000 caratteri |
Account e Abbonamento
Cosa puoi modificare autonomamente e come funziona la fatturazione.
Impostazioni account
Da Impostazioni puoi modificare il tuo profilo, cambiare la password (funziona anche se ti sei registrato con Google — puoi impostare una password per la prima volta da qui), gestire il tuo piano e la fatturazione, e cambiare la tua lingua.
Passaggio a un piano superiore
Effettua l'upgrade dalla pagina Prezzi. Gli upgrade si applicano immediatamente con fatturazione proporzionale (proration).
Passaggio a un piano inferiore
Da Impostazioni → Fatturazione, programma il passaggio a un piano a pagamento inferiore, che entra in vigore alla fine del tuo periodo di fatturazione corrente, senza rimborso parziale. Starter non ha un piano a pagamento inferiore a cui passare.
Annullamento
Per annullare il tuo abbonamento, contatta support@markupgen.com. Se sei su Pro o Business, nel frattempo puoi anche programmare un downgrade a un piano a pagamento inferiore da Impostazioni → Fatturazione.
Fatturazione e pagamento
Paga con carta tramite Stripe o Lemon Squeezy, oppure tramite bonifico bancario vietnamita istantaneo con QR via SePay (finestra di 15 minuti).
Rimborsi
Tutte le quote non sono rimborsabili salvo quanto previsto dalla legge. Non esiste una garanzia di rimborso separata.
Eliminazione account
Al momento non esiste un pulsante self-service "Elimina il mio account". Puoi richiedere l'eliminazione del tuo account e dei relativi dati in qualsiasi momento scrivendo a support@markupgen.com.
Sicurezza e Privacy
Riassunto dalla Privacy Policy, dai Termini di Utilizzo e dal design dell'autenticazione di MarkupGen.
Quali dati vengono raccolti
Il tuo nome, email e credenziali dell'account, oltre esclusivamente ai frame Figma che esporti esplicitamente — MarkupGen non ha accesso permanente all'intero tuo account Figma. I dati tecnici di base (IP, browser, dispositivo) vengono raccolti tramite cookie.
I tuoi design e il codice generato
Mantieni i diritti sui design Figma e sui contenuti che importi. MarkupGen non utilizza i tuoi design privati per addestrare modelli IA destinati ad altri clienti.
Conservazione ed eliminazione dei dati
I dati vengono conservati finché il tuo account è attivo, o secondo necessità per motivi legali, contabili o di sicurezza. Puoi richiedere l'eliminazione in qualsiasi momento tramite support@markupgen.com.
Sicurezza dell'account
Le password sono sottoposte ad hashing; sia il login che la registrazione richiedono una verifica CAPTCHA; cinque tentativi di accesso falliti bloccano un account per 15 minuti; la verifica dell'email è richiesta per gli account basati su password. L'autenticazione a due fattori e la gestione delle sessioni attive non sono attualmente disponibili.
Servizi di terze parti
Stripe e Lemon Squeezy per i pagamenti con carta, SePay per i bonifici bancari vietnamiti, e Google Analytics per l'analisi dell'utilizzo.
Risoluzione dei Problemi
Problema, causa probabile e soluzione — organizzati per categoria.
Problemi di conversione
Generate Code è disattivato o viene rifiutato.
→ Hai raggiunto il limite di generazione o di creazione progetti del tuo piano, oppure il progetto è in stato Quota Locked a causa di un superamento precedente.
Attendi il prossimo reset, oppure passa a un piano superiore — l'upgrade sblocca immediatamente i progetti bloccati.
L'esportazione dal plugin Figma fallisce o va in timeout.
→ Il frame supera all'incirca 2.000 layer o 120 megapixel, oppure l'upload ha superato il limite di 3 minuti.
Suddividi il frame in pezzi più piccoli ed esporta ciascuno separatamente.
L'output appare generico, con semplici div e testo alt poco utile.
→ I tuoi layer Figma usano ancora nomi predefiniti come "Rectangle 4" o "Group".
Rinomina i layer in modo descrittivo e ripeti l'esportazione.
Problemi di output
Rotazioni, ombre o effetti di blend mancano da un'esportazione Email.
→ I client email non possono renderizzarli in modo affidabile, quindi la modalità Email Template li semplifica o li rasterizza.
Usa la modalità Standard o Responsive se hai bisogno di quegli effetti come vero CSS.
Il layout non si adatta alla dimensione dello schermo.
→ La conversione di base rispecchia una singola dimensione fissa.
Scegli invece la modalità di output Responsive.
Problemi di autenticazione
Impossibile accedere.
→ Cinque tentativi falliti bloccano l'account per 15 minuti, oppure la tua email non è ancora verificata.
Attendi 15 minuti, oppure controlla la tua casella di posta (e la cartella spam) per l'email di verifica.
Password dimenticata.
Usa "Password dimenticata" nella pagina di accesso; il link di reset è valido per un'ora.
Problemi di pagamento
Un pagamento con bonifico SePay resta bloccato in "in attesa".
→ Il codice QR scade dopo 15 minuti.
Controlla la pagina di stato dell'ordine, oppure avvia di nuovo il checkout se è scaduto.
Un pagamento con carta fallisce.
→ La carta è stata rifiutata o i dati sono stati inseriti in modo errato.
Verifica i dati della tua carta con la tua banca, oppure prova l'altro fornitore di pagamento. Contatta l'assistenza se hai subito un addebito ma il tuo piano non è stato aggiornato.
Problemi di abbonamento
Nessun pulsante "Cancel Subscription".
→ Non è ancora un controllo self-service.
Invia un'email a support@markupgen.com per annullare.
Nessuna opzione di downgrade sul piano Starter.
→ Starter è il piano a pagamento più basso.
Questo è normale — non c'è nulla di inferiore a cui passare all'interno dell'app.
Problemi di download ed esportazione
L'esportazione framework (React/Vue/Svelte/Angular) è bloccata.
→ L'esportazione a framework singolo richiede un piano a pagamento qualsiasi.
Passa a Starter o superiore.
Export Studio è bloccato, anche su Starter.
→ Il pacchetto con tutti i framework richiede specificamente Pro o Business.
Passa a Pro.
Best Practice
Abitudini concrete che migliorano in modo misurabile la qualità della conversione.
- Usa l'Auto Layout ovunque possibile — è il singolo fattore più importante che separa il CSS fluido dai blocchi a posizione fissa.
- Nomina i layer in linguaggio semplice — "Header", "Add to Cart Button", "Hero Image" — il motore legge questi nomi per scegliere i tag HTML, le etichette ARIA e il testo alt.
- Raggruppa gli elementi correlati all'interno di un unico frame Auto Layout invece di lasciarli come forme libere posizionate in modo assoluto.
- Usa dimensioni di testo coerenti e mirate per intestazioni e testo del corpo — i livelli di intestazione vengono dedotti da queste.
- Mantieni visivamente distinte le immagini di contenuto e gli asset decorativi — MarkupGen li tratta già in modo diverso nell'output.
- Scegli in anticipo la tua modalità di output. Non aspettarti che una conversione in modalità Standard diventi responsive in un secondo momento — parti dalla modalità Responsive se la destinazione deve funzionare su mobile.
- Evita di affidarti ai vincoli (constraint) di Figma per il comportamento di ridimensionamento — non vengono riprodotti; ricostruisci quel comportamento con l'Auto Layout.
- Per l'output email, evita rotazioni, blend mode ed effetti ombra o sfocatura — non sopravvivono al rendering dei client email.
- Controlla sempre Desktop, Tablet e Mobile in Preview prima di esportare, ed esegui l'AI Quality Score (piani a pagamento) per un'indicazione specifica e ponderata su cosa correggere.
- Pianifica di aggiungere i tuoi metadati SEO dopo l'esportazione — MarkupGen non genera tag title, meta description o dati strutturati.
Domande Frequenti
Basate sul comportamento verificato del prodotto.
Limitazioni
In cosa MarkupGen è bravo, e cosa non fa ancora.
In cosa MarkupGen è bravo
Converte un frame Figma ben strutturato e basato su Auto Layout in HTML/CSS pulito e con tag semantici, in modo rapido e prevedibile, con livelli IA opzionali per interattività, responsività, valutazione qualità e correzioni con un clic.
Cosa non fa
Ricostruire automaticamente i dati di prototipazione o interazione di Figma; rispettare il ridimensionamento basato sui vincoli (constraint) di Figma (fissa, scala); importare più frame o un'intera pagina in un'unica azione; aggiungere metadati SEO al codice generato; oppure esportare una definizione di componente condivisa e riutilizzabile per ogni componente Figma.
Dove l'output potrebbe richiedere modifiche manuali
Layer Figma generici o senza nome che producono markup generico; effetti visivi complessi in modalità Email Template; interattività che va oltre i pattern riconosciuti dalla funzionalità di suggerimento JS con IA.
Limiti tecnici
Vedi Crediti, Utilizzo e Limiti per le cifre esatte — circa 2.000 layer, 120 megapixel e 50 MB per esportazione, un timeout di upload di 3 minuti e un limite di 3.000 caratteri per le istruzioni IA personalizzate.
Glossario
Il vocabolario usato in tutta questa guida.
- Frame
- Un contenitore di primo livello in Figma — grosso modo una schermata o una sezione. MarkupGen esporta un frame, componente o gruppo alla volta.
- Auto Layout
- La funzionalità integrata di Figma per l'impilamento responsive; MarkupGen la mappa direttamente su CSS Flexbox.
- Constraints
- Le regole di ridimensionamento a fissaggio e scala di Figma, precedenti all'esistenza dell'Auto Layout; attualmente non lette da MarkupGen.
- Conversione / Generazione
- Un'esecuzione di "Generate Code" su un progetto — l'unità in cui viene misurata la quota del tuo piano.
- Progetto
- Una singola esportazione Figma tracciata nella tua dashboard, di tua proprietà all'interno di un Workspace.
- Workspace
- Uno spazio di team condiviso a cui appartengono i progetti; l'appartenenza comporta un ruolo che controlla i permessi.
- Template
- Uno qualsiasi dei tuoi progetti contrassegnato per il riutilizzo nella galleria Template del tuo workspace.
- Export
- Scaricare il codice generato come HTML/CSS puro, come singolo componente framework, o come pacchetto multi-framework completo.
- Subscription
- Il tuo piano a pagamento ricorrente mensile — Starter, Pro o Business.
- Quota Locked
- Un progetto creato dopo aver già raggiunto il limite di creazione del tuo piano — salvato, ma incapace di generare codice finché non passi a un piano superiore o il periodo si azzera.
Cheat Sheet di Avvio Rapido
Da Figma al codice pronto per la produzione.
- 1Installa il plugin MarkupGen dalla Figma Community.
- 2Seleziona un frame pulito, ben nominato e con Auto Layout in Figma.
- 3Export & Send dal plugin (accedi una volta tramite il browser).
- 4Apri il nuovo progetto sulla tua dashboard.
- 5Scegli la tua modalità di output e il framework CSS, poi clicca su Generate Code.
- 6Rivedi il risultato in Preview e controlla l'AI Quality Score (piani a pagamento).
- 7Correggi manualmente nel Code Editor, oppure passa a un piano superiore per il Visual Editor e la Correzione Intelligente con 1 Clic.
- 8Esporta come HTML/CSS, oppure come componente framework su un piano a pagamento, quindi integralo nel tuo progetto.
Pronto ad accelerare il tuo flusso di lavoro dal design al codice?
Inizia gratis oggi stesso, oppure passa a un piano superiore per il Visual Editor, la valutazione qualità con IA e l'esportazione completa nei framework.