Ako exportovať Adobe XD do HTML

Adobe XD je úžasný dizajnový nástroj, ktorý vám umožňuje jednoducho vytvárať fantastické návrhy webových stránok bez predchádzajúcich skúseností s vývojom webu. Môžete jednoducho importovať PSD súbory vášho dizajnu z Photoshop a vytvorte pútavé používateľské rozhranie webu.

Tieto návrhy výrazne pomáhajú vývojárom pochopiť, ako chcete, aby vaša webová lokalita vyzerala, a zjednodušujú proces vývoja z ich strany. Existuje však len obmedzený počet spôsobov, ako môžete exportovať návrhy zo softvéru.

Môžete si vybrať ich uloženie ako súbor XD a dúfať, že vývojár už má softvér nainštalovaný vo svojom systéme, alebo exportovať každé umelecké plátno ako samostatné PNG súbor, ktorého použitie môže byť trochu nepohodlné.

Našťastie existuje šikovná tretia strana zapojiť ktorý vám umožňuje exportovať umelecké plátna ako súbory HTML a o tom budem hovoriť v tomto článku. Ale kým sa k tomu dostaneme, je tu niečo, čo potrebujete vedieť.

Poznámka: Súbor HTML vygenerovaný pomocou tejto metódy by sa v žiadnom prípade nemal považovať za základ pre úplnú webovú stránku. Táto metóda je len prostriedkom na jednoduché zdieľanie vašich návrhov s vývojárom a nie funkčným procesom vývoja webových stránok.

Exportujte súbory Adobe XD do HTML pomocou doplnkov

Teraz, keď to máme z cesty, jednoducho postupujte podľa týchto jednoduchých krokov na stiahnutie požadovaného doplnku a potom exportujte súbory Adobe XD do HTML:

Krok 1: Kliknite na tlačidlo ponuky hamburger v ľavom hornom rohu softvéru.

Krok 2: Prejdite úplne nadol a potom kliknite na možnosť Pluginy. Tým sa otvorí nový panel Plugins napravo od hlavnej ponuky.

Krok 3: Vyberte možnosť Discover Plugins na paneli Plugins.

Krok 4: Na nasledujúcej stránke vyhľadajte HTML a potom kliknite na tlačidlo Inštalovať vedľa doplnku Web Export.

Po nainštalovaní požadovaného doplnku otvorte projekt, ktorý chcete exportovať do HTML, a potom pokračujte nasledujúcimi krokmi. Pre tento článok použijem bezplatnú umeleckú dosku Adobe XD, ktorú som našiel online.

Krok 5: Kliknutím na umelecké plátno, ktoré chcete exportovať, vyberte.

Krok 6: Teraz kliknite na tlačidlo ponuky, prejdite na panel Plugins a potom vyberte možnosť Export Artboard z nových nastavení doplnku Web Export.

V tom istom okne si tiež môžete vybrať export viacerých kresliacich plôch alebo posledného kresliaceho plátna, ktoré ste upravili.

Krok 7: Vo vyskakovacom okne Export Artboard pridajte názov súboru a potom vyberte priečinok, do ktorého chcete súbor uložiť, kliknutím na malú ikonu priečinka vedľa možnosti Exportovať priečinok.

Krok 8: Ak teraz chcete do exportovaného súboru pridať externý skript, šablónu so štýlmi alebo alternatívne písma, môžete ich pridať v tom istom okne.

Krok 9: Potom si môžete vybrať rozmery výstupného súboru HTML zadaním hodnôt do prázdneho miesta vedľa možnosti Veľkosť.

Krok 10: Aby ste sa uistili, že sa projekt prispôsobí správne, môžete tiež vybrať rôzne nastavenia mierky v tom istom okne začiarknutím políčka vedľa každej možnosti.

Krok 11: Okrem toho si môžete vybrať akékoľvek ďalšie nastavenia, ako je navigácia pomocou klávesnice, automatické obnovenie atď. začiarknutím políčok vedľa možností.

Krok 12: Po dokončení všetkých nastavení stačí kliknúť na modré tlačidlo Exportovať a máte hotovo. Vaše umelecké plátno sa zobrazí ako súbor HTML v cieľovom priečinku, ktorý ste predtým vybrali.

V tom istom okne budete môcť skopírovať aj CSS a značky svojho umeleckého plátna, ak chcete tieto informácie zdieľať aj so svojím vývojárom.

Ešte raz si uvedomte, že exportovaný HTML nemožno v žiadnom prípade použiť na vytvorenie plne funkčnej webovej stránky. Odteraz neexistuje spôsob, ako publikovať projekt Adobe XD priamo na web a podľa niekoľkých diskusie na fórach Adobe, tak skoro žiadny nebude.

Adobe XD je len prototypový nástroj, ktorý vám umožňuje vytvoriť počiatočný návrh bez kódu. Keď budete mať pripravený návrh, môžete použiť platformu ako Dreamweaver na konverziu svojho návrhu na webovú stránku. Na to však budete potrebovať nejaké predchádzajúce skúsenosti s vývojom webu alebo si budete musieť najať niekoho, kto to robí.

Exportujte svoj súbor Adobe XD do HTML

Takže teraz, keď viete, ako exportovať súbor Adobe XD do HTML, som si istý, že budete môcť jednoducho zdieľať svoje umelecké plátna s vývojárom alebo klientom. A nebudete sa musieť obávať žiadnych problémov s kompatibilitou. Ihneď si nainštalujte doplnok a začnite jednoducho exportovať svoje umelecké dosky.

Ďalej: V nasledujúcom článku nájdete niekoľko bezplatných interaktívnych webových stránok, na ktorých sa môžete naučiť kódovať a písať svoju vlastnú webovú stránku HTML.