Kā eksportēt Adobe XD uz HTML
Miscellanea / / November 29, 2021
Adobe XD ir pārsteidzošs dizaina rīks, kas ļauj viegli izveidot fantastiskus vietņu dizainus bez iepriekšējas tīmekļa izstrādes pieredzes. Varat vienkārši importēt sava dizaina PSD failus no Photoshop un izveidojiet pievilcīgu vietnes lietotāja interfeisu.
![Konvertēt uz HTML Adobe Xd Featured](/f/dc18655adeb8a9a6b3712bcd2cf90569.jpg)
Šie dizaini palīdz izstrādātājiem saprast, kā vēlaties, lai jūsu vietne izskatās, un atvieglo izstrādes procesu no viņu puses. Tomēr ir tikai ierobežots skaits veidu, kā eksportēt dizainus no programmatūras.
Varat izvēlēties saglabāt tos kā XD failu un cerēt, ka izstrādātājam jau ir instalēta programmatūra savā sistēmā vai eksportēt katru zīmējumu kā atsevišķu PNG failu, kura lietošana var būt nedaudz neērta.
Par laimi, ir ērta trešā puse iespraust kas ļauj eksportēt zīmējumus kā HTML failus, un par to es runāšu šajā rakstā. Bet, pirms mēs to aplūkojam, ir kaut kas, kas jums jāzina.
Piezīme: HTML failu, kas ģenerēts, izmantojot šo metodi, nekādā gadījumā nevajadzētu uzskatīt par pamatu pilnai tīmekļa lapai. Šī metode ir tikai līdzeklis, lai ērti koplietotu savus dizainus ar izstrādātāju, nevis funkcionāls vietnes izstrādes process.
Eksportējiet Adobe XD failus uz HTML, izmantojot spraudņus
Tagad, kad tas ir novērsts, izpildiet šīs vienkāršās darbības, lai lejupielādētu nepieciešamo spraudni un pēc tam eksportētu Adobe XD failus uz HTML:
1. darbība: Programmatūras augšējā kreisajā stūrī noklikšķiniet uz hamburgeru izvēlnes pogas.
![Eksportējiet Adobe Xd uz HTML 01](/f/1fda9a4875e8ec23ab3da78aef33b16d.jpg)
2. darbība: Ritiniet līdz galam un pēc tam noklikšķiniet uz opcijas Spraudņi. Tas atvērs jaunu Plugins paneli pa labi no galvenās izvēlnes.
![Eksportējiet Adobe Xd uz HTML 02](/f/53de6efbf8aabffd8a7fe031837cce0f.jpg)
3. darbība: Plugins panelī atlasiet opciju Discover Plugins.
![Eksportējiet Adobe Xd uz HTML 03](/f/48a446994ddd585e4411616102c0d0e4.jpg)
4. darbība: Nākamajā lapā meklējiet HTML un pēc tam noklikšķiniet uz pogas Instalēt blakus spraudnim Web Export.
![Eksportējiet Adobe Xd uz HTML 04](/f/3884062acfd55dfacf3860970a9a529c.jpg)
Kad esat instalējis nepieciešamo spraudni, atveriet projektu, kuru vēlaties eksportēt uz HTML, un pēc tam veiciet tālāk norādītās darbības. Šim rakstam es izmantošu bezmaksas Adobe XD mākslas dēli, ko atradu tiešsaistē.
5. darbība: Atlasiet eksportējamo zīmējumu dēli, noklikšķinot uz tā.
![Eksportējiet Adobe Xd uz HTML 05](/f/93eaef6b5fa1b64a263b0cab26727dee.jpg)
6. darbība: Tagad noklikšķiniet uz izvēlnes pogas, pārejiet uz paneli Spraudņi un pēc tam jaunajos Web Export spraudņa iestatījumos izvēlieties opciju Export Artboard.
![Eksportējiet Adobe Xd uz HTML 06](/f/8f0836cc33260f29a731cbb3030b4061.jpg)
Tajā pašā logā varat arī izvēlēties eksportēt vairākus zīmējumus vai pēdējo rediģēto zīmējumu dēli.
7. darbība: Uznirstošajā logā Export Artboard pievienojiet failam nosaukumu un pēc tam atlasiet mapi, kurā vēlaties saglabāt failu, noklikšķinot uz mazās mapes ikonas blakus opcijai Eksportēt mapi.
![Eksportējiet Adobe Xd uz HTML 07](/f/dd11ea00bcf4c811c23294a8477154bd.jpg)
8. darbība: Tagad, ja vēlaties eksportētajam failam pievienot ārēju skriptu, stila lapu vai alternatīvus fontus, varat tos pievienot tajā pašā logā.
![Eksportējiet Adobe Xd uz HTML 11](/f/1a13a95520fe76b238f4fcc9e09dd43a.jpg)
9. darbība: Pēc tam varat izvēlēties izvades HTML faila izmērus, ierakstot vērtības tukšajā vietā blakus opcijai Izmērs.
![Eksportējiet Adobe Xd uz HTML 12](/f/6e0c49bf5f02f424bc844299075ee415.jpg)
10. darbība: Lai nodrošinātu pareizu projekta mērogošanu, tajā pašā logā varat arī atlasīt dažādus mērogošanas iestatījumus, atzīmējot izvēles rūtiņu blakus katrai opcijai.
![Eksportējiet Adobe Xd uz HTML 13](/f/6a82cddc391604fd188cde47ee42ffd3.jpg)
11. darbība: Turklāt varat izvēlēties jebkurus papildu iestatījumus, piemēram, tastatūras navigāciju, automātisko atsvaidzināšanu utt. atzīmējot izvēles rūtiņas blakus opcijām.
![Eksportējiet Adobe Xd uz HTML 14](/f/c472d30c6aca3d4fc63958387f3a2096.jpg)
12. darbība: Kad esat pabeidzis visus iestatījumus, vienkārši noklikšķiniet uz zilās pogas Eksportēt un esat pabeidzis. Jūsu zīmējums tiks parādīts kā HTML fails iepriekš atlasītajā mērķa mapē.
![Eksportējiet Adobe Xd uz HTML 09](/f/c69c2cb4df37581a4b934b4d736103d3.jpg)
Tajā pašā logā jūs varēsiet arī kopēt CSS un sava zīmējuma tāfeles marķējumu, ja vēlaties kopīgot šo informāciju ar savu izstrādātāju.
![Eksportējiet Adobe Xd uz HTML 15](/f/d584290aa1c6a62a36a5e6b3d29fa227.jpg)
Vēlreiz ņemiet vērā, ka eksportēto HTML nekādā gadījumā nevar izmantot, lai izveidotu pilnībā funkcionējošu vietni. Pašlaik jūs nevarat tieši publicēt Adobe XD projektu tīmeklī, un saskaņā ar vairākiem diskusijas Adobe forumos, drīzumā tāda vairs nebūs.
Adobe XD ir tikai prototipēšanas rīks, kas ļauj izveidot sākotnējo dizainu bez koda. Kad dizains ir gatavs, varat izmantot tādu platformu kā Dreamweaver, lai pārveidotu savu dizainu par vietni. Bet, lai to izdarītu, jums būs nepieciešama iepriekšēja tīmekļa izstrādes pieredze vai arī jums būs jānoalgo kāds, kas to dara.
Eksportējiet savu Adobe XD failu uz HTML
Tātad, tagad, kad zināt, kā eksportēt savu Adobe XD failu uz HTML, esmu pārliecināts, ka varēsiet viegli koplietot savus zīmējumus ar izstrādātāju vai klientu. Un jums nebūs jāuztraucas par saderības problēmām. Nekavējoties instalējiet spraudni un sāciet viegli eksportēt savus zīmējumus.
Nākamais: Skatiet šo rakstu par dažām bezmaksas interaktīvām vietnēm, kurās varat uzzināt, kā kodēt un uzrakstīt savu HTML vietni.