Come convertire Figma in WordPress? [Modi gratuiti e a pagamento]

Figma è meglio conosciuto come strumento di progettazione e creatività, mentre WordPress è rinomato per la sua flessibilità, personalizzazione e facilità d'uso. E se potessi combinare il meglio di queste piattaforme per creare un sito Web straordinario?

Sì, è possibile. Puoi progettare il tuo sito web utilizzando Figma e poi convertirlo in WordPress. Sebbene una volta questo fosse un compito arduo che coinvolgeva l'elaborazione HTML e temi preinstallati, ora le cose sono diventate molto più semplici.

Se stai cercando lo stesso, sei nel posto giusto.

In questo post ti guideremo su come convertire Figma in WordPress in modo molto semplice e adatto ai principianti senza richiedere alcuna competenza tecnica.

Opzione 1: utilizza un plugin gratuito per convertire Figma in WordPress

Sebbene esistano diversi modi per convertire Figma in WordPress, puoi scegliere il metodo gratuito, utilizzare il plug-in di conversione premium o seguire il metodo manuale. (Hanno i loro pro e contro)

Passaggio 1: prima di tutto dovresti creare un design Figma che desideri convertire in seguito in WordPress. Ma non dovresti mai dimenticare di seguire tutte le migliori pratiche e i principi di progettazione del settore.

Passaggio 2: dopo aver creato e progettato con successo la pagina Figma, è tempo di generare la sua chiave API. Questa chiave API aiuterà a recuperare la pagina Figma tramite il plug-in e a incorporarla in WordPress.

Per fare ciò, fai clic sull'icona Figma situata nella parte in alto a sinistra dello schermo. Si apriranno le opzioni del menu in cui devi selezionare Guida e Account> Impostazioni account.

Si aprirà un nuovo prompt in cui dovrai scorrere verso il basso fino alla sezione "Token di accesso personale" e fare clic sul collegamento Genera nuovo token .

Si aprirà inoltre un nuovo prompt in cui ti verrà chiesto di fornire alcuni dettagli di base per il token che stai creando, come nome e data di scadenza.

Nota : nella sezione Scadenza, seleziona sempre " Nessuna scadenza " in modo che la tua pagina Figma non scompaia dal tuo sito web dopo un periodo di tempo specifico.

Di seguito imposta tutti gli Scope come "Scrivi" e fai clic sul pulsante "Genera token". Verrai reindirizzato alla sezione "Token di accesso personale" da dove potrai facilmente copiare il token generato e salvarlo nel Blocco note o su qualsiasi editor.

Passaggio 3: ora che hai generato e salvato con successo il token, è il momento di convertire la tua pagina Figma in WordPress.

Per iniziare il processo, devi installare e attivare un plug-in WordPress semplice ma potente denominato "Convertitore di animazioni e design per Gutenberg Block - Componenti aggiuntivi avanzati" sul tuo sito WordPress.

Dopo aver installato e attivato con successo, apri la pagina o il post del tuo sito WordPress in cui desideri incorporare la pagina Figma progettata.

In quella pagina o post, fai clic sul pulsante " Importa da Figma " nella parte superiore sinistra dello schermo.

Si aprirà un messaggio che ti chiederà di fornire il "Token di accesso Figma" che hai generato e salvato in precedenza. Inserisci l'URL del file Figma.

Per l'URL del file Figma, torna al file Figma, copia l'URL nella scheda del browser in basso e incollalo nella casella URL del file Figma.

Per il resto, il Plugin farà il suo lavoro e convertirà il file Figma in blocchi WordPress. Successivamente, puoi eseguire tutte le personalizzazioni che desideri dal pannello dei blocchi.

Una volta terminato, fai clic sul pulsante “Pubblica” o “Aggiorna” per salvare le impostazioni.

Opzione 2: utilizza un plugin a pagamento per convertire Figma in WordPress (più efficiente e senza problemi)

Per questo metodo utilizzeremo un plugin di conversione più popolare ed efficiente, "Uichemy". Questo plugin offre un flusso di lavoro molto semplice e diretto, rendendo il processo di conversione senza interruzioni. È più adatto ai principianti senza esperienza di programmazione e agli sviluppatori che desiderano accelerare il proprio processo.

Attualmente, questo plugin può convertire solo i progetti Figma negli editor di siti Web Elementor e Bricks, ma la società ha promesso di fornire supporto per i blocchi Gutenberg in futuro.

Passaggio 1: apri il tuo progetto Figma e installa il plug-in Uichemy sulla dashboard Figma per avviare il processo di conversione.

• Per fare ciò, cerca " UiChemy " nella barra di ricerca e trova il plugin UiChemy.

Fare clic sul pulsante "Iniziamo" e seguire le istruzioni per l'installazione e l'attivazione.

• Inserisci la tua chiave seriale per completare l'attivazione. (Per la chiave seriale, crea un account gratuito facendo clic sul pulsante "Inizia gratuitamente". Dopo aver creato il tuo account, troverai la chiave di licenza nella dashboard del tuo account Posimyth Store.)

Passaggio 2: dopo l'attivazione, seleziona il design Figma o il frame che desideri convertire in WordPress e fai clic sul pulsante " Converti in Elementor " nella finestra pop-up.

(Assicurati di aver installato e attivato il plug-in Elementor sul tuo sito WordPress prima del processo di conversione e leggi anche tutte le condizioni prima di convertire il tuo design Figma).

Passaggio 3: ora puoi visualizzare l'anteprima del tuo design inserendo l'URL del tuo sito e la chiave token. Se non vuoi, fai semplicemente clic direttamente sul pulsante "Converti in Elemetor". (Fare riferimento al tutorial di UiChemy su "Che cos'è l'anteprima live" per indicazioni su come generare la chiave token e l'URL del sito Web.)

Passaggio 3: il tuo progetto verrà convertito e scaricherà il file JSON.

Ora apri la dashboard di amministrazione di WordPress > Vai su Modelli > Modelli salvati.

Ora fai clic sul pulsante “ Importa modelli ” nella parte superiore della pagina e carica il file JSON.

Passaggio 4: congratulazioni! Il tuo design Figma verrà ora visualizzato nella sezione "Modelli salvati", dove potrai aprirlo ed eseguire ulteriori modifiche o personalizzazioni.

Passaggio 5: dopo aver completato la personalizzazione o le modifiche, visualizza il tuo design sul front-end. Assicurati che tutte le immagini e i pulsanti siano allineati correttamente e funzionino correttamente. Inoltre, controlla se il design è reattivo su tutte le dimensioni dello schermo.

Opzione 3: converti manualmente Figma in WordPress (per sviluppatori)

Questo metodo è abbastanza tecnico, quindi richiede una buona conoscenza del CMS WordPress e poca pazienza, quindi è più adatto a chi ama programmare.

Passaggio 1: il primo passaggio è esportare tutti gli elementi di design come icone e immagini da Figma. Per questo, apri il tuo Figma Design e scegli cosa vuoi esportare. Ora fai clic sul pulsante "Esporta" e seleziona il formato e la risoluzione corretti.

Nota: si consiglia vivamente, quando si esportano immagini, di scegliere PNG o JPG e, per icone e vettori, di scegliere SVG per mantenere la qualità. Inoltre, fai attenzione quando esporti i tuoi file, assicurandoti che siano nel formato corretto, altrimenti ciò influenzerà gravemente l'aspetto del tuo sito web.

Passaggio 2: ora dobbiamo creare un tema WordPress personalizzato per convertire tutti i progetti Figma in un sito WordPress. È perché un tema WordPress è ciò che controlla il modo in cui appare e funziona il tuo sito web.

Un tipico file di tema WordPress è costituito da codice PHP, file JavaScript e file di fogli di stile CSS.

• Crea una nuova cartella in WordPress per il tuo tema nella directory wp-content/themes e assegnagli un nome a tua scelta. (Puoi accedere a questi file tramite Cpanel, WordPress Editor o client FTP) Oppure controlla il nostro blog dedicato su "Come installare il tema WordPress?"

Se sei un utente WPOven puoi accedere al file WordPress seguendo questo tutorial. "Nuovo File Manager per gestire facilmente i file e le cartelle del tuo sito."

Ora aggiungi file come index.php, header.php, footer.php e Functions.php. (Lascia questi file vuoti per ora). Inoltre, aggiungi il file style.css per impostare il foglio di stile CSS del tuo tema nella stessa cartella.

(Questo particolare file style.css è responsabile della visualizzazione di tutti i colori, i caratteri, i bordi, i margini e altri elementi visivi del sito web.)

Ora aggiungi il seguente commento di intestazione al tuo file style.css come indicato di seguito:

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

Qui, devi fornire il nome del tema del tuo tema WordPress personalizzato e il tuo autore. Ciò aiuterà WordPress a identificare il tuo tema personalizzato.

Inoltre, non dimenticare di aggiungere un'immagine per il tuo tema WordPress, in modo che possa essere facilmente riconoscibile nella directory di WordPress, proprio come una miniatura di YouTube.

La dimensione preferibile dovrebbe essere 800×600 pixel e dovrebbe essere in formato PNG. Assegna un nome a qualsiasi cosa a tua scelta e aggiungilo alla cartella del tema.

Passaggio 3: ora dobbiamo aggiungere tutte le risorse Figma esportate nella cartella del tema personalizzato.

Suggerimento: se il tuo sito è complesso è meglio gestire tutte le tue risorse in una sottocartella specifica, proprio come abbiamo mostrato nell'immagine qui sotto:

Passaggio 4: per rendere il tuo tema WordPress completamente funzionale, devi aggiungere HTML, CSS e JavaScript ai file del tema.

Vediamo come puoi farlo,

Innanzitutto, devi convertire i tuoi mockup Figma in codice e, per questo, ti verrà richiesto di disporre di uno strumento di editor di codice.

Inizia con l'impostazione di una struttura HTML con elementi come intestazioni, piè di pagina, barre di navigazione e sezioni. Aggiungi i tuoi codici ai file PHP (index.php, header.php e footer.php).

Ora usa i CSS per definire lo stile dei tuoi elementi HTML. Aggiungi i tuoi stili nel file "style.css", impostando colori, caratteri, dimensioni e altri aspetti di progettazione.

• Per uno stile migliore, puoi utilizzare:
  • Preprocessori CSS come SASS o LESS
  • Framework come Bootstrap o Tailwind
  • Un tema iniziale di WordPress
• Per progetti complessi, non è necessario inserire tutti i CSS in un unico file, ma in modo più organizzato. Puoi aggiungere file CSS separati per parti diverse nella cartella delle risorse in modo che diventi facile la gestione e la risoluzione dei problemi in futuro.

Infine, per Javascript, individua gli elementi che devono essere interattivi (come menu a discesa, dispositivi di scorrimento, ecc.)

Prendi in considerazione l'utilizzo di jQuery per semplificare attività come le chiamate AJAX e la manipolazione DOM e carica correttamente i tuoi file CSS (fogli di stile) e JavaScript (script) nel tuo tema WordPress utilizzando il file functions.php .

Passaggio 5: ora arriva la parte di test, dopo aver eseguito con successo tutti i passaggi precedenti, salva i file e controlla se tutto funziona bene. Ma prima dobbiamo attivare il plugin.

Per attivare il plugin, vai sulla dashboard di WordPress > Aspetto > Temi . Il tuo tema personalizzato inizierà ad apparire con l'immagine che hai caricato in precedenza nella cartella del tema. Fai clic su di esso per attivare e viola il tuo sito WordPress è pronto per il test.

Ecco alcuni suggerimenti per i test che puoi seguire:

• Controlla l'aspetto e il funzionamento del tuo sito nei diversi browser e dimensioni dello schermo.
• Utilizza gli strumenti per ottimizzare le tue immagini per un caricamento più rapido.
• Implementa la memorizzazione nella cache per velocizzare il tuo sito.
• Effettua un backup del tuo sito prima di renderlo attivo.

Riepilogo

Convertire da Figma a WordPress non è così facile come sembra, a seconda della complessità del sito web. Più complesso è il progetto, più complesso è il processo che devi seguire. Abbiamo cercato di coprire tutte le opzioni per tutti i tipi di utenti.

Farlo manualmente potrebbe darti un maggiore controllo, ma consumerà molto tempo e fatica. Tuttavia, puoi utilizzare i plugin per accelerare il processo di conversione, ma potresti comunque dover apportare alcune modifiche per ottenere risultati migliori.

Dipende completamente dalle tue preferenze e dalla facilità di comprensione del metodo che scegli.

Rahul

Rahul Kumar è un appassionato di web e content strategist specializzato in WordPress e web hosting. Con anni di esperienza e l'impegno a rimanere aggiornato sulle tendenze del settore, crea strategie online efficaci che indirizzano il traffico, aumentano il coinvolgimento e aumentano le conversioni. L'attenzione ai dettagli e la capacità di creare contenuti accattivanti di Rahul lo rendono una risorsa preziosa per qualsiasi marchio che desideri migliorare la propria presenza online.