Figma on suurepärane tööriist, millest on kiiresti saamas UX/UI ja veebidisainerite lemmik. Selle tasuta brauseripõhise tööriista abil saate kiiresti ja lihtsalt luua reageerivaid veebikujundusi.
Kuigi enamik inimesi loob Figmas oma kujunduse nullist, võite saada inspiratsiooni tõelistest veebisaitidest ja luua Figma kujunduse hõlpsalt otse olemasolevalt HTML-lehelt. Siin on, kuidas seda teha.
Miks peaksite HTML-ist Figma kujundusi looma
On palju põhjuseid, miks võiksite olemasolevat veebikujundust Figma kujundusena kopeerida. Seda tehes Figma pistikprogrammi kaudu säästate aega, võimaldades teil keskenduda oma disaini peenhäälestamisele.
Veebidisaini harjutamine olemasolevate veebilehtede taasloomise kaudu on suurepärane viis meistritelt õppimiseks. Saate kasutada ka HTML to Figma kujundustööriista, kui olete varem kujundanud ja avaldanud veebilehe, millele olete kaotanud juurdepääsu. Selle asemel, et see nullist ümber kujundada, saate säästa aega, teisendades selle tagasi Figmale, et sellega uuesti töötada.
Nüüd, kui teate, miks see tööriist võib olla mugav, on aeg õppida, kuidas see töötab.
Kuidas muuta mis tahes veebisait Figma kujunduseks
Mis tahes Figma-põhise disainitöö alustamiseks peate avama Figma ja logima sisse või registreeruma. Võite kasutada brauseri versiooni, Figma, või laadige alla töölauarakendus; mõlemad töötavad selle projekti puhul ühtemoodi.
Avage a Uus kujundusfail HTML-i Figma disainiprojekti alustamiseks.
1. samm: laadige alla pistikprogramm html.to.design
Reaalajas veebisaidi otse Figma kujunduseks teisendamiseks vajate pistikprogrammi. Figmas on lugematu arv pistikprogramme, mis aitavad teie kujundust, sealhulgas pistikprogrammid telefonide ja seadmete makettide loomiseks. Saate oma teisendatud veebisaidi kujunduse hiljem maketile lisada, kui soovite.
Pistikprogrammi allalaadimiseks valige Figma menüü (Figma logo) > Pluginad > Otsige rohkem pistikprogramme. Teise võimalusena saate valida Vahendid > Pluginad. Sisestage ükskõik kumma valiku puhul otsinguribale html.to.design.
Leidke divRIOTSi pakutav valik ja valige Jookse. See avab pistikprogrammi dialoogiboksina teie Figma lõuendil.
2. samm: kleepige veebisaidi URL
Pistikprogramm html.to.design on tasuta, kuid pakub professionaalset versiooni. Tasuta versiooniga saate oma disainiprotsessi täielikult lõpule viia.
Otsige üles veebisait, millele soovite Figma kujundust teha. Peaksite kasutama avalikku veebisaiti, mitte veebisaiti, millele pääsete juurde ainult sisse logides. Kasutame oma kodulehte MakeUseOf.com.
Kopeerige täielik URL ja kleepige see Figma impordikasti, asendades Apple'i veebisaidi kohahoidja.
3. samm: laadige oma kujundus
Pärast veebisaidi URL-i kleepimist avage Seaded kujunduse suuruse valimiseks impordikasti all. Saate importida erinevate seadmete kujundust, kuid teil on töölaua URL-i kasutamisel parem töölauaseadme valimine ja mobiilseadmete jaoks mobiilse URL-i kasutamine.
Samuti on kohandatud valikud seadmete või suuruste jaoks, mis pole vaikevalikutena saadaval. Meie valime MacBook Pro 14" koos Valgus teema.
Kui olete oma seadme ja kuva seaded määranud, valige Import et äratada oma HTML-i kujundus Figmas ellu. Oodake, kuni laadimisriba on valmis, kuni Figma kujundus täitub.
Sõltuvalt sellest, millist veebisaiti olete kasutanud, võite märgata hüpikakent, mis selgitab, et mõned kirjatüübid tuli asendada. Selle põhjuseks on litsentsitud kirjatüüpide autoriõigused. Figma asendab need kirjatüüpidega, millele teil on juurdepääs.
Väljuge kõigist hüpikakendest ja seejärel pluginate dialoogist, et näha oma uut kujundust selle täiskujul.
4. samm: muutke oma Figma kujundust
Siit saate alustada oma Figma veebilehe muutmist mis tahes viisil. Nagu mainitud, võimaldab see HTML-i Figma funktsioon teil õppida, kuidas olemasolevad veebilehed loodi, et inspireerida teid nullist oma veebilehti looma. Võite kasutada baaskujundust veebisaidilt ja luua esitlus, kasutades Figma üleminekuidvõi lihtsalt õppida, kuidas teised disainerid veebilehti seadistavad.
Vasakpoolses menüüs leiate kihid. Kuna see on teisendatud otse HTML-ist, võivad kihid olla üksikasjalikumad või isegi segadust tekitavad kui see, millega olete ise kujundades harjunud. Valige kujunduses jaotis, et leida vasakpoolsest menüüst esiletõstetud kihid.
Kujundusaspektil topeltklõpsuga saate pilte asendada, pealkirju ja kehateksti ümber kirjutada või asju paigutuses teisaldada. Plugin html.to.figma ei kopeeri linkidel klõpsamisel või lehtede muutmisel animatsiooni ega ülemineku sätteid. Saate need ise lisada.
Kuidas teisendada privaatset veebilehte
Suurem osa privaatse veebisaidi loomise protsessist – see, mille jaoks on vaja juurdepääsu kontot – ja avaliku veebilehe loomise protsess on sama. URL-i kleepimise asemel peate siiski kasutama Chrome'i laiendust, mis loob faili.
Alustuseks avage Figma ja pistikprogramm html.to.figma samamoodi nagu varem.
1. toiming: laadige alla ja käivitage Chrome'i laiendus
Saate seda laiendust kasutada ainult Google Chrome'iga, seega avage alustamiseks Chrome. Valige dialoogiboksis Figma plugin Chrome'i laiendus— või avage laiendus siin oma Chrome'i brauseris.
Valige Lisa Chrome'i > Lisa laiendus laienduse brauserisse lisamiseks.
Kui laiendus on lisatud, liikuge privaatsele veebisaidile või lehele, mille kujundust soovite kopeerida (me kasutame Instagrami lehte) ja valige laiendus. Ahendatud laiendused leiate brauseris pusletüki ikooni alt.
See küsib, kas soovite jäädvustada kogu lehe või ainult seda, mis on vaates. Tehke oma valik ja seejärel kuvatakse jäädvustus teie allalaadimistes h2d-failina.
2. samm: lohistage loodud fail Figma pistikprogrammi
Avage oma brauseris Figma rakendus või Figma sait ja lohistage allalaaditud h2d-fail kasti. Fail laaditakse ja genereeritakse samamoodi nagu avaliku veebisaidi valik.
Sarnaselt avaliku veebilehe versiooniga saate topeltklõpsata kujunduse aspekte, et neid muuta, või klõpsata vasakpoolses menüüs, et näha, kus need paigutusel kuvatakse.
Võib-olla soovite veebilehe kujundusse lisada uusi kujunduselemente, näiteks Figma mattklaasi efektvõi võite isegi veebilehe kujunduse osi kopeerida kui a Figma esitluste põhimall. 2022. aastal Adobe omandas Figma, nii et võime tulevikus oodata lõbusamaid viise Figma kasutamiseks.
Kasutage oma Figma kujunduses inspiratsiooni saamiseks mis tahes veebisaiti
Kuigi Figma on mõeldud peamiselt veebisaitide või UX/UI lehtede nullist kujundamiseks, on see suurepärane võimalus olemasolevaid veebilehti täita, et näha, kuidas need on üles ehitatud. Kui te pole kindel, kust tühjalt lehelt alustada, saate oma veebikujunduse teha ka olemasoleva saidi koopiaks.
Veel üks suurepärane põhjus, miks peaksite pistikprogrammi html.to.figma kasutama, on see, kui olete juba loonud veebisaidi, millele olete kaotanud juurdepääsu. Saate lehe Figmas täita ja uuesti alustada, ilma et peaksite uuesti alustama.
