Frame che hanno senso
HTML to frame: ogni pagina e schermata diventa un frame Figma
Frame principali con il nome della pagina e della schermata, frame annidati che seguono il DOM e un Auto Layout verificato prima di essere applicato.
- Larghezza del frame misurata dal design reale
- I frame annidati rispecchiano la struttura della pagina
- Frame Desktop, Tablet e Mobile in un'unica importazione (Pro)
In arrivo su Figma Community
HTML to frame descrive il risultato che i designer vogliono davvero da un'importazione: non una singola immagine, ma un frame Figma per ogni pagina e schermata, con una gerarchia di frame annidati che ha senso quando apri il pannello dei layer. È così che HTML to Frames, il plugin Figma di EUREKA!, struttura ogni importazione.
Ogni schermata acquisita diventa un frame principale con un nome prevedibile, come example.com/pricing — Desktop (1920). Protocollo e www vengono eliminati e i nomi restano entro 60 caratteri, così un'importazione multipagina è facile da scorrere. All'interno, i contenitori della pagina diventano frame, e questi frame seguono il DOM. Un frame header contiene un frame di navigazione, che contiene i frame dei link, proprio come il markup da cui provengono.
La larghezza del frame non è una stima. Il plugin misura la larghezza di design reale della pagina al momento dell'importazione. I design a tutta larghezza ricevono un frame da 1920 con il contenitore centrato, i siti davvero boxed ricevono la larghezza del loro contenitore, come 1200, 1280 o 1440, e i siti fluidi ricevono 1440. In un'importazione multipagina la stessa larghezza viene usata per tutte le pagine di un sito, così i frame risultano allineati.
Dove il layout lo consente, i frame diventano frame in Auto Layout. Il plugin ricava direzione, gap, padding, allineamento e andata a capo dalla geometria misurata dal browser, applica il piano e controlla ogni elemento figlio entro 2 px. I frame in cui questo non regge mantengono le posizioni assolute con i constraint, così niente si sposta in modo inatteso.
Per i dettagli di questo motore, leggi Auto Layout spiegato. Per la conversione in generale, vedi HTML to Figma, e per tante pagine insieme, website to Figma.
Come una pagina diventa frame
- 01
Misura la larghezza del sito
Il plugin rileva se il design è a tutta larghezza, boxed o fluido e sceglie di conseguenza la larghezza del frame Desktop.
- 02
Costruisce frame al pixel
Ogni contenitore diventa un frame nella sua posizione misurata, rispecchiando la gerarchia del DOM.
- 03
Ricava l'Auto Layout dall'interno
Partendo dai frame più interni, ricava e applica pile, righe a capo, gap, padding e allineamento.
- 04
Verifica o ripiega
Ogni elemento figlio viene controllato entro 2 px; i frame che non reggono provano un piano più semplice o mantengono le posizioni assolute con i constraint.
Dettagli a livello di frame che fanno risparmiare tempo di pulizia
Larghezza del sito misurata
I frame Desktop usano la larghezza reale del design: 1920 per i layout a tutta larghezza, la larghezza del contenitore per i siti boxed, 1440 per quelli fluidi.
Gerarchia modellata sul DOM
I frame annidati seguono la struttura della pagina, così sezioni, card e pulsanti sono facili da trovare nel pannello dei layer.
Frame in Auto Layout
Pile orizzontali e verticali, righe a capo, gap e padding, verificati elemento per elemento.
Intento responsive
I contenuti centrati restano centrati, le card uguali usano Fill e lo spazio tra un logo e un menu diventa un elemento Fill.
Responsive set
Frame Desktop, Tablet 768 e Mobile 390 di una pagina acquisiti in parallelo e conteggiati come un'unica importazione (Pro).
Re-import di un frame
Ogni frame memorizza il proprio URL sorgente e la larghezza, così puoi aggiornarlo con un clic.
Nomi dei frame e larghezza del sito
Quando importi dieci pagine su tre schermate, i nomi dei frame contano. HTML to Frames usa un unico schema coerente:
domain/path?query — Screen (width)
Per esempio, shop.example.com/products?sort=new — Mobile (390). Niente protocollo e niente www, e i nomi sono limitati a 60 caratteri, così restano leggibili sul canvas.
Come viene scelta la larghezza Desktop
La schermata Desktop si chiama Site width perché viene misurata, non stimata:
| Tipo di sito | Larghezza del frame Desktop |
|---|---|
| Design a tutta larghezza | 1920, contenitore del contenuto centrato |
| Sito davvero boxed | La larghezza del contenitore, per esempio 1200, 1280 o 1440 |
| Layout fluido | 1440 |
Un sito riceve un'unica larghezza in tutta l'importazione multipagina, così tutti i frame Desktop si allineano in riga. Le altre schermate usano larghezze fisse: Laptop 1280, Tablet 768 e Mobile 390. Con Pro puoi anche inserire una larghezza personalizzata (Custom width) quando ti serve un breakpoint specifico.
Ogni frame memorizza anche il proprio URL sorgente e la larghezza, ed è questo che rende possibile in seguito il Re-import con un clic.
Nomi coerenti aiutano anche fuori da Figma. Quando condividi il link a un frame o lo esporti, il nome dice a uno sviluppatore esattamente quale pagina e quale breakpoint sta guardando.
Frame annidati e Auto Layout, verificati
All'interno di ogni frame principale, la gerarchia rispecchia il DOM. Questo rende il pannello dei layer familiare a chiunque conosca il markup e dà all'Auto Layout contenitori reali su cui lavorare.
Il motore lavora in un ordine preciso:
- Costruisce la pagina al pixel con posizioni assolute.
- Percorre i frame dall'interno verso l'esterno e ricava pile verticali od orizzontali, righe a capo, gap, padding e allineamento dalla geometria misurata.
- Traduce il significato responsive: i contenuti centrati diventano Center, i contenitori con max-width restano centrati, le card uguali e gli elementi flex-grow diventano Fill, e lo spazio tra un logo e un menu diventa un elemento Fill.
- Applica il piano e verifica la posizione di ogni elemento figlio entro 2 px.
- Se non regge, prova un piano più semplice; altrimenti mantiene le posizioni assolute.
I frame che restano assoluti ricevono constraint come Stretch, Scale, Center, Min o Max, così si comportano bene anche quando vengono ridimensionati. La schermata dei risultati elenca perché ciascuno è rimasto assoluto.
Nei nostri test su siti reali, l'Auto Layout è stato ricavato su circa l'86–97 percento dei frame. Il punto non è il numero ma la garanzia che c'è dietro: il design non si rompe mai. Approfondisci come il CSS si traduce in frame in Da CSS flexbox e grid all'Auto Layout.
Una pagina, più schermate: il responsive set
Un singolo frame mostra un breakpoint. Il vero lavoro di design di solito ne richiede almeno tre. Con l'opzione Responsive set, HTML to Frames acquisisce Desktop, Tablet e Mobile della stessa pagina in un clic.
Qualche dettaglio pratico:
- Le schermate di una pagina vengono acquisite in parallelo, non una dopo l'altra.
- Una pagina con tutte le sue schermate conta come un'importazione, non tre.
- Pro e Team consentono fino a quattro schermate per importazione; il piano Free acquisisce una schermata per importazione.
- Ogni schermata è un frame principale a sé, con il nome della schermata e la larghezza, così le distingui a colpo d'occhio.
Poiché ogni schermata viene acquisita alla sua larghezza reale, ottieni il vero layout mobile del sito, non un frame desktop ristretto. La navigazione che si chiude in un pulsante menu, le griglie che passano da quattro colonne a una e la tipografia che si riduce appaiono tutte come il sito le renderizza a quella larghezza: per questo il set è un punto di partenza affidabile per le revisioni di design responsive.
Combina i responsive set con l'importazione Multiple per acquisire più pagine su più breakpoint, e controlla i limiti nella pagina dei prezzi.
Domande frequenti
Significa che ogni pagina web e ogni schermata diventa un frame Figma, con frame annidati all'interno che rispecchiano la struttura DOM della pagina. HTML to Frames crea un frame principale per pagina e schermata e converte i frame interni in Auto Layout ovunque il risultato possa essere verificato.
I frame principali seguono lo schema domain/path?query — Screen (width), per esempio example.com/pricing — Desktop (1920). Protocollo e www vengono rimossi e i nomi restano entro 60 caratteri, così anche grandi importazioni multipagina restano facili da scorrere sul canvas e nel pannello dei layer.
La larghezza Desktop viene misurata dal design reale. I design a tutta larghezza ricevono 1920 con il contenitore centrato, i siti davvero boxed ricevono la larghezza del loro contenitore, come 1200 o 1440, e i siti fluidi ricevono 1440. Un sito mantiene un'unica larghezza in tutta l'importazione multipagina.
Non necessariamente. L'Auto Layout viene applicato solo dove ogni elemento figlio resta entro 2 px dalla sua posizione originale. Altrimenti si prova un piano più semplice e, se fallisce, il frame mantiene le posizioni assolute con i constraint. La schermata dei risultati spiega perché ogni frame è rimasto assoluto.
Free acquisisce una schermata per importazione. Pro e Team acquisiscono fino a quattro schermate per importazione, incluso il Responsive set in un clic con Desktop, Tablet e Mobile. Tutte le schermate di una pagina contano come un'unica importazione e vengono acquisite in parallelo, non una dopo l'altra.
Sì. Ogni frame importato memorizza il proprio URL sorgente e la larghezza, quindi puoi reimportarlo con un clic quando la pagina online cambia. Così il file di design resta allineato alla produzione senza dover avviare una nuova importazione da zero né rinominare di nuovo i frame.
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