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.
Jochen
shared this idea
317 comments
-
Anonymous
commented
I am a web developer with 20+ years experience. I don't do design work professionally, I write HTML, CSS and JS , on a daily basis, and integrate that into several different backend systems built in different backend languages (node, PHP, CF).
I have been using PS for decades to create mockups, and I am very fluent in PS, and I have recently tried to jump on the XD bandwagon.
I brought over a simple PSD into XD, and none of the text was formatted correctly with line height all over the place. The background layers were all wider than the artboard and so many layers were overlapping other layers. Every smart object was brought in as SVG, and I could go on, but these are the underlying reasons why this "tool" cannot and should not ever export anything made in it to any form of HTML and CSS.
The potential to do so much bad is too easy. If you wanted to force it to create an export, then you would need to drastically overhaul the way it creates layers and groups layers. You would need to add some form of DOM viewer in order to make sure that the "layers" are stacking correctly in the markup, and not just dropping in wherever. Ensure proper markup and responsive functionality, a way to add breakpoints when they are needed and not a fixed css framework like bootstrap et all.
I think the better approach, rather then force this nightmare of a design tool to do even more work and do it badly, is to simply allow import from XD to DW, and let DW figure out how it needs to be fixed. I have not used DW in about 12 years, as now I hand code everything, but I remember Paul Tranni showcasing some kind of PSD to DW workflow back in the day a few years ago, with some weird breakpoint tool.
Anyway the point is this is not the tool you want to use for design -> website workflow. this project should be scrapped really, as I still have to use PS and/or AI to create the assets I need so I can then import them into XD... why is that a thing... who thought that was a good idea? "I know what we need, another design tool so we can just make assets in PS and AI, and then import them into this new tool to display them!"... "Can't we do that already in PS and AI?" "Sure, but we need to up the price for CC, and this is a perfect justification for it; only this tool will be of lower quality and be harder to work with!" Thumbs up all around I guess.
-
Anonymous
commented
To make XD more robust and a fully functional product, it must be able to export to a fully functional site. Otherwise its a whitewash.
-
Anonymous
commented
If it possible for Adobe with XD to have a botton JUST ONE click you export my web design direct as a live website (html language) and it will save on Adobe server with monthley amount, let say: (15 $) to keep my website design which I did a live.
Because as me as a graphic designer I love XD because it shows me as "InDesign as example" what I do, so it will be better when I design a website to a client and he need it to be normal online web site for him. So if its OK for adobe to creat a botton, just click the program will translated into html or CSS.
Hope this happen. Thnaks Adobe you have a great programs, and am use it since versin 1 from InDesign or Photoshop, Illustrator too.
-
Remo
commented
It has to be responsive site with a complete underlying code
-
Joe
commented
Another way this could help is if you are able to port a design directly with Portfolio, perhaps by generating a new template from it and pasting the layout where it needs to be. I'm new to this product, new to Portfolio, but I abandoned a year sub with Wix once I realized the CC comes with these tools already. I understand there's a lot of complex trickery that must come with converting a fluid creative tool like xD to HTML. Appreciate your work on this product. Thanks!
-
Fernando
commented
"Design and publish" is what we need. Please bring back MUSE.
-
Kerry Jenkins
commented
I am still working with Muse and wish you would concentrate on that. It works for me and I don't need to pass on any work to a developer. Sure, developers would complain about the coding, I'm sure with reason. But the sites work.
Someone in this thread mentioned Webflow as the best alternative to Muse. That's great if you want to spend $12/mth for no frills basic hosting through them. I am spending less than $4/mth now and that includes my domain registration. Muse lets you export to html and upload to the host of your choice.
Either bring back Muse or provide publishing--without 3rd party add ons--to XD. If no one is concerned with a designer-friendly web solution, Affinity and Apple can provide my software needs just as well or better.
-
Harun Alikadić
commented
I do not think the need for this comes from the ambition to create published final web pages, I think of this feature as kind of "offline" backup of the prototype, for different sharing purposes. Yesterday a client asked me if they can have the prototype on an USB key, as they were presenting in a place with weak internet connection. A PDF export cannot showcase in-browser navigation experience.
I have tried Anima XD plugin, but I have to recreate the navigation, it doesn't recognise the XD prototype navigation. Also, the purpose of this plugin is to create fully functional publishable website.
InvisionApp has the option to export the prototype as HTML.
For dev specs and assets, cloud is enough, but for navigation in an offline environment, a static HTML, hyperlinked pages would be useful.
-
Mike Lapchick
commented
It makes no sense to waste so much effort in Adobe XD when, if executed properly, Adobe XD should be able to export fully functional web pages. It's 2020 and there is still no proper intersection of design flexibility and properly coded web page export which blows my mind. So many have come and gone – maybe it's just not possible.
-
Christopher Wood
commented
I would never dream that a prototyping tool would export and replace code that would be for use in a live setting. So all of the talk about dev losing their jobs or designers needing to learn code is a majorly visited and useless conversation... buuuuut our org and clients, and I'm sure most people are never in the same office. Exporting code that can at least work to post to a webserver giving folks a prototype to click around on in a browser does seem like a no-brainer.
-
Or Arbel
commented
You can export XD to HTML using Anima XD plugin :) (https://www.animaapp.com/xd)
-
Rafiq Khalifah
commented
I am a designer, the practice that I have when trying Adobe XD is very satisfying, many features provided are very helpful for a designer.
unfortunately when I export this in the form of html, css and js I have to pay dearly for the plugin. I have to re-code desian from the beginning, this is very very disappointing.
I hope Adobe XD can answer the problem of designers who don't want to rewrite their designs in code.
thank you
Rafiqkhalifah -
Gabe
commented
Back end dev are going to hate because they feel threatened. The world doesnt care. We want to hit the easy button and that translates to money. . Adobe is a business that wants to make $. If they do this it will be a great tool. Its evolution. Adobe is smart. They best get it done first but efficiently. It will happen. Its only a matter of who and when.
-
Rolen
commented
Even a simple export of all the artboards in a single view would be great as a start. It's useful to have an overview during workshop discussions.
-
Subyendu Ganguly
commented
If prototype feature cant convert in to HTML version so what is the point to spent time on prototype, if it is pose-able so so good to spent on time in prototype funtionality.
-
Urvier
commented
plese we needed please like adobe muse!!!!!!!!
-
Anonymous
commented
It's like when you mow your yard or paint, you need some overlap so that the work gets done. That's all we want with export features. There's a gap here that I assume typically no one wants to do.
My assumption of the problem that needs a solution is if a designer starts to code, he's not going to stay a designer, or even a front end developer, he is going to want to be a back-end developer. Front end developers aren't paid enough to stay front end developers for all the learning that goes into being a coder. Is there a developer out there who just wants to be a front end developer only? Maybe if your paid well and comfortable at a large company, but I'm sure you want to learn the back end, right?
As a designer as part of a workflow, I want control to have the design implemented the way I want it, but with room for the developer to change things so that it functions.
In Xd (or in a companion app, or plugin) I'd care about translating to html, CSS, Javascript - Navigation, deciding between modals or all new pages, responsive sizes, Animation, transitions, the look, the layout, the UI components attributes and animations.
I don't care if I drew up a map that eventually was a real google map. Who cares if placeholder elements get thrown away. I want an empty shell that can be wired up. If graphics and pages need to be thrown away to make way for the real google map, system response, I don't really care. Just export my shell that includes these things, and let the developers delete what they want, wire up what they do want, and use the rest as placeholder.
-
Aldo
commented
Adobe XD is such a nice application, but there is no web-enabled export function. I can work with prototypes for hours and hours and then have to start over again with programming in Dreamviewer. I would like to have the opportunity to publish my work as functional websites. That would be a killer application
-
SvenZ
commented
@ Sean Taylor-Leech, keep in mind that bigger companies are not able to use any external cloud solutions. How should they share prototypes for review?!
-
Sean Taylor-Leech
commented
I don't see the need for this. It's a prototype product not a dev build. More important features in the backlog for me.
