Come convertire Figma in WordPress (Guida per principianti)

Figma è uno strumento di progettazione basato sul cloud che permette di creare un’interfaccia utente attraente per il vostro sito web. Consente di testare rapidamente le idee attraverso la prototipazione e supporta anche la collaborazione in tempo reale.

Convertendo questi design in WordPress, potrete rendere il vostro sito web più attraente per gli utenti. Tuttavia, tenete presente che questo processo può essere un po’ impegnativo.

Nel corso degli anni, abbiamo osservato numerosi siti web utilizzare Figma per creare un layout esteticamente gradevole e unico per le loro attività. Questo ci ha aiutato a capire meglio i punti di forza e di debolezza di questo approccio per personalizzare l’aspetto del sito.

In questo articolo vi mostreremo come convertire facilmente Figma in WordPress, passo dopo passo.

Perché convertire Figma in WordPress?

Figma consente di creare bellissimi layout per il vostro sito web e offre strumenti straordinari come effetti di animazione, prototipazione, editing vettoriale e altro ancora.

Se avete un sito web WordPress, l’utilizzo di questo strumento per creare un layout per il vostro sito consentirà a più designer e sviluppatori di lavorare sullo stesso file Figma. Questo può migliorare la collaborazione e ridurre la necessità di inviare e-mail.

Inoltre, è possibile creare mockup interattivi del blog per testare i flussi di utenti e ottenere feedback prima che il sito venga sviluppato.

È inoltre possibile utilizzare gli strumenti avanzati di Figma come griglie, guide, livelli e layout automatici per creare pagine e template visivamente accattivanti, tra cui:

• Pagine di destinazione
• Homepage, pagina del blog o pagine dei prodotti
• Un intero tema
• Layout del sito web per dispositivi mobili
• Dashboard e interfacce utente
• Modelli di e-mail e newsletter

Tuttavia, tenete presente che Figma non si integra di default con WordPress, quindi dovrete utilizzare uno strumento di conversione. Detto questo, vediamo come creare facilmente un design Figma e convertirlo in WordPress, passo dopo passo:

Passo 1: Creare un account Figma

Per progettare una pagina con Figma, è necessario creare un account sul sito.

Per farlo, visitate il sito web di Figma e fate clic sul pulsante “Inizia gratuitamente” nell’angolo in alto a destra dello schermo.

Si aprirà una nuova scheda nella vostra finestra, dove dovrete fornire il vostro indirizzo e-mail e la vostra password.

Successivamente, fare clic sul pulsante “Crea account”.

Una volta fatto ciò, vi verrà inviata un’e-mail di verifica.

Aprite semplicemente questa e-mail dalla vostra casella di posta e fate clic sul pulsante “Verifica e-mail”.

A questo punto si accede al sito web di Figma, dove viene richiesto il proprio nome.

Successivamente, è necessario fornire alcuni dettagli su come si intende utilizzare lo strumento e fare clic sul pulsante “Continua” in basso.

Verrà quindi richiesto di scegliere un piano tariffario. È possibile selezionare il piano “Starter”, che è gratuito, e fare clic sul pulsante “Continua”.

Passo 2: progettare una pagina su Figma

A questo punto si viene indirizzati alla propria dashboard di Figma.

Una volta arrivati a questo punto, fare clic sul pulsante “Design File” nell’angolo in alto a destra per creare una pagina Figma.

A questo punto si aprirà sullo schermo il costruttore di Figma. Qui si deve selezionare l’opzione ‘Cornice’ dall’alto.

Si aprirà un elenco di cornici di progettazione nella colonna di destra, dove si dovrà selezionare l’opzione ‘Desktop’. Questo perché il plugin che utilizzeremo per convertire Figma in WordPress attualmente supporta solo la tela desktop.

Successivamente, è possibile aggiungere immagini all’area di disegno facendo clic sull’icona quadrata in alto e scegliendo l’opzione “Inserisci immagine/video”.

Si aprirà la cartella del computer, dove si potrà caricare un’immagine o un video a scelta.

È inoltre possibile aggiungere testo alla pagina facendo clic sull’icona “T” nella parte superiore dello schermo.

Una volta fatto ciò, è possibile regolare la dimensione, l’allineamento, il carattere e la spaziatura del testo dalle impostazioni della colonna di destra.

È inoltre possibile utilizzare strumenti di stile gratuiti come “Penna” e “Matita” dall’alto, aggiungere domande di feedback, creare più livelli e pagine, cambiare il colore dello sfondo e molto altro ancora.

Se siete uno sviluppatore e volete aggiungere del codice CSS alla pagina, potete farlo anche passando alla “modalità Dev” utilizzando la levetta nell’angolo in alto a destra dello schermo.

Passo 3: copiare la chiave API della pagina Figma

Una volta soddisfatti della personalizzazione della pagina Figma, è il momento di ottenere la sua chiave API. Questa chiave permetterà al plugin di incorporare la pagina Figma in WordPress.

Per farlo, fare clic sull’icona “Figma” in alto a sinistra della schermata. Si aprirà un menu in cui si dovrà selezionare l’opzione Aiuto e account ” Impostazioni account.

A questo punto si aprirà un nuovo prompt sullo schermo.

Da qui, scorrere fino alla sezione “Token di accesso personali” e fare clic sul link “Genera nuovo token”.

Si apriranno nuove impostazioni, in cui è necessario fornire un nome e una data di scadenza per il token che si sta creando. Si consiglia di selezionare l’opzione “Nessuna scadenza” per il token, se non si vuole che la pagina Figma scompaia dal sito web dopo un determinato periodo di tempo.

Successivamente, è possibile impostare tutti gli ambiti, tranne quello del Contenuto del file, su ‘Scrivi’ e quindi fare clic sul pulsante ‘Genera token’.

A questo punto si accede alla sezione “Token di accesso personali”.

Da qui, è possibile copiare il token appena generato e incollarlo nel Blocco note o in un altro editor di testo.

Passo 4: Convertire Figma in WordPress

Una volta ottenuta la chiave API, è il momento di convertire la pagina Figma in WordPress.

A tal fine, è necessario installare e attivare il plugin Animation and Design Converter for Gutenberg Block. Per istruzioni dettagliate, consultare la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, aprire la pagina o il post in cui si desidera aggiungere la pagina Figma. Una volta lì, è sufficiente fare clic sul pulsante “Importa da Figma” nella parte superiore dello schermo.

Si aprirà una finestra in cui incollare il token di accesso alla pagina Figma copiato in precedenza.

Successivamente, si deve aggiungere l’URL della pagina Figma nel campo ‘FIGMA FILE URL’.

Per ottenere questo URL, aprire il file Figma e copiare il link nella scheda del browser. Tenere presente che la cornice del desktop deve essere selezionata prima di copiare l’URL.

Dopo aver incollato il link in WordPress, fare clic sul pulsante “Avvia importazione”.

Il plugin convertirà quindi la pagina Figma nel blocco Gruppo. È ora possibile personalizzare l’allineamento, la posizione, la tipografia e il colore del blocco dal pannello del blocco.

Quindi, fare clic sul pulsante “Pubblica” o “Aggiorna” per memorizzare le impostazioni.

Ecco come appare il file Figma convertito sul nostro sito web dimostrativo.

Alternativa: Utilizzare Seahawk Media Services per convertire Figma in WordPress

Se avete creato l’intero sito web con Figma, il metodo sopra descritto non è adatto perché il plugin funziona solo con la cornice del desktop.

Inoltre, il plugin potrebbe avere problemi a trasferire accuratamente progetti complessi, perché Figma si concentra solo sul design, mentre WordPress richiede la codifica per i contenuti dinamici e le funzionalità. Ciò significa che alcuni elementi aggiunti in Figma potrebbero non funzionare in WordPress.

Per questo motivo consigliamo di utilizzare i servizi di Seahawk Media per convertire Figma in WordPress, perché considerano tutti questi fattori durante la conversione.

Seahawk Media è un’importante società di servizi WordPress che offre numerosi servizi, tra cui sviluppo, progettazione, manutenzione, migrazione, assistenza e altro ancora.

Sono fidati di oltre 1000 aziende e realizzeranno per voi una conversione da Figma a WordPress completamente responsive, con un codice pulito, SEO-ready e pixel-perfect.

Tutto ciò che dovrete fare è inviare i vostri file Figma all’azienda.

Dopo aver compreso le vostre esigenze, Seahawk stabilirà una tempistica approssimativa e convertirà i vostri file Figma in un sito WordPress in pochi giorni.

È inoltre possibile utilizzare i servizi dell’azienda per un audit SEO, servizi di scrittura di contenuti, servizi white label, assistenza e riparazione di siti violati.

Bonus: Usare SeedProd per creare un sito web visivamente accattivante

Se vi sembra troppo faticoso costruire pagine con Figma e poi convertirle in WordPress, potete usare SeedProd.

È il miglior costruttore di temi e pagine per WordPress presente sul mercato. Utilizzandolo, è possibile costruire facilmente temi personalizzati e landing page con una semplice tecnologia di trascinamento e rilascio.

SeedProd è dotato di un costruttore drag-and-drop facile da usare, oltre 300 modelli predefiniti, blocchi WooCommerce avanzati e integrazioni con servizi di email marketing.

È possibile trascinare e rilasciare facilmente immagini, titoli, video, CTA, moduli optin, omaggi o blocchi di paragrafi dalla colonna di sinistra del costruttore per creare una pagina attraente.

Una volta fatto ciò, è sufficiente fare clic sul blocco aggiunto per aprire le sue impostazioni nella colonna di sinistra. Da qui è possibile inserire testo dinamico e modificare la dimensione del carattere, l’allineamento, il colore e altro ancora.

Infine, fate clic sui pulsanti “Salva” e “Pubblica” in alto per memorizzare le impostazioni e rendere effettive le modifiche. Per istruzioni dettagliate, potete consultare il nostro tutorial su come creare una landing page in WordPress.

Per maggiori informazioni sul plugin in generale, consultate la nostra recensione di SeedProd.

Domande frequenti sulla conversione di Figma in WordPress

Ecco alcune domande frequenti dei nostri lettori su Figma e WordPress.

Figma e WordPress funzionano insieme?

Di default, Figma e WordPress non possono integrarsi direttamente. Tuttavia, è possibile utilizzare plugin Figma e strumenti come pxCode, UiChemy o Animation and Design Converter for Gutenberg Block per convertire un progetto Figma in WordPress.

Se questo metodo è troppo complesso per voi, potete semplicemente assumere uno sviluppatore o un’azienda dedicata come Seahawk Media per questa conversione.

Devo conoscere il codice per convertire Figma in WordPress?

Non è necessario conoscere la codifica per creare e convertire i disegni Figma in WordPress, perché è possibile farlo facilmente con un plugin o assumendo uno sviluppatore.

Tuttavia, se volete farlo da soli senza un plugin, dovete conoscere HTML, CSS e possibilmente PHP per codificare a mano il vostro sito web. Questo perché alcuni elementi del design di Figma dovranno essere codificati per fornire funzionalità a WordPress.

Per maggiori dettagli, consultate la nostra guida su come codificare un sito web.

La conversione da Figma a WordPress danneggia il SEO (Search Engine Optimization)?

Se convertite un design Figma in WordPress, i vostri contenuti o backlink non ne risentiranno. Tuttavia, i design Figma possono influire negativamente sulla struttura del sito, sulla velocità della pagina e sulle immagini.

Per questo motivo consigliamo di utilizzare i servizi di Seahawk Media per la conversione da Figma a WordPress, perché si assicureranno che il vostro sito web sia completamente reattivo, codificato in modo pulito e pronto per la SEO dopo la conversione.

Speriamo che questo articolo vi abbia aiutato a capire come convertire Figma in WordPress. Potreste anche voler consultare la nostra guida per principianti su come esternalizzare lo sviluppo di WordPress e la nostra classifica dei posti migliori per ottenere un logo personalizzato per il vostro sito web.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.