Adobe XD is a great design tool that allows you to easily create amazing website designs without any prior web development experience. You can just import the PSD files of your design from Photoshop and create an eye-catching website UI.
These designs help developers clearly understand how you want your website to look and make their development process a little easier. However, there are only a limited number of ways you can export designs from the software.
You can choose to save them as XD files and hope the developer has the software installed on your system, or export each artboard as an individual PNG file, which can be a bit inconvenient to use.
Thankfully, there is a handy third-party plugin that allows you to export artboards as HTML files, and that’s what I’m going to talk about in this article. But before we get started, there are a few things you need to know.
Note:
Export an Adobe XD file to HTML using a plugin
Now that we’ve got that out of the way, just follow these simple steps to download the required add-in and then export Adobe XD files to HTML:
Step 1: Click on the hamburger menu button in the top left corner of the software.
Step 2: Scroll all the way down and then click on the Plugins option. That will open a new Plugins panel to the right of the main menu.
Step 3: Select the Discover Plugins option from the Plugins panel.
Step 4: In the next page, search for HTML and then click the Install button next to the Web Export plugin.
Once you have installed the required plugin, open the project that you want to export to HTML and then continue with the following steps. For this article, I will be using a free Adobe XD artboard that I found online.
Step 5: Select the drawing you want to export by clicking on it.
Step 6: Now click on the menu button, navigate to the Plugins panel and then select the Export Artboard option from the new Web Export plugin settings.
From the same window, you can also choose to export multiple drawings or the last drawing you edited.
Step 7: In the Export Artboard pop-up, add a name for the file and then select the folder where you want to save the file by clicking the small folder icon next to the Export folder option.
Step 8: Now, if you want to add external scripts, stylesheets or alternative fonts to the exported file, you can add them in the same window.
Step 9: Then you can choose the size of the output HTML file by entering the values in the space next to the Size option.
Step 10: To ensure that the project has the correct scale, you can also select different scale settings from the same window by checking the box next to each option.
Step 11: Also you can select any additional settings like Keyboard Navigation, Auto Refresh etc by checking the boxes next to the options.
Step 12: Once you are done with all the settings, just click the blue Export button and you are done. Your drawing will appear as an HTML file in the destination folder you selected earlier.
From the same window, you can also copy the CSS and markup of your artboard if you want to share that information with your developers as well.
Again, please note that the exported HTML cannot be used at all to develop a fully functional website. Currently, there is no way for you to directly publish an Adobe XD project to the web, and according to some discussions on the Adobe forums, there won’t be any anytime soon.
Adobe XD is just a prototyping tool that allows you to create an original design without code. Once you have a design ready, you can use a platform like Dreamweaver to convert your design into a website. But to do that, you’ll need some prior web development experience or you’ll need to hire someone to do it.
Export your Adobe XD files to HTML
So now that you know how to export your Adobe XD files to HTML, I’m sure you’ll be able to easily share your artboards with developers or clients. And you won’t have to worry about any compatibility issues. Install the plugin right away and start exporting your drawings easily.
Next up: Check out the following article for a few free interactive websites where you can learn how to code and write your own HTML website.
Categories: How to
Source: thpttranhungdao.edu.vn/en/
