Come convertire qualsiasi sito Web in un design Figma

Figma è un ottimo strumento che sta rapidamente diventando uno dei preferiti tra UX/UI e web designer. Puoi creare progetti Web reattivi in ​​modo rapido e semplice utilizzando questo strumento gratuito basato su browser.

Mentre la maggior parte delle persone crea i propri progetti da zero in Figma, puoi essere ispirato da siti Web reali e creare facilmente un design Figma direttamente da una pagina HTML esistente. Ecco come farlo.

Perché dovresti creare disegni Figma da HTML

Ci sono molte ragioni per cui potresti voler replicare un web design esistente come design Figma. Fare questo tramite il plug-in Figma consente di risparmiare tempo, permettendoti di concentrarti sulla messa a punto del tuo design.

Praticare il web design ricreando pagine web esistenti è un ottimo modo per imparare dai maestri. Puoi anche utilizzare lo strumento di progettazione da HTML a Figma se hai precedentemente progettato e pubblicato una pagina Web a cui hai perso l’accesso. Invece di riprogettarlo da zero, puoi risparmiare tempo riconvertendolo in Figma per lavorarci di nuovo.

Ora che sai perché questo strumento può essere utile, è tempo di imparare come funziona.

Come convertire qualsiasi sito Web in un design Figma

Per iniziare qualsiasi lavoro di progettazione basato su Figma, è necessario aprire Figma e accedere o registrarsi. Puoi utilizzare la versione browser, Figma , oppure scaricare l’app desktop ; entrambi funzionano allo stesso modo per questo progetto.

Apri un nuovo file di progettazione per iniziare il tuo progetto di progettazione da HTML a Figma.

Passaggio 1: scarica il plug-in html.to.design

Per poter convertire direttamente un sito Web live in un design Figma, avrai bisogno di un plug-in. Esistono innumerevoli plug-in su Figma per aiutarti con i tuoi progetti, inclusi plug-in per creare prototipi per telefoni e dispositivi. Puoi aggiungere il design del tuo sito web convertito a un mockup in un secondo momento, se lo desideri.

Per scaricare il plugin, seleziona il menu Figma (logo Figma) > Plugin > Trova altri plugin . In alternativa, puoi selezionare Risorse > Plugin . Da entrambe le opzioni, digita nella barra di ricerca html.to.design .

Trova l’opzione fornita da divRIOTS e seleziona Esegui . Questo apre il plugin come una finestra di dialogo sulla tela di Figma.

Passaggio 2: incolla l’URL del sito web

Il plugin html.to.design è gratuito, ma offre una versione pro. Puoi completare interamente il tuo processo di progettazione con la versione gratuita.

Trova il sito Web di cui desideri creare un design Figma. Dovresti utilizzare un sito Web pubblico, non una pagina Web a cui è possibile accedere solo effettuando l’accesso. Useremo la nostra home page, MakeUseOf.com.

Copia l’URL completo e incollalo nella casella di importazione su Figma, sostituendo il segnaposto del sito Web Apple.

Passaggio 3: carica il tuo progetto

Dopo aver incollato l’URL del sito Web, apri Impostazioni sotto la casella di importazione per selezionare la dimensione del design. Puoi importare il design per una varietà di dispositivi, ma avrai un successo migliore scegliendo un dispositivo desktop se hai utilizzato un URL desktop e un successo migliore utilizzando un URL mobile per dispositivi mobili.

Esistono anche opzioni personalizzate per dispositivi o dimensioni che non sono disponibili come opzioni predefinite. Abbiamo scelto MacBook Pro 14” con tema Light .

Dopo aver specificato il dispositivo e visualizzare le impostazioni, seleziona Importa per dare vita al tuo design HTML in Figma. Attendere che la barra di caricamento sia completa per il popolamento del design Figma.

A seconda del sito Web che hai utilizzato, potresti notare una finestra pop-up che spiega che alcuni caratteri tipografici dovevano essere sostituiti. Ciò sarà dovuto al diritto d’autore per i caratteri tipografici concessi in licenza. Figma li sostituirà con caratteri tipografici a cui hai accesso.

Esci da qualsiasi popup, quindi esci dalla finestra di dialogo del plug-in per vedere il tuo nuovo design nella sua forma completa.

Passaggio 4: modifica il tuo design Figma

Da qui, puoi iniziare a modificare la tua pagina web Figma nel modo che preferisci. Come accennato, questa funzione da HTML a Figma ti consente di apprendere come sono state progettate le pagine Web esistenti per ispirarti a crearne di tue da zero. È possibile utilizzare il design di base del sito Web e creare una presentazione utilizzando le transizioni in Figma o semplicemente imparare come vengono impostate le pagine Web da altri designer.

Nel menu a sinistra troverai i livelli. Poiché questo è stato convertito direttamente da HTML, i livelli potrebbero essere più dettagliati, o addirittura confusi, rispetto a quelli a cui sei abituato quando progetti te stesso. Seleziona una sezione nel disegno per trovare i livelli evidenziati nel menu a sinistra.

Puoi sostituire le immagini, ridigitare titoli e corpo del testo o spostare elementi all’interno del layout facendo doppio clic sull’aspetto del design. Il plug-in html.to.figma non replica le impostazioni di animazione o transizione quando si fa clic sui collegamenti o si cambia pagina. Puoi aggiungerli da solo.

Come convertire una pagina Web privata

La maggior parte del processo di creazione di un sito Web privato, che richiede l’accesso a un account, rispetto a una pagina Web pubblica è la stessa. Tuttavia, invece di incollare l’URL, devi invece utilizzare un’estensione di Chrome che genera un file.

Per iniziare, apri Figma e il plugin html.to.figma nello stesso modo di prima.

Passaggio 1: scarica ed esegui l’estensione di Chrome

Puoi utilizzare questa estensione solo con Google Chrome, quindi apri Chrome per iniziare. Dalla finestra di dialogo del plug-in Figma, seleziona l’ estensione di Chrome o apri l’estensione qui sul tuo browser Chrome.

Seleziona Aggiungi a Chrome > Aggiungi estensione per aggiungere l’estensione al tuo browser.

Con l’estensione aggiunta, vai al sito Web o alla pagina privata di cui desideri replicare il design (stiamo utilizzando una pagina Instagram) e seleziona l’estensione. Le estensioni compresse si trovano sotto l’icona del pezzo del puzzle nel tuo browser.

Ti chiederà se vuoi catturare l’intera pagina o solo ciò che è in vista. Fai la tua selezione e poi l’acquisizione apparirà nei tuoi download come file. h2d.

Passaggio 2: trascina il file generato nel plug-in Figma

Vai alla tua app Figma o al sito Figma sul tuo browser e trascina il file scaricato. h2d nella casella. Il file verrà caricato e generato allo stesso modo dell’opzione del sito Web pubblico.

Come con la versione della pagina web pubblica, puoi fare doppio clic sugli aspetti del design per modificarli o fare clic sul menu a sinistra per vedere dove appaiono sul layout.

Potresti voler aggiungere nuovi elementi di design al design della pagina web, come un effetto vetro smerigliato Figma, oppure potresti persino replicare parti del design della pagina web come modello principale per le presentazioni Figma. Nel 2022, Adobe ha acquisito Figma, quindi possiamo aspettarci modi più divertenti per utilizzare Figma in futuro.

Usa qualsiasi sito Web per l’ispirazione nei tuoi progetti Figma

Sebbene Figma sia principalmente per la progettazione di siti Web o pagine UX/UI da zero, è una grande opportunità per popolare le pagine Web esistenti per vedere come sono state costruite. Puoi anche rendere il tuo web design una replica di un sito esistente se non sei sicuro da dove iniziare da una lavagna vuota.

Un altro ottimo motivo per cui dovresti utilizzare il plug-in html.to.figma è se hai già progettato un sito Web a cui hai perso l’accesso. Puoi popolare la pagina in Figma e ricominciare senza dover effettivamente ricominciare.