Website to Figma: importa il sito intero, non solo la homepage

Ci sono tre modi per portare in Figma molte pagine di un sito web, e si combinano bene.

Più link

Incolla fino a 10 URL nella scheda Multiple. Il plugin li elabora in sequenza e inserisce ogni pagina nella propria riga, così le schermate Desktop, Tablet e Mobile di una pagina stanno insieme e le pagine si impilano una sotto l'altra.

Import linked pages

Dopo un'importazione, il plugin può elencare le altre pagine dello stesso sito collegate da quella pagina. Scegli quelle che vuoi e vengono eseguite come importazione Multiple. Partendo dalla homepage, di solito in un paio di giri copri la navigazione principale.

Cartella del sito o .zip

Se hai la build statica, trascina la cartella nella scheda Local file o carica un .zip fino a 30 MB, poi scegli quali pagine HTML importare. I file vengono aperti dalla memoria in un browser isolato ed eliminati appena termina l'importazione.

Ogni pagina conta come un'importazione, indipendentemente dal numero di schermate. Con Free hai 10 importazioni al mese; Pro e Team sono illimitati entro un limite di uso corretto. Vedi i prezzi per i dettagli.

Un insieme statico di frame è utile, ma clienti e stakeholder capiscono un sito più in fretta quando possono navigarlo. HTML to Frames mantiene la navigazione che hai già:

• I link tra pagine importate diventano interazioni Navigate, quindi un clic su Prezzi nel frame della homepage porta al frame dei prezzi.
• Gli altri link mantengono un'azione Open link e si aprono nel browser.
• Gli header fixed e sticky restano al loro posto mentre scorri in modalità Present.
• Le aree a scorrimento orizzontale, come caroselli e barre di schede, scorrono lateralmente.

Con Pro, gli elementi con uno stato hover diventano component set con varianti Default e Hover e un'interazione on-hover, così pulsanti e voci di menu reagiscono quando ci passi sopra.

In questo modo il sito importato diventa una base da presentare così com'è. Ripercorri l'esperienza attuale, segnala i problemi con i commenti, poi duplica i frame e inizia il redesign accanto all'originale. Poiché ogni frame memorizza il proprio URL sorgente, puoi reimportare qualsiasi pagina in seguito e confrontare il sito online con la proposta. Approfondisci come sono strutturate le pagine in HTML to frame.

Le connessioni di prototipo vengono create solo tra pagine che fanno parte dell'importazione, quindi aggiungere pagine con Import linked pages estende anche il flusso cliccabile.

Per un'agenzia di design, la prima settimana di un progetto se ne va spesso nel ricreare il sito esistente del cliente, per avere qualcosa da riprogettare. Importarlo elimina gran parte di quel lavoro e lascia al team un file già organizzato.

Un flusso tipico è questo:

1. Prima della pitch: importa i template chiave del cliente e attiva Styles & variables per vedere il sistema di colori e tipografia realmente in uso.
2. Durante la discovery: presenta al cliente l'importazione cliccabile e annota i punti critici direttamente sui frame.
3. Durante il redesign: duplica i frame e modificali sul posto; i componenti estratti dalle strutture ripetute velocizzano le modifiche globali.
4. All'handoff: reimporta le pagine modificate per confermare cosa è stato rilasciato.

Il piano Team offre cinque postazioni su una chiave di licenza condivisa, al prezzo di lancio di $22 al mese, con fino a quattro schermate per importazione. È adatto a un piccolo studio in cui più designer importano siti dei clienti in parallelo.

Le agenzie che lavorano per clienti chiedono spesso anche dei dati. Le pagine vengono renderizzate in un browser isolato, i risultati vengono consegnati una sola volta e mai scritti su disco. Il quadro completo è nella pagina sulla sicurezza.