Adobe XD exportálása HTML-be

Az Adobe XD egy csodálatos tervezőeszköz, amellyel egyszerűen készíthet fantasztikus webhelyterveket előzetes webfejlesztési tapasztalat nélkül. Egyszerűen importálhatja a tervének PSD-fájljait Photoshop és hozzon létre egy szemet gyönyörködtető webhely felhasználói felületet.

Ezek a tervek nagymértékben hozzájárulnak a fejlesztőknek ahhoz, hogy megértsék, hogyan nézzen ki webhelye, és egy kicsit megkönnyítik a fejlesztési folyamatot a részükről. A terveket azonban csak korlátozott számú módon exportálhatja a szoftverből.

Dönthet úgy, hogy XD fájlként menti őket, és remélheti, hogy a fejlesztő már telepítette a szoftvert a rendszerére, vagy exportálhatja az egyes rajztáblákat egyenként. PNG fájl, amelynek használata kissé kényelmetlen lehet.

Szerencsére van egy praktikus harmadik fél csatlakoztat amely lehetővé teszi a rajztáblák HTML-fájlként történő exportálását, és erről fogok beszélni ebben a cikkben. Mielőtt azonban rátérnénk, van valami, amit tudnod kell.

Jegyzet: Az ezzel a módszerrel előállított HTML-fájlt semmiképpen sem szabad egy teljes weboldal alapjaként kezelni. Ez a módszer csak arra szolgál, hogy könnyedén megosszák a terveket egy fejlesztővel, és nem egy funkcionális webhelyfejlesztési folyamat.

Exportáljon Adobe XD fájlokat HTML-be bővítmények segítségével

Most, hogy ezt már félretesszük, csak kövesse az alábbi egyszerű lépéseket a szükséges bővítmény letöltéséhez, majd exportálja az Adobe XD fájlokat HTML formátumba:

1. lépés: Kattintson a hamburger menü gombra a szoftver bal felső sarkában.

2. lépés: Görgessen le egészen, majd kattintson a Plugins lehetőségre. Ezzel megnyílik egy új Plugins panel a főmenü jobb oldalán.

3. lépés: Válassza a Beépülő modulok felfedezése opciót a Plugins panelen.

4. lépés: A következő oldalon keressen rá a HTML kifejezésre, majd kattintson a Web Export bővítmény melletti Telepítés gombra.

Miután telepítette a szükséges bővítményt, nyissa meg a HTML-be exportálni kívánt projektet, majd folytassa a következő lépésekkel. Ehhez a cikkhez egy ingyenes Adobe XD rajztáblát fogok használni, amelyet az interneten találtam.

5. lépés: Kattintson rá az exportálni kívánt rajztáblára.

6. lépés: Most kattintson a menü gombra, navigáljon a Plugins panelre, majd válassza a Rajztábla exportálása lehetőséget az új Web Export bővítmény beállításai közül.

Ugyanebből az ablakból választhat több rajztábla vagy az utoljára szerkesztett rajztábla exportálását is.

7. lépés: A rajztábla exportálása előugró ablakban adjon nevet a fájlnak, majd válassza ki azt a mappát, amelybe menteni szeretné a fájlt a Mappa exportálása opció melletti apró mappa ikonra kattintva.

8. lépés: Most, ha külső szkriptet, stíluslapot vagy alternatív betűtípusokat szeretne hozzáadni az exportált fájlhoz, hozzáadhatja azokat ugyanabban az ablakban.

9. lépés: Ezután kiválaszthatja a kimeneti HTML-fájl méreteit úgy, hogy beírja az értékeket a Méret opció melletti üres helyre.

10. lépés: A projekt megfelelő méretezése érdekében ugyanabból az ablakból különböző méretezési beállításokat is kiválaszthat az egyes opciók melletti négyzetek bejelölésével.

11. lépés: Ezenkívül kiválaszthat bármilyen további beállítást, például a billentyűzet navigációját, az automatikus frissítést stb. az opciók melletti négyzetek bejelölésével.

12. lépés: Miután befejezte az összes beállítást, kattintson a kék Export gombra, és kész. A rajztábla HTML-fájlként jelenik meg a korábban kiválasztott célmappában.

Ugyanebből az ablakból a rajztábla CSS-jét és jelölését is átmásolhatja, ha meg szeretné osztani ezeket az információkat a fejlesztővel.

Még egyszer vegye figyelembe, hogy az exportált HTML semmiképpen sem használható teljesen működőképes webhely létrehozására. Jelenleg nincs mód arra, hogy egy Adobe XD projektet közvetlenül az interneten tegyen közzé, és számos viták az Adobe fórumain, egyhamar nem lesz.

Az Adobe XD csak egy prototípus-készítő eszköz, amely lehetővé teszi a kezdeti terv létrehozását kód nélkül. Ha elkészült a tervvel, használhat egy platformot, például a Dreamweaver-t, hogy a tervét weboldallá alakítsa. Ehhez azonban szüksége lesz némi webfejlesztési tapasztalatra, vagy fel kell vennie valakit, aki megteszi.

Exportálja Adobe XD fájlját HTML formátumba

Tehát most, hogy tudja, hogyan exportálhatja Adobe XD fájlját HTML formátumba, biztos vagyok benne, hogy könnyedén meg tudja majd osztani rajztábláit egy fejlesztővel vagy egy ügyféllel. És nem kell aggódnia a kompatibilitási problémák miatt. Azonnal telepítse a bővítményt, és kezdje el könnyedén exportálni a rajztáblákat.

Következö: Tekintse meg a következő cikket néhány ingyenes interaktív webhelyről, amelyeken megtanulhatja, hogyan kell kódolni és megírni saját HTML-webhelyét.