Cum se convertesc Figma în WordPress? [Moduri gratuite și plătite]

Figma este cel mai bine cunoscut ca instrument de design și creativitate, în timp ce WordPress este renumit pentru flexibilitatea, personalizarea și ușurința sa de utilizare. Ce se întâmplă dacă ai putea combina cele mai bune dintre aceste platforme pentru a crea un site web uimitor?

Da, este posibil. Vă puteți proiecta site-ul web folosind Figma și apoi îl puteți converti în WordPress. Deși aceasta a fost cândva o sarcină descurajantă care implica procesarea HTML și teme preinstalate, lucrurile au devenit mult mai ușoare acum.

Dacă cauți același lucru, ești în locul potrivit.

În această postare, vă vom ghida cum să convertiți Figma în WordPress într-un mod foarte ușor, prietenos pentru începători, fără a necesita nicio expertiză tehnică.

Opțiunea 1: Utilizați un plugin gratuit pentru a converti Figma în WordPress

Deși există mai multe moduri de a converti Figma în WordPress, puteți fie să alegeți metoda gratuită, fie să utilizați pluginul de conversie premium, fie să treceți prin metoda manuală. (au argumentele lor pro și contra)

Pasul 1: În primul rând, ar trebui să creați un design Figma pe care ați dori să îl convertiți ulterior în WordPress. Dar nu trebuie să uitați să urmați toate cele mai bune practici din industrie și principiile de proiectare.

Pasul 2: Odată ce ați creat și proiectat cu succes pagina Figma, este timpul să generați cheia API a acesteia. Această cheie API vă va ajuta să preluați pagina Figma prin plugin și să o încorporați în WordPress.

Pentru aceasta, faceți clic pe pictograma Figma situată în partea stângă sus a ecranului. Se va deschide opțiuni de meniu pe care trebuie să selectați Ajutor și Cont> Setări cont.

Se va deschide o nouă solicitare în care trebuie să derulați în jos la secțiunea „Jetoane de acces personal” și să faceți clic pe linkul Generați un nou token .

Se va deschide în continuare o nouă solicitare în care vi se va cere să furnizați câteva detalii de bază pentru simbolul pe care îl creați, cum ar fi numele și data de expirare.

Notă : În secțiunea Expirare, selectați întotdeauna „ Fără expirare ”, astfel încât pagina dvs. Figma să nu dispară de pe site-ul dvs. după un anumit interval de timp.

Mai jos setați toate domeniile ca „Scrie” și faceți clic pe butonul „Generează token”. Veți fi redirecționat către secțiunea „Personal Access Token” de unde puteți copia cu ușurință simbolul generat și îl puteți salva fie în Notepad, fie în orice editor.

Pasul 3: Acum că ați generat și salvat cu succes tokenul, este timpul să vă convertiți pagina Figma în WordPress.

Pentru a începe procesul, trebuie să instalați și să activați un plugin WordPress simplu, dar puternic, numit „Convertor de animație și design pentru Gutenberg Block – Addons avansate” pe site-ul dvs. WordPress.

După instalarea și activarea cu succes, deschideți pagina sau postarea site-ului dvs. WordPress pe care doriți să încorporați pagina Figma proiectată.

Pe pagina respectivă sau postare, faceți clic pe butonul „ Importați din Figma ” din partea stângă sus a ecranului.

Se va deschide o solicitare care vă va cere să furnizați „Jetonul de acces Figma” pe care l-ați generat și salvat mai devreme. Introduceți URL-ul fișierului Figma.

Pentru URL-ul fișierului Figma, întoarceți-vă la fișierul Figma, copiați adresa URL în fila browser de mai jos și inserați-o în caseta URL a fișierului Figma.

În rest, pluginul își va face treaba și va converti fișierul Figma în blocuri WordPress. După aceea, puteți face câte personalizări doriți din panoul de blocuri.

După ce ați terminat, faceți clic pe butonul „Publicare” sau „Actualizare” pentru a vă salva setările.

Opțiunea 2: Utilizați un plugin plătit pentru a converti Figma în WordPress (mai eficient și fără probleme)

Pentru această metodă, vom folosi un plugin de conversie mai popular și mai eficient, „Uichemy”. Acest plugin oferă un flux de lucru foarte simplu și fără probleme, făcând procesul de conversie fără probleme. Este cel mai potrivit pentru începătorii fără expertiză în codare, precum și pentru dezvoltatorii care doresc să-și accelereze procesul.

În prezent, acest plugin poate converti numai modelele Figma în editori de site-uri Elementor și Bricks, dar compania a promis că va aduce suport pentru blocurile Gutenberg în viitor.

Pasul 1: Deschideți designul Figma și instalați pluginul Uichemy pe tabloul de bord Figma pentru a iniția procesul de conversie.

• Pentru a face acest lucru, căutați „ UiChemy ” în bara de căutare și găsiți pluginul UiChemy.

Faceți clic pe butonul „Să începem” și urmați instrucțiunile pentru instalare și activare.

• Introduceți cheia dvs. de serie pentru a finaliza activarea. (Pentru cheia de serie, creați un cont gratuit făcând clic pe butonul „Începeți gratuit”. După crearea contului, veți găsi cheia de licență în tabloul de bord al contului Posimyth Store.)

Pasul 2: După activarea cu succes, selectați designul Figma sau Cadrul pe care doriți să îl convertiți în WordPress și faceți clic pe butonul „ Conversie în Elementor ” din fereastra pop-up.

(Asigurați-vă că ați instalat și activat pluginul Elementor pe site-ul dvs. WordPress înainte de procesul de conversie și, de asemenea, citiți toate condițiile înainte de a vă converti designul Figma).

Pasul 3: Acum vă puteți previzualiza designul introducând adresa URL a site-ului și cheia indicativă. Dacă nu doriți, faceți clic direct pe butonul „Convertire în Elemetor”. (Consultați tutorialul UiChemy despre „Ce este Previzualizarea live” pentru îndrumări despre generarea cheii de simbol și URL-ul site-ului.)

Pasul 3: Designul dvs. va fi convertit și descărca fișierul JSON.

Acum deschideți tabloul de bord WordPress > Accesați Șabloane > Șabloane salvate.

Acum faceți clic pe butonul „ Importați șabloane ” din partea de sus a paginii și încărcați fișierul JSON.

Pasul 4: Felicitări! Designul dvs. Figma va apărea acum în secțiunea „Șabloane salvate”, unde îl puteți deschide și face editare sau personalizare ulterioară.

Pasul 5: După finalizarea personalizării sau a modificărilor, vizualizați designul dvs. pe partea frontală. Asigurați-vă că toate imaginile și butoanele sunt aliniate corect și funcționează corect. De asemenea, verificați dacă designul răspunde la toate dimensiunile de ecran.

Opțiunea 3: Convertiți manual Figma în WordPress (pentru dezvoltatori)

Această metodă este destul de tehnică, prin urmare necesită cunoștințe bune despre CMS WordPress și puțină răbdare, prin urmare este cea mai potrivită pentru cei care iubesc să codifice.

Pasul 1: Primul pas este să exportați toate piesele de design, cum ar fi icoane și imagini din Figma. Pentru aceasta, deschideți-vă Figma Design și alegeți ce doriți să exportați. Acum faceți clic pe butonul „Exportați” și selectați formatul și rezoluția potrivite.

Notă: Este foarte recomandat ca, atunci când exportați imagini, să alegeți PNG sau JPG, iar pentru pictograme și vectori, să alegeți SVG pentru a menține calitatea. De asemenea, aveți grijă când exportați fișierele, asigurându-vă că acestea sunt în formatul corect, în caz contrar, va afecta grav aspectul site-ului dvs.

Pasul 2: Acum trebuie să creăm o temă WordPress personalizată pentru a converti toate modelele Figma într-un site WordPress. Se datorează faptului că o temă WordPress este cea care controlează modul în care apare și funcționează site-ul dvs.

Un fișier temă WordPress tipic constă din cod PHP, fișiere JavaScript și fișiere de foaie de stil CSS.

• Creați un folder nou în WordPress pentru tema dvs. în directorul wp-content/themes și denumiți-l la alegere. (Puteți accesa aceste fișiere, fie prin Cpanel, WordPress Editor sau clienți FTP) Sau consultați blogul nostru dedicat pe „Cum se instalează tema WordPress?”

Dacă sunteți utilizator WPOven, puteți accesa fișierul WordPress urmând acest tutorial. „Noul Manager de fișiere pentru a gestiona cu ușurință fișierele și folderele site-ului tău.”

Acum, adăugați fișiere precum index.php, header.php, footer.php și functions.php. (Lăsați aceste fișiere necompletate pentru moment). De asemenea, adăugați fișierul style.css pentru a configura foaia de stil CSS a temei dvs. în același folder.

(Acest fișier style.css special este responsabil pentru afișarea tuturor culorilor, fonturilor, marginilor, marginilor și a altor elemente vizuale ale site-ului web.)

Acum adăugați următorul comentariu de antet în fișierul style.css, așa cum este prezentat mai jos:

/*

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

*/

Aici, trebuie să furnizați numele temei temei WordPress personalizate și autorul dvs. Acest lucru va ajuta WordPress să vă identifice tema personalizată.

De asemenea, nu uitați să adăugați o imagine pentru tema dvs. WordPress, astfel încât să poată fi ușor de recunoscut în directorul WordPress, la fel ca o miniatură YouTube.

Dimensiunea de preferat ar trebui să fie de 800×600 pixeli și să fie în format PNG. Denumiți orice alegere și adăugați-l în folderul cu teme.

Pasul 3: Acum trebuie să adăugăm toate activele dvs. Figma exportate în folderul dvs. cu teme personalizate.

Sfat: Dacă site-ul dvs. este complex, este mai bine să vă gestionați toate activele într-un anumit subdosar, așa cum am arătat în imaginea de mai jos:

Pasul 4: Pentru a vă face tema WordPress complet funcțională, trebuie să adăugați HTML, CSS și JavaScript la fișierele temei.

Hai să vedem cum poți face asta,

În primul rând, trebuie să vă convertiți machetele Figma în cod și, pentru asta, vi se va cere să aveți un instrument de editare de cod.

Începeți cu configurarea unei structuri HTML cu elemente precum anteturi, subsoluri, bare de navigare și secțiuni. Adăugați codurile la fișierele PHP (index.php, header.php și footer.php).

Acum utilizați, CSS pentru a vă stila elementele HTML. Adăugați stilurile dvs. în fișierul „style.css”, setând culori, fonturi, dimensiuni și alte aspecte de design.

• Pentru un stil mai bun, puteți folosi:
  • Preprocesoare CSS precum SASS sau LESS
  • Framework-uri precum Bootstrap sau Tailwind
  • O temă de pornire WordPress
• Pentru modele complexe, nu trebuie să puneți toate CSS într-un singur fișier, ci într-un mod mai organizat. Puteți adăuga fișiere CSS separate pentru diferite părți în dosarul de active, astfel încât să vă fie ușor de gestionat și de depanat în viitor.

În cele din urmă, pentru Javascript, găsiți elementele care trebuie să fie interactive, cum ar fi meniurile drop-down, glisoare etc.)

Luați în considerare utilizarea jQuery pentru a ușura sarcini precum apelurile AJAX și manipularea DOM și încărcați corect fișierele CSS (foile de stil) și JavaScript (scripturi) în tema dvs. WordPress folosind fișierul functions.php .

Pasul 5: Acum vine partea de testare, după ce parcurgeți cu succes toți pașii de mai sus, salvați fișierele și verificați dacă totul funcționează bine. Dar înainte de asta, trebuie să activăm pluginul.

Pentru a activa pluginul, accesați tabloul de bord WordPress> Aspect> teme . Tema dvs. personalizată va începe să apară cu imaginea pe care ați încărcat-o mai devreme în folderul cu teme. Faceți clic pe el pentru a activa și încălcați site-ul dvs. WordPress este gata pentru testare.

Iată câteva dintre sugestiile de testare pe care le puteți urma:

• Verificați cum arată și cum funcționează site-ul dvs. în diferite browsere și dimensiuni de ecran.
• Utilizați instrumente pentru a vă optimiza imaginile pentru o încărcare mai rapidă.
• Implementați memorarea în cache pentru a vă accelera site-ul.
• Faceți o copie de rezervă a site-ului dvs. înainte de a-l activa.

rezumat

Convertirea de la Figma la WordPress nu este atât de ușoară pe cât pare, în funcție de complexitatea site-ului. Cu cât designul este mai complex, cu atât procesul pe care trebuie să îl urmați este mai complex. Am încercat să acoperim toate opțiunile pentru toate tipurile de utilizatori.

Dacă o faceți manual, vă poate oferi mai mult control, dar vă va consuma mult timp și efort. Cu toate acestea, puteți utiliza pluginuri pentru a accelera procesul de conversie, dar este posibil să fie nevoie totuși să faceți anumite modificări pentru a obține rezultate mai bune.

Depinde complet de preferințele și ușurința de a înțelege ce metodă alegeți.

Rahul

Rahul Kumar este un pasionat de web și un strateg de conținut specializat în WordPress și găzduire web. Cu ani de experiență și angajamentul de a rămâne la curent cu tendințele din industrie, el creează strategii online eficiente care generează trafic, stimulează implicarea și cresc conversiile. Atenția lui Rahul pentru detalii și capacitatea de a crea conținut convingător îl fac un atu valoros pentru orice brand care dorește să-și îmbunătățească prezența online.