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 del browser, Figma, O scarica l'applicazione desktop; entrambi funzionano allo stesso modo per questo progetto.
Apri un Nuovo file di disegno per iniziare il tuo progetto di design 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. Ci sono innumerevoli plugin su Figma per aiutarti con i tuoi progetti, incluso plugin 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 plug-in, selezionare il file Menù figma (logo Figma) > Plugin > Trova più 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 Correre. 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 il login. Utilizzeremo 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 disegno. 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. Stiamo scegliendo MacBook Pro 14" con un Leggero tema.
Dopo aver specificato il dispositivo e visualizzare le impostazioni, seleziona Importare 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 dal sito Web e creare una presentazione utilizzando le transizioni in Figma, o semplicemente scopri come le pagine web sono impostate 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, selezionare Estensione Chrome-O apri l'estensione qui sul tuo browser Chrome.
Selezionare 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 la cattura apparirà nei tuoi download come un 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 .h2d scaricato 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 a modello principale per presentazioni Figma. Nel 2022, Adobe ha acquisito Figma, quindi possiamo aspettarci modi più divertenti per usare 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.
