Figma je odlično orodje, ki hitro postaja priljubljeno med UX/UI in spletnimi oblikovalci. S tem brezplačnim orodjem, ki temelji na brskalniku, lahko hitro in preprosto ustvarite odzivne spletne dizajne.
Medtem ko večina ljudi ustvarja svoje načrte iz nič v Figmi, vas lahko navdihnejo resnična spletna mesta in preprosto ustvarite dizajn Figma neposredno iz obstoječe strani HTML. Tukaj je opisano, kako to storiti.
Zakaj bi morali ustvariti modele Figma iz HTML
Obstaja veliko razlogov, zakaj boste morda želeli posnemati obstoječo spletno zasnovo kot zasnovo Figma. Če to storite prek vtičnika Figma, prihranite čas in se lahko osredotočite na natančno prilagajanje svojega dizajna.
Vadba spletnega oblikovanja s poustvarjanjem obstoječih spletnih strani je odličen način za učenje od mojstrov. Uporabite lahko tudi orodje za oblikovanje HTML v Figma, če ste že oblikovali in objavili spletno stran, do katere ste izgubili dostop. Namesto da bi ga preoblikovali iz nič, lahko prihranite čas tako, da ga pretvorite nazaj v Figmo in znova delate na njem.
Zdaj, ko veste, zakaj je to orodje lahko priročno, je čas, da se naučite, kako deluje.
Kako katero koli spletno mesto pretvoriti v dizajn Figma
Če želite začeti kakršno koli oblikovalsko delo, ki temelji na Figmi, morate odpreti Figmo in se prijaviti ali prijaviti. Uporabite lahko različico brskalnika, Figma, oz prenesite namizno aplikacijo; oba delata na enak način za ta projekt.
Odpri a Nova oblikovalska datoteka da začnete svoj projekt oblikovanja HTML v Figma.
1. korak: Prenesite vtičnik html.to.design
Če želite neposredno pretvoriti spletno mesto v živo v dizajn Figma, boste potrebovali vtičnik. Na Figmi je nešteto vtičnikov, ki vam pomagajo pri načrtovanju, vključno z vtičniki za ustvarjanje modelov za telefone in naprave. Če želite, lahko pretvorjeno zasnovo spletnega mesta dodate v maketo pozneje.
Če želite prenesti vtičnik, izberite Meni Figma (Logotip Figma) > Vtičniki > Poiščite več vtičnikov. Druga možnost je, da izberete Viri > Vtičniki. Iz katere koli možnosti vnesite v iskalno vrstico html.to.design.
Poiščite možnost divRIOTS in izberite Teči. To odpre vtičnik kot pogovorno okno na vašem platnu Figma.
2. korak: prilepite URL spletnega mesta
Vtičnik html.to.design je brezplačen, vendar ponuja pro različico. Z brezplačno različico lahko v celoti dokončate svoj proces oblikovanja.
Poiščite spletno stran, za katero želite oblikovati Figma. Uporabiti morate javno spletno mesto – ne spletno stran, do katere lahko dostopate le s prijavo. Uporabili bomo našo domačo stran, MakeUseOf.com.
Kopirajte celoten URL in ga prilepite v uvozno polje na Figmi, tako da zamenjate ogrado spletnega mesta Apple.
3. korak: Naložite svoj dizajn
Ko prilepite URL spletnega mesta, odprite nastavitve pod poljem za uvoz, da izberete velikost dizajna. Zasnovo lahko uvozite za različne naprave, vendar boste pri izbiri namizja uspešnejši, če boste uporabili namizni URL, za mobilne naprave pa boljši uspeh z uporabo mobilnega URL-ja.
Obstajajo tudi možnosti po meri za naprave ali velikosti, ki niso na voljo kot privzete možnosti. Izbiramo MacBook Pro 14" z Svetloba tema.
Ko določite svojo napravo in nastavitve pogleda, izberite Uvozi da oživite svoj dizajn HTML v Figmi. Počakajte, da se vrstica nalaganja konča, da se zapolni načrt Figma.
Odvisno od tega, katero spletno mesto ste uporabili, boste morda opazili pojavno okno z razlago, da je bilo treba zamenjati nekatere pisave. To bo posledica avtorskih pravic za licenčne pisave. Figma jih bo nadomestila s pisavami, do katerih imate dostop.
Zaprite morebitna pojavna okna in nato zaprite pogovorno okno vtičnika, da si ogledate svoj novi dizajn v polni obliki.
4. korak: Uredite svoj dizajn Figma
Od tu lahko začnete urejati svojo spletno stran Figma na kakršen koli način. Kot že omenjeno, vam ta funkcija HTML v Figma omogoča, da se naučite, kako so bile obstoječe spletne strani zasnovane, da vas navdihnejo, da ustvarite svojo lastno iz nič. Lahko uporabite osnovno zasnovo s spletne strani in ustvarite predstavitev s prehodi v Figmi, ali pa se preprosto naučite, kako spletne strani postavljajo drugi oblikovalci.
V levem meniju boste našli plasti. Ker je bilo to pretvorjeno neposredno iz HTML-ja, so lahko plasti bolj podrobne ali celo zmedene od tistih, ki ste jih vajeni, ko sami oblikujete. Izberite razdelek v dizajnu, da poiščete označene plasti v levem meniju.
Zamenjate lahko slike, pretipkate naslove in telo besedila ali premaknete stvari znotraj postavitve tako, da dvokliknete oblikovni vidik. Vtičnik html.to.figma ne posnema nastavitev animacije ali prehoda, ko klikate povezave ali spreminjate strani. Lahko jih dodate sami.
Kako pretvoriti zasebno spletno stran
Večina postopka ustvarjanja zasebnega spletnega mesta – tistega, ki za dostop zahteva račun – v primerjavi z javno spletno stranjo je enaka. Toda namesto da prilepite URL, morate uporabiti razširitev za Chrome, ki ustvari datoteko.
Za začetek odprite Figmo in vtičnik html.to.figma na enak način kot prej.
1. korak: Prenesite in zaženite razširitev za Chrome
To razširitev lahko uporabljate samo z Google Chromom, zato za začetek odprite Chrome. V pogovornem oknu vtičnika Figma izberite Razširitev za Chrome—ali odpri razširitev tukaj v brskalniku Chrome.
Izberite Dodaj v Chrome > Dodaj razširitev da dodate razširitev v brskalnik.
Z dodano razširitvijo se pomaknite do zasebnega spletnega mesta ali strani, katere zasnovo želite posnemati – uporabljamo stran Instagram – in izberite razširitev. Strnjene razširitve najdete pod ikono koščka sestavljanke v brskalniku.
Vprašal vas bo, ali želite zajeti celotno stran ali samo tisto, kar je prikazano. Izberite svojo izbiro in posnetek se bo prikazal v vaših prenosih kot datoteka .h2d.
2. korak: povlecite ustvarjeno datoteko v vtičnik Figma
Pojdite v aplikacijo Figma ali spletno mesto Figma v brskalniku in povlecite preneseno datoteko .h2d v polje. Datoteka se bo naložila in ustvarila na enak način kot možnost javnega spletnega mesta.
Tako kot pri različici javne spletne strani lahko dvokliknete vidike zasnove, da jih uredite, ali pa kliknete v levem meniju, da vidite, kje na postavitvi se pojavijo.
Morda boste želeli zasnovi spletne strani dodati nove oblikovne elemente, na primer učinek motnega stekla Figma, lahko pa celo posnemate dele zasnove spletne strani kot glavna predloga za predstavitve Figma. Leta 2022, Adobe je kupil Figmo, zato lahko pričakujemo več zabavnih načinov uporabe Figme v prihodnosti.
Uporabite katero koli spletno stran za navdih pri svojih načrtih Figma
Medtem ko je Figma namenjena predvsem oblikovanju spletnih mest ali strani UX/UI iz nič, je odlična priložnost za zapolnitev obstoječih spletnih strani, da vidite, kako so bile zgrajene. Svojo spletno zasnovo lahko naredite tudi kot repliko obstoječega mesta, če niste prepričani, kje začeti s praznega seznama.
Še en odličen razlog, zakaj bi morali uporabiti vtičnik html.to.figma, je, če ste že oblikovali spletno mesto, do katerega ste izgubili dostop. Stran lahko zapolnite v Figmi in začnete znova, ne da bi morali začeti znova.
