Figma je skvělý nástroj, který se rychle stává oblíbeným mezi UX/UI a webovými designéry. Pomocí tohoto bezplatného nástroje založeného na prohlížeči můžete rychle a snadno vytvářet responzivní webové návrhy.
Zatímco většina lidí vytváří své návrhy od začátku ve Figmě, vy se můžete inspirovat skutečnými webovými stránkami a snadno vytvořit návrh Figmy přímo z existující HTML stránky. Zde je návod, jak na to.
Proč byste měli vytvářet návrhy Figma z HTML
Existuje mnoho důvodů, proč budete chtít replikovat existující webový design jako Figma design. Pokud to uděláte pomocí pluginu Figma, ušetříte čas a budete se moci soustředit na doladění vašeho návrhu.
Procvičování webdesignu opětovným vytvořením existujících webových stránek je skvělý způsob, jak se učit od mistrů. Nástroj pro návrh HTML to Figma můžete také použít, pokud jste dříve navrhli a publikovali webovou stránku, ke které jste ztratili přístup. Místo předělání od začátku můžete ušetřit čas tím, že jej převedete zpět na Figma, abyste na něm mohli znovu pracovat.
Nyní, když víte, proč může být tento nástroj užitečný, je čas se naučit, jak funguje.
Jak převést jakoukoli webovou stránku na design Figma
Chcete-li zahájit jakoukoli návrhářskou práci založenou na Figmě, musíte otevřít Figma a přihlásit se nebo zaregistrovat. Můžete použít verzi prohlížeče, Figmanebo stáhněte si desktopovou aplikaci; oba pracují pro tento projekt stejným způsobem.
Otevřete a Nový soubor návrhu k zahájení vašeho projektu HTML to Figma designu.
Krok 1: Stáhněte si plugin html.to.design
Abyste mohli přímo převést živé webové stránky do designu Figma, budete potřebovat plugin. Na Figmě je nespočet pluginů, které vám pomohou s vašimi návrhy, včetně pluginy pro vytváření maket pro telefony a zařízení. Pokud chcete, můžete svůj převedený návrh webu přidat do makety později.
Chcete-li stáhnout plugin, vyberte Menu Figma (logo Figma) > Pluginy > Najděte další pluginy. Případně můžete vybrat Zdroje > Pluginy. Z obou možností zadejte do vyhledávacího pole html.to.design.
Najděte možnost, kterou poskytuje divRIOTS, a vyberte ji Běh. Tím se plugin otevře jako dialogové okno na vašem plátně Figma.
Krok 2: Vložte adresu URL webu
Plugin html.to.design je zdarma, ale nabízí profesionální verzi. S bezplatnou verzí můžete zcela dokončit proces návrhu.
Najděte web, pro který chcete vytvořit design Figma. Měli byste používat veřejnou webovou stránku – nikoli webovou stránku, na kterou lze přistupovat pouze po přihlášení. Budeme používat naši domovskou stránku MakeUseOf.com.
Zkopírujte celou adresu URL a vložte ji do pole pro import na Figma, čímž nahradíte zástupný symbol webu Apple.
Krok 3: Načtěte svůj design
Po vložení adresy URL webu otevřete Nastavení pod polem importu vyberte velikost návrhu. Můžete importovat design pro různá zařízení, ale lepšího úspěchu dosáhnete při výběru stolního zařízení, pokud použijete adresu URL pro stolní počítač, a lepšího úspěchu při použití mobilní adresy URL pro mobilní zařízení.
Existují také vlastní možnosti pro zařízení nebo velikosti, které nejsou k dispozici jako výchozí možnosti. vybíráme MacBook Pro 14" s Světlo téma.
Jakmile určíte své zařízení a nastavení zobrazení, vyberte Import oživit váš HTML design ve Figmě. Počkejte, až bude lišta zatížení kompletní, aby se naplnil návrh Figma.
V závislosti na tom, kterou webovou stránku jste použili, si můžete všimnout vyskakovacího okna vysvětlujícího, že bylo nutné vyměnit některé typy písma. To bude způsobeno autorským právem pro licencované typy písma. Figma je nahradí písmy, ke kterým máte přístup.
Ukončete všechna vyskakovací okna a poté opusťte dialogové okno pluginu, abyste viděli svůj nový design v jeho plné podobě.
Krok 4: Upravte svůj Figma Design
Odtud můžete začít upravovat svou webovou stránku Figma jakýmkoliv způsobem. Jak již bylo zmíněno, tato funkce HTML to Figma vám umožňuje zjistit, jak byly navrženy stávající webové stránky, aby vás inspirovaly k vytvoření vlastních od začátku. Můžete použít základní design z webových stránek a vytvořit prezentaci pomocí přechodů ve Figměnebo se jednoduše dozvíte, jak webové stránky nastavují jiní designéři.
V nabídce vlevo najdete vrstvy. Protože to bylo převedeno přímo z HTML, vrstvy mohou být podrobnější – nebo dokonce matoucí – než na co jste zvyklí, když navrhujete sami. Vyberte sekci v návrhu a najděte zvýrazněné vrstvy v levé nabídce.
Můžete nahradit obrázky, přepsat nadpisy a hlavní text nebo přesunout věci v rámci rozvržení poklepáním na aspekt návrhu. Plugin html.to.figma nereplikuje nastavení animací nebo přechodů při kliknutí na odkazy nebo změně stránek. Můžete je přidat sami.
Jak převést soukromou webovou stránku
Většina procesu vytváření soukromého webu – takového, který pro přístup vyžaduje účet – oproti veřejné webové stránce je stejná. Místo vkládání adresy URL však musíte místo toho použít rozšíření Chrome, které generuje soubor.
Chcete-li začít, otevřete Figma a plugin html.to.figma stejným způsobem jako dříve.
Krok 1: Stáhněte a spusťte rozšíření Chrome
Toto rozšíření můžete používat pouze s Google Chrome, takže začněte spusťte Chrome. V dialogovém okně pluginu Figma vyberte Rozšíření pro Chrome-nebo otevřete rozšíření zde v prohlížeči Chrome.
Vybrat Přidat do Chromu > Přidat rozšíření pro přidání rozšíření do vašeho prohlížeče.
S přidaným rozšířením přejděte na soukromý web nebo stránku, jejíž design chcete replikovat – používáme stránku Instagramu – a vyberte rozšíření. Sbalená rozšíření najdete pod ikonou dílku skládačky ve vašem prohlížeči.
Zeptá se, zda chcete zachytit celou stránku nebo jen to, co je zobrazeno. Proveďte výběr a zachycení se objeví ve vašich stažených souborech jako soubor .h2d.
Krok 2: Přetáhněte vygenerovaný soubor do pluginu Figma
Přejděte do své aplikace Figma nebo na web Figma ve svém prohlížeči a přetáhněte stažený soubor .h2d do pole. Soubor se načte a vygeneruje stejným způsobem jako možnost veřejné webové stránky.
Stejně jako u verze pro veřejnou webovou stránku můžete dvakrát kliknout na aspekty návrhu a upravit je nebo kliknout na nabídku na levé straně a zjistit, kde se v rozvržení zobrazují.
Možná budete chtít do návrhu webové stránky přidat nové prvky návrhu, např efekt matného skla Figma, nebo můžete dokonce replikovat části designu webové stránky jako a hlavní šablona pro prezentace Figma. v roce 2022 Společnost Adobe získala Figmu, takže můžeme v budoucnu očekávat zábavnější způsoby použití Figmy.
Použijte jakýkoli web pro inspiraci ve svých návrzích Figma
Zatímco Figma je primárně určena pro navrhování webových stránek nebo stránek UX/UI od nuly, je to skvělá příležitost vyplnit stávající webové stránky, abyste viděli, jak byly vytvořeny. Pokud si nejste jisti, kde začít od prázdného listu, můžete také vytvořit svůj webový design replikou existujícího webu.
Dalším skvělým důvodem, proč byste měli používat plugin html.to.figma, je, že jste již navrhli web, ke kterému jste ztratili přístup. Můžete naplnit stránku ve Figmě a začít znovu, aniž byste museli skutečně začínat znovu.