Figma je izvrstan alat koji brzo postaje omiljen među UX/UI i web dizajnerima. Pomoću ovog besplatnog alata temeljenog na pregledniku možete brzo i jednostavno izraditi responzivne web dizajne.
Dok većina ljudi stvara svoje dizajne od nule u Figmi, vi možete biti inspirirani stvarnim web-mjestima i jednostavno izraditi Figma dizajn izravno iz postojeće HTML stranice. Evo kako to učiniti.
Zašto biste trebali stvarati Figma dizajne iz HTML-a
Mnogo je razloga zbog kojih biste mogli replicirati postojeći web dizajn kao Figma dizajn. Čineći to putem dodatka Figma, štedite vrijeme, omogućujući vam da se usredotočite na fino podešavanje svog dizajna.
Vježbanje web dizajna rekreiranjem postojećih web stranica odličan je način učenja od majstora. Također možete koristiti alat za dizajn HTML to Figma ako ste prethodno dizajnirali i objavili web stranicu kojoj ste izgubili pristup. Umjesto da ga redizajnirate od nule, možete uštedjeti vrijeme tako što ćete ga pretvoriti natrag u Figmu da ponovno radite na njoj.
Sada kada znate zašto ovaj alat može biti koristan, vrijeme je da naučite kako radi.
Kako pretvoriti bilo koju web stranicu u Figma dizajn
Za početak bilo kakvog dizajnerskog rada temeljenog na Figmi, morate otvoriti Figmu i prijaviti se ili prijaviti. Možete koristiti verziju preglednika, Figma, ili preuzmite aplikaciju za radnu površinu; oboje rade na isti način za ovaj projekt.
Otvori a Nova datoteka dizajna da započnete svoj projekt dizajna HTML-a u Figmu.
Korak 1: preuzmite dodatak html.to.design
Da biste mogli izravno pretvoriti živu web stranicu u Figma dizajn, trebat će vam dodatak. Postoji bezbroj dodataka na Figmi koji vam mogu pomoći s vašim dizajnom, uključujući dodaci za izradu maketa za telefone i uređaje. Kasnije možete dodati svoj konvertirani dizajn web-mjesta u maketu ako to želite.
Za preuzimanje dodatka odaberite Figma izbornik (Logotip Figma) > Dodaci > Pronađite više dodataka. Alternativno, možete odabrati Resursi > Dodaci. Iz bilo koje opcije upišite u traku za pretraživanje html.to.design.
Pronađite opciju koju nudi divRIOTS i odaberite Trčanje. Ovo otvara dodatak kao dijaloški okvir na vašem Figma platnu.
Korak 2: Zalijepite URL web stranice
Dodatak html.to.design je besplatan, ali nudi pro verziju. S besplatnom verzijom možete u potpunosti dovršiti svoj proces dizajna.
Pronađite web stranicu za koju želite napraviti Figma dizajn. Trebali biste koristiti javnu web stranicu—a ne web stranicu kojoj se može pristupiti samo prijavom. Koristit ćemo našu početnu stranicu, MakeUseOf.com.
Kopirajte cijeli URL i zalijepite ga u okvir za uvoz na Figmi, zamjenjujući rezervirano mjesto za Apple web mjesto.
Korak 3: Učitajte svoj dizajn
Nakon što zalijepite URL web stranice, otvorite postavke ispod okvira za uvoz kako biste odabrali veličinu dizajna. Možete uvesti dizajn za različite uređaje, ali imat ćete bolji uspjeh pri odabiru stolnog uređaja ako ste upotrijebili URL za stolno računalo i bolji uspjeh ako koristite mobilni URL za mobilne uređaje.
Postoje i prilagođene opcije za uređaje ili veličine koje nisu dostupne kao zadane opcije. Mi biramo MacBook Pro 14” s Svjetlo tema.
Nakon što odredite svoj uređaj i postavke prikaza, odaberite Uvoz da oživite svoj HTML dizajn u Figmi. Pričekajte da se traka učitavanja dovrši kako bi se Figma dizajn popunio.
Ovisno o web-mjestu koje ste koristili, možda ćete primijetiti skočni okvir s objašnjenjem da su neka slova morala biti zamijenjena. To će biti zbog autorskih prava za licencirana slova. Figma će ih zamijeniti fontovima kojima imate pristup.
Izađite iz svih skočnih prozora, zatim izađite iz dijaloškog okvira dodatka kako biste vidjeli svoj novi dizajn u punom obliku.
Korak 4: Uredite svoj Figma dizajn
Odavde možete početi uređivati svoju Figma web stranicu na bilo koji način. Kao što je spomenuto, ova funkcija HTML-a u Figmu omogućuje vam da naučite kako su postojeće web-stranice dizajnirane da vas inspiriraju da stvorite vlastitu ispočetka. Možete koristiti osnovni dizajn s web stranice i izraditi prezentaciju koristeći prijelaze u Figmiili jednostavno naučite kako drugi dizajneri postavljaju web stranice.
Na lijevom izborniku pronaći ćete slojeve. Budući da je ovo pretvoreno izravno iz HTML-a, slojevi mogu biti detaljniji — ili čak zbunjujući — od onoga na što ste navikli kada sami dizajnirate. Odaberite odjeljak u dizajnu kako biste pronašli označene slojeve na lijevom izborniku.
Možete zamijeniti slike, ponovno upisati naslove i tijelo teksta ili premjestiti stvari unutar izgleda dvostrukim klikom na aspekt dizajna. Dodatak html.to.figma ne replicira postavke animacije ili prijelaza kada se klikaju veze ili mijenjaju stranice. Možete ih dodati sami.
Kako pretvoriti privatnu web stranicu
Većina procesa stvaranja privatne web-stranice – one za koju je potreban račun za pristup – u odnosu na javnu web-stranicu je ista. Međutim, umjesto lijepljenja URL-a, morate upotrijebiti proširenje za Chrome koje generira datoteku.
Za početak otvorite Figmu i dodatak html.to.figma na isti način kao prije.
1. korak: preuzmite i pokrenite proširenje za Chrome
Ovo proširenje možete koristiti samo s preglednikom Google Chrome, pa za početak otvorite Chrome. U dijaloškom okviru dodatka Figma odaberite Chrome proširenje-ili otvori proširenje ovdje na vašem pregledniku Chrome.
Izaberi Dodaj u Chrome > Dodaj proširenje za dodavanje proširenja u vaš preglednik.
S dodanim proširenjem idite na privatno web-mjesto ili stranicu čiji dizajn želite replicirati - mi koristimo Instagram stranicu - i odaberite proširenje. Sažeta proširenja nalaze se ispod ikone slagalice u vašem pregledniku.
Pitat će vas želite li snimiti cijelu stranicu ili samo ono što je prikazano. Odaberite i tada će se snimka pojaviti u vašim preuzimanjima kao .h2d datoteka.
Korak 2: Povucite generiranu datoteku u Figma dodatak
Idite na svoju aplikaciju Figma ili web mjesto Figma u svom pregledniku i povucite svoju preuzetu .h2d datoteku u okvir. Datoteka će se učitati i generirati na isti način kao opcija javne web stranice.
Kao i s javnom verzijom web-stranice, možete dvostruko kliknuti na aspekte dizajna da biste ih uredili ili kliknite kroz izbornik s lijeve strane da biste vidjeli gdje se pojavljuju na izgledu.
Možda biste željeli dodati nove elemente dizajna dizajnu web stranice, kao što je a Figma efekt mat stakla, ili čak možete replicirati dijelove dizajna web stranice kao glavni predložak za Figma prezentacije. U 2022. Adobe je preuzeo Figmu, tako da možemo očekivati više zabavnih načina korištenja Figme u budućnosti.
Upotrijebite bilo koje web mjesto za inspiraciju u svojim Figma dizajnima
Dok je Figma primarno za dizajniranje web stranica ili UX/UI stranica od nule, to je izvrsna prilika za popunjavanje postojećih web stranica da vidite kako su izgrađene. Također možete napraviti svoj web dizajn replikom postojećeg web mjesta ako niste sigurni odakle početi od prazne ploče.
Još jedan sjajan razlog zašto biste trebali koristiti dodatak html.to.figma je ako ste već dizajnirali web mjesto kojem ste izgubili pristup. Možete popuniti stranicu u Figmi i početi iznova, a da zapravo ne morate početi iznova.