Export XD file to Bootstrap 4

[minusculestudio]

Hello!

We have installed the UI toolkit in Adobe XD- is there a way to export the prototype referencing Bootstrap? Right now, when we export, there are not bootstrap references in the code.

In short, how do we export Bootstrap 4 HTML/CSS our of adobe XD?

[nikhilnayyar002]

Currently Adobe XD does not provide a native feature to export designs to HTML/CSS.

But there are some plugins available:
https://www.adobe.com/products/xd/learn/collaborate/developer-handoff/export-xd-to-html-css-plugins.html

Also there is a VS Code extension that can help reduce gap between developers and designers.

You can also google 🙂

[minusculestudio]

Thank you for your reply! I have downloaded a few different plugins (currently using Anima pro)- but I need one that will specifically export to Bootstrap 4. Is this possible? Or is there something I need to do in the XD file setup to make the html/css export referencing bootstrap?

[nikhilnayyar002]

The plugins only output raw html/css code not the actual bootstrap code (bootstrap syntax, components, theme, layout etc.)

The purpose of bootstrap XD file is limited to prototype in XD, not the actual code i.e to see how project will look when bootstrap will be actually used in your website, app etc. I should have answered this first time.

If you want to use bootstrap you have to manually code it. This bootstrap XD file is for prototype purpose only and only shows how bootstrap components etc. will look like when used in real website.