Figma yra puikus įrankis, kuris greitai tampa mėgstamiausiu tarp UX / UI ir interneto dizainerių. Naudodami šį nemokamą naršyklės įrankį galite greitai ir lengvai sukurti interaktyvų interneto dizainą.
Nors dauguma žmonių „Figma“ kuria savo dizainus nuo nulio, galite būti įkvėpti tikrų svetainių ir lengvai sukurti „Figma“ dizainą tiesiai iš esamo HTML puslapio. Štai kaip tai padaryti.
Kodėl turėtumėte sukurti „Figma“ dizainą iš HTML
Yra daug priežasčių, kodėl galbūt norėsite pakartoti esamą žiniatinklio dizainą kaip Figma dizainą. Tai darydami naudodami „Figma“ įskiepį, sutaupysite laiko, todėl galėsite sutelkti dėmesį į dizaino tobulinimą.
Interneto dizaino praktikavimas atkuriant esamus tinklalapius yra puikus būdas mokytis iš meistrų. Taip pat galite naudoti HTML į Figma projektavimo įrankį, jei anksčiau sukūrėte ir paskelbėte tinklalapį, prie kurio praradote prieigą. Užuot perkūrę jį nuo nulio, galite sutaupyti laiko konvertuodami jį atgal į „Figma“, kad vėl dirbtumėte su juo.
Dabar, kai žinote, kodėl šis įrankis gali būti naudingas, laikas sužinoti, kaip jis veikia.
Kaip paversti bet kurią svetainę į Figma dizainą
Norėdami pradėti bet kokį Figma pagrįstą projektavimo darbą, turite atidaryti Figma ir prisijungti arba užsiregistruoti. Galite naudoti naršyklės versiją, Figma, arba atsisiųskite darbalaukio programą; jie abu dirba vienodai šiame projekte.
Atidarykite a Naujas dizaino failas kad pradėtumėte savo HTML į Figma dizaino projektą.
1 veiksmas: atsisiųskite html.to.design papildinį
Kad galėtumėte tiesiogiai konvertuoti tiesioginę svetainę į Figma dizainą, jums reikės papildinio. „Figma“ yra daugybė papildinių, kurie padės kurti dizainą, įskaitant įskiepiai, skirti telefonų ir įrenginių maketams kurti. Konvertuotą svetainės dizainą vėliau galėsite pridėti prie maketo, jei norite.
Norėdami atsisiųsti papildinį, pasirinkite Figma meniu ("Figma" logotipas) > Papildiniai > Raskite daugiau papildinių. Arba galite pasirinkti Ištekliai > Papildiniai. Iš bet kurios parinkties įveskite paieškos juostoje html.to.design.
Raskite divRIOTS pateiktą parinktį ir pasirinkite Bėk. Tai atveria papildinį kaip dialogo langą „Figma“ drobėje.
2 veiksmas: įklijuokite svetainės URL
Papildinys html.to.design yra nemokamas, tačiau jis siūlo profesionalią versiją. Galite visiškai užbaigti savo projektavimo procesą naudodami nemokamą versiją.
Raskite svetainę, kurioje norite sukurti „Figma“ dizainą. Turėtumėte naudoti viešą svetainę, o ne tinklalapį, kurį galima pasiekti tik prisijungus. Naudosime savo pagrindinį puslapį MakeUseOf.com.
Nukopijuokite visą URL ir įklijuokite jį į „Figma“ importavimo laukelį, pakeisdami „Apple“ svetainės rezervuotąją vietą.
3 veiksmas: įkelkite savo dizainą
Įklijavę svetainės URL, atidarykite Nustatymai po importavimo laukeliu, kad pasirinktumėte dizaino dydį. Galite importuoti dizainą įvairiems įrenginiams, bet jums seksis geriau pasirinkti stalinį įrenginį, jei naudosite darbalaukio URL, ir sėkmingiau naudosite mobiliesiems įrenginiams skirtą URL mobiliesiems.
Taip pat yra tinkintų įrenginių ar dydžių parinkčių, kurios nėra numatytos. Mes renkamės „MacBook Pro 14“ su Šviesa tema.
Nurodę įrenginio ir peržiūros nustatymus, pasirinkite Importuoti kad jūsų HTML dizainas atgytų Figma. Palaukite, kol apkrovos juosta bus baigta, kad „Figma“ dizainas būtų užpildytas.
Priklausomai nuo to, kurią svetainę naudojote, galite pastebėti iššokantįjį langą, kuriame paaiškinama, kad kai kuriuos šriftus reikėjo pakeisti. Tai bus dėl licencijuotų šriftų autorių teisių. „Figma“ pakeis juos šriftais, prie kurių turite prieigą.
Išeikite iš bet kokių iššokančiųjų langų, tada išeikite iš papildinio dialogo lango, kad pamatytumėte visą savo naują dizainą.
4 veiksmas: redaguokite savo Figma dizainą
Iš čia galite pradėti redaguoti savo „Figma“ tinklalapį bet kokiu norimu būdu. Kaip minėta, ši HTML į Figma funkcija leidžia sužinoti, kaip sukurti esami tinklalapiai, kad įkvėptų jus kurti savo nuo nulio. Galite naudoti bazinį dizainą iš svetainės ir sukurti pristatymą naudodami perėjimus programoje Figma, arba tiesiog sužinokite, kaip tinklalapius nustato kiti dizaineriai.
Kairiajame meniu rasite sluoksnius. Kadangi tai buvo konvertuota tiesiai iš HTML, sluoksniai gali būti išsamesni arba net painesni nei tie, prie kurių esate įpratę kurdami patys. Pasirinkite dizaino skiltį, kad rastumėte paryškintus sluoksnius kairiajame meniu.
Galite pakeisti vaizdus, pakartotinai įvesti pavadinimus ir pagrindinį tekstą arba perkelti dalykus makete dukart spustelėdami dizaino aspektą. Papildinys html.to.figma neatkartoja animacijos ar perėjimo nustatymų, kai spustelėja nuorodas arba keičia puslapius. Galite juos pridėti patys.
Kaip konvertuoti privatų tinklalapį
Didžioji dalis privačios svetainės, kuriai pasiekti reikia paskyros, kūrimo proceso, palyginti su viešuoju tinklalapiu, yra vienodi. Tačiau vietoj URL įklijavimo turite naudoti „Chrome“ plėtinį, kuris generuoja failą.
Norėdami pradėti, atidarykite Figma ir html.to.figma papildinį taip pat, kaip ir anksčiau.
1 veiksmas: atsisiųskite ir paleiskite „Chrome“ plėtinį
Šį plėtinį galite naudoti tik su „Google Chrome“, todėl atidarykite „Chrome“, kad pradėtumėte. „Figma“ papildinio dialogo lange pasirinkite Chrome plėtinys– arba atidarykite plėtinį čia „Chrome“ naršyklėje.
Pasirinkite Pridėti prie „Chrome“. > Pridėti plėtinį Norėdami pridėti plėtinį prie savo naršyklės.
Pridėję plėtinį, eikite į privačią svetainę arba puslapį, kurio dizainą norite pakartoti (naudojame Instagram puslapį), ir pasirinkite plėtinį. Sutrauktus plėtinius rasite po galvosūkio piktograma jūsų naršyklėje.
Jis paklaus, ar norite užfiksuoti visą puslapį, ar tik tai, kas matoma. Atlikite savo pasirinkimą ir fiksavimas atsisiuntimų sąraše bus rodomas kaip .h2d failas.
2 veiksmas: vilkite sugeneruotą failą į „Figma“ papildinį
Naršyklėje eikite į „Figma“ programą arba „Figma“ svetainę ir vilkite atsisiųstą .h2d failą į laukelį. Failas bus įkeltas ir generuojamas taip pat, kaip ir viešosios svetainės parinktis.
Kaip ir viešosios tinklalapio versijos atveju, galite dukart spustelėti dizaino aspektus, kad juos redaguotų, arba spustelėti kairiajame meniu, kad pamatytumėte, kur jie rodomi makete.
Galbūt norėsite į tinklalapio dizainą įtraukti naujų dizaino elementų, pvz „Figma“ matinio stiklo efektas, arba netgi galite atkartoti tinklalapio dizaino dalis kaip a pagrindinis šablonas Figma pristatymams. 2022 m. „Adobe“ įsigijo „Figma“., todėl ateityje galime tikėtis įdomesnių „Figma“ naudojimo būdų.
Naudokite bet kurią svetainę, kad įkvėptumėte savo „Figma“ dizainą
Nors „Figma“ visų pirma skirta svetainėms arba UX/UI puslapiams kurti nuo nulio, tai puiki galimybė užpildyti esamus tinklalapius ir pamatyti, kaip jie buvo sukurti. Taip pat galite sukurti savo interneto dizainą esamos svetainės kopija, jei nesate tikri, nuo ko pradėti nuo tuščio šiferio.
Kita puiki priežastis, kodėl turėtumėte naudoti papildinį html.to.figma, yra tai, kad jau sukūrėte svetainę, prie kurios praradote prieigą. Galite užpildyti puslapį Figma ir pradėti iš naujo, nepradėdami iš naujo.