Adobe XD exportálása HTML-be
Vegyes Cikkek / / November 29, 2021
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.
![Konvertálás HTML-be Adobe Xd Kiemelt](/f/dc18655adeb8a9a6b3712bcd2cf90569.jpg)
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.
![Adobe Xd exportálása HTML 01-be](/f/1fda9a4875e8ec23ab3da78aef33b16d.jpg)
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.
![Adobe Xd exportálása HTML 02-be](/f/53de6efbf8aabffd8a7fe031837cce0f.jpg)
3. lépés: Válassza a Beépülő modulok felfedezése opciót a Plugins panelen.
![Adobe Xd exportálása HTML 03-ba](/f/48a446994ddd585e4411616102c0d0e4.jpg)
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.
![Adobe Xd exportálása HTML 04-be](/f/3884062acfd55dfacf3860970a9a529c.jpg)
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.
![Adobe Xd exportálása HTML 05-be](/f/93eaef6b5fa1b64a263b0cab26727dee.jpg)
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.
![Adobe Xd exportálása HTML 06-ba](/f/8f0836cc33260f29a731cbb3030b4061.jpg)
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.
![Adobe Xd exportálása HTML 07-be](/f/dd11ea00bcf4c811c23294a8477154bd.jpg)
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.
![Adobe Xd exportálása HTML 11-be](/f/1a13a95520fe76b238f4fcc9e09dd43a.jpg)
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.
![Adobe Xd exportálása HTML 12-be](/f/6e0c49bf5f02f424bc844299075ee415.jpg)
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.
![Adobe Xd exportálása HTML 13-ba](/f/6a82cddc391604fd188cde47ee42ffd3.jpg)
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.
![Adobe Xd exportálása HTML 14-be](/f/c472d30c6aca3d4fc63958387f3a2096.jpg)
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.
![Adobe Xd exportálása HTML 09-be](/f/c69c2cb4df37581a4b934b4d736103d3.jpg)
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.
![Adobe Xd exportálása HTML 15-be](/f/d584290aa1c6a62a36a5e6b3d29fa227.jpg)
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.