Hur man exporterar Adobe XD till HTML

Adobe XD är ett fantastiskt designverktyg som låter dig enkelt skapa fantastiska webbdesigner utan någon tidigare erfarenhet av webbutveckling. Du kan bara importera PSD-filer av din design från Photoshop och skapa ett iögonfallande användargränssnitt för webbplatsen.

De här designerna hjälper utvecklare att förstå hur du vill att din webbplats ska se ut och gör utvecklingsprocessen lite lättare från deras sida. Det finns dock bara ett begränsat antal sätt du kan exportera designen från programvaran.

Du kan antingen välja att spara dem som en XD-fil och hoppas att utvecklaren redan har programvaran installerad på sitt system eller exportera varje rityta som en individ PNG fil som kan vara lite obekväm att använda.

Tack och lov finns det en praktisk tredje part plugin som låter dig exportera ritytor som HTML-filer och det är vad jag kommer att prata om i den här artikeln. Men innan vi kommer till det är det något du behöver veta.

Notera: HTML-filen som genereras med denna metod ska inte på något sätt behandlas som en bas för en komplett webbsida. Denna metod är bara ett sätt att enkelt dela din design med en utvecklare och inte en funktionell webbutvecklingsprocess.

Exportera Adobe XD-filer till HTML med plugins

Nu när vi har fått det ur vägen, följ bara dessa enkla steg för att ladda ner det nödvändiga plugin-programmet och exportera sedan Adobe XD-filerna till HTML:

Steg 1: Klicka på hamburgermenyknappen i det övre vänstra hörnet av programvaran.

Steg 2: Bläddra hela vägen ner och klicka sedan på alternativet Plugins. Det öppnar en ny instickspanel till höger om huvudmenyn.

Steg 3: Välj alternativet Discover Plugins från Plugins-panelen.

Steg 4: På följande sida, sök efter HTML och klicka sedan på knappen Installera bredvid insticksprogrammet Web Export.

När du har installerat det nödvändiga plugin-programmet öppnar du projektet du vill exportera till HTML och fortsätter sedan med följande steg. För den här artikeln kommer jag att använda en gratis Adobe XD-rityta som jag hittade online.

Steg 5: Välj ritytan du vill exportera genom att klicka på den.

Steg 6: Klicka nu på menyknappen, navigera till panelen Plugins och välj sedan alternativet Export Artboard från de nya webbexport-plugininställningarna.

Från samma fönster kan du också välja att exportera flera ritytor eller den senaste ritytan du redigerade.

Steg 7: Lägg till ett namn för filen i popup-fönstret Export Artboard och välj sedan mappen där du vill spara filen genom att klicka på den lilla mappikonen bredvid alternativet Exportera mapp.

Steg 8: Om du nu vill lägga till ett externt skript, stilmall eller alternativa typsnitt till den exporterade filen, kan du lägga till dem i samma fönster.

Steg 9: Sedan kan du välja måtten på HTML-utdatafilen genom att skriva in värdena i det tomma utrymmet bredvid alternativet Storlek.

Steg 10: För att säkerställa att projektet skalas ordentligt kan du också välja olika skalningsinställningar från samma fönster genom att markera rutan bredvid varje alternativ.

Steg 11: Dessutom kan du välja ytterligare inställningar som tangentbordsnavigering, automatisk uppdatering, etc. genom att markera rutorna bredvid alternativen.

Steg 12: När du har slutfört alla inställningar klickar du bara på den blå Exportera-knappen och du är klar. Din rityta kommer att visas som en HTML-fil i målmappen du tidigare valde.

Från samma fönster kommer du också att kunna kopiera CSS och markering av din rityta om du också vill dela den informationen med din utvecklare.

Återigen, notera att den exporterade HTML-koden inte på något sätt kan användas för att utveckla en fullt fungerande webbplats. Från och med nu finns det inget sätt för dig att publicera ett Adobe XD-projekt direkt på webben, och enligt flera diskussioner på Adobes forum, det kommer inte att finnas någon snart.

Adobe XD är bara ett prototypverktyg som låter dig skapa en första design utan kod. När du har en design klar kan du använda en plattform som Dreamweaver för att konvertera din design till en webbplats. Men för det behöver du lite tidigare erfarenhet av webbutveckling eller så måste du anställa någon som gör det.

Exportera din Adobe XD-fil till HTML

Så nu när du vet hur du exporterar din Adobe XD-fil till HTML, är jag säker på att du enkelt kommer att kunna dela dina ritytor med en utvecklare eller en klient. Och du behöver inte oroa dig för några kompatibilitetsproblem. Installera plugin-programmet direkt och börja exportera dina ritytor med lätthet.

Nästa upp: Kolla in följande artikel för ett par gratis interaktiva webbplatser där du kan lära dig hur du kodar och skriver din egen HTML-webbplats.