Figma on loistava työkalu, josta on nopeasti tulossa suosikki UX/UI- ja verkkosuunnittelijoiden keskuudessa. Tämän ilmaisen selainpohjaisen työkalun avulla voit luoda responsiivisia verkkomalleja nopeasti ja helposti.
Vaikka useimmat ihmiset luovat suunnittelunsa alusta alkaen Figmassa, voit saada inspiraatiota oikeista verkkosivustoista ja luoda helposti Figma-suunnittelun suoraan olemassa olevalta HTML-sivulta. Näin se tehdään.
Miksi sinun pitäisi luoda Figma-malleja HTML: stä
On monia syitä, miksi haluat ehkä kopioida olemassa olevan verkkosuunnittelun Figma-suunnitteluksi. Tämän tekeminen Figma-laajennuksen avulla säästää aikaa, jolloin voit keskittyä suunnittelun hienosäätöön.
Verkkosuunnittelun harjoitteleminen luomalla olemassa olevia verkkosivuja on loistava tapa oppia mestarilta. Voit myös käyttää HTML to Figma -suunnittelutyökalua, jos olet aiemmin suunnitellut ja julkaissut verkkosivun, johon et pääse käyttämään. Sen sijaan, että suunnittelet sen uudelleen tyhjästä, voit säästää aikaa muuntamalla sen takaisin Figmaan, jotta voit käsitellä sitä uudelleen.
Nyt kun tiedät, miksi tämä työkalu voi olla kätevä, on aika oppia, miten se toimii.
Kuinka muuntaa minkä tahansa verkkosivuston Figma-designiksi
Aloita Figma-pohjainen suunnittelutyö avaamalla Figma ja kirjautumalla sisään tai rekisteröitymällä. Voit käyttää selainversiota, Figma, tai lataa työpöytäsovellus; molemmat toimivat samalla tavalla tässä projektissa.
Avaa a Uusi suunnittelutiedosto aloittaaksesi HTML to Figma -suunnitteluprojektin.
Vaihe 1: Lataa html.to.design-laajennus
Jotta voit muuntaa live-sivuston suoraan Figma-suunnitteluun, tarvitset laajennuksen. Figmassa on lukemattomia laajennuksia, jotka auttavat suunnittelussasi, mukaan lukien laajennuksia mallien luomiseen puhelimille ja laitteille. Voit halutessasi lisätä muunnetun verkkosivustosi mallin myöhemmin.
Lataa laajennus valitsemalla Figma-valikko (Figma-logo) > Plugins > Etsi lisää laajennuksia. Vaihtoehtoisesti voit valita Resurssit > Plugins. Kirjoita jommastakummasta vaihtoehdosta hakupalkkiin html.to.design.
Etsi divRIOTSin tarjoama vaihtoehto ja valitse Juosta. Tämä avaa laajennuksen valintaikkunana Figma-kankaalle.
Vaihe 2: Liitä verkkosivuston URL-osoite
html.to.design-laajennus on ilmainen, mutta se tarjoaa pro-version. Voit suorittaa suunnitteluprosessisi kokonaan ilmaisella versiolla.
Etsi verkkosivusto, jolle haluat tehdä Figma-designin. Sinun tulee käyttää julkista verkkosivustoa – ei verkkosivua, jolle pääsee vain kirjautumalla sisään. Aiomme käyttää kotisivuamme MakeUseOf.com.
Kopioi koko URL-osoite ja liitä se Figman tuontiruutuun korvaten Applen verkkosivuston paikkamerkki.
Vaihe 3: Lataa mallisi
Kun olet liittänyt verkkosivuston URL-osoitteen, avaa asetukset tuontiruudun alla valitaksesi mallin koon. Voit tuoda suunnittelun useille laitteille, mutta onnistut paremmin pöytäkoneen valinnassa, jos käytit työpöydän URL-osoitetta, ja paremmin mobiili-URL-osoitetta mobiililaitteille.
Laitteille tai kokoille on myös mukautettuja vaihtoehtoja, jotka eivät ole käytettävissä oletusasetuksina. Me valitsemme MacBook Pro 14" kanssa Kevyt teema.
Kun olet määrittänyt laitteen ja näkymän asetukset, valitse Tuonti herättääksesi HTML-suunnittelusi henkiin Figmassa. Odota, kunnes kuormituspalkki on valmis, jotta Figma-malli täyttyy.
Riippuen käyttämästäsi verkkosivustosta, saatat huomata ponnahdusikkunan, jossa selitetään, että jotkin kirjasintyypit on vaihdettava. Tämä johtuu lisensoitujen kirjasintyyppien tekijänoikeuksista. Figma korvaa ne kirjasintyypeillä, joihin sinulla on pääsy.
Poistu kaikista ponnahdusikkunoista ja poistu sitten laajennusikkunasta nähdäksesi uuden ulkoasun täysissä muodossaan.
Vaihe 4: Muokkaa Figma Designia
Täältä voit alkaa muokata Figma-verkkosivuasi haluamallasi tavalla. Kuten mainittiin, tämän HTML to Figma -toiminnon avulla voit oppia, kuinka olemassa olevat verkkosivut on suunniteltu inspiroimaan sinua luomaan omasi tyhjästä. Voit käyttää perussuunnittelua verkkosivustolta ja luoda esitys käyttämällä siirtymiä Figmassatai vain oppia, kuinka muut suunnittelijat luovat verkkosivuja.
Vasemmanpuoleisesta valikosta löydät tasot. Koska tämä on muunnettu suoraan HTML: stä, tasot voivat olla yksityiskohtaisempia – tai jopa hämmentäviä – kuin mihin olet tottunut suunnittelemaan itseäsi. Valitse osio mallista löytääksesi korostetut tasot vasemmasta valikosta.
Voit korvata kuvia, kirjoittaa uudelleen otsikoita ja leipätekstiä tai siirtää asioita asettelun sisällä kaksoisnapsauttamalla suunnittelunäkökohtaa. html.to.figma-laajennus ei kopioi animaatio- tai siirtymäasetuksia, kun napsautat linkkejä tai vaihdat sivuja. Voit lisätä niitä itse.
Kuinka muuntaa yksityinen verkkosivu
Suurin osa yksityisen verkkosivuston luomisesta – sellaisen, jonka käyttö edellyttää tiliä – on sama kuin julkisen verkkosivun luomisessa. URL-osoitteen liittämisen sijaan sinun on kuitenkin käytettävä Chrome-laajennusta, joka luo tiedoston.
Aloita avaamalla Figma ja html.to.figma-laajennus samalla tavalla kuin ennen.
Vaihe 1: Lataa ja suorita Chrome-laajennus
Voit käyttää tätä laajennusta vain Google Chromen kanssa, joten avaa Chrome aloittaaksesi. Valitse Figma-laajennus-valintaikkunasta Chromen laajennus-tai avaa laajennus tästä Chrome-selaimessasi.
Valitse Lisää Chromeen > Lisää laajennus lisätäksesi laajennuksen selaimeesi.
Kun laajennus on lisätty, siirry yksityiselle verkkosivustolle tai sivulle, jonka suunnittelun haluat jäljitellä – käytämme Instagram-sivua – ja valitse laajennus. Tiivistetyt laajennukset löytyvät selaimesi palapelin kuvakkeen alta.
Se kysyy, haluatko tallentaa koko sivun vai vain sen, mikä on näkyvissä. Tee valintasi, niin kaappaus näkyy latauksissasi .h2d-tiedostona.
Vaihe 2: Vedä luotu tiedosto Figma-laajennukseen
Siirry Figma-sovellukseesi tai Figma-sivustolle selaimessasi ja vedä ladattu .h2d-tiedosto laatikkoon. Tiedosto latautuu ja luodaan samalla tavalla kuin julkisen verkkosivuston vaihtoehto.
Kuten julkisen verkkosivun versiossa, voit kaksoisnapsauttaa suunnittelun osia muokataksesi niitä tai napsauttamalla vasemmanpuoleista valikkoa nähdäksesi, missä ne näkyvät asettelussa.
Voit halutessasi lisätä verkkosivun ulkoasuun uusia suunnitteluelementtejä, kuten Figma-himmeä lasiefekti, tai voit jopa kopioida osia verkkosivun suunnittelusta a päämalli Figma-esityksiin. Vuonna 2022, Adobe osti Figman, joten voimme odottaa hauskempia tapoja käyttää Figmaa tulevaisuudessa.
Käytä mitä tahansa verkkosivustoa inspiraation saamiseksi Figma-malleissasi
Vaikka Figma on ensisijaisesti tarkoitettu verkkosivustojen tai UX/UI-sivujen suunnitteluun tyhjästä, se on loistava tilaisuus täyttää olemassa olevat verkkosivut nähdäksesi, miten ne on rakennettu. Voit myös tehdä web-suunnittelustasi kopion olemassa olevasta sivustosta, jos et ole varma, mistä aloittaa tyhjältä pöydältä.
Toinen hyvä syy, miksi sinun pitäisi käyttää html.to.figma-laajennusta, on se, että olet jo suunnitellut verkkosivuston, johon et pääse käyttämään. Voit täyttää sivun Figmassa ja aloittaa alusta ilman, että sinun tarvitsee aloittaa uudelleen.
