Estensione Chrome gratuita
Estensione Chrome to Figma per pagine con login e localhost
Acquisisci ciò che mostra il tuo browser, incluse dashboard, build locali e menu aperti, e trasformalo in layer Figma modificabili.
- Funziona con login, localhost e reti private
- Acquisisci la pagina intera o un solo elemento
- Nessun account, nessun analytics, nessun codice remoto
In arrivo sul Chrome Web Store
Un'estensione Chrome per Figma risolve i casi che un'importazione da URL non può raggiungere. Il servizio di acquisizione di HTML to Frames visita le pagine come visitatore anonimo, quindi non può vedere la tua dashboard di amministrazione, l'app dietro il tuo login, una build in localhost sul tuo portatile o un server di staging in una rete privata. L'estensione Chrome gratuita di HTML to Frames, invece, acquisisce dal tuo browser, usando la sessione in cui hai già effettuato l'accesso.
Acquisisce anche lo stato attuale della pagina. Se un menu a tendina è aperto, un modulo è compilato a metà, una finestra modale è visibile o un carrello contiene tre articoli, è proprio questo che arriva in Figma. Per i product manager che documentano i flussi e per i designer che analizzano stati reali, spesso è l'unico modo pratico per portare quelle schermate in un file di design senza ricrearle.
Puoi acquisire la pagina intera, oppure passare al selettore di elementi per prendere un singolo componente. Passa il mouse per evidenziare, usa i tasti freccia per spostarti all'elemento genitore o figlio, premi Invio per acquisire ed Esc per annullare. L'acquisizione finisce negli appunti, o in un file .h2f, e tu la incolli nella scheda Browser del plugin. Oppure collega una volta l'estensione al tuo plugin con un codice monouso e usa Send to Figma, che consegna le acquisizioni direttamente nel plugin aperto.
I layer risultanti sono gli stessi di qualsiasi altra importazione: testo modificabile, vettori, immagini e Auto Layout verificato. Un'acquisizione conta come un'importazione.
Gli sviluppatori front-end troveranno una guida completa in Da localhost a Figma con l'estensione Chrome. Per le pagine pubbliche, URL to Figma non richiede alcuna estensione, e la pagina sulla sicurezza spiega esattamente cosa invia l'estensione.
Acquisire una scheda con l'estensione
- 01
Installa l'estensione Chrome
Aggiungi a Chrome l'estensione gratuita di HTML to Frames; non serve alcun account.
- 02
Apri la pagina nello stato che vuoi
Accedi, avvia il tuo server locale, apri il menu o compila il modulo esattamente come vuoi acquisirlo.
- 03
Acquisisci la pagina o un elemento
Prendi la pagina intera, oppure usa il selettore per evidenziare e scegliere un elemento.
- 04
Incolla o invia a Figma
Incolla nella scheda Browser del plugin, oppure usa Send to Figma dopo un'unica associazione con un codice monouso.
Cosa può raggiungere l'estensione
Pagine con login
Dashboard, pannelli di amministrazione e pagine dell'account acquisiti con la sessione che hai già.
localhost e reti private
Server di sviluppo locali, staging e pagine intranet che un servizio esterno non può raggiungere.
Stati esatti della UI
Menu aperti, moduli compilati, finestre modali e carrelli vengono acquisiti così come sono sullo schermo.
Selettore di elementi
Passa il mouse per evidenziare, freccia su o giù per spostarti tra genitore e figlio, Invio per acquisire.
Send to Figma
Associa una volta con un codice monouso e le acquisizioni arrivano direttamente nel tuo plugin aperto.
Privacy by design
Nessun account, nessun analytics, nessun codice remoto; non viene inviato nulla se non usi Send to Figma.
Da localhost a Figma per sviluppatori front-end
Gli sviluppatori hanno spesso bisogno di mostrare ai designer ciò che è stato realmente costruito, o di portare in Figma un prototipo programmato per la revisione. Le opzioni abituali sono gli screenshot, che nessuno può modificare, o ricostruire la schermata a mano. L'estensione offre una terza opzione: acquisire direttamente localhost.
Poiché funziona nel tuo browser, l'estensione vede esattamente ciò che renderizza il tuo server di sviluppo, inclusi:
- Feature branch non ancora pubblicati da nessuna parte
- Pagine che dipendono da dati locali o API simulate
- Ambienti di staging su VPN o rete privata
- Playground di componenti e pagine di story isolate
Usa il selettore di elementi per acquisire un singolo componente invece della pagina intera. Evidenzialo, premi la freccia su per risalire al suo contenitore se ti serve il padding e premi Invio. Il risultato è un frame con l'Auto Layout ricavato dal CSS renderizzato, quindi una riga flexbox arriva come frame Auto Layout orizzontale con i suoi gap e il suo padding.
Così l'handoff diventa una strada a doppio senso: i designer ricevono frame modificabili dell'implementazione reale e possono commentare, o modificare, ciò che è stato rilasciato. La guida Da CSS flexbox e grid all'Auto Layout mostra come si traducono i layout.
Incollare o usare Send to Figma
Ci sono due modi per portare un'acquisizione da Chrome a Figma, ed entrambi producono gli stessi layer.
Incolla
Dopo un'acquisizione, il risultato viene messo negli appunti. Passa a Figma, apri HTML to Frames, vai alla scheda Browser e incolla. Se preferisci, salva invece l'acquisizione come file .h2f e portala nel plugin in seguito. In questo flusso non esce nulla dal tuo computer.
Send to Figma
Collega una volta l'estensione al tuo plugin usando un codice monouso. Da quel momento ogni acquisizione arriva direttamente nel plugin aperto, senza passare dagli appunti: più rapido quando acquisisci diversi stati di fila.
Con Send to Figma, l'acquisizione viene mantenuta in memoria da noi finché il tuo plugin non la preleva, per un massimo di 30 minuti. Non viene scritta su disco.
| Incolla | Send to Figma | |
|---|---|---|
| Configurazione | Nessuna | Codice di associazione monouso |
| I dati escono dal tuo computer | No | In memoria fino a 30 minuti |
| Ideale per | Acquisizioni occasionali | Acquisire molti stati rapidamente |
In entrambi i casi, un'acquisizione conta come un'importazione nel tuo piano, e i layer che ottieni sono identici.
Cosa fa e cosa non fa l'estensione con i tuoi dati
Un'estensione in grado di leggere pagine con login merita attenzione. L'estensione Chrome di HTML to Frames è progettata per fare il meno possibile:
- Funziona nel tuo browser. Le acquisizioni vengono fatte localmente dalla pagina che stai guardando.
- Nessun account. Non devi registrarti né accedere per usarla.
- Nessun analytics. Nell'estensione non c'è alcun tracciamento dell'utilizzo.
- Nessun codice remoto. L'estensione non scarica né esegue codice da un server.
- Di default non invia nulla. I dati ci arrivano solo se scegli Send to Figma, e in quel caso attendono in memoria il tuo plugin per al massimo 30 minuti.
L'acquisizione include solo ciò che si trova nella pagina che scegli di acquisire. Prima di acquisire una pagina che mostra dati personali o dei clienti, valuta se quei dati debbano finire in un file Figma condiviso, e usa il selettore di elementi per prendere solo la parte che ti serve.
Lato Figma, il plugin non legge il contenuto del tuo file. Scrive i nuovi layer e legge solo i metadati dei propri frame. La pagina sulla sicurezza descrive la configurazione completa e la documentazione spiega installazione e associazione. L'estensione è in preparazione per il Chrome Web Store.
Domande frequenti
L'importazione da URL carica le pagine come visitatore anonimo dal nostro servizio di acquisizione, quindi non può raggiungere pagine con login, localhost o reti private, e vede sempre lo stato predefinito. L'estensione acquisisce dal tuo browser, con la tua sessione e qualunque stato abbia la pagina.
Sì. Passa al selettore di elementi, passa il mouse per evidenziare un elemento, usa la freccia su per spostarti al genitore o la freccia giù per il figlio e premi Invio per acquisire. Premi Esc per annullare. L'elemento arriva come frame a sé, con layer modificabili.
Associa una volta l'estensione al tuo plugin con un codice monouso. Da quel momento ogni acquisizione viene consegnata direttamente nel plugin aperto. L'acquisizione attende in memoria al massimo 30 minuti finché il plugin non la preleva, e non viene mai scritta su disco.
No. Non ha account, analytics né codice remoto. Non ci invia nulla a meno che tu non usi Send to Figma per un'acquisizione. Se invece incolli, l'acquisizione passa dagli appunti o da un file .h2f e non lascia mai il tuo computer.
Sì. Ogni acquisizione dall'estensione conta come un'importazione nel tuo piano. Il piano Free include 10 importazioni al mese, mentre Pro e Team sono illimitati entro un limite di uso corretto. I contatori di utilizzo si azzerano ogni mese (UTC) e un'acquisizione viene conteggiata una sola volta.
Sì. L'estensione Chrome di HTML to Frames è gratuita e non richiede alcun account. Le acquisizioni vengono importate tramite il plugin Figma e contano nel tuo piano, che parte dal livello Free. L'estensione è in preparazione per la pubblicazione sul Chrome Web Store.
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