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.
i would like to be able to export all the pages into HTML and CSS.
To clarify this feature request:
Currently, the export functions only allow for the exporting of assets.
Missing, is the ability to generate and export the accompanying html and css code.
This code appears to be generated for the device as part of the share link, but it is not exposed to the designer.
Recommend that the html / css files be included as part of the export selection radio buttons. So, when you click "Export" you are presented with 4 options "Design, Web, iOs, Android". If the designer needs the supporting html code, there could be a check box that would enable the code export, depending on the platform chosen. This code can then be used for import into Muse or used for AEM Mobile to do application delivery and hosting.
Its very important feature, what if I don't have internet ??
HTML is a must have as prototype
Vesa Huotari commented
This is important feature for sharing designs to different stakeholders. Sharing results via Adobe services is not secure.
lindsay Branscombe commented
It is my opinion that adding a code export feature to this would simply bloat the software and duplicate functionality already existing on other Adobe apps. PLEASE keep this as a prototyping, user interface design tool.
Brady Georgen commented
This feature is actually a must if this product plans to compete with other rapid prototyping software (Axure, Proto, etc...). While you can share the output of this feature on adobe's site, this is not a viable solution for sensitive client information. I truly love this product and would love to be able to sell my company on using it, it just needs a feeeeeew more industry standard features.
Chloe M. commented
This feature shouldn't happen. In theory it's asking Adobe to help designers use developers less. No perfect software can spit out functioning HTML and CSS, nor should it attempt to. People are going to think it's good enough to make as a live site or app.
I just want to start off by saying I love Xd! It is solid! That is where my problem lies though. I have a client requiring me to work in Ps to design a site for him because of the current DwPs integration. Can we do something like this for Xd?
Brian Haller commented
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
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.
Jim Olson commented
"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.
Tim Child commented
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.
Clever Chap commented
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)
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.