Figma je skvelý nástroj, ktorý sa rýchlo stáva obľúbeným medzi UX/UI a webovými dizajnérmi. Pomocou tohto bezplatného nástroja založeného na prehliadači môžete rýchlo a jednoducho vytvárať responzívne webové návrhy.
Zatiaľ čo väčšina ľudí vytvára svoje návrhy od začiatku vo Figme, môžete sa inšpirovať skutočnými webovými stránkami a jednoducho vytvoriť dizajn Figma priamo z existujúcej stránky HTML. Tu je návod, ako na to.
Prečo by ste mali vytvárať návrhy Figma z HTML
Existuje mnoho dôvodov, prečo by ste mohli chcieť replikovať existujúci webový dizajn ako dizajn Figma. Ak to urobíte pomocou doplnku Figma, ušetríte čas a budete sa môcť sústrediť na dolaďovanie dizajnu.
Praktizovanie webového dizajnu opätovným vytvorením existujúcich webových stránok je skvelý spôsob, ako sa učiť od majstrov. Návrhový nástroj HTML to Figma môžete použiť aj vtedy, ak ste predtým navrhli a zverejnili webovú stránku, ku ktorej ste stratili prístup. Namiesto toho, aby ste ho prepracovali od začiatku, môžete ušetriť čas tým, že ho skonvertujete späť na Figma, aby ste na ňom mohli znova pracovať.
Teraz, keď viete, prečo môže byť tento nástroj užitočný, je čas naučiť sa, ako to funguje.
Ako previesť akúkoľvek webovú stránku na dizajn Figma
Ak chcete začať s akoukoľvek návrhárskou prácou založenou na Figme, musíte otvoriť Figmu a prihlásiť sa alebo zaregistrovať. Môžete použiť verziu prehliadača, Figma, alebo stiahnite si desktopovú aplikáciu; obaja pracujú pre tento projekt rovnakým spôsobom.
Otvorte a Nový dizajnový súbor na začatie projektu dizajnu HTML to Figma.
Krok 1: Stiahnite si doplnok html.to.design
Aby ste mohli priamo previesť živú webovú stránku na dizajn Figma, budete potrebovať doplnok. Na Figme je nespočetné množstvo doplnkov, ktoré vám pomôžu s vašimi návrhmi, vrátane pluginy na vytváranie makiet pre telefóny a zariadenia. Ak chcete, svoj prevedený dizajn webovej stránky môžete pridať do makety neskôr.
Ak chcete doplnok stiahnuť, vyberte položku Menu Figma (logo Figma) > Pluginy > Nájdite ďalšie doplnky. Prípadne si môžete vybrať Zdroje > Pluginy. V ktorejkoľvek z možností zadajte do vyhľadávacieho panela html.to.design.
Nájdite možnosť, ktorú poskytuje divRIOTS a vyberte ju Bežať. Tým sa plugin otvorí ako dialógové okno na vašom plátne Figma.
Krok 2: Prilepte adresu URL webových stránok
Doplnok html.to.design je bezplatný, ale ponúka profesionálnu verziu. Proces navrhovania môžete úplne dokončiť pomocou bezplatnej verzie.
Nájdite webovú stránku, pre ktorú chcete vytvoriť dizajn Figma. Mali by ste používať verejnú webovú stránku – nie webovú stránku, na ktorú sa dá dostať iba po prihlásení. Budeme používať našu domovskú stránku MakeUseOf.com.
Skopírujte celú adresu URL a vložte ju do poľa importu na Figma, čím nahradíte zástupný symbol webovej stránky Apple.
Krok 3: Načítajte svoj dizajn
Po prilepení webovej adresy otvorte nastavenie pod poľom importu vyberte veľkosť dizajnu. Môžete importovať dizajn pre rôzne zariadenia, ale väčší úspech dosiahnete pri výbere stolného zariadenia, ak použijete webovú adresu pre stolné počítače a lepší úspech pri použití mobilnej webovej adresy pre mobilné zariadenia.
Existujú aj vlastné možnosti pre zariadenia alebo veľkosti, ktoré nie sú k dispozícii ako predvolené možnosti. vyberáme MacBook Pro 14" s Svetlo tému.
Po zadaní zariadenia a nastavení zobrazenia vyberte Importovať aby váš HTML dizajn ožil vo Figme. Počkajte, kým sa lišta zaťaženia nedokončí, aby sa naplnil návrh Figma.
V závislosti od toho, ktorú webovú stránku ste použili, si môžete všimnúť vyskakovacie okno s vysvetlením, že niektoré typy písma bolo potrebné nahradiť. Bude to kvôli autorským právam na licencované typy písma. Figma ich nahradí typmi písma, ku ktorým máte prístup.
Ukončite všetky kontextové okná a potom opustite dialógové okno doplnku, aby ste videli svoj nový dizajn v plnej forme.
Krok 4: Upravte svoj dizajn Figma
Odtiaľto môžete začať upravovať svoju webovú stránku Figma akýmkoľvek spôsobom. Ako už bolo spomenuté, táto funkcia HTML to Figma vám umožňuje zistiť, ako boli navrhnuté existujúce webové stránky, aby vás inšpirovali k vytvoreniu vlastných od začiatku. Môžete použiť základný dizajn z webovej stránky a vytvorte prezentáciu pomocou prechodov vo Figmealebo sa jednoducho dozviete, ako webové stránky nastavujú iní dizajnéri.
V ľavom menu nájdete vrstvy. Keďže to bolo skonvertované priamo z HTML, vrstvy môžu byť podrobnejšie – alebo dokonca mätúce – než na aké ste zvyknutí pri navrhovaní. Vyberte sekciu v dizajne a nájdite zvýraznené vrstvy v ľavej ponuke.
Dvojitým kliknutím na dizajnový aspekt môžete nahradiť obrázky, prepísať nadpisy a hlavný text alebo presunúť veci v rámci rozloženia. Doplnok html.to.figma nereplikuje nastavenia animácií alebo prechodov pri klikaní na odkazy alebo pri zmene stránok. Môžete ich pridať sami.
Ako previesť súkromnú webovú stránku
Väčšina procesu vytvárania súkromnej webovej stránky – tej, ktorá si vyžaduje prístup k účtu – je v porovnaní s verejnou webovou stránkou rovnaká. Namiesto prilepenia adresy URL však musíte použiť rozšírenie prehliadača Chrome, ktoré generuje súbor.
Na začiatok otvorte Figmu a plugin html.to.figma rovnakým spôsobom ako predtým.
Krok 1: Stiahnite si a spustite rozšírenie Chrome
Toto rozšírenie môžete použiť iba s prehliadačom Google Chrome, takže začnite otvorením prehliadača Chrome. V dialógovom okne doplnku Figma vyberte Rozšírenie pre Chrome— alebo otvorte rozšírenie tu v prehliadači Chrome.
Vyberte Pridať do prehliadača Chrome > Pridať rozšírenie pridať rozšírenie do svojho prehliadača.
Po pridaní rozšírenia prejdite na súkromnú webovú stránku alebo stránku, ktorej dizajn chcete replikovať – používame stránku Instagram – a vyberte rozšírenie. Zbalené rozšírenia nájdete pod ikonou puzzle vo vašom prehliadači.
Opýta sa, či chcete zachytiť celú stránku alebo len to, čo je zobrazené. Urobte svoj výber a potom sa záber zobrazí vo vašich stiahnutých súboroch ako súbor .h2d.
Krok 2: Presuňte vygenerovaný súbor do doplnku Figma
Prejdite do aplikácie Figma alebo na stránku Figma vo svojom prehliadači a presuňte stiahnutý súbor .h2d do poľa. Súbor sa načíta a vygeneruje rovnakým spôsobom ako možnosť verejnej webovej stránky.
Rovnako ako vo verzii pre verejnú webovú stránku môžete dvakrát kliknúť na aspekty dizajnu a upraviť ich alebo kliknúť na ľavú ponuku, aby ste videli, kde sa nachádzajú na rozložení.
Možno budete chcieť pridať nové prvky dizajnu do dizajnu webovej stránky, napr efekt matného skla Figma, alebo môžete dokonca replikovať časti dizajnu webovej stránky ako a hlavná šablóna pre prezentácie Figma. V roku 2022 Spoločnosť Adobe získala Figmu, takže v budúcnosti môžeme očakávať zábavnejšie spôsoby využitia Figmy.
Využite akúkoľvek webovú stránku na inšpiráciu vo svojich návrhoch Figma
Zatiaľ čo Figma je primárne určená na navrhovanie webových stránok alebo stránok UX/UI od začiatku, je to skvelá príležitosť vyplniť existujúce webové stránky, aby ste videli, ako boli vytvorené. Ak si nie ste istí, kde začať s prázdnou tabuľkou, môžete tiež vytvoriť svoj webový dizajn replikou existujúceho webu.
Ďalším skvelým dôvodom, prečo by ste mali použiť doplnok html.to.figma, je, ak ste už navrhli webovú stránku, ku ktorej ste stratili prístup. Stránku môžete vyplniť vo Figme a začať odznova bez toho, aby ste museli začínať odznova.
