Hoe Adobe XD naar HTML te exporteren

Adobe XD is een geweldige ontwerptool waarmee je eenvoudig fantastische website-ontwerpen kunt maken zonder enige ervaring met webontwikkeling. U kunt PSD-bestanden van uw ontwerp gewoon importeren uit Photoshop en een opvallende website-gebruikersinterface maken.

Deze ontwerpen helpen ontwikkelaars veel om te begrijpen hoe u wilt dat uw website eruit ziet en maken het ontwikkelingsproces van hun kant een beetje eenvoudiger. Er zijn echter slechts een beperkt aantal manieren waarop u de ontwerpen vanuit de software kunt exporteren.

U kunt ervoor kiezen om ze op te slaan als een XD-bestand en hopen dat de ontwikkelaar de software al op zijn systeem heeft geïnstalleerd of elk tekengebied exporteren als een afzonderlijk PNG-bestand dat een beetje onhandig kan zijn om te gebruiken.

Ook op

Beste 3 ontwerptools voor het maken van modellen en wireframes

Gelukkig is er een handige plug-in van derden waarmee je de tekengebieden kunt exporteren als HTML-bestanden en daar zal ik het over hebben. Maar voordat we eraan beginnen, is er iets dat je moet weten.

Opmerking: het HTML-bestand dat met deze methode is gegenereerd, mag op geen enkele manier worden beschouwd als een basis voor een volledige webpagina. Deze methode is slechts een middel om uw ontwerpen gemakkelijk te delen met een ontwikkelaar en niet een functioneel website-ontwikkelingsproces.

Exporteer Adobe XD-bestanden naar HTML met behulp van plug-ins

Nu we dat uit de weg hebben geruimd, volgt u deze eenvoudige stappen om de vereiste plug-in te downloaden en vervolgens de Adobe XD-bestanden naar HTML te exporteren:

Stap 1: Klik op de hamburger-menuknop in de linkerbovenhoek van de software.

Stap 2: Scroll helemaal naar beneden en klik vervolgens op de optie Plug-ins. Dat opent een nieuw paneel Plug-ins rechts van het hoofdmenu.

Stap 3: Selecteer de optie Plug-ins ontdekken in het paneel Plug-ins.

Stap 4: Zoek op de volgende pagina naar HTML en klik vervolgens op de knop Installeren naast de invoegtoepassing Web Export.

Nadat u de vereiste plug-in hebt geïnstalleerd, opent u het project dat u naar HTML wilt exporteren en gaat u verder met de volgende stappen. Voor dit artikel gebruik ik een gratis Adobe XD-tekengebied dat ik online heb gevonden.

Stap 5: Selecteer het tekengebied dat u wilt exporteren door erop te klikken.

Stap 6: Klik nu op de menuknop, navigeer naar het paneel Plug-ins en kies vervolgens de optie Tekengebied exporteren uit de nieuwe instellingen voor de plug-in Web Export.

Vanuit hetzelfde venster kunt u er ook voor kiezen om meerdere tekengebieden of het laatste bewerkte tekengebied te exporteren.

Stap 7: Voeg in het pop-upvenster Tekengebied exporteren een naam voor het bestand toe en selecteer vervolgens de map waarin u het bestand wilt opslaan door op het kleine mappictogram naast de optie Map exporteren te klikken.

Stap 8: Als u nu een extern script, stylesheet of alternatieve lettertypen aan het geëxporteerde bestand wilt toevoegen, kunt u deze in hetzelfde venster toevoegen.

Stap 9: Vervolgens kunt u de afmetingen van het uitgevoerde HTML-bestand kiezen door de waarden in het lege vak naast de optie Grootte in te typen.

Stap 10: Om ervoor te zorgen dat het project correct wordt geschaald, kunt u ook verschillende schaalinstellingen in hetzelfde venster selecteren door het vakje naast elke optie aan te vinken.

Stap 11: Bovendien kunt u aanvullende instellingen kiezen, zoals toetsenbordnavigatie, automatisch vernieuwen, enz. Door de vakjes naast de opties aan te vinken.

Stap 12: Nadat u alle instellingen hebt voltooid, klikt u op de blauwe knop Exporteren en u bent klaar. Uw tekengebied verschijnt als een HTML-bestand in de eerder geselecteerde doelmap.

Vanuit hetzelfde venster kunt u ook de CSS en markup van uw tekengebied kopiëren als u die informatie ook met uw ontwikkelaar wilt delen.

Houd er nogmaals rekening mee dat de geëxporteerde HTML geenszins kan worden gebruikt om een ​​volledig functionele website te ontwikkelen. Vanaf nu is er geen manier om een ​​Adobe XD-project rechtstreeks op het web te publiceren, en volgens verschillende discussies op de Adobe-forums zal er niet snel een zijn.

Adobe XD is slechts een prototyping-tool waarmee u een eerste ontwerp zonder code kunt maken. Zodra u een ontwerp gereed hebt, kunt u een platform zoals Dreamweaver gebruiken om uw ontwerp om te zetten in een website. Maar daarvoor heb je enige ervaring met webontwikkeling nodig of moet je iemand inhuren die dat wel doet.

Ook op

#ontwerp

Klik hier om onze pagina met designartikelen te bekijken

Exporteer uw Adobe XD-bestand naar HTML

Nu u weet hoe u uw Adobe XD-bestand naar HTML kunt exporteren, weet ik zeker dat u uw tekengebieden gemakkelijk kunt delen met een ontwikkelaar of een client. En u hoeft zich geen zorgen te maken over compatibiliteitsproblemen. Installeer de plug-in meteen en begin met het exporteren van uw tekengebieden.

Volgende: bekijk het volgende artikel voor een aantal gratis interactieve websites waarop u kunt leren hoe u uw eigen HTML-website kunt coderen en schrijven.