HTML to design: flusso di redesign per designer e agenzie

Di solito il design scorre in una sola direzione: un mockup in Figma diventa HTML in un browser. Ma molto lavoro reale va nella direzione opposta. Un cliente ti consegna un sito online e chiede un redesign. Un prodotto si è allontanato dai mockup originali in tre anni di rilasci. Uno sviluppatore ha costruito una funzionalità direttamente in codice e ora il team di design deve prenderla in carico.

Quella direzione inversa, HTML to design, significa prendere ciò che esiste nel browser e riportarlo a un file di design modificabile. Fatto bene, fa risparmiare giorni di ricostruzione manuale e ti dà qualcosa di meglio di una mood board di screenshot: un file funzionante con veri frame, testi, stili e componenti.

Questo articolo presenta un flusso di lavoro pratico per designer e agenzie, dal primo audit a un prototipo cliccabile, con HTML to Frames.

Che cosa significa davvero "HTML to design"

L'espressione indica qualsiasi processo che converte codice online o un sito web in un file di design modificabile. Ci sono tre grandi modi per farlo:

1. Ricostruzione manuale: apri il sito, lo misuri nei DevTools e ricrei ogni frame a mano.
2. Screenshot: acquisisci immagini di ogni pagina e le incolli in Figma come riferimento.
3. Layer modificabili: converti la pagina renderizzata in veri frame, testi, vettori e immagini Figma.

Ognuno ha il suo posto, ma differiscono nettamente per costo e per ciò che puoi fare dopo.

Gli screenshot vanno bene come riferimento. La ricostruzione manuale ha ancora senso per una singola pagina piccola che vuoi ristrutturare da zero. Per tutto ciò che è più grande, i layer modificabili sono il punto di partenza che regge la scala.

A chi è rivolto questo flusso di lavoro

• UI/UX e web designer che lavorano a redesign, audit o analisi di siti di ispirazione.
• Agenzie di design che devono avere il sito di un cliente in Figma in pochi minuti per preparare una proposta di redesign. Il piano Team condivide cinque postazioni con un'unica chiave di licenza.
• Team di design system che consolidano colori, tipografia e componenti che in produzione si sono allontanati dal sistema.
• Sviluppatori front-end che vogliono consegnare a un designer una build in localhost come file Figma.
• Product manager e marketer che hanno bisogno in Figma di dashboard con login o di stati specifici per la pianificazione.

Il flusso di lavoro, passo per passo

Ecco la sequenza che consigliamo. Puoi saltare dei passaggi, ma l'ordine conta: ognuno si basa sul precedente.

Passo 1: analizza ciò che esiste

Prima di importare qualsiasi cosa, decidi quali pagine contano. Per la maggior parte dei siti è un elenco breve:

• la homepage,
• una o due landing page o pagine prodotto chiave,
• prezzi o checkout,
• un template di contenuto come un articolo del blog,
• eventuali schermate con login che rientrano nel perimetro del redesign.

Annota anche quali stati ti servono: un menu di navigazione aperto, un modulo con errori di validazione, un carrello pieno. Non si raggiungono con un semplice URL; li acquisirai con l'estensione Chrome.

Passo 2: importa un responsive set

Ora porta dentro le pagine. Per le pagine pubbliche:

1. Apri HTML to Frames e scegli Multiple.
2. Incolla fino a 10 link. Vengono elaborati uno dopo l'altro e ogni pagina diventa una riga sul canvas.
3. Scegli il Responsive set: Desktop, Tablet e Mobile in un clic (fino a quattro schermate per importazione con Pro e Team).
4. Attiva Hide cookie banners & popups, così gli overlay non coprono i contenuti.
5. Attiva Styles & variables (Pro) se prevedi di estrarre un design system nel passo successivo.

La schermata Desktop usa la Site width: il plugin misura la larghezza di design reale della pagina invece di stimarla. I siti a tutta larghezza arrivano a 1920 con il contenuto centrato, i siti boxed alla larghezza del loro contenitore e i siti fluidi a 1440. Un sito riceve un'unica larghezza per tutte le pagine.

Ricorda la regola di conteggio: un'importazione = una pagina con tutte le sue schermate. Un responsive set di cinque pagine sono cinque importazioni, non quindici.

Dopo la prima importazione, Import linked pages ti permette di scegliere altre pagine dello stesso sito da un elenco. Per le pagine con login o localhost, usa l'estensione Chrome e Send to Figma. Per le pagine che esistono solo come file, usa Local file per importare un file HTML, l'intera cartella di un sito o un .zip. La guida HTML to Figma descrive nel dettaglio ogni sorgente.

Passo 3: estrai il design system

Qui un'importazione smette di essere un'immagine del sito e diventa una base di lavoro. Con Styles & variables (Pro) attivo, il plugin crea:

• Variabili colore dai colori usati almeno due volte e dalle custom property CSS del sito (--brand-primary diventa brand/primary) in una collezione Colors · <domain> (fino a 96).
• Stili di testo (fino a 48).
• Stili di ombra (sm, md, lg, xl).

Due dettagli lo rendono pratico per i progetti reali:

• Riutilizzo. Se il tuo file ha già variabili o stili con valori corrispondenti, il plugin li riutilizza. Importare due volte lo stesso sito non crea nulla di nuovo.
• Snap to my file's styles (Pro). Se hai già un design system, colori e testi importati possono agganciarsi allo stile più vicino del tuo file quando non c'è una corrispondenza esatta, usando la distanza cromatica percettiva OKLab e, per il testo, stessa famiglia, stesso peso e dimensione entro il 10%.

Se il sito supporta la modalità scura, scegli Light + Dark (Pro). La pagina viene acquisita in entrambi gli schemi di colori e ottieni un'unica collezione di variabili con modalità Light e Dark, più una copia scura di ogni schermata. Tieni presente che i file Figma Free consentono una sola modalità per collezione, quindi lì la modalità scura viene saltata con una nota.

Il risultato è un inventario onesto di ciò che il sito usa davvero: spesso il prodotto più utile dell'intero audit. Vedere una lunga serie di grigi quasi identici in un'unica collezione convince a consolidare meglio di qualsiasi slide.

Passo 4: trasforma le ripetizioni in componenti

Con Components & hover states (Pro), le strutture ripetute (card, pulsanti, voci di menu) diventano componenti e istanze, mantenendo gli override di testo e immagini. Gli elementi con uno stato hover diventano un component set con varianti Default e Hover, più un'interazione di prototipo on-hover. I componenti principali vengono raccolti in un frame Components · <site>.

Così ottieni un inventario dei componenti da razionalizzare. Le mosse successive tipiche:

• unire i componenti pulsante quasi duplicati in un unico set con varianti,
• rinominare i componenti secondo la tua convenzione,
• sostituire le istanze con i componenti della tua libreria dove esistono già.

Passo 5: itera sulla struttura reale

Ora progetta. Poiché il layout arriva come frame annidati con Auto Layout dove il plugin ha potuto verificarlo, le modifiche si comportano come in un file costruito da te:

• modifica i titoli e guarda la pila riadattarsi,
• cambia un gap o il padding di una sezione,
• sostituisci una variabile colore e guarda aggiornarsi ogni utilizzo,
• ridimensiona un frame e lascia che Fill e Center facciano il loro lavoro.

Nei nostri test su siti reali, l'Auto Layout è stato ricavato su circa l'86–97% dei frame. I frame che restano assoluti ricevono constraint sensati e la schermata dei risultati elenca perché un frame è rimasto assoluto. La spiegazione dell'Auto Layout entra nei dettagli.

Un'abitudine utile: tieni l'importazione originale in una pagina a sé come "prima" e duplicala per il tuo redesign. Attiva Reference screenshot (Pro) durante l'importazione se vuoi un layer immagine nascosto e bloccato per il confronto affiancato con la pagina online.

Passo 6: prototipa

Le pagine importate sono già in parte collegate:

• I link restano cliccabili (Open link).
• I link tra pagine importate diventano interazioni Navigate, quindi un'importazione multipagina è già un flusso cliccabile.
• Header fixed e sticky e aree a scorrimento orizzontale funzionano in modalità Present.
• Le varianti hover del passo 4 includono le interazioni on-hover.

Ciò significa che in una presentazione al cliente puoi affiancare il prototipo "prima" al prototipo "dopo" senza collegare nessuno dei due da zero.

Passo 7: mantieni la sincronizzazione

I siti continuano a cambiare. Ogni frame importato memorizza il proprio URL sorgente, quindi il Re-import è a un clic di distanza quando la pagina online cambia. Poiché variabili e stili esistenti vengono riutilizzati, un Re-import non riempie il tuo file di duplicati.

Casi d'uso nella pratica

Proposte di redesign delle agenzie

Un'agenzia che propone un redesign ha bisogno in fretta del sito attuale del cliente in Figma. Importa le pagine chiave come responsive set, estrai il design system e avrai una sezione oggettiva "ecco cosa avete oggi", con il vero inventario di colori e tipografia, prima di mostrare una sola idea nuova. Il piano Team condivide cinque postazioni, così più designer possono lavorare con la stessa licenza. Vedi website to Figma e la guida al redesign.

Audit della divergenza tra design e codice

Importa la pagina di produzione e mettila accanto al mockup originale. Le differenze di spaziature, colori e tipografia emergono layer per layer, e le variabili generate rivelano quanti colori fuori palette si sono infiltrati.

Funzionalità costruite dagli sviluppatori

Uno sviluppatore ha prototipato una funzionalità su localhost. Acquisiscila con l'estensione Chrome, inviala a Figma e il designer la rifinisce nello stesso file del resto del prodotto.

Pagine generate dall'AI

Se il punto di partenza è HTML da Claude o Cursor, collega l'assistente via MCP e la pagina arriva nel tuo plugin aperto. Vedi AI to Figma.

Formazione e analisi

Gli studenti possono importare siti ben costruiti e studiare come sono strutturate le sezioni, come scala la tipografia e come si ripetono le spaziature, un layer alla volta.

Privacy nel lavoro per i clienti

Le agenzie importano spesso siti dei clienti, quindi conta cosa succede ai dati. Le pagine vengono renderizzate in un browser isolato e in sandbox; il risultato viene consegnato una sola volta e poi eliminato dalla memoria, mai scritto su disco. I file locali caricati vengono eliminati appena termina l'importazione. Il plugin non legge il contenuto del tuo file Figma. La pagina sulla sicurezza riporta la policy completa.

Per iniziare

Il modo più rapido per capire se questo flusso di lavoro fa per te è provarlo su una pagina reale su cui stai lavorando. Free include 10 importazioni al mese; Pro aggiunge le funzionalità di design system e componenti descritte sopra. Confronta i piani nella pagina dei prezzi, sfoglia la documentazione o scopri come si confrontano gli altri strumenti nella pagina delle alternative.