Come importare in Figma una pagina protetta da login

La pagina che ti serve in Figma è spesso quella a cui non puoi mandare un link. Perché incollare l'URL restituisce un modulo di accesso, e cosa controllare negli strumenti che riescono ad andare oltre.

La pagina che ti serve davvero in Figma è spesso quella a cui non puoi mandare un link. Uno strumento di amministrazione interno. Una dashboard che si riempie di dati solo dopo il login. Una build di staging non ancora pubblica. Incolli l'URL in un convertitore e ti restituisce la schermata di accesso, perché è esattamente quello che ha visto.

C'è un modo per aggirarlo, e non è un trucco: è un'architettura diversa. Qui c'è perché la conversione via URL fallisce in questi casi, cosa fanno davvero le alternative, e cosa controllare prima di far passare una pagina privata attraverso una qualsiasi di esse.

Perché incollare un URL non può funzionare

Quando uno strumento chiede un URL, qualcosa dalla parte dello strumento apre quell'URL. Un server, o un browser headless che gira su un server. Quella macchina ha la sua posizione di rete e il suo barattolo di cookie vuoto. Non sei tu.

Così arriva alla tua dashboard come visitatore anonimo e riceve esattamente ciò che riceve un visitatore anonimo: un modulo di accesso. Riprovare non cambia niente, perché quel che manca è la tua sessione, e la tua sessione vive nel tuo browser.

Ecco anche perché il fallimento è così costante. Non è un bug che qualcuno possa correggere: un server non può vedere una pagina che richiede di essere te.

Gli espedienti che non funzionano

• Incollare il tuo cookie di sessione nello strumento. Alcuni accettano header. A parte quanto sia scomodo consegnare un token di sessione a terzi, l'autenticazione moderna è quasi sempre di breve durata e non legata al solo cookie, quindi fallisce comunque.
• Rendere la pagina pubblica per un momento. A volte possibile in staging. Raramente su qualcosa di reale, e cambia ciò che la pagina mostra.
• Fare uno screenshot e ricalcarlo. Ottieni un'immagine. L'intero motivo per importare in Figma sono i livelli modificabili, e uno screenshot non ne ha nessuno.

Quello che funziona: catturare nel browser in cui sei già

Se la conversione avviene dentro la tua scheda, il problema della sessione sparisce; non perché sia stato risolto, ma perché non si è mai posto. La pagina è già renderizzata davanti a te, con la sessione aperta, i dati caricati e i menu nello stato in cui li hai lasciati. Un convertitore che gira lì legge quello che vedi.

È l'approccio degli importatori basati su estensione del browser, e diversi strumenti oggi ne offrono una. Diciamolo chiaramente: catturare una pagina con la sessione aperta non è esclusiva di nessuno strumento. html.to.design ha un'estensione per pagine dietro login o VPN. Anche altri. Se leggi da qualche parte che qualcuno è l'unico a saperlo fare, verifica.

Ciò che cambia tra loro è cosa succede alla cattura dopo.

La domanda che conta davvero: dove va la cattura?

Una volta che il browser ha letto la pagina, quei dati devono arrivare a Figma. Ci sono due strade, e la differenza pesa più del passaggio della cattura.

Passando da un server. L'estensione carica la cattura e il plugin di Figma la scarica. Comodo, e significa che il contenuto di una pagina privata — i testi, i nomi dei clienti, i numeri della dashboard — attraversa un'infrastruttura che non controlli. Gli strumenti fatti così di solito offrono anche l'opzione del file locale, in cui scarichi la cattura e la passi tu al plugin. Quell'opzione di solito non è quella predefinita, e devi sapere che esiste per sceglierla.

Senza passare da nessun server. La cattura va nei tuoi appunti o sul tuo disco, e il plugin di Figma la legge da lì. Non viene caricato niente perché non c'è dove caricarlo.

Se stai catturando una pagina sotto NDA, una con dati dei clienti, o qualsiasi cosa provenga da un ambiente regolamentato, è questa la distinzione che interesserà al tuo reparto sicurezza. Non «funziona dietro un login», perché in questa categoria funziona tutto, ma «il contenuto esce dalla macchina, e posso verificarlo».

Come verificarlo invece di crederci

Due controlli, entrambi rapidi.

Leggere il manifest del plugin Figma

Ogni plugin Figma dichiara il proprio accesso di rete nel manifest, e Figma fa rispettare quella dichiarazione: un plugin che ne dichiara nessuno non può fare una richiesta, qualunque cosa tenti il suo codice. Snapture Import dichiara:

"networkAccess": { "allowedDomains": ["none"] }

È una capacità che il plugin non ha, non una politica che qualcuno promette di rispettare. Puoi leggere il manifest di qualsiasi plugin installato.

Guardare la scheda di rete

Apri i DevTools, vai su Rete e avvia una cattura. Vedi le richieste che fa l'estensione. Per Snapture sono le immagini della pagina stessa, perché finiscano nel tuo file, più un controllo di licenza se hai un piano a pagamento. Se uno strumento carica il contenuto della pagina, qui si vede.

Cosa arriva e cosa no

Catturare la pagina renderizzata significa ottenere lo stato che stai guardando, incluse cose che uno strumento via URL non raggiungerebbe nemmeno su una pagina pubblica.

• Menu, modali e popover aperti restano aperti, perché la cattura legge il DOM com'è invece di ricaricare.
• I dati che esistono solo dopo il login — righe di tabella, valori dei grafici, il tuo nome nell'angolo — arrivano come testo vero.
• I campi password lo strumento dovrebbe mascherarli al momento della cattura. Snapture sostituisce il valore con dei puntini prima di scrivere qualsiasi cosa; controlla che il tuo faccia lo stesso prima di catturare un modulo che hai compilato.

Quello che non arriva come livelli in nessuno strumento: i canvas WebGL, gli iframe di altra origine e i fotogrammi video. Niente può trasformarli in vettori, perché quei pixel non sono descritti dal DOM. Il comportamento ragionevole è inserire uno screenshot nitido esattamente di quell'area invece di un rettangolo grigio, ed è quello che fa Snapture.

Una sequenza pratica per una dashboard interna

1. Accedi e porta la pagina nello stato che vuoi, inclusi i pannelli o le modali che ti servono nella cattura.
2. Scorri una volta fino in fondo e torna su. Le dashboard caricano righe e grafici man mano, e ciò che non è stato renderizzato non si può catturare.
3. Cattura l'intera pagina, o trascina una regione se ti serve solo un pannello.
4. Incolla in Figma. Se i font vengono sostituiti, installa quelli che usava la pagina e reimporta: un font sostituito rimisura il testo e sposta tutto ciò che viene dopo.

Se la dashboard è molto grande, cattura la sezione che ti serve invece della pagina intera. Ogni strumento ha un budget, e una cattura per regione della parte che vuoi davvero è più rapida e più precisa di una pagina intera che ha incontrato un limite a metà strada.

In breve

I convertitori via URL non possono vedere dietro un login, ed è strutturale, non una lacuna che qualcuno colmerà. La cattura tramite estensione del browser lo risolve, e diversi strumenti la offrono. La domanda che vale la pena porre non è se uno strumento sappia catturare una pagina con la sessione aperta, ma se il contenuto di quella pagina esca poi dalla tua macchina — e a quella puoi rispondere da solo in circa un minuto.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia