It would be great, if you could create something like a one click export.
So if you finish your diffrent Views you can just export them as a raw HTML file with CSS linked to it. Maybe you know a similar feature in Photoshop CC. As far as I know you can copy the CSS of a specific layer to your clipboard.
I thought about something like that. The huge advantage is, that you only have to design one time and you don't have to export it and arrange it again.
If you do need more information feel free to ask.
Thanks for your interest and for your good work improving XD every day
Best Regards

Brian Haller

Anybody (old enough to) remember (pre Macromedia acquisition) Live Motion & GoLive? I recall creating fully interactive Shockwave pages which integrated with GoLive with a design and preview interface remotely similar to XD. Rapid development to site integration in a simple, powerful app.
Apologies if I am getting off track, but perhaps a look back at how they worked up until DreamWeaver replaced GoLive and Flash became more commonplace.
I would hope that if we get our wish and XD can export HTML/CSS/Js, that it does not require additional exports for various displays... one size fits all would be nice!

It needs to export to an interactive prototype that can viewed by other people who may not have access to an online file structure or one which wants to keep it internally (say on an intranet). Thus, there's 3 perfect (in my view) exports:

1. HTML / CSS / JS output - I can stick this anywhere, send it to anyone and with a browser they can see my prototype. FYI: Axure, Proto.io, and Principle for Mac already do this. I would love to be able to quickly prototype something and then add to it later in Dreamweaver or hand code. Pairing with PS or DM, this would be incredible to quickly export something useable for a dev team to then modify or adapt to their backend.

2. Interactive PDF - most everyone has a pdf reader, so this is an acceptable output. The problem of course, is that it's harder to edit than straight code. And not everyone can view interactive PDFs properly (preview on mac botches up, but that can be overcome).

3. Animated .gif or .mov file - This can be viewed by everyone. The problem here is that you can't edit it, but it's enough to explain to my dev team what interactions need to occur.

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