A Figma egy nagyszerű eszköz, amely gyorsan az UX/UI és a webtervezők kedvencévé válik. Ezzel az ingyenes böngészőalapú eszközzel gyorsan és egyszerűen hozhat létre reszponzív webterveket.
Míg a legtöbb ember a semmiből készíti el tervét a Figmában, Önt valódi webhelyek inspirálhatják, és könnyedén létrehozhat egy Figma-tervet közvetlenül egy meglévő HTML-oldalról. Íme, hogyan kell csinálni.
Miért érdemes Figma-terveket készíteni HTML-ből?
Számos oka lehet annak, hogy egy meglévő webdesignt Figma-tervként szeretne lemásolni. Ha ezt a Figma beépülő modulon keresztül teszi, időt takarít meg, és lehetővé teszi, hogy a tervezés finomhangolására összpontosítson.
A webdizájn gyakorlása a meglévő weboldalak újbóli létrehozásával nagyszerű módja annak, hogy tanuljon a mesterektől. A HTML to Figma tervezőeszközt is használhatja, ha korábban tervezett és közzétett egy weboldalt, amelyhez nem férhetett hozzá. Ahelyett, hogy a semmiből újratervezné, időt takaríthat meg, ha visszaállítja Figmára, hogy újra dolgozzon rajta.
Most, hogy tudja, miért lehet hasznos ez az eszköz, itt az ideje, hogy megtanulja, hogyan működik.
Hogyan alakíthatunk át bármilyen webhelyet Figma-dizájnná
A Figma-alapú tervezési munka megkezdéséhez nyissa meg a Figmát, és jelentkezzen be vagy regisztráljon. Használhatja a böngésző verzióját, Figma, vagy töltse le az asztali alkalmazást; mindketten ugyanúgy működnek ebben a projektben.
Nyissa meg a Új tervfájl a HTML to Figma tervezési projektjének megkezdéséhez.
1. lépés: Töltse le a html.to.design beépülő modult
Ahhoz, hogy egy élő webhelyet közvetlenül Figma dizájnná alakíthasson, szüksége lesz egy bővítményre. A Figmán számtalan bővítmény található, amelyek segítenek a tervezésben, többek között beépülő modulok makettek létrehozásához telefonokhoz és eszközökhöz. Ha szeretné, később hozzáadhatja az átalakított webhelytervét egy maketthez.
A bővítmény letöltéséhez válassza ki a Figma menü (Figma logó) > Beépülő modulok > További bővítmények keresése. Alternatív megoldásként választhat Erőforrások > Beépülő modulok. Bármelyik opció közül írja be a keresősávba html.to.design.
Keresse meg a divRIOTS által biztosított lehetőséget, és válassza ki Fuss. Ez párbeszédpanelként nyitja meg a beépülő modult a Figma vásznon.
2. lépés: Illessze be a webhely URL-címét
A html.to.design beépülő modul ingyenes, de profi verziót kínál. A tervezési folyamatot teljesen befejezheti az ingyenes verzióval.
Keresse meg azt a webhelyet, amelyről Figma-tervet szeretne készíteni. Nyilvános webhelyet kell használnia – nem olyan weboldalt, amely csak bejelentkezéssel érhető el. Kezdőlapunkat, a MakeUseOf.com-ot fogjuk használni.
Másolja ki a teljes URL-t, és illessze be a Figma importálási mezőjébe, az Apple webhely helyőrzőjének helyére.
3. lépés: Töltse be tervét
A webhely URL-címének beillesztése után nyissa meg Beállítások az import mező alatt a terv méretének kiválasztásához. Számos eszközhöz importálhatja a dizájnt, de jobb lesz az asztali eszköz kiválasztása, ha asztali URL-t használ, és nagyobb sikert érhet el, ha mobileszközökhöz mobil URL-t használ.
Vannak egyéni beállítások is olyan eszközökhöz vagy méretekhez, amelyek nem állnak rendelkezésre alapértelmezett beállításként. választunk MacBook Pro 14" val,-vel Fény téma.
Miután megadta az eszköz és a nézet beállításait, válassza a lehetőséget Importálás hogy életre keltse HTML-designját a Figmában. Várja meg, amíg a terhelési sáv elkészül, és a Figma terv feltöltődik.
Attól függően, hogy melyik webhelyet használta, észrevehet egy felugró ablakot, amely elmagyarázza, hogy bizonyos betűtípusokat le kellett cserélni. Ez a licencelt betűtípusok szerzői jogának köszönhető. A Figma lecseréli őket olyan betűtípusokra, amelyekhez Ön hozzáfér.
Lépjen ki minden előugró ablakból, majd lépjen ki a beépülő modul párbeszédpaneléből, hogy teljes formában megtekinthesse az új dizájnt.
4. lépés: Szerkessze Figma Design-ját
Innentől tetszőleges módon elkezdheti szerkeszteni Figma weboldalát. Amint már említettük, ez a HTML to Figma funkció lehetővé teszi, hogy megtudja, hogyan tervezték meg a meglévő weboldalakat, hogy inspirálja Önt saját létrehozására a semmiből. Használhatná az alapkialakítást a weboldalról és prezentáció létrehozása a Figma átmenetek használatával, vagy egyszerűen csak megtudhatja, hogyan állítják be más tervezők a weboldalakat.
A bal oldali menüben találja a rétegeket. Mivel ezt közvetlenül HTML-ből konvertálták, a rétegek részletesebbek lehetnek – vagy akár zavaróak is –, mint amihez hozzászokott a saját tervezés során. Válasszon egy részt a tervben, hogy megtalálja a kiemelt rétegeket a bal oldali menüben.
Lecserélheti a képeket, újraírhatja a címeket és a törzsszöveget, vagy áthelyezhet dolgokat az elrendezésen belül, ha duplán kattint a tervezési szempontra. A html.to.figma beépülő modul nem replikálja az animációs vagy átmeneti beállításokat, amikor hivatkozásokra kattint vagy oldalakat vált. Ezeket önállóan is hozzáadhatja.
Hogyan alakítsunk át privát weboldalt
A privát webhely létrehozásának folyamata – amelyhez fiók szükséges – a nyilvános weboldalakhoz képest ugyanaz. Az URL beillesztése helyett azonban egy fájlt létrehozó Chrome-bővítményt kell használnia.
Kezdésként nyissa meg a Figmát és a html.to.figma beépülő modult ugyanúgy, mint korábban.
1. lépés: Töltse le és futtassa a Chrome-bővítményt
Ezt a bővítményt csak a Google Chrome-mal használhatja, ezért a kezdéshez nyissa meg a Chrome-ot. A Figma beépülő modul párbeszédpanelen válassza ki a lehetőséget Chrome bővítmény-vagy nyissa meg a bővítményt itt Chrome böngészőjében.
Válassza ki Hozzáadás a Chrome-hoz > Bővítmény hozzáadása hogy hozzáadja a bővítményt a böngészőhöz.
A bővítmény hozzáadásával keresse meg azt a privát webhelyet vagy oldalt, amelynek a dizájnját szeretné lemásolni – mi egy Instagram-oldalt használunk –, és válassza ki a bővítményt. Az összecsukott bővítmények a böngészőben található puzzle darab ikon alatt találhatók.
Megkérdezi, hogy a teljes oldalt szeretné-e rögzíteni, vagy csak azt, ami látható. Válassza ki, és a rögzítés .h2d fájlként jelenik meg a letöltésekben.
2. lépés: Húzza a generált fájlt a Figma beépülő modulba
Nyissa meg a Figma alkalmazást vagy a Figma webhelyet a böngészőben, és húzza a letöltött .h2d fájlt a dobozba. A fájl betöltése és létrehozása ugyanúgy történik, mint a nyilvános webhely opció.
A nyilvános weboldal verziójához hasonlóan a terv egyes elemeire duplán kattintva szerkesztheti azokat, vagy a bal oldali menüre kattintva megtekintheti, hol jelennek meg az elrendezésben.
Érdemes lehet új dizájnelemeket hozzáadni a weboldal kialakításához, mint pl a Figma mattüveg effektus, vagy akár megismételheti a weboldal kialakításának egyes részeit, mint a mestersablon a Figma prezentációkhoz. 2022-ben Az Adobe felvásárolta a Figmát, így a jövőben szórakoztatóbb módokra számíthatunk a Figma használatában.
Használjon bármely webhelyet inspirációként Figma-terveihez
Míg a Figma elsősorban weboldalak vagy UX/UI oldalak tervezésére szolgál a semmiből, remek lehetőség a meglévő weboldalak feltöltésére, hogy megnézze, hogyan készültek. Webdizájnját egy meglévő webhely másolataként is elkészítheti, ha nem tudja, hol kezdje el üres lappal.
Egy másik nagyszerű ok, amiért érdemes a html.to.figma beépülő modult használni, az az, ha már tervezett egy webhelyet, amelyhez elvesztette a hozzáférését. Feltöltheti az oldalt a Figmában, és újrakezdheti anélkül, hogy újra kellene kezdenie.
