Dal codice al design
HTML to design: ricostruisci il file di design da cui il codice si è allontanato
Quando il prodotto rilasciato non corrisponde più ai mockup, reimportalo. HTML to Frames trasforma l'HTML online in un file Figma con variabili, stili e componenti.
- Variabili colore dalle custom property CSS del tuo sito
- Card e pulsanti ripetuti diventano componenti
- Si aggancia al design system che hai già
In arrivo su Figma Community
HTML to design è il contrario del solito handoff: invece di trasformare un mockup in codice, riporti il codice rilasciato a un file di design. I team ci ricorrono quando il file Figma è rimasto indietro rispetto alla produzione, quando un cliente consegna un sito senza alcun file sorgente, o quando un redesign deve partire da ciò che gli utenti vedono oggi e non da un mockup di due anni fa.
Il problema della maggior parte dei flussi inversi è che il risultato è un vicolo cieco. Ottieni un'immagine della pagina, o rettangoli sparsi con valori esadecimali scritti a mano, e qualcuno passa una settimana a ricostruire gli stili. HTML to Frames è pensato per produrre un file che puoi davvero mantenere. Con Pro estrae variabili colore dai colori usati almeno due volte e dalle custom property CSS del sito, così --brand-primary diventa brand/primary in una collezione Colors · <domain>. Insieme vengono creati stili di testo e di ombra, e le strutture ripetute come card, pulsanti e voci di menu diventano componenti con istanze.
Se il tuo team ha già un design system in Figma, il plugin non entra in competizione con esso. Variabili e stili corrispondenti vengono riutilizzati e, con Snap attivo, i valori senza una corrispondenza esatta si agganciano al colore o allo stile di testo più vicino del tuo file. Importare due volte lo stesso sito non crea nulla di nuovo.
Il risultato è un file di design che nasce già ordinato. Leggi la guida al flusso di lavoro HTML to design per una panoramica completa, scopri come funziona la conversione di base in HTML to Figma oppure confronta cosa include ogni piano nella pagina dei prezzi.
Dal codice in produzione a un file di design funzionante
- 01
Importa le pagine online
Incolla un URL o fino a 10 link, oppure trascina la cartella del sito se hai l'output della build.
- 02
Attiva Styles & variables
Vengono create variabili colore, stili di testo e stili di ombra, riutilizzando tutto ciò che corrisponde già nel tuo file.
- 03
Attiva Snap per il tuo sistema
I valori fuori sistema si agganciano al colore o allo stile di testo più vicino, invece di creare quasi-duplicati.
- 04
Rifinisci i componenti
Le strutture ripetute arrivano come componenti e istanze in un frame Components, pronti da rinominare e documentare.
- 05
Inizia il redesign
Lavora su layout reali con Auto Layout invece di ridisegnare da zero il prodotto attuale.
Output da design system, non solo layer
Variabili colore
Fino a 96 variabili colore da colori ripetuti e custom property CSS, raggruppate in una collezione per dominio.
Stili di testo e di ombra
Fino a 48 stili di testo più stili di ombra nelle dimensioni sm, md, lg e xl.
Aggancio ai tuoi stili
Usa la distanza percettiva OKLab per i colori e, per il testo, stessa famiglia, stesso peso e dimensione entro il 10%.
Componenti automatici
Card, pulsanti e voci di menu che si ripetono diventano componenti e istanze, mantenendo gli override di testo e immagini.
Varianti hover
Gli elementi con uno stato hover diventano component set con varianti Default e Hover e un'interazione on-hover.
Modalità Light e Dark
Acquisisci entrambi gli schemi di colori in un'unica collezione di variabili con modalità Light e Dark, più una copia scura di ogni schermata.
Perché ricostruire un design a mano è lento
Ricostruire a occhio una pagina di produzione in Figma significa misurare spaziature, campionare colori, indovinare le dimensioni dei font e ridisegnare le icone. Una sola pagina marketing può richiedere una giornata. Un prodotto con decine di schermate richiede settimane, e il risultato si discosta comunque dai valori reali.
HTML to Frames legge i valori direttamente dal browser, quindi spaziature, colori e dimensioni del testo sono esatti, non approssimati. Le icone SVG diventano vettori modificabili. Il layout viene tradotto in Auto Layout e verificato entro 2 px, mantenendo il posizionamento assoluto solo dove l'Auto Layout sposterebbe qualcosa.
Questo cambia il primo giorno di un redesign. Invece di passarlo a ricostruire, il team parte da una copia accurata del prodotto attuale e dedica il tempo alle decisioni:
- Quali colori sono davvero in uso, e quali sono quasi-duplicati accidentali?
- Quali componenti si ripetono, e quante varianti esistono nella realtà?
- Dove il layout rilasciato si discosta dal sistema previsto?
La guida al redesign da website a Figma spiega come le agenzie lo usano per preparare le proposte.
Poiché ogni frame mantiene il proprio URL sorgente, puoi reimportare una pagina dopo il rilascio successivo e confrontarla con il redesign. Il file di design resta collegato alla produzione invece di diventare l'ennesima istantanea che lentamente invecchia.
Come vengono estratti variabili e stili
L'estrazione è pensata per produrre un insieme piccolo e utilizzabile, non uno stile per ogni elemento.
Colori
Un colore diventa variabile quando è usato almeno due volte, o quando il sito lo definisce come custom property CSS. I nomi delle custom property vengono mantenuti come struttura: --brand-primary diventa brand/primary. Fino a 96 variabili colore finiscono in una collezione Colors · <domain>.
Testo e ombre
Fino a 48 stili di testo vengono creati dalla tipografia effettivamente renderizzata nella pagina. Le ombre vengono raggruppate negli stili sm, md, lg e xl.
Prima riutilizza, poi crea
Se il tuo file ha già una variabile o uno stile con lo stesso valore, viene riutilizzato. Importa due volte lo stesso sito e non viene creato nulla di nuovo: così un file longevo resta ordinato.
Light + Dark
Con lo schema di colori Light + Dark, la pagina viene acquisita con entrambe le impostazioni di prefers-color-scheme e una collezione riceve due modalità. I file Figma Free consentono una sola modalità per collezione, quindi in quel caso la modalità scura viene saltata con una nota.
Tutto questo resta opzionale. Disattiva Styles & variables e ottieni semplici layer con valori grezzi, che a volte è proprio ciò che vuoi per un riferimento veloce o un'analisi una tantum.
Snap: mantenere le importazioni nel tuo design system
Il codice di produzione raramente corrisponde alla perfezione a un design system. Un pulsante potrebbe usare #2161E9 dove il token è #2160E8, oppure un titolo potrebbe essere di 31 px invece di 32 px. Importare quei valori alla lettera riempirebbe il tuo file di stili quasi duplicati.
Snap to my file's styles risolve il problema. Quando non c'è una corrispondenza esatta, il plugin cerca nel tuo file il colore più vicino usando la distanza percettiva OKLab, e lo stile di testo più vicino con la stessa famiglia di font, lo stesso peso e una dimensione entro il 10%. I layer importati vengono quindi collegati ai tuoi stili invece che a stili nuovi.
È utile in tre situazioni:
- Audit in cui vuoi vedere il prodotto espresso nel sistema ufficiale.
- Redesign che devono partire dentro il sistema fin dal primo frame.
- Analisi dei concorrenti in cui ristilizzi un altro layout con i tuoi token.
Snap, Styles & variables e Components & hover states sono funzionalità Pro. Il plugin non legge mai il contenuto del tuo file oltre il necessario: scrive layer e legge solo i metadati dei propri frame, come descritto nella pagina sulla sicurezza.
Snap funziona al meglio quando il tuo file contiene già stili di colore e di testo pubblicati. Parti da una libreria piccola e pulita, importa una pagina rappresentativa e controlla quali valori si sono agganciati prima di lanciare un'importazione Multiple più ampia sul resto del sito.
Domande frequenti
Indica il passaggio da codice online o da un sito pubblicato a un file di design modificabile. Invece di progettare prima e sviluppare poi, importi ciò che è già costruito, così il file di design torna a corrispondere alla produzione: utile per redesign, audit e siti consegnati senza file sorgente.
Con Pro, sì. I colori usati almeno due volte e quelli definiti come custom property CSS diventano variabili. Una proprietà come --brand-primary diventa brand/primary in una collezione Colors con il nome del dominio. Vengono create fino a 96 variabili colore per importazione.
No. Variabili e stili già presenti nel tuo file vengono riutilizzati quando i valori corrispondono, e importare due volte lo stesso sito non crea nulla di nuovo. Con Snap attivo, i valori senza corrispondenza esatta vengono collegati al colore o allo stile di testo esistente più vicino invece di crearne di nuovi.
Le strutture ripetute come card, pulsanti e voci di menu vengono rilevate e trasformate in componenti con istanze, mantenendo gli override di testo e immagini. Gli elementi con uno stato hover distinto diventano component set con varianti Default e Hover. I componenti principali vengono inseriti in un frame Components separato.
Sì, con Pro. Scegli Light + Dark come schema di colori e la pagina viene acquisita con entrambe le impostazioni. Ottieni un'unica collezione di variabili con modalità Light e Dark più una copia scura di ogni schermata. I file Figma Free consentono una sola modalità per collezione, quindi lì la modalità scura viene saltata.
No. Per la maggior parte dei siti basta un URL pubblico. Se hai l'output della build, puoi trascinare la cartella del sito o un .zip, e per le pagine protette da login l'estensione Chrome gratuita acquisisce ciò che mostra il tuo browser. Tutte le strade producono lo stesso risultato modificabile.
Articoli correlati
Smetti di ridisegnare il web.
Incolla un link e ottieni in pochi secondi layer Figma reali, modificabili e responsive. Si parte gratis: 10 importazioni ogni mese.
Nessuna carta di credito. Pro si acquista direttamente in Figma.
In arrivo su Figma Community