Export whole artboards (or entire project) as HTML
It would be great to Export Prototypes as pure HTML Projects. I am working a lot on Multiscreen apps, where I mostly use Serveal Webcontainers Running on several Screens, to develop those Applications.
Jim Olson commented
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.
Tim Child commented
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.
Malcolm Treseder commented
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 :)
Brian Haller commented
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.
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.
Paul Hutchins commented
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.
Marc H. commented
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.
Eric S. commented
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!
Not sure if it's already in the works but exporting files into Dreamweaver with links created and pages. This would reduce the time it takes to link pages and create a file structure for the project going forward.