Figma este un instrument grozav care devine rapid favorit printre designerii UX/UI și web. Puteți crea design-uri web receptive rapid și ușor folosind acest instrument gratuit bazat pe browser.
În timp ce majoritatea oamenilor își creează modelele de la zero în Figma, puteți fi inspirat de site-uri web reale și puteți crea cu ușurință un design Figma direct dintr-o pagină HTML existentă. Iată cum să o faci.
De ce ar trebui să creați modele Figma din HTML
Există multe motive pentru care ați putea dori să reproduceți un design web existent ca design Figma. Făcând acest lucru prin pluginul Figma, economisește timp, permițându-vă să vă concentrați pe reglarea fină a designului.
Practicarea designului web prin recrearea paginilor web existente este o modalitate excelentă de a învăța de la maeștri. De asemenea, puteți utiliza instrumentul de proiectare HTML to Figma dacă ați proiectat și publicat anterior o pagină web la care ați pierdut accesul. În loc să-l reproiectați de la zero, puteți economisi timp transformându-l înapoi în Figma pentru a lucra din nou la el.
Acum că știți de ce acest instrument poate fi la îndemână, este timpul să aflați cum funcționează.
Cum să convertiți orice site web într-un design Figma
Pentru a începe orice proiectare bazată pe Figma, trebuie să deschideți Figma și să vă conectați sau să vă înregistrați. Puteți utiliza versiunea de browser, Figma, sau descărcați aplicația desktop; ambele lucrează la fel pentru acest proiect.
Deschide a Fișier nou de design pentru a începe proiectul de design HTML to Figma.
Pasul 1: Descărcați pluginul html.to.design
Pentru a putea converti direct un site web live într-un design Figma, veți avea nevoie de un plugin. Există nenumărate pluginuri pe Figma pentru a vă ajuta cu design-urile dvs., inclusiv pluginuri pentru a crea machete pentru telefoane și dispozitive. Puteți adăuga ulterior designul site-ului dvs. convertit la o machetă, dacă doriți.
Pentru a descărca pluginul, selectați meniul Figma (logo Figma) > Pluginuri > Găsiți mai multe pluginuri. Alternativ, puteți selecta Resurse > Pluginuri. Din oricare dintre opțiuni, tastați în bara de căutare html.to.design.
Găsiți opțiunea oferită de divRIOTS și selectați Alerga. Aceasta deschide pluginul ca o casetă de dialog pe pânza dvs. Figma.
Pasul 2: inserați adresa URL a site-ului web
Pluginul html.to.design este gratuit, dar oferă o versiune pro. Puteți finaliza procesul de proiectare în întregime cu versiunea gratuită.
Găsiți site-ul web pentru care doriți să faceți un design Figma. Ar trebui să utilizați un site web public, nu o pagină web care poate fi accesată numai prin autentificare. Vom folosi pagina noastră de pornire, MakeUseOf.com.
Copiați adresa URL completă și inserați-o în caseta de import de pe Figma, înlocuind substituentul site-ului Apple.
Pasul 3: Încărcați designul
După lipirea adresei URL a site-ului web, deschideți Setări sub caseta de import pentru a selecta dimensiunea designului. Puteți importa designul pentru o varietate de dispozitive, dar veți avea mai mult succes în alegerea unui dispozitiv desktop dacă ați folosit o adresă URL pentru desktop și veți avea mai mult succes folosind o adresă URL mobilă pentru dispozitive mobile.
Există, de asemenea, opțiuni personalizate pentru dispozitive sau dimensiuni care nu sunt disponibile ca opțiuni implicite. Noi alegem MacBook Pro 14” cu Ușoară temă.
După ce ați specificat dispozitivul și vizualizați setările, selectați Import pentru a vă aduce designul HTML la viață în Figma. Așteptați până când bara de încărcare este completă pentru ca designul Figma să fie populat.
În funcție de site-ul web pe care l-ați folosit, este posibil să observați o casetă pop-up care explică că unele fonturi au trebuit să fie înlocuite. Acest lucru se va datora dreptului de autor pentru fonturile licențiate. Figma le va înlocui cu fonturi la care aveți acces.
Ieșiți din orice ferestre pop-up, apoi ieșiți din dialogul pentru plugin pentru a vedea noul dvs. design în forma sa completă.
Pasul 4: Editați-vă designul Figma
De aici, puteți începe să vă editați pagina web Figma în orice mod doriți. După cum am menționat, această funcție HTML to Figma vă permite să aflați cum au fost concepute paginile web existente pentru a vă inspira să vă creați propria dvs. de la zero. Puteți utiliza designul de bază de pe site-ul web și creați o prezentare folosind tranziții în Figma, sau pur și simplu aflați cum sunt configurate paginile web de către alți designeri.
În meniul din stânga, veți găsi straturile. Deoarece aceasta a fost convertită direct din HTML, straturile pot fi mai detaliate – sau chiar confuze – decât cu ce sunteți obișnuiți când vă proiectați. Selectați o secțiune din design pentru a găsi straturile evidențiate în meniul din stânga.
Puteți înlocui imaginile, reintroduceți titlurile și corpul textului sau mutați lucrurile în cadrul aspectului făcând dublu clic pe aspectul de design. Pluginul html.to.figma nu reproduce setările de animație sau tranziție atunci când faceți clic pe linkuri sau schimbați paginile. Le puteți adăuga pe cont propriu.
Cum să convertiți o pagină web privată
Majoritatea procesului de creare a unui site web privat – unul care necesită acces la un cont – față de o pagină web publică este același. Cu toate acestea, în loc să lipiți adresa URL, trebuie să utilizați o extensie Chrome care generează un fișier.
Pentru a începe, deschideți Figma și pluginul html.to.figma în același mod ca înainte.
Pasul 1: Descărcați și rulați extensia Chrome
Puteți utiliza această extensie numai cu Google Chrome, așa că deschideți Chrome pentru a începe. Din caseta de dialog Figma plugin, selectați Extensia Chrome-sau deschideți extensia aici pe browserul dvs. Chrome.
Selectați Adăugați la crom > Adaugă extensie pentru a adăuga extensia în browser.
Cu extensia adăugată, navigați la site-ul web privat sau la pagina pe care doriți să reproduceți designul - folosim o pagină Instagram - și selectați extensia. Extensiile restrânse se găsesc sub pictograma piesei puzzle din browser.
Vă va întreba dacă doriți să capturați întreaga pagină sau doar ceea ce este în vedere. Faceți selecția și apoi captura va apărea în descărcări ca fișier .h2d.
Pasul 2: Trageți fișierul generat în pluginul Figma
Accesați aplicația Figma sau site-ul Figma din browser și trageți fișierul .h2d descărcat în casetă. Fișierul se va încărca și se va genera în același mod ca și opțiunea site-ului public.
La fel ca în versiunea de pagină web publică, puteți face dublu clic pe aspecte ale designului pentru a le edita sau puteți face clic pe meniul din stânga pentru a vedea unde apar în aspect.
Poate doriți să adăugați noi elemente de design la designul paginii web, de exemplu un efect de sticlă mată Figma, sau ați putea chiar să reproduceți părți ale designului paginii web ca a șablon principal pentru prezentările Figma. În 2022, Adobe a achiziționat Figma, așa că ne putem aștepta la mai multe moduri distractive de a folosi Figma în viitor.
Utilizați orice site web pentru inspirație în modelele dvs. Figma
În timp ce Figma este în primul rând pentru proiectarea site-urilor web sau a paginilor UX/UI de la zero, este o oportunitate excelentă de a popula paginile web existente pentru a vedea cum au fost construite. Puteți, de asemenea, să faceți designul dvs. web o replică a unui site existent, dacă nu sunteți sigur de unde să începeți de la o listă goală.
Un alt motiv excelent pentru care ar trebui să utilizați pluginul html.to.figma este dacă ați proiectat deja un site web la care ați pierdut accesul. Puteți completa pagina în Figma și puteți începe din nou fără a fi nevoie să începeți din nou.