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.
-
Khalid Hasan Zibon commented
I think he is requesting something like Sketch Measure plugin that can generate Design Specs in HTML / CSS so that the development team can open it in a browser and click on individual UI elements to see it's size, colors, font name etc.
To understand it better please try Sketch Measure Plugin for Sketch.
-
Anonymous commented
I'm creating a very basic navigation project in XD. The prototype works perfect and i don't need any other code added to my project. I just want to be able to send my client a document that looks exactly how it looks when i view the link. I tried exporting to PDF but the images are downgraded and look bad. There needs to be a export to HTML option.
-
Sai Naveen commented
It would be awesome to have export options to HTML/CSS
-
Visingo commented
It think it should be more like the web app https://webflow.com/
Why?
So that you have in the end one program from sketching over prototyping to production. -
Emron commented
This product is amazingly fast and intuitive. It's perfect for my needs of just prototyping the experience and flow of the interface. The only problem I have is that I cannot share my work which is confidential to the freaking internet through adobe servers. I need it to be secure, I was so excited when I found out about XD but now I'm sad because I can't really use it with my clients fearing a leak. Please let me export to HTML for at least confidentialality.
-
Seb commented
The problem XD should solve, in my view, is the following: Prototyping a product user experience that both looks and feels realistic, is very time-consuming, and costly today.
If you want the best in design tools and prototyping tools, you have to purchase two separate tools. Today the best design tool is arguably Sketch, and on the prototyping side, I think the jury is still out, but Justinmind is definitely in my top 3, and as soon as Invision Craft Prototype is launched, I think it will make it in my top 3 as well. Most decent prototyping tools out there now integrate with Sketch anyhow.
Back in the day, I used to design with Fireworks, and prototype with Dreamweaver. But the tools got clunky over time, especially with Dreamweaver. And then mobile came along with its touch interfaces and animated transitions, which Dreamweaver was and still is ill-equipped for.
So I 100% feel that XD is the potential solution to the problem, if the Adobe XD team can stick to the charter of truly optimizing for flow - which is to let us designers do our work as quickly and efficiently as possible, without slowing us down unnecessarily. Performance will be key, as will simple things like keyboard shortcuts, and more complex things like content auto-filling. Advanced prototyping features like text entry boxes, data-binding, etc, will of course be excellent, but they have to be as easy to use as possible - because otherwise I think people will probably stick to whatever tools they are using right now - because they've built up proficiency with those tools over the years.
In terms of what XD outputs - besides the intended user experience of a given product being designed - I do agree with other commenters regarding HTML or code output, but with one caveat: Whatever the output, it has to be truly embraced by developers. I still haven't met a single UI developer that likes to work with the generated code from Dreamweaver for example. That said, I've seen some level of success from tools like zeplin.io. So perhaps XD can start there and output CSS and artwork files that the developers can make use of right away, and perhaps later XD might be able to generate UI code that most developers could reuse without much hassle.
Not sure if that makes sense to everyone, but it's how I'm seeing XD as a potential major disruptor in the realm of UX design.
-
Mike Mourton commented
It would be nice to have a complete solution from design to production.
Photoshop -> Xd -> Dreamweaver
-
T commented
Yep. John Haxon below summarised it beautifully.
Adobe XD doesn't actually solve any problems. Why does it exist?
Give it purpose.
-
John Haxon commented
I fail to see the point of this software! It's like eating a KitKat with the wrapper still on.
You spend time and effort designing your app in Xd, then what? Look at it? Pat yourself on the back because you've designed a beautiful app that you can't actually use? No, once you've designed said app, you have to go right back to square one and do it all again in someone else's software. Brilliant!
I think this would be a brilliant tool, IF, you could export your designs to Xcode. Currently this is 50% of a complete package, a half finished product.
So come on Adobe, finish the job and let us eat our delicious chocolate biscuits in the way God intended.
-
Anonymous commented
t would be great if we could export a HTML/CSS file that we could import in lets say... Muse, or Dreamweaver and then continue to work on.
So far, we are creating prototypes and there is nothing we can do with it. We can export assets, but we still need to "build" it all again if we want to develop an app or website.
DOUBLE JOB :-(
-
Will B commented
So great to see so many people requesting this. Why build in so many tools and then have to start from scratch with each tool when all of the tools are already in theory integrated. From a design-release workflow perspective, it makes so much more sense to prototype or layout in one tool, then prototype in another, then move straight to code and deploy.
Come on Adobe. This has to be a killer feature.
-
Gwen Ivins commented
This would be a huge time saver. Exporting specs and assets is one thing, but getting directly to HTML or CSS is an even faster route to get your projects from design to build as efficiently as possible.
-
Caue Marganelli Stella commented
Its really good to have a prototype fully working.... But there's nothing we can really do with it.
It would be great if we could export a HTML/CSS file that we could import in lets say... Muse, or Dreamweaver and then continue to work on.
So far, we are creating prototypes and there is nothing we can do with it. We can export assets, but we still need to "build" it all again if we want to develop an app or website.That would make our lives 10x easier. Thank you!
-
Jean Felber commented
It would be great to export as HTML so it is possible to use PhoneGap Build so I have an app for my sales colleagues. In that way, I don't need to run it through Dreamweaver or Muse......
-
René commented
Export as HTML and CSS:
In almost every design project I've to deliver a design/style guide for devs. What they need is not a well crafted and printable pdf. This is what their bosses think they would need... They need all pages and the including elements described by HTML and CSS.
So it would be great if classes and ids could be assigned to elements and afterwards hit an export button to get HTML and CSS. -
Anonymous commented
i would like to be able to export all the pages into HTML and CSS.
-
Facu Puig commented
Kriszti just nailed it, why start all over if you already did the most part. Maybe starting in Photoshop, then move to Xd, then to DW.
-
Kriszti commented
In my organisation I'm solely responsible for prototyping and creating the finished published product, so there's little point in creating the UI in XD then having to start from scratch to create the whole thing again in DW. With tight budget and time constraints there would be no support for that. Please allow export to html!!
-
jameel commented
i would like to be able to export all the pages into HTML and CSS.
-
Greg commented
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.