Website to Figma: guida per agenzie alle proposte di redesign

Ogni redesign inizia con lo stesso compito poco affascinante: portare il sito attuale del cliente nel tuo strumento di design. Gli screenshot sono veloci ma nascono già morti. Ricostruire le pagine a mano è preciso, ma si mangia giorni che preferiresti dedicare al redesign vero e proprio.

Questa guida mostra come portare un website to Figma come veri layer modificabili con HTML to Frames, e come trasformare quell'importazione in una proposta di redesign che il cliente capisce a colpo d'occhio. È scritta per agenzie e designer freelance, ma il flusso di lavoro funziona altrettanto bene per i team interni che analizzano il sito del proprio prodotto.

Perché portare in Figma il sito attuale?

Una proposta di redesign è un'argomentazione. Stai dicendo al cliente: "ecco cosa avete, ecco cosa dovrebbe essere ed ecco perché". L'argomentazione è molto più forte quando la parte "cosa avete" è accurata e modificabile.

• Analizzi l'originale. Spaziature, scala tipografica, uso dei colori e incoerenze tra componenti sono visibili nel pannello dei layer, non dedotti da uno screenshot.
• Riprogetti sulla struttura esistente. Cambia una hero, sostituisci lo stile di una card, rivedi la navigazione, mentre il resto della pagina resta intatto come contesto.
• Mostri prima e dopo fianco a fianco. Stessa dimensione del frame, stessi contenuti, design diverso. I clienti capiscono subito.
• Risparmi il tempo della ricostruzione. Le ore che passeresti a ridisegnare il sito attuale vanno nell'esplorazione delle opzioni.

HTML to Frames converte una pagina in veri frame, testi, vettori e immagini Figma, non in un'immagine piatta. Se vuoi approfondire questa distinzione, leggi HTML to canvas o layer modificabili.

Website to Figma o URL to Figma: qual è la differenza?

Si cercano entrambe le espressioni e, in pratica, indicano lo stesso flusso di lavoro. URL to Figma descrive di solito il meccanismo: incolli un link, ottieni un design. Website to Figma descrive la portata: più pagine di un sito, spesso su più dimensioni dello schermo. HTML to Frames copre entrambi, da una singola importazione URL to Figma a un'acquisizione completa website to Figma con le pagine collegate.

Passo 1: pianifica quali pagine acquisire

Prima di aprire Figma, elenca le pagine che raccontano la storia del redesign. Per la maggior parte dei siti marketing sono:

1. Homepage
2. Una landing page o pagina prodotto chiave
3. Prezzi
4. Chi siamo o team
5. Indice del blog e un articolo
6. Contatti o una pagina con un modulo chiave

Raramente ti serve l'intera mappa del sito. Ti serve una pagina per template, perché sono i template che riprogetterai. Da sei a dieci pagine di solito bastano, e stanno comodamente in un'unica importazione Multiple.

Passo 2: importa più pagine in un colpo solo

Apri il plugin e usa la sorgente Multiple. Incolla fino a 10 link; vengono elaborati uno dopo l'altro e ogni pagina diventa una riga sul canvas. L'importazione Multiple è disponibile con ogni piano, Free compreso.

Alcuni dettagli contano nel lavoro di agenzia:

• Un sito = una larghezza. Desktop usa la Site width: il plugin misura la larghezza di design reale della pagina al momento dell'importazione. I design a tutta larghezza arrivano a 1920 con il contenitore centrato, i siti boxed alla larghezza del loro contenitore (per esempio 1200, 1280 o 1440), i siti fluidi a 1440. In un'importazione multipagina tutte le pagine del sito condividono quella larghezza, così le righe risultano allineate.
• I nomi dei frame sono leggibili. I frame hanno nomi come domain/path — Desktop (1920), senza protocollo né www, così distingui le pagine nel pannello dei layer.
• Banner dei cookie e popup possono essere nascosti su richiesta, e le animazioni vengono congelate per un frame pulito. Il sito viene acquisito come lo vede un normale visitatore.

Importa le pagine collegate invece di cercare gli URL

Se non hai ancora un elenco di pagine, importa prima la homepage. Dopo l'importazione, usa Import linked pages: scegli altre pagine dello stesso sito da un elenco e vengono importate come importazione Multiple. È il modo più rapido per prendere le principali destinazioni della navigazione senza copiare gli URL dal browser.

Passo 3: acquisisci il responsive set

Sempre più spesso i clienti chiedono "come si vede sul mio telefono?" prima di qualsiasi altra cosa. Rispondi con frame reali.

Attiva il Responsive set per acquisire Desktop + Tablet + Mobile in un clic. Tablet è 768, Mobile è 390, e c'è anche Laptop a 1280. Con Pro e Team puoi acquisire fino a 4 schermate per importazione e impostare una Custom width se gli analytics del cliente mostrano un breakpoint insolito. Le schermate di una pagina vengono acquisite in parallelo.

Il conteggio resta semplice: 1 importazione = 1 pagina con tutte le sue schermate. Desktop, Tablet e Mobile della homepage contano come un'unica importazione.

Passo 4: aggiungi Light + Dark se il sito lo supporta

Se il sito del cliente risponde a prefers-color-scheme, l'opzione Light + Dark (Pro) acquisisce la pagina in entrambe le modalità. Ottieni un'unica collezione di variabili con modalità Light e Dark, più una copia scura di ogni schermata. È un ottimo punto di partenza se la modalità scura fa parte del brief del redesign, e ti dice subito quali componenti non sono mai stati progettati per sfondi scuri.

Tieni presente che i file Figma Free consentono una sola modalità per collezione, quindi in un file Free la modalità scura viene saltata con una nota.

Passo 5: trasforma l'importazione in un audit

Ora l'importazione diventa un file di lavoro. Prima di riprogettare qualsiasi cosa, dedica un'ora all'audit.

Leggi il design system che esiste già

Con Styles & variables (Pro), il plugin crea variabili colore dai colori usati due o più volte e dalle custom property CSS del sito, così --brand-primary diventa brand/primary. Ottieni anche stili di testo e stili di ombra. Importa due volte lo stesso sito e non viene creato nulla di nuovo, perché variabili e stili esistenti vengono riutilizzati quando i valori corrispondono.

Quella collezione è un inventario onesto. Trenta grigi quasi identici o undici dimensioni del testo corrente raccontano da soli una storia nella tua proposta.

Individua i componenti ripetuti

Con Components & hover states (Pro), strutture ripetute come card, pulsanti e voci di menu diventano componenti e istanze, e gli elementi con uno stato hover diventano component set con varianti Default e Hover. I componenti principali finiscono in un frame "Components · site". Per un audit, quel frame è un inventario già pronto di ciò che il sito attuale usa davvero.

Controlla la struttura del layout

La maggior parte dei frame arriva con l'Auto Layout, quindi puoi ridimensionare e riorganizzare. Il plugin prima costruisce la pagina al pixel, poi ricava pile, gap, padding e allineamento e verifica la posizione di ogni elemento figlio prima di mantenere il risultato. Se un frame non può essere espresso in modo pulito, mantiene le posizioni assolute con constraint sensati, e la schermata dei risultati ti dice perché. Il meccanismo completo è descritto in Auto Layout spiegato.

Tieni un layer di riferimento

Attiva Reference screenshot per aggiungere un layer nascosto e bloccato che puoi attivare per confrontare l'importazione con la pagina online. Utile quando un cliente chiede: "è davvero quello che abbiamo oggi?"

Passo 6: costruisci la proposta di redesign

Con un "prima" accurato e modificabile, la proposta si compone quasi da sola.

Duplica, poi riprogetta

Duplica ogni riga importata. Tieni l'originale come Prima, chiama la copia Dopo e inizia a riprogettare sulla copia. Poiché i contenuti sono testo e immagini reali, riprogetti con i testi e le fotografie del cliente, non con il lorem ipsum.

Presenta tavole prima/dopo

Affianca i frame Prima e Dopo alla stessa larghezza. Per ogni template, aggiungi due o tre annotazioni che spiegano la modifica: gerarchia più chiara, moduli più brevi, contrasto migliore, componenti consolidati.

Prototipa il flusso

I link tra pagine importate diventano interazioni Navigate e gli header fixed o sticky continuano a funzionare in modalità Present. Ciò significa che puoi navigare il sito attuale e poi la proposta nello stesso prototipo: una presentazione convincente durante una call.

Prima e dopo: cosa cambia nel tuo flusso di lavoro

Piano Team e licenze per le agenzie

Nelle agenzie di solito più di un designer lavora a un redesign. Ecco come si adattano i piani:

• Free: $0, 10 importazioni al mese, 1 schermata per importazione, importazione Multiple con 10 link. Ideale per provare il flusso di lavoro su un sito piccolo.
• Pro: $7 al mese al lancio (prezzo pieno $9), importazioni illimitate con uso corretto, fino a 4 schermate per importazione, più stili e variabili, Snap, componenti e hover, Light + Dark, Custom width, Detailed layers, Reference screenshot ed Extra wait. Si acquista con il checkout di Figma.
• Team: $22 al mese al lancio (prezzo pieno $29), stesse funzionalità di Pro, 5 postazioni tramite una chiave di licenza condivisa.

Per un'agenzia che gestisce qualche redesign al mese, Team mantiene tutti sullo stesso insieme di funzionalità senza che ogni designer debba acquistare separatamente. Vedi i prezzi per i dettagli.

Esempio di calendario: uno sprint di redesign di due settimane

Ecco come può presentarsi uno sprint tipico quando l'importazione è gestita dal plugin. Adattalo al tuo processo.

Il passaggio di importazione, che prima richiedeva uno o due giorni di ricostruzione, si riduce alla prima mattina.

Consigli per risparmiare tempo sui siti dei clienti

• Usa Extra wait (Pro) per i siti che caricano i contenuti in ritardo, come slider o sezioni lazy.
• Scegli la lingua della pagina per i siti multilingue; il plugin supporta 15 lingue.
• Risolvi prima i font. La schermata Missing fonts suggerisce le sostituzioni prima della costruzione e ricorda le tue scelte per ogni sito.
• Reimporta con un clic quando il cliente rilascia una modifica a metà progetto. L'URL sorgente è memorizzato sul frame.
• Attenzione ai contenuti incorporati. Mappe, video senza poster e canvas WebGL arrivano come immagine screenshot di quel riquadro, perché non possono diventare layer.
• Le pagine con login richiedono la strada del browser. Per portali clienti o dashboard protette da login, usa l'estensione Chrome; vedi la nostra guida a localhost e pagine con login.

Dati dei clienti e privacy

Alle agenzie viene spesso chiesto come viene trattato il materiale dei clienti. Le pagine vengono renderizzate in un browser isolato e in sandbox, consegnate una sola volta, poi eliminate dalla memoria, e non vengono mai scritte su disco. Il plugin non legge il contenuto del tuo file Figma; scrive soltanto layer. La pagina sulla sicurezza contiene i dettagli che puoi inoltrare a un cliente.

Per concludere

Portare il website to Figma di un cliente come layer modificabili trasforma il primo e più noioso passaggio di un redesign in una breve importazione. Ottieni un "prima" accurato, un audit costruito sul CSS reale del sito e un file in cui la proposta cresce naturalmente accanto all'originale. Inizia con un template, controlla il risultato, poi porta dentro il resto del sito con Multiple e Import linked pages.

Pronto a provarlo? Scopri tutte le funzionalità, leggi la documentazione oppure ottieni il plugin ed esegui la tua prima importazione.