Jak exportovat adobe xd do html

Adobe XD je úžasný návrhářský nástroj, který vám umožní snadno vytvářet fantastické návrhy webových stránek bez předchozí zkušenosti s vývojem webu. Můžete pouze importovat soubory PSD vašeho návrhu z Photoshopu a vytvořit poutavé webové stránky uživatelského rozhraní.

Tyto návrhy pomáhají vývojářům pochopit, jak chcete, aby vaše webové stránky vypadaly, a aby vývojový proces z jejich strany trochu usnadnil. Existuje však jen omezený počet způsobů, jak můžete exportovat návrhy ze softwaru.

Můžete si vybrat, zda je chcete uložit jako soubor XD, a doufat, že vývojář již má nainstalovaný software ve svém systému, nebo exportovat každou kreslicí plátno jako samostatný soubor PNG, který může být trochu nepohodlné použít.

Také na

Nejlepší 3 návrhové nástroje pro vytváření maket a drátových modelů

Naštěstí existuje praktický plugin třetích stran, který umožňuje exportovat kreslicí plátna jako soubory HTML a o tom budu mluvit. Ale než se k tomu dostaneme, musíme něco vědět.

Poznámka: Soubor HTML vytvořený pomocí této metody by v žádném případě neměl být považován za základ pro celou webovou stránku. Tato metoda je pouze prostředkem, jak snadno sdílet své návrhy s vývojářem, a nikoli s funkčním procesem vývoje webových stránek.

Export souborů Adobe XD do HTML pomocí pluginů

Nyní, když jsme to dostali z cesty, jednoduše postupujte podle těchto jednoduchých kroků a stáhněte si požadovaný plugin a poté exportujte soubory Adobe XD do HTML:

Krok 1: Klikněte na tlačítko nabídky hamburger v levém horním rohu softwaru.

Krok 2: Rolujte úplně dolů a poté klikněte na možnost Pluginy. Tím se otevře nový panel Pluginy vpravo od hlavní nabídky.

Krok 3: Na panelu Pluginy vyberte možnost Discover Plugins.

Krok 4: Na následující stránce vyhledejte HTML a poté klikněte na tlačítko Instalovat vedle pluginu Web Export.

Po instalaci požadovaného pluginu otevřete projekt, který chcete exportovat do HTML, a pokračujte následujícími kroky. Pro tento článek budu používat bezplatnou kreslicí plochu Adobe XD, kterou jsem našel online.

Krok 5: Klikněte na kreslicí plátno, které chcete exportovat.

Krok 6: Nyní klikněte na tlačítko nabídky, přejděte na panel Pluginy a poté vyberte možnost Export Artboard z nového nastavení pluginu Web Export.

Ze stejného okna můžete také exportovat více kreseb nebo poslední editovanou kresbu.

Krok 7: V rozbalovací nabídce Export Artboard (Výkresová kresba) přidejte název souboru a poté vyberte složku, do které chcete soubor uložit, kliknutím na ikonu malé složky vedle možnosti Exportovat složku.

Krok 8: Pokud chcete do exportovaného souboru přidat externí skript, šablonu stylů nebo alternativní písma, můžete je přidat ve stejném okně.

Krok 9: Poté můžete vybrat rozměry výstupního souboru HTML zadáním hodnot do prázdného místa vedle možnosti Velikost.

Krok 10: Chcete-li zajistit, aby se projekt škáloval správně, můžete také vybrat různá nastavení měřítka ze stejného okna zaškrtnutím políčka vedle každé možnosti.

Krok 11: Dále můžete vybrat jakákoli další nastavení, jako je Navigace pomocí klávesnice, Automatické obnovení atd. Zaškrtnutím políček vedle možností.

Krok 12: Jakmile dokončíte všechna nastavení, stačí kliknout na modré tlačítko Export a je hotovo. Vaše kresba se zobrazí jako soubor HTML v cílové složce, kterou jste dříve vybrali.

Ze stejného okna můžete také zkopírovat CSS a označení své kreslicí plochy, pokud chcete tyto informace také sdílet se svým vývojářem.

Ještě jednou si uvědomte, že exportovaný HTML nelze v žádném případě použít k vytvoření plně funkčního webu. Od nynějška není žádný způsob, jak publikovat projekt Adobe XD přímo na web, a podle několika diskusí na fórech Adobe nebude takový projekt brzy existovat.

Adobe XD je pouze prototypovací nástroj, který vám umožní vytvořit počáteční design bez kódu. Jakmile máte připravený návrh, můžete použít platformu jako Dreamweaver k převodu svého návrhu na web. Ale k tomu budete potřebovat nějaké předchozí zkušenosti s vývojem webu nebo budete muset najmout někoho, kdo to dělá.

Také na

#design

Kliknutím sem zobrazíte naši stránku s články o designu

Exportujte svůj soubor Adobe XD do HTML

Nyní, když víte, jak exportovat svůj soubor Adobe XD do HTML, jsem si jist, že budete moci snadno sdílet své kreslicí plochy s vývojářem nebo klientem. A nebudete se muset starat o žádné problémy s kompatibilitou. Nainstalujte plugin okamžitě a začněte exportovat své kreslicí plátna s lehkostí.

Další krok: Podívejte se na následující článek, kde naleznete několik interaktivních webů zdarma, na kterých se můžete naučit kódovat a psát vlastní webové stránky HTML.