Hogyan exportálhatjuk az Adobe xd fájlt a html fájlba?

Az Adobe XD egy csodálatos tervezőeszköz, amely lehetővé teszi fantasztikus weboldalak készítését előzetes webfejlesztési tapasztalat nélkül. Csak importálhat tervezett PSD fájljait a Photoshopból, és létrehozhat egy vonzó webhely felhasználói felületet.

Ezek a tervek nagyban hozzájárulnak ahhoz, hogy a fejlesztők megértsék, hogyan szeretné megjelenni webhelye, és kicsit megkönnyítik a fejlesztési folyamatot. Ennek ellenére csak korlátozott számú módon lehet exportálni a terveket a szoftverből.

Vagy 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álhat minden rajztáblát különálló PNG-fájlként, amely használata kissé kényelmetlen lehet.

A -en is

A 3 legjobb tervezési eszköz makett és drótváz létrehozásához

Szerencsére van egy praktikus külső gyártó plugin, amely lehetővé teszi a rajztáblák HTML fájlokként való exportálását, és erről beszélek. De mielőtt odajutunk, van valami, amit tudnunk kell.

Megjegyzés: Az ezzel a módszerrel létrehozott HTML fájlt semmiképpen sem szabad a teljes weblap alapjául kezelni. Ez a módszer csak egy eszköz a tervek könnyű megosztására a fejlesztővel, és nem egy funkcionális webhely-fejlesztési folyamat.

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

Most, hogy megvan az útból, kövesse ezeket az egyszerű lépéseket a szükséges plugin letöltéséhez, majd exportálja az Adobe XD fájlokat HTML-re:

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

2. lépés: Görgessen egészen lefelé, majd kattintson a Plugins opcióra. Ez megnyit egy új Plugins panelt a főmenütől jobbra.

3. lépés: Válassza a Plugins felfedezése lehetőséget a Plugins panelen.

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

A szükséges plugin telepítése után nyissa meg a HTML-fájlba exportálni kívánt projektet, majd folytassa a következő lépésekkel. A cikkhez egy ingyenes, az interneten talált Adobe XD rajztáblát fogok használni.

5. lépés: Válassza ki az exportálni kívánt rajztáblát rákattintással.

6. lépés: Most kattintson a menü gombra, keresse meg a Plugins panelt, majd válassza az Artboard exportálása lehetőséget az új Web Export plugin beállítások közül.

Ugyanazon ablakból választhat több rajztábla vagy az utolsó szerkesztett rajztábla exportálására is.

7. lépés: A Táblázat exportálása felbukkanó ablakban adjon meg egy nevet a fájlnak, majd válassza ki a mappát, ahová menti a fájlt, kattintson a Mappa exportálása opció melletti apró mappa ikonra.

8. lépés: Ha külső szkriptet, stíluslapot vagy alternatív betűkészletet kíván hozzáadni az exportált fájlhoz, akkor azokat ugyanabban az ablakban is hozzáadhatja.

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

10. lépés: Annak biztosítása érdekében, hogy a projekt méretaránya megfelelő legyen, kiválaszthat különböző méretezési beállításokat ugyanabból az ablakból, az egyes lehetőségek melletti négyzet bejelölésével.

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

12. lépés: Az összes beállítás elvégzése után 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.

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

Még egyszer, vegye figyelembe, hogy az exportált HTML semmiképpen sem használható fel egy teljesen működőképes weboldal fejlesztésére. Mostanáig nincs mód az Adobe XD projektet közvetlenül az interneten közzétenni, és az Adobe fórumokon folytatott több megbeszélés szerint hamarosan nem lesz ilyen.

Az Adobe XD csak egy prototípuskészítő eszköz, amely lehetővé teszi, hogy kezdeti mintát kód nélkül készítsen. Miután készen áll a tervezésre, használhat olyan platformot, mint a Dreamweaver, és átalakíthatja a formátumot weboldalra. Ehhez azonban szükség lesz valamilyen korábbi webfejlesztési tapasztalatra, vagy fel kell fizetnie valakit, aki ezt teszi.

A -en is

#tervezés

Ide kattintva megtekintheti a tervezési cikkek oldalát

Exportálja az Adobe XD fájlt HTML-re

Tehát most, hogy tudod, hogyan kell exportálni az Adobe XD fájlt a HTML-be, biztos vagyok benne, hogy könnyedén megoszthatja rajztábláit fejlesztővel vagy ügyféllel. És nem kell aggódnia a kompatibilitási problémák miatt. Azonnal telepítse a beépülő modult, és kezdje el könnyedén exportálni a rajztáblákat.

Következő lépések: Nézze meg a következő cikket néhány ingyenes interaktív webhelyről, ahol megtanulhatja, hogyan kódolhatja és írhatja saját HTML webhelyét.