Figma ir lielisks rīks, kas ātri kļūst par iecienītāko UX/UI un tīmekļa dizaineru vidū. Izmantojot šo bezmaksas pārlūkprogrammas rīku, varat ātri un vienkārši izveidot adaptīvus tīmekļa dizainus.
Lai gan lielākā daļa cilvēku Figma veido savus dizainus no jauna, jūs varat gūt iedvesmu no īstām vietnēm un viegli izveidot Figma dizainu tieši no esošas HTML lapas. Lūk, kā to izdarīt.
Kāpēc jums vajadzētu izveidot Figma dizainu no HTML
Ir daudz iemeslu, kāpēc esošu tīmekļa dizainu varētu replicēt kā Figma dizainu. To darot, izmantojot Figma spraudni, tiek ietaupīts laiks, ļaujot jums koncentrēties uz dizaina precizēšanu.
Tīmekļa dizaina praktizēšana, atjaunojot esošās tīmekļa lapas, ir lielisks veids, kā mācīties no meistariem. Varat arī izmantot noformēšanas rīku HTML to Figma, ja iepriekš esat izstrādājis un publicējis tīmekļa lapu, kurai esat zaudējis piekļuvi. Tā vietā, lai to pārveidotu no jauna, varat ietaupīt laiku, pārveidojot to atpakaļ uz Figma, lai atkal strādātu pie tā.
Tagad, kad zināt, kāpēc šis rīks var būt noderīgs, ir pienācis laiks uzzināt, kā tas darbojas.
Kā pārvērst jebkuru vietni par Figma dizainu
Lai sāktu jebkuru uz Figma balstītu projektēšanas darbu, jums ir jāatver Figma un jāpiesakās vai jāreģistrējas. Varat izmantot pārlūkprogrammas versiju, Figma, vai lejupielādējiet darbvirsmas lietotni; viņi abi strādā vienādi šim projektam.
Atveriet a Jauns dizaina fails lai sāktu savu HTML uz Figma dizaina projektu.
1. darbība. Lejupielādējiet spraudni html.to.design
Lai tiešsaistes vietni varētu tieši pārveidot par Figma dizainu, jums būs nepieciešams spraudnis. Vietnē Figma ir neskaitāmi spraudņi, kas palīdz jūsu dizainā, tostarp spraudņi, lai izveidotu tālruņu un ierīču maketus. Ja vēlaties, vēlāk varat pievienot maketam pārveidoto vietnes dizainu.
Lai lejupielādētu spraudni, atlasiet Figma izvēlne (Figma logotips) > Spraudņi > Atrodiet citus spraudņus. Alternatīvi, jūs varat izvēlēties Resursi > Spraudņi. Jebkurā no opcijām ierakstiet meklēšanas joslā html.to.design.
Atrodiet divRIOTS piedāvāto opciju un atlasiet Skrien. Tas atver spraudni kā dialoglodziņu uz jūsu Figma kanvas.
2. darbība. Ielīmējiet vietnes URL
Spraudnis html.to.design ir bezmaksas, taču tas piedāvā pro versiju. Jūs varat pilnībā pabeigt projektēšanas procesu, izmantojot bezmaksas versiju.
Atrodiet vietni, kurai vēlaties izveidot Figma dizainu. Jums vajadzētu izmantot publisku vietni, nevis tīmekļa lapu, kurai var piekļūt, tikai piesakoties. Mēs izmantosim mūsu mājaslapu MakeUseOf.com.
Nokopējiet pilnu URL un ielīmējiet to Figma importēšanas lodziņā, aizstājot Apple vietnes vietturi.
3. darbība: ielādējiet savu dizainu
Pēc vietnes URL ielīmēšanas atveriet Iestatījumi zem importēšanas lodziņa, lai atlasītu dizaina izmēru. Varat importēt dizainu dažādām ierīcēm, taču jums būs labāki panākumi, izvēloties galddatoru, ja izmantosit darbvirsmas URL, un labākus panākumus, izmantojot mobilo ierīču URL.
Ir arī pielāgotas opcijas ierīcēm vai izmēriem, kas nav pieejami kā noklusējuma opcijas. Mēs izvēlamies MacBook Pro 14” ar Gaisma tēma.
Kad esat norādījis ierīces un skata iestatījumus, atlasiet Importēt lai atdzīvinātu savu HTML dizainu programmā Figma. Pagaidiet, līdz slodzes josla ir pabeigta, lai Figma dizains tiktu aizpildīts.
Atkarībā no izmantotās vietnes, iespējams, pamanīsit uznirstošo lodziņu, kurā paskaidrots, ka daži burtveidoli bija jāaizstāj. Tas būs saistīts ar autortiesībām uz licencētiem burtveidoliem. Figma tos aizstās ar burtveidoliem, kuriem jums ir piekļuve.
Izejiet no visiem uznirstošajiem logiem, pēc tam izejiet no spraudņa dialoglodziņa, lai skatītu savu jauno dizainu pilnā formā.
4. darbība: rediģējiet savu Figma dizainu
No šejienes varat sākt rediģēt savu Figma tīmekļa lapu jebkurā vēlamajā veidā. Kā minēts, šī funkcija no HTML uz Figma ļauj uzzināt, kā esošās tīmekļa lapas tika veidotas, lai iedvesmotu jūs izveidot savas lapas no nulles. Jūs varētu izmantot bāzes dizainu no vietnes un izveidot prezentāciju, izmantojot pārejas programmā Figmavai vienkārši uzziniet, kā tīmekļa lapas izveido citi dizaineri.
Kreisajā izvēlnē jūs atradīsit slāņus. Tā kā tas ir pārveidots tieši no HTML, slāņi var būt detalizētāki vai pat mulsinoši nekā tie, pie kuriem esat pieradis, veidojot pats. Atlasiet noformējuma sadaļu, lai kreisajā izvēlnē atrastu izceltos slāņus.
Varat aizstāt attēlus, atkārtoti rakstīt virsrakstus un pamattekstu vai pārvietot lietas izkārtojumā, veicot dubultklikšķi uz noformējuma aspekta. Spraudnis html.to.figma nedublē animācijas vai pārejas iestatījumus, noklikšķinot uz saitēm vai mainot lapas. Jūs varat tos pievienot pats.
Kā pārveidot privātu vietni
Lielākā daļa privātas vietnes izveides procesa, kurai ir nepieciešams konts, lai piekļūtu, salīdzinājumā ar publisku tīmekļa lapu ir vienāda. Tomēr tā vietā, lai ielīmētu URL, ir jāizmanto Chrome paplašinājums, kas ģenerē failu.
Lai sāktu, atveriet Figma un spraudni html.to.figma tāpat kā iepriekš.
1. darbība. Lejupielādējiet un palaidiet Chrome paplašinājumu
Šo paplašinājumu var izmantot tikai pārlūkprogrammā Google Chrome, tāpēc, lai sāktu, atveriet pārlūku Chrome. Figma spraudņa dialoglodziņā atlasiet Chrome paplašinājums— vai atveriet paplašinājumu šeit pārlūkprogrammā Chrome.
Izvēlieties Pievienot pārlūkam Chrome > Pievienot paplašinājumu lai pārlūkprogrammai pievienotu paplašinājumu.
Kad paplašinājums ir pievienots, dodieties uz privāto vietni vai lapu, kuras dizainu vēlaties atkārtot — mēs izmantojam Instagram lapu — un atlasiet paplašinājumu. Sakļautie paplašinājumi ir atrodami zem puzles gabaliņu ikonas jūsu pārlūkprogrammā.
Tas jautās, vai vēlaties tvert visu lapu vai tikai to, kas ir redzams. Veiciet atlasi, un tveršana tiks parādīta jūsu lejupielādēs kā .h2d fails.
2. darbība: velciet ģenerēto failu Figma spraudnī
Pārlūkprogrammā atveriet savu lietotni Figma vai Figma vietni un ievelciet lodziņā lejupielādēto .h2d failu. Fails tiks ielādēts un ģenerēts tāpat kā publiskās vietnes opcija.
Tāpat kā publiskās tīmekļa lapas versijā, varat veikt dubultklikšķi uz dizaina aspektiem, lai tos rediģētu, vai noklikšķināt uz kreisās puses izvēlni, lai redzētu, kur tie tiek parādīti izkārtojumā.
Iespējams, vēlēsities tīmekļa lapas dizainam pievienot jaunus dizaina elementus, piemēram, Figma matēta stikla efekts, vai pat varat atkārtot tīmekļa lapas dizaina daļas kā a galvenā veidne Figma prezentācijām. 2022. gadā Adobe iegādājās Figma, tāpēc nākotnē varam sagaidīt jautrākus veidus, kā izmantot Figma.
Izmantojiet jebkuru vietni, lai gūtu iedvesmu savos Figma dizainparaugos
Lai gan Figma galvenokārt ir paredzēts vietņu vai UX/UI lapu izstrādei no jauna, tā ir lieliska iespēja aizpildīt esošās tīmekļa lapas, lai redzētu, kā tās tika izveidotas. Varat arī izveidot savu tīmekļa dizainu par esošas vietnes kopiju, ja nezināt, kur sākt no tukšas lapas.
Vēl viens lielisks iemesls, kāpēc jums vajadzētu izmantot spraudni html.to.figma, ir tas, ja esat jau izveidojis vietni, kurai esat zaudējis piekļuvi. Varat aizpildīt lapu programmā Figma un sākt no jauna, faktiski nesākot no jauna.