"Can you please describe more how you would like it to work?"

So thinking through on the end result, Currently once you build something in XD, you can display it on screen or export the entire thing as a PNG. The feature to do individual PNGs doesn't make sense as everything that is created in XD should be built in pure CSS, and anything that isn't CSS was probably imported into XD to begin with.

So once something that was built in XD and approved, what are the next steps? In our company, I, as the UI Designer, would pass the design off to the developers with markup on what it takes to build said design (colors, fonts, sizes, responsive break points, animations, etc.)

In order to do this, I have to select each item, get the sizes (sometimes converting them to proportions), click on the color to grab the hex code, click on each font to get the color/size, etc. I then have to place all this information into another document outside of XD for the developers to reference. And if there is a change, it's a manual process to update that document (changing it in XD, then manually changing it in the Design Document).

XD would work well in Agile method so far, if there wasn't such a heavy burden on putting together the Design Document after. If there was a way for the developers to reference the items in XD, it would make XD a staple in the design process. Right now, it is just a novelty.

Hope that helps.

As the prototyping aspect is wonderful and you can generate swf formatted files, why not a cross-app interface specifically with DreamWeaver. If not HTML/css output, could it generate a Template '.dwt' compatible file?
I personally feel it is too involved to recreate an html page(s) after spending so much time prototyping.

You could export your caching/loading JS as well. There isn’t really a problem here that you can’t get around if Adobe.ly is already displaying HTML/JS/CSS in a webbrowser. In does make me wonder why you actually need the caching level though.

Even having a CSS Properties window for single elements (similar to Photoshop and Illustrator) to reveal some of the basic properties would be tremendously time-saving. The export to CSS feature from those two programs would also be amazing.

its good idea is really easy to export to code, for example meteor blaze template o React template, for more easy adaptation of a powerfull aplication and export like cordoba or web

In the pre May update webcast they discuss this: https://www.twitch.tv/adobe/v/68120869 (Scrub to an hour in for when it really starts and for this exact issue it is dicsussed about 15 mins from the end) I hope that is useful

Agreed! This app is a great asset for eventual prototyping and importing into Dreamweaver. Sync and Live Preview refresh while updating in XD would make for rapid and flexible production.

Would like to have HTML & CSS export as well as integration with DreamWeaver (with updated previews while working in XD)

Absolutely. In our team workflow, we generate a rapid prototype in XD, but then have to recreate the entire design in another program to add markup for the developers, or create a style guide for them to follow manually (which is hard to do in XD, since the hex color value isn't displayed in the interface). So exporting to base html would give the developers the ability to identify fonts, colors, spacing, etc, while keeping with the rapid prototyping theme.

Same here. HTML/CSS/JS export would be quite nice. The ability to export a walkthrough as a movie file or .fla would also be killer.

I would also like the ability to export as HTML/CSS with assets - instead of using the Adobe.ly links - so I can post to an internal server.

I second that!

It would be nice to "merge" Adobe XD with Edge Reflow features while designing the prototype. Or to give designer a choice whether to use html/css or not. For example this can be realized with the help of tabs, like you did it with "Design" and "Prototype" tabs now. Just add one more which will be called "Markup".

P.S. But if this really happen one day, please, add a possibility to use classes and global styles in HTML/CSS, but not just IDs like it is made in Reflow now.

Thank you in advance :)

Hi Adobe Team,
I'm currently spending a lot time in XD and designing Apps. For now I really like XD. It's a fast way to get great UX.
I had the idea, that it would be great, if you could export your screens as HTML and CSS Markup. Because many frameworks today, working with HTML and CSS Frontend, for example Ionic Framework. That would be very nice, because then you can just import your generated HTML and CSS Files and you don't have to recreate the whole UI.

If you would like to have more information, feel free to contact me.

Best Regards

Brian Haller

The Basic version should allow to export a prototype as HTML site. So for example when I export a smartphone app I should be able to run the app fullscreen in my smartphone browser.

When it comes to multiscreen apps (e.g. a smartphone companion for a smart TV app) i need some method to sync events on both screens. (e.g. press the soccer button on the smartphone an see all soccer games available on the smart tv). While those scenarios are getting more and more and more relevant in many contexts (Smart Home, Connected Car, Multichannel retail etc.) they are still hard to prototype with todays tools.
My current solution is to develop single Prototypes with framer and organize global events via MQTT(https://en.wikipedia.org/wiki/MQTT). This works somehow, but it is still a programmers approach, where most VD's can't really work on a shared functional and VD prototype.
So ideally I would :
- Develop Prototypes for several Devices (eg. Smart Phone / Smart TV)
- Refine Flows and VD with VD and UX Designers.
- Be able to define shared events between both Prototypes and initiate state changes (If clicked this Button on the Smart Phone do this and that on the Smart Phone and the Smart TV).
- Be able to test the Flow on both devices (e.g. one window for Smart Phone one for TV)
- Export the Prototypes and run them Fullscreen in a Browser on different machines within a local network to be able to showcase, test and discuss the multiscreen experience.

The option to export a basic html layout would be handy, but the ability to export the text styles and color palette to CSS would be brilliant and save a lot of time.

How I would expect it to work? Well, Adobe Fireworks CS6 actually used to have that option to export a visual design to html and I haven't really seen anything similar in any of Adobe's applications, so I am still waiting for something like that (only with responsive options of course).

Fireworks made you choose a few options and the generated html, css and images for you.

Truth is that, at the moment, the one feature that would definitely convince me to put time in learning how to use this app, is if it could export html. That would be a time and money safer.

If Adobe decided to add that function to Photoshop in stead of ED, that's fine with me too.

I would want a page to be exported as html. For example, when i design a page for desktop, i would want to upload that on the website. Or lets say if I designed a responsive one page website (mobile, tablet and desktop versions) I would want an html for it, so that I can further use it.

It would be a fantastic workflow to do my UI designs in XD then be able to export to Muse, Dreamweaver, or even Animate for mobile app publishing...

Yes, i really need it!