Convert HTML / CSS from Adobe XD

Question

just downloaded the Adobe XD and i think i am going to love it. I just have a problem Exporting it from Adobe XD into HTML / JS / CSS and port it to my code in Visual Studio, so i can do WebForm.

How is this possible.

Methylamine

Answer 1

Natively, you can't (yet), although some external plugins can help you achieve that.

Adobe XD is a prototyping tool, ie it has been designed for producing the designs of websites and app before passing it to a developer that will "manually" build the HTML/CSS/JS out of it.

However, the export to HTML/CSS/JS feature has been asked before by the community many times and the Adobe team is currently working on it (check this and this).

Coadjutress

Answer 2

Adobe XD has a plugin ecosystem where you can download a third-party built plugin to achieve tasks not supported by Adobe XD itself. For web export, I can recommend a plugin called "Web Export."

In order to use the plugin,

1. Make sure you have the latest version of XD
2. Go to Plugins > Discover Plugins > Search "Web Export"
3. Click "Install"

Hope this helps!

Chaulmoogra

my discover plugin section doesn't work, It says that you are not connected to the internet whereas I have the Internet connection, I don't know why it doesn't work, maybe for some reasons but is there any way to download this offline and install it? – Applaud

@AmirKian just tape something in the search bar and click enter – Detail

Answer 3

AdobeXD positions elements on a canvas with x and y coordinates. This is not how HTML/CSS works for websites. You need to create an html structure and position elements with grids, flex, etc.

You could use position:absolute and position the html nodes like you would do in AdobeXD, but that will not play well with different devices and when you will do the responsive code.

There are applications and plugins that will import the html and css with absolute position, but there's not much you can do with that code. There's also Desech Studio that imports AdobeXD relatively, but it will not be pixel perfect and you then have to adjust margins and widths yourself.

Right now most people write the html/css by hand without any tools, because the tools have limitations.

Binni

Answer 4

You can use Anima plugin for that.

To use Anima for XD: www.animaapp.com/xd

Ceruse