Hoe Adobe XD naar HTML te exporteren
Diversen / / November 29, 2021
Adobe XD is een geweldige ontwerptool waarmee je eenvoudig fantastische website-ontwerpen kunt maken zonder enige ervaring met webontwikkeling. U kunt gewoon PSD-bestanden van uw ontwerp importeren vanuit Photoshop en maak een opvallende website-UI.
![Converteren naar HTML Adobe Xd Uitgelicht](/f/dc18655adeb8a9a6b3712bcd2cf90569.jpg)
Deze ontwerpen helpen ontwikkelaars een heel eind om te begrijpen hoe u wilt dat uw website eruitziet en maken het ontwikkelingsproces van hun kant een beetje gemakkelijker. Er zijn echter maar een beperkt aantal manieren waarop u de ontwerpen vanuit de software kunt exporteren.
Je kunt ervoor kiezen om ze op te slaan als een XD-bestand en te hopen dat de ontwikkelaar de software al op zijn systeem heeft geïnstalleerd, of je kunt elk tekengebied afzonderlijk exporteren PNG bestand dat een beetje onhandig in gebruik kan zijn.
Gelukkig is er een handige derde partij inpluggen waarmee je de tekengebieden als HTML-bestanden kunt exporteren en dat is waar ik het in dit artikel over zal hebben. Maar voordat we er aan beginnen, is er iets dat u moet weten.
Opmerking: Het HTML-bestand dat met deze methode wordt gegenereerd, mag op geen enkele manier worden beschouwd als 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 hamburgermenuknop in de linkerbovenhoek van de software.
![Exporteer Adobe Xd naar Html 01](/f/1fda9a4875e8ec23ab3da78aef33b16d.jpg)
Stap 2: Scroll helemaal naar beneden en klik vervolgens op de optie Plug-ins. Dat opent een nieuw paneel met plug-ins rechts van het hoofdmenu.
![Exporteer Adobe Xd naar Html 02](/f/53de6efbf8aabffd8a7fe031837cce0f.jpg)
Stap 3: Selecteer de optie Plug-ins ontdekken in het deelvenster Plug-ins.
![Exporteer Adobe Xd naar Html 03](/f/48a446994ddd585e4411616102c0d0e4.jpg)
Stap 4: Zoek op de volgende pagina naar HTML en klik vervolgens op de knop Installeren naast de plug-in Web Export.
![Exporteer Adobe Xd naar Html 04](/f/3884062acfd55dfacf3860970a9a529c.jpg)
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.
![Exporteer Adobe Xd naar Html 05](/f/93eaef6b5fa1b64a263b0cab26727dee.jpg)
Stap 6: Klik nu op de menuknop, navigeer naar het paneel Plug-ins en kies vervolgens de optie Artboard exporteren uit de nieuwe plug-ininstellingen voor Web Export.
![Exporteer Adobe Xd naar Html 06](/f/8f0836cc33260f29a731cbb3030b4061.jpg)
Vanuit hetzelfde venster kun je er ook voor kiezen om meerdere tekengebieden te exporteren of het laatste tekengebied dat je hebt bewerkt.
Stap 7: Voeg in de pop-up Artboard exporteren een naam toe voor het bestand en selecteer vervolgens de map waarin u het bestand wilt opslaan door op het kleine mappictogram naast de optie Map exporteren te klikken.
![Exporteer Adobe Xd naar Html 07](/f/dd11ea00bcf4c811c23294a8477154bd.jpg)
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.
![Adobe Xd exporteren naar html 11](/f/1a13a95520fe76b238f4fcc9e09dd43a.jpg)
Stap 9: Vervolgens kunt u de afmetingen van het HTML-uitvoerbestand kiezen door de waarden in de lege ruimte naast de optie Grootte in te voeren.
![Adobe Xd exporteren naar html 12](/f/6e0c49bf5f02f424bc844299075ee415.jpg)
Stap 10: Om ervoor te zorgen dat het project goed schaalt, kunt u ook verschillende schaalinstellingen in hetzelfde venster selecteren door het vakje naast elke optie aan te vinken.
![Adobe Xd exporteren naar html 13](/f/6a82cddc391604fd188cde47ee42ffd3.jpg)
Stap 11: Verder kunt u aanvullende instellingen kiezen, zoals toetsenbordnavigatie, automatisch vernieuwen, enz. door de vakjes naast de opties aan te vinken.
![Adobe Xd exporteren naar html 14](/f/c472d30c6aca3d4fc63958387f3a2096.jpg)
Stap 12: Nadat u alle instellingen hebt voltooid, klikt u op de blauwe knop Exporteren en bent u klaar. Uw tekengebied verschijnt als een HTML-bestand in de doelmap die u eerder hebt geselecteerd.
![Exporteer Adobe Xd naar Html 09](/f/c69c2cb4df37581a4b934b4d736103d3.jpg)
Vanuit hetzelfde venster kunt u ook de CSS en opmaak van uw tekengebied kopiëren als u die informatie ook met uw ontwikkelaar wilt delen.
![Adobe Xd exporteren naar html 15](/f/d584290aa1c6a62a36a5e6b3d29fa227.jpg)
Houd er nogmaals rekening mee dat de geëxporteerde HTML in geen geval kan worden gebruikt om een volledig functionele website te ontwikkelen. Vanaf nu is er geen manier voor u 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. Als je eenmaal een ontwerp klaar hebt, kun je een platform als Dreamweaver gebruiken om je ontwerp om te zetten in een website. Maar daarvoor heb je wat eerdere ervaring met webontwikkeling nodig of moet je iemand inhuren die dat wel doet.
Exporteer uw Adobe XD-bestand naar HTML
Dus nu u weet hoe u uw Adobe XD-bestand naar HTML moet exporteren, weet ik zeker dat u uw tekengebieden gemakkelijk kunt delen met een ontwikkelaar of een klant. En u hoeft zich geen zorgen te maken over compatibiliteitsproblemen. Installeer de plug-in meteen en begin gemakkelijk met het exporteren van uw tekengebieden.
Volgende: Bekijk het volgende artikel voor een aantal gratis interactieve websites waarop u kunt leren coderen en uw eigen HTML-website te schrijven.