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.
-
Anonymous commented
I will echo all the other comments. Whatever application I choose to replace Muse, I have to be able to export to HTML. My company is dependent on this functionality in Muse for vital projects. I am not happy that Adobe has provided a program with this functionality and is now ending it without announcing how it will be replaced. Adobe has placed me, my team, and vital projects of a Fortune 100 company in a tough position. If Adobe does not add HTML export functionality to Xd, or come up with another equivalent design to HTML solution, we will have to adopt a solution outside of the Adobe software suite. We need to find an answer, or know that one is coming from Adobe, very soon as we will need to convert all the muse files we are using and re-educate our artists in the new program as quickly as possible. Our timelines can be as much as two years out, so we basically need to start changing over now (or at least within the next six months at most).
-
Benjamin commented
Unfortunately, for me, I began learning how to use Muse far too late. I had only just become sufficient in the software when the news that Muse would no longer continue service had arrived. As a designer, I do not know how to code, and Muse was a beacon of hope--a shortcut on an otherwise lengthy and uncompromising road. I don't want to learn code; it's awful. In fact, learning to code is my worse nightmare. I recognize the incredible talent involved in that world, and I also recognize that some people love to code; however, I am not one of those people. I wish I was; I really do, but I am not, and judging by this thread, it looks like I am not alone. I have no idea what it takes to make features like exporting or converting the prototype of a website's design into a real, functioning website, but I do know Muse can do it. So I know it is possible. My question is this: How far away is a function like that from becoming reality? Should I begin to learn how to use Dreamweaver? Or will there be an update that allows for the exportation of XD files as html files somewhere in the near future? Thank you.
-
Anonymous commented
I think a great benchmark for Adobe, would be taking a look at Webflow. I would love to see this integration in XD. To be able to switch from design to code to edit css or html would be awesome! Combined with the powerful tools that already exist in XD this next step would be amazing to see.
-
Anonymous commented
At least provide a CSS code. What does FEATURE NEED MORE INFO means..read comment yhen yu get the INFO
-
Sheryl commented
Designing for prototyping is wonderful, but if you have what you need when done just allow us to take it to the next step of exporting to html and css. If you don’t allow us to go that route I see XD failing for this one reason. “We have now spent double the time on a job that we can’t justify billing it out to a client.”
I just started using XD to design layouts for APPs and websites love the added bonus testing function which you can’t do with Photoshop art boards. But as my boss said we can’t bill that time to the client. The client doesn’t understand why it can’t be used as it is because it works.
-
Anonymous commented
Hello there,
Tricky thing to achieve as we don't all code the same way for the same purpose... We could have instead something a bit more advanced than Zeplin but with the same spirit.
We could have:
- If possible, each XD element has an associated HTML, otherwise default is <div> (e.g. Text element = <p>)
NOTE: What about inputs? Select? Buttons? We might need special symbols- A group is considered as an element
- If modified by the user, the name of the XD element becomes a CSS class. In the styles, this class is added to its tag (e.g. p.myNewName or div.myGroup)
- By default, all the elements should be position: relative, then allow the user to use exceptions.
- Use flex as much as possible as it's the most efficient way to reproduce design layouts.
The FEATURE-NEEDS-MORE-INFO is quite confusing though xD what do you mean guys?
-
DHILIP KUMAR commented
I now use Adobe Reflow to create clickables to show them as .HTML files
# It Would be soo nice to Export Work As .HTML without needing to publish it on adobe
-
Vishnu commented
The time of designing and writing HTML+CSS is coming to an end. It is high time we are able to export designs to html+css(atleast) so that we can concentrate on better things.
- Front End Developer
-
Paul Mackinnon commented
another option I just thought of would be to facilitate exporting appropriate data, e.g. as JSON.
The rational is that you have expended effort on design, but now you want to flexibly reuse the information such as position of elements etc. It might be for web, but could be for another platform such as iOS autolayout constraints, etc. That data could be very useful to the production line
So why not include a JS API in XD (extendscript) and include all useful data in the API. From there it would be possible for developers to produce plug-ins that target specific uses (ANdroid, iOS, Windows, Web, whatever comes up)
Then, the most requested features i.e. Web, could easily be included by Adobe, or open to third party developers to sell
So, actually a few of suggestions:
JS API (extendscript)
HTML, CSS export
XML export
JSON exportFull Website export (for convenience)
Essentially most of the exports would be easily facilitated via a comprehensive JS interface in the XD application - to be clear that is JS that runs in the native XD app, and would also facilitate import, and other customisation of the XD environment
(in contrast JS that is intended for the prototype is a different feature, and may be relevant to other feature request such as custom widgets etc)
-
Timo van 't Wout commented
I see this feature getting requested quiete a lot but 'FEATURE-NEEDS-MORE-INFO'.
So a little explanation:
I think(and many others) since Adobe Muse is going to stop, it's a great idea to let people export XD projects as pure but simple HTML & CSS code. And it should be easy to adapt into any web project from there. But do not make every rectangle, circle, etc a picture.Maybe people have to choose from the beginning if they want to make a UI design or a website. Or under the export tab.
How it could look when exporting the file under the export tab(see attached file).
Sorry for my English..
-
Paul Mackinnon commented
option A : It would be handy to export an artboard as simple HTML layout with assets, and simple CSS. i.e. if just the static layout as HTML it should be easy to adapt into any web project from there.
(Another option is the working prototype as functioning with JS for controlling the transitions, etc. But that would not be easy to integrate with another web project)
So I would quite like the simple (option A) type of export.
-
Clayton commented
Call a front end developer
-
Anonymous commented
I actually enjoy using Adobe XD but it is such a pain having to redo designs.
-
Sam commented
With muse being killed off, how is a designer supposed to build a website? It is essential for me to have the ability to create a website with full control of the design without having to then program it from scratch to make it work.
-
Anonymous commented
Absolutely .... with the end of the adobe muse it is very very important for us to do the export to html ... please ...please .. we are desperate with this situation that dobe created to us with the end of the adobe muse... .. .. another thing I would like to mention here once and for all to the puritanistas of the code ..... we are designers not produce code and we are not interested in it .... we are rather interested in producing good drawings .. ..... only ... NOT CODING ...
-
Jacquie T commented
I love using XD but it forces us to either outsource the coding or redo the layout once finalized in Muse, export to html and again redo the styling. It needs to either easily integrate with another app like Dreamweaver.
-
Anonymous commented
publish prototype specs(Beta), if we can open this directly in Dreamweaver it should generate code(HTML, CSS) automatically, in future
-
Anonymous commented
Add my comment to the list. Xd is simply a waste of effort without the ability to export to html or otherwise publish the results. Cool is not cool without a real purpose.
-
Niklas Schr commented
Please add this as fast as possible. This feature is something that could really accelerate development a lot
-
Sean commented
With MUSE going away, and with competitor UI design software having this functionality, it needs to come to XD.