HTML to frame: come un DOM diventa Auto Layout in Figma

Convertire una pagina web in un'immagine è facile. Convertirla in frame Figma che si comportano come se li avesse costruiti un designer è la parte difficile. Un frame che sembra giusto ma collassa appena modifichi un titolo non è molto meglio di uno screenshot.

Questo articolo spiega, passo per passo, come HTML to Frames trasforma un DOM in frame Figma annidati, come il suo motore Auto Layout decide cosa diventa una pila e perché controlla il proprio lavoro prima di mantenerlo.

Dal DOM all'albero dei frame

Una pagina web è un albero: body contiene sezioni, le sezioni contengono contenitori, i contenitori contengono card, le card contengono titoli e pulsanti. Anche un file Figma è un albero: i frame contengono frame, testi e vettori.

L'idea di base della conversione HTML to frame è mappare un albero sull'altro:

• Ogni pagina e schermata diventa un frame principale. Un'importazione Desktop, Tablet e Mobile di una pagina produce tre frame affiancati.
• Gli elementi che fanno da riquadro diventano frame annidati. Sfondi, bordi, raggi, ombre e ritagli diventano proprietà del frame.
• Il testo diventa layer di testo con gli stili misti preservati, quindi una frase con un link in grassetto resta un unico layer di testo.
• Gli SVG diventano vettori modificabili e le immagini diventano riempimenti immagine.
• Pseudo-elementi (::before, ::after), contenuto dello shadow DOM e ordine z-index vengono trasferiti, così l'impilamento corrisponde a ciò che ha disegnato il browser.

L'obiettivo è un pannello dei layer che un designer possa leggere, non un elenco di ogni nodo del DOM. Se ti serve una struttura dei layer più granulare da ispezionare, c'è l'opzione Detailed layers (Pro).

Nomi dei frame

I frame principali hanno nomi che ti permettono di trovarli in un file grande:

example.com/pricing — Desktop (1920)

Il nome contiene dominio e percorso (più la query, se presente), senza protocollo e senza www, seguiti dalla schermata e dalla sua larghezza, ed è limitato a 60 caratteri. Sul frame viene memorizzato anche l'URL sorgente, ed è questo che rende possibile il Re-import in un clic.

Passo 1: costruire prima al pixel

Il motore non inizia indovinando l'Auto Layout. Parte da una versione che ha la garanzia di essere corretta:

1. La pagina viene renderizzata in un browser reale alla larghezza scelta. Per Desktop è la Site width, una larghezza che il plugin misura dal design effettivo della pagina (1920 per i layout a tutta larghezza, la larghezza del contenitore per i siti boxed, 1440 per quelli fluidi).
2. Vengono misurati la geometria e gli stili calcolati di ogni elemento.
3. L'albero dei frame viene costruito con posizioni assolute, così ogni layer si trova esattamente dove l'ha messo il browser.

Questa versione assoluta è la rete di sicurezza. Tutto ciò che viene dopo è un miglioramento che deve dimostrare di funzionare.

Passo 2: ricavare l'Auto Layout, dall'interno verso l'esterno

Poi il motore percorre i frame dal più interno verso l'esterno. Per ogni frame, esamina la geometria misurata dei suoi figli e si chiede: possono essere descritti come una pila in Auto Layout?

Ricava:

• Direzione: i figli sono disposti in una pila verticale o orizzontale?
• Andata a capo: formano righe a capo, come una griglia CSS di card o flex-wrap?
• Gap: la spaziatura tra i figli è abbastanza coerente da essere un unico valore di gap?
• Padding: a che distanza sono i figli dai bordi del frame su ogni lato?
• Allineamento: sono allineati all'inizio, al centro o alla fine su ciascun asse?

Lavorare dall'interno verso l'esterno è importante: una volta che il contenuto di una card è una pila verticale pulita, la card stessa può essere trattata come un singolo elemento nella riga di card che la circonda.

Aspetto fondamentale: l'inferenza si basa su ciò che il browser ha effettivamente renderizzato, non sull'analisi del CSS. Che una riga sia stata costruita con flexbox, grid, float o inline-block, il risultato misurato è lo stesso, ed è da lì che parte il motore.

Passo 3: aggiungere il significato responsive

Una pila con gap e padding corretti è un inizio, ma non si comporta ancora come un design responsive. Il motore ricava anche l'intento:

• Contenuto centrato → Center. Se il contenuto è centrato nel suo genitore, viene allineato Center, così resta centrato quando il frame viene ridimensionato.
• I contenitori con max-width restano centrati. Un contenitore del contenuto con larghezza massima dentro una sezione a tutta larghezza mantiene la sua larghezza e resta al centro.
• Card uguali e flex-grow → Fill. Le card che si dividono equamente una riga, o gli elementi che crescono per riempire lo spazio, vengono impostati su Fill container.
• Logo … menu … icone → l'elemento di spaziatura diventa Fill. In un header tipico, è lo spazio tra i gruppi ad allungarsi. Il motore imposta quell'elemento di spaziatura su Fill, così il logo resta a sinistra e le icone a destra quando l'header si allarga.

È la differenza tra un frame che corrisponde alla pagina a una sola larghezza e un frame che puoi davvero ridimensionare.

Passo 4: verificare ogni elemento figlio (tolleranza di 2 px)

Ecco la parte che mantiene intatto il design. Dopo aver applicato un piano di Auto Layout a un frame, il motore controlla la posizione di ogni elemento figlio rispetto al layout originale al pixel. Ognuno deve trovarsi entro 2 px da dove l'ha messo il browser.

• Se ogni figlio regge, il piano viene mantenuto.
• Altrimenti si prova un piano più semplice, per esempio una singola pila senza le impostazioni di allineamento o Fill più ambiziose.
• Se nessun piano regge, il frame mantiene le sue posizioni assolute.

La regola è semplice: il design non si rompe mai. Potresti ottenere meno frame in Auto Layout in una sezione complicata, ma non avrai un layout che si sposta senza avvisarti.

Quanto spesso funziona? Nei nostri test su siti reali, l'Auto Layout è stato ricavato su circa l'86–97% dei frame, per esempio il 93% su un sito di prodotto e l'88% su Linear e Stripe. I risultati dipendono da come è costruita la pagina, quindi considerali misurazioni, non una garanzia.

Passo 5: constraint per i frame che restano assoluti

I frame che mantengono posizioni assolute non vengono trascurati. Il motore assegna loro constraint sensati:

• Stretch: per gli elementi che occupano tutto il genitore, come un layer di sfondo a tutta larghezza.
• Scale: per gli elementi che devono ridimensionarsi in proporzione.
• Center: per gli elementi centrati nel loro genitore.
• Min: ancorati a sinistra o in alto.
• Max: ancorati a destra o in basso.

Così anche un frame assoluto si comporta in modo ragionevole quando ridimensioni il suo genitore.

Passo 6: diagnostica, ovvero perché un frame è rimasto assoluto

La schermata dei risultati riporta frame, layer e quota di Auto Layout dell'importazione, insieme a font mancanti e avvisi. Elenca anche perché determinati frame sono rimasti assoluti. In pratica, le sezioni che restano assolute tendono a essere quelle in cui i figli si sovrappongono, si trovano fuori dal flusso normale o sono distanziati in modo troppo irregolare per essere descritti come un'unica pila.

Questa diagnostica è utile in due modi:

• Per i designer: sai quali sezioni convertire a mano se ti servono completamente responsive.
• Per gli sviluppatori: spesso è un indizio di codice di layout più complesso del necessario.

Da CSS flexbox e grid all'Auto Layout: una tabella di mappatura

Poiché il motore lavora dalla geometria misurata, la mappatura qui sotto descrive il risultato tipico, non una traduzione letterale delle proprietà CSS. Per approfondire, vedi Da CSS flexbox e grid all'Auto Layout di Figma.

Un esempio pratico: una sezione prezzi con tre card

Per rendere concreti i passaggi, immagina una sezione comune: un titolo e un sottotitolo centrati in alto, poi tre card di prezzo in riga, ognuna con nome del piano, prezzo, elenco di funzionalità e pulsante.

Ecco come il motore la affronterebbe di solito:

1. Costruzione al pixel. Ogni elemento viene posizionato nella sua posizione misurata. La sezione è già corretta.
2. Prima i frame più interni. Ogni elenco di funzionalità diventa una pila verticale con un gap coerente. Ogni card diventa una pila verticale (nome, prezzo, elenco, pulsante) con il padding ricavato dalla distanza dai bordi della card.
3. La riga di card. Le tre card sono affiancate con larghezze uguali e spaziature uguali, quindi la riga diventa una pila orizzontale con un unico gap, e ogni card viene impostata su Fill per dividersi equamente la larghezza.
4. Il blocco del titolo. Titolo e sottotitolo sono centrati, quindi diventano una pila verticale allineata Center.
5. Verifica. Ogni figlio di ogni frame viene confrontato con la sua posizione originale. Se, per esempio, un badge "Più popolare" si sovrappone al bordo superiore della card centrale, il piano di quella card potrebbe non superare il controllo a 2 px. Il motore prova un piano più semplice e, se anche quello non regge, la card mantiene le posizioni assolute con i constraint, e la schermata dei risultati ti dice di quale frame si tratta.

Il risultato è una sezione che puoi ridimensionare: allarga il frame e le card crescono insieme; modifica un elenco di funzionalità e la card cresce di conseguenza. Con Components & hover states (Pro), le tre card possono anche arrivare come istanze di un unico componente, dato che condividono la stessa struttura.

Cosa significa nella pratica

Quando apri una pagina importata, puoi:

• Modificare un titolo: la sezione cresce e spinge in basso il contenuto sottostante.
• Cambiare un solo valore di gap per compattare una griglia di card.
• Ridimensionare il frame e guardare gli elementi Fill allungarsi mentre il contenuto centrato resta al suo posto.
• Sostituire una card con un'istanza di componente; e con Components & hover states (Pro), le card ripetute potrebbero già essere componenti.

È questo che distingue un albero di frame da un'immagine appiattita. Il confronto HTML to canvas approfondisce questo contrasto.

Consigli per risultati migliori con l'Auto Layout

1. Importa alla larghezza giusta. Lascia che Desktop usi la Site width e aggiungi Tablet e Mobile con il Responsive set, così puoi controllare ogni breakpoint.
2. Nascondi gli overlay. Attiva Hide cookie banners & popups, così le finestre fisse non si sovrappongono alle sezioni costringendo al posizionamento assoluto.
3. Acquisisci stati stabili. Le animazioni vengono congelate al momento dell'acquisizione, ma per i contenuti che si caricano tardi aiuta Extra wait (Pro).
4. Controlla la diagnostica prima di convertire qualcosa a mano. Ti dice esattamente quali frame guardare.
5. Usa Reference screenshot (Pro) quando devi confermare che i layer corrispondono alla pagina online.

Per saperne di più

• Il flusso di importazione completo: Come convertire HTML in Figma
• Tutte le funzionalità di conversione: funzionalità
• Ogni opzione, spiegata: documentazione
• Piani e limiti: prezzi

Ottieni il plugin e importa una pagina che conosci bene. Il modo più rapido per capire il motore è ridimensionare il risultato e vedere cosa regge.