Localhost to Figma: acquisire pagine con l'estensione Chrome

Un'importazione da URL funziona quando la pagina è pubblica. Molte delle schermate che ti servono davvero in Figma non lo sono: il feature branch in esecuzione su localhost:3000, una dashboard di amministrazione protetta da login, un server di staging sulla rete dell'ufficio o un checkout con articoli già nel carrello.

Per queste, HTML to Frames ha un'estensione Chrome gratuita. Acquisisce la pagina dal tuo browser, esattamente come la vedi, e la passa al plugin Figma, che la trasforma in frame, testi, vettori e immagini modificabili con Auto Layout. Questa guida spiega come portare localhost to Figma, come acquisire pagine con login e stati specifici e cosa fare quando qualcosa non va.

Quando usare l'estensione Chrome invece di un URL

La sorgente Link del plugin renderizza le pagine in un browser isolato sul servizio di acquisizione di HTML to Frames. Quel browser vede ciò che vede un visitatore anonimo su internet. Non può raggiungere la tua macchina, la tua rete privata o la tua sessione con login.

Usa l'estensione quando la pagina è:

• In esecuzione in locale, come localhost, 127.0.0.1 o un server di sviluppo sulla tua rete.
• Protetta da login, come dashboard SaaS, pannelli di amministrazione, impostazioni dell'account o portali clienti.
• Su una rete privata, come ambienti di staging su VPN o strumenti intranet.
• In uno stato specifico, come un menu a tendina aperto, un modulo compilato, una finestra modale, un carrello con prodotti o un messaggio di errore dopo l'invio.

Per le pagine pubbliche, un'importazione URL to Figma resta la strada più semplice e supporta i responsive set in un clic.

Cos'è l'estensione (e cosa non è)

L'estensione funziona nel tuo browser. Non richiede alcun account, non contiene analytics e non carica codice remoto. Non invia nulla a HTML to Frames a meno che tu non scelga Send to Figma. Anche in quel caso, l'acquisizione viene mantenuta in memoria solo finché il tuo plugin non la preleva, per un massimo di 30 minuti.

Un'acquisizione conta come un'importazione nel tuo piano. L'estensione in sé è gratuita. Approfondisci nella pagina dell'estensione Chrome.

Passo per passo: localhost to Figma

1. Installa l'estensione Chrome di HTML to Frames e fissala nella barra degli strumenti.
2. Avvia il tuo server di sviluppo e apri la pagina in Chrome, per esempio http://localhost:3000/settings.
3. Imposta la larghezza della finestra sulla schermata che vuoi (ne parliamo più avanti).
4. Porta la pagina nello stato che vuoi: login effettuato, dati caricati, menu aperto.
5. Fai clic sull'icona dell'estensione e scegli se acquisire la pagina intera o selezionare un elemento.
6. Consegna l'acquisizione a Figma, tramite gli appunti o un file .h2f, oppure con Send to Figma.
7. In Figma, il plugin costruisce i layer e mostra la schermata dei risultati con frame, layer, quota di Auto Layout ed eventuali avvisi.

Pagina intera o singolo elemento

L'estensione offre due modalità di acquisizione.

Acquisire la pagina intera

È la scelta predefinita per le schermate che vuoi rivedere o riprogettare per intero: una dashboard, una pagina di impostazioni, una landing page in sviluppo. Ottieni un frame per la pagina, con frame annidati che rispecchiano il DOM.

Selezionare un singolo elemento

Spesso ti serve solo un componente: una card dei prezzi, la barra di navigazione, una tabella di dati, una finestra modale. Scegli la selezione dell'elemento e:

• Passa il mouse sulla pagina; l'elemento sotto il cursore viene evidenziato.
• Premi ↑ per passare all'elemento genitore, ↓ per passare a un figlio.
• Premi Invio per acquisire l'elemento evidenziato.
• Premi Esc per annullare.

L'acquisizione di un elemento è il modo più rapido per costruire un riferimento di componenti da un prodotto online, o per inviare un singolo widget a un designer per la revisione senza il resto della pagina.

Due modi di consegna: appunti/.h2f o Send to Figma

Appunti e .h2f

L'acquisizione viene copiata negli appunti o salvata come file .h2f. In Figma, apri il plugin, vai alla scheda Browser e incolla. Un file .h2f è comodo quando è un'altra persona ad acquisire la pagina (per esempio un PM con accesso alla dashboard di un cliente) e un designer la importa in seguito.

Send to Figma

Se acquisisci spesso, collega una volta l'estensione al tuo plugin con un codice monouso. Da quel momento le acquisizioni arrivano direttamente nel plugin aperto, senza passaggio di incolla. Tieni il plugin aperto in Figma mentre lavori.

Un'acquisizione = una schermata alla larghezza attuale della finestra

L'estensione acquisisce ciò che renderizza il tuo browser, quindi un'acquisizione è una schermata alla larghezza attuale della finestra. Se la finestra è larga 1440 px, ottieni un frame desktop da 1440.

Per acquisire altri breakpoint, ridimensiona la finestra e acquisisci di nuovo:

• Tablet: ridimensiona a circa 768 px di larghezza e acquisisci.
• Mobile: ridimensiona a circa 390 px di larghezza e acquisisci.

La barra degli strumenti dei dispositivi nei DevTools di Chrome è un modo comodo per impostare larghezze esatte. Ogni acquisizione conta come un'importazione. Se la pagina è pubblica, la sorgente Link del plugin può invece produrre il responsive set completo (Desktop + Tablet + Mobile) in un'unica importazione.

Acquisire stati che un URL non può riprodurre

L'estensione acquisisce lo stato attuale della pagina, e questo sblocca schermate altrimenti noiose da ricreare:

• Menu e menu a tendina aperti. Apri il menu, poi acquisisci la pagina o seleziona l'elemento del menu.
• Moduli compilati ed errori di validazione. Compila i campi, invia per far comparire gli errori, poi acquisisci.
• Carrelli e checkout. Aggiungi prodotti e acquisisci il carrello con righe d'ordine reali.
• Stati vuoti, di caricamento e popolati. Acquisisci la stessa dashboard con e senza dati per un inventario degli stati.
• Finestre modali e notifiche toast. Falle comparire e acquisiscile mentre sono sullo schermo.

Per i team di prodotto, è il modo più rapido per documentare in Figma ogni stato di un flusso prima di un redesign o di un test di usabilità.

Cosa viene trasferito

L'estensione alimenta lo stesso motore di conversione di tutte le altre sorgenti, quindi ottieni l'intero insieme di funzionalità descritte nella pagina delle funzionalità: layout, testo con stili misti, gradienti, immagini, SVG come vettori modificabili, bordi, ombre, blur, ::before/::after, campi dei moduli, shadow DOM e ordine z-index.

L'Auto Layout viene ricavato dalla geometria misurata dal browser e verificato: la posizione di ogni elemento figlio viene controllata entro 2 px e, se non regge, si prova un piano più semplice oppure il frame mantiene le posizioni assolute con constraint sensati. Nei nostri test, l'Auto Layout è stato ricavato su circa l'86–97 percento dei frame, a seconda del sito. Se scrivi tu il front-end, questa guida alla mappatura mostra come scrivere CSS che si importa in modo pulito.

I contenuti incorporati che non possono diventare layer, come iframe con mappe, video senza poster o canvas WebGL, arrivano come immagine screenshot di quel riquadro.

Una checklist rapida prima dell'acquisizione

Ripassa questo elenco prima di ogni sessione di acquisizione per evitare di rifare il lavoro:

• Larghezza: la finestra è al breakpoint che vuoi, con lo zoom del browser al 100%?
• Dati: la pagina è completamente caricata, inclusi grafici, immagini e sezioni lazy?
• Stato: menu, finestre modali o errori dei moduli sono visibili esattamente come li vuoi in Figma?
• Contenuti: sei passato a un account di test o a dati fittizi dove altrimenti comparirebbero dati reali dei clienti?
• Ambito: ti serve la pagina intera, o un singolo elemento sarebbe più chiaro per la revisione?
• Consegna: il plugin è aperto in Figma, se usi Send to Figma?

Due minuti qui ti risparmiano diversi giri di acquisizione della stessa schermata.

Privacy per pagine con login e interne

Acquisire una dashboard significa acquisire tutto ciò che contiene. Alcune regole pratiche:

• L'acquisizione avviene nel tuo browser. Non ne esce nulla a meno che tu non incolli in Figma o usi Send to Figma.
• Send to Figma è transitorio. L'acquisizione attende in memoria finché il tuo plugin non la preleva, al massimo 30 minuti, e non viene scritta su disco.
• Maschera prima i dati sensibili. Usa account di test o dati fittizi quando puoi, perché ciò che è sullo schermo finisce come layer di testo nel tuo file Figma.
• Il tuo file Figma non viene letto. Il plugin scrive solo layer e legge i metadati dei propri frame.

Vedi la pagina sulla sicurezza per la policy completa.

Risoluzione dei problemi

Nell'acquisizione mancano contenuti che si caricano tardi

Attendi che la pagina sia completamente caricata, incluse sezioni lazy e grafici, prima di acquisire. Scorri la pagina una volta se i contenuti si caricano durante lo scroll.

Il layout è diverso da quello che vedo

Controlla la larghezza della finestra: l'acquisizione riflette esattamente la larghezza attuale. Verifica anche che non sia applicato alcuno zoom del browser.

Send to Figma non fa nulla

Assicurati che il plugin sia aperto in Figma. Se hai fatto l'associazione tempo fa o hai cambiato computer, ripetila con un nuovo codice monouso. Le acquisizioni attendono fino a 30 minuti, quindi aprendo il plugin entro quel tempo vengono comunque consegnate.

Incollare nella scheda Browser non funziona

Gli appunti potrebbero essere stati sovrascritti da un'altra copia. Acquisisci di nuovo, oppure salva come file .h2f e carica quello.

I font non sono corretti

I web font locali o con licenza potrebbero non essere installati sulla tua macchina. La schermata Missing fonts del plugin suggerisce le sostituzioni prima della costruzione e ricorda le tue scelte per ogni sito.

Alcuni frame non sono in Auto Layout

La schermata dei risultati elenca perché un frame è rimasto assoluto. Spesso si tratta di contenuti sovrapposti o margini negativi. Il frame corrisponde comunque alla pagina; mantiene solo le posizioni assolute con i constraint.

Localhost to Figma in un flusso di lavoro di sviluppo

Per gli sviluppatori front-end, l'estensione trasforma l'handoff del design in una strada a doppio senso:

1. Costruisci la funzionalità in locale.
2. Acquisisci le nuove schermate a larghezza desktop e mobile.
3. Inviale a Figma accanto al design originale.
4. I designer rivedono l'implementazione reale, commentano e modificano.
5. Correggi, riacquisisci e confronta.

Se costruisci con strumenti AI, c'è anche una strada diretta: Claude Code, Claude Desktop o Cursor possono inviare HTML al plugin via MCP. Vedi AI to Figma via MCP.

Per iniziare

Installa l'estensione Chrome, apri la tua build locale e acquisisci prima un elemento, una card o un pulsante, per vedere come arriva. Poi acquisisci la pagina intera a larghezza desktop e mobile. La documentazione descrive nel dettaglio l'associazione e la scheda Browser, e la pagina dei prezzi spiega come le acquisizioni vengono conteggiate nelle tue importazioni.