Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come convertire Figma in WordPress (Guida per principianti)

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

State cercando un modo per convertire il vostro progetto Figma in un tema o in una pagina WordPress?

Figma è uno strumento di progettazione basato su cloud che consente 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 progetti in WordPress, è possibile rendere il sito web più attraente per gli utenti.

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

Convert Figma to WordPress

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 modelli 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.

Click Get started for free button on Figma

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”.

Create an account on Figma

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”.

Click Verify Email button to verify your email account for Figma

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”.

Select Figma free plan

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.

Click Design File button on the Figma dashboard

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.

Choose desktop as Figma frame

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.

Add an image or video to the Figma page

È 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.

Add text in Figma

È 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.

Customize your Figma page

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, cliccare sull’icona “Figma” nell’angolo in alto a sinistra dello schermo. Si aprirà un menu in cui si dovrà selezionare l’opzione Aiuto e account ” Impostazioni account.

Open the account settings prompt

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”.

Click the Generate New Token link

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’.

Add an access token name and expiration date according to your liking

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.

Copy the access token

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 per principianti 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à un prompt in cui si dovrà incollare il token di accesso alla pagina Figma copiato in precedenza.

Click Import from Figma button

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.

Copy the Figma page 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.

Figma file will now be converted into the Group block

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

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

Figma to WordPress conversion preview

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.

Seahawk Media Figma to WordPress conversion

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.

Figma to WordPress conversion steps

È 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, che consente di creare temi e landing page personalizzate per il vostro sito web in modo estremamente semplice grazie al drag and drop.

SeedProd Website and Theme Builder

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.

Landing page will be launched on the screen

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?

Per impostazione predefinita, Figma e WordPress non possono integrarsi direttamente. Tuttavia, è possibile utilizzare strumenti e plugin come UiChemy, pxCode 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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

4 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Prajwal Shewatkar says

    This saved me a tonne of manual work. Thanks for the amazing post WPbeginner. But I belive this is not an official plugin by figma, is it?

    • WPBeginner Support says

      Correct, the plugin is not handled by Figma at the moment but not all plugins need to be ran by the original tool. :)

      Admin

  3. Arafath Ahmed says

    Thanks for providing the alternative option that is Seahawk, I was looking to find a way to convert some designs/ideas I made on Figma onto WordPress. I thought it would’ve been a lot of hassle to deal with this otherwise!

    Once again,
    Many Thanks

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.