9

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.

RedMond
  • 133
  • 1
  • 1
  • 5

4 Answers4

11

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!

Steve Kwak
  • 311
  • 1
  • 5
  • 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? – Amir Kian Mar 21 '20 at 10:20
  • @AmirKian just tape something in the search bar and click enter – Abdeldjalil Elaaeieida Apr 16 '20 at 11:57
5

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).

Nino Filiu
  • 16,660
  • 11
  • 54
  • 84
1

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.

dreamLo
  • 1,612
  • 12
  • 17
0

You can use Anima plugin for that.

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

Or Arbel
  • 2,965
  • 2
  • 30
  • 40