Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How to Export HTML, CSS, JavaScript from Adobe XD

New Here ,
Sep 30, 2017 Sep 30, 2017

Copy link to clipboard

Copied

I have designed a websie in xd and now i want to convert my complete design to HTML or i want CSS how can i get this?

 

[Moved from the non-technical Lounge Forum to the specific Program forum... Mod]

[Here is the list of all Adobe forums... https://forums.adobe.com/welcome]

TOPICS
How to, Missing feature

Views

421.3K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Apr 11, 2019 Apr 11, 2019
Hi All, We understand that this is a highly viewed thread on XD community and thank you for reaching out. We would like to inform you that you can use the plugin "Web Export" which allows you to extract HTML and CSS from your design. You can also use Adobe XD plug-ins that allow for extracting HTML and CSS. Select Plugins > Discover Plugins and search using keywords such as web, or HTML, CSS. Sharing a video from one of our Youtube experts on this topic. Like it was correctly pointed ...

Likes

Translate

Translate
replies 103 Replies 103
New Here ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hey yall!
I was wondering if there was a way that I could export in HTML, Java, or something like that, because I do not want to have to redesign my website [WordPress site link removed by moderator] in HTML... Is there a way to do that?
when now my design did is finished... how do export it to usable HTML + CSS ? 🙂 Does Adobe XD allow this kind of export? Or Adobe XD is just to watch the final "possible" graphic result, so a sort of PhotoShop?
Thank you so much!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Hi Raul. Xd itself doesn't have an export to html/css feature. It is a prototyping tool, and not a website builder like Webflow for example. There are plugins that are able to generate a website from your design, but I wouldn't expect the code to be very efficient, and there are a lot of conditions.

 

I guess you could compare it to what Photoshop was used for back in the day. The end result is somewhat static, but has interactability. You can click on buttons, have hover effects, dropdown menus, animations and so on. Xd has a much more optimized workflow and prototyping abilities, which PS doesn't have at all. It also makes it easier for devs to get the css code for each element, get variables and download the assets from the prototype. 

 

The usual workflow for UX/UI design is to design the low and/or high fidelity pages in Xd, so you can test your ideas and make quick changes. When you are happy with how everything looks and connects, you go ahead and make the actual website from scratch with html/css/js, using the variables and values from Xd. This is how you will get the best result. Everything else is sub-optimal. You may save some time, but you sacrifice code clarity and efficiency. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

@raul5C77,

There is nothing to be gained from rebuilding your dynamic WordPress site with static HTML pages.  You would lose all site functionality and backend CMS. 

 

To change your WP site's appearance, get a new WP Theme.  Or develop a custom Theme of your own.  Consult WordPress documentation for more details.

https://codex.wordpress.org/Theme_Development

 

Alternatively, use a WP plugin like Elementor.

https://elementor.com/blog/what-is-elementor-for-wordpress/

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 16, 2021 Jul 16, 2021

Copy link to clipboard

Copied

LATEST

You would want something that converts the html and css but not with position absolute because that is almost impossible to work with when doing the responsiveness of the website.

 

You can try Desech Studio to import your adobexd file and this will generate an html structure with css grids for positioning. Know that, you still have to do some adjustments like margins and sizes after the import.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines