Participant

Answered

How do I publish an Adobe XD project to the web?

Forum|Forum|9 years ago
November 8, 2016
9 replies
177734 views

I am a bit confused with choosing the right product and of course justifying the annual cost. Muse it seems is on its way out, so is Dreamweaver the only option? I can get Muse if I google it but it does not feature in the Adobe list of products or under subscriptions. I found XD quite easy to use to build a site but now I am stuck on how to publish it. Please help.

This topic has been closed for replies.

Correct answer Preran

You will have to use Dreamweaver to convert your design in Adobe XD to a website. Adobe XD is a prototyping tool which allows you to create your initial design without code. After your design is ready, you will have to export your assets and recreate your design in an HTML editor.

Adobe Muse is no longer being developed or sold by Adobe. It will continue to be supported for its existing user base until March 2020.

Thanks,

Preran

P

Phill5FD5

Participating Frequently

Hi all - I want to point out that you CAN publish content directly to web via XD. But you need a third party tool called Tiled to do it. Tiled provide a cloud platform to create interactive content. However they only sell this to large corporates directly. Fortunately, we are an authorised global reseller of Tiled specifically tasked to work with small business, agencies and independant designers, allowing them (you) to procure Tiled on behalf of their (your) customers, then build and then sell their (your) services.

Examples of interactive content can be found here:
Clash of Kings Community Gaming Experience
Our Oceans In Peril (Educational Experience for World Ocean Day 2022)

These are all designed in XD and then built and published through Tiled. There is also a plugin for Tiled in the XD plugin catelog which makes moving your designs from XD and into working interactive experiences a breeze.

Please don't think XD is just for protoyping. It definately isn't - especially when partner with Tiled.
We re-sell Tiled licenses under monthly subscription to you and through you to you client - all design work you undertake is yours. We also offer training and support.

For the purists out there - no, this is not a fully-fledge code machine. Its not Dreamweaver. It was never designed to be. Tiled is designed to help designers to do what they do best and create. So can it handle data and build complex apps? Not really. But it can do most of what a traditional website can, just faster, easier, with more flexibility and with no code in sight.

Please get in touch.

T

Thomas5C2717777611

Participating Frequently

Anima will export Adobe XD Prototype to HTML/CSS once for free, afterwards there's a monthly charge. This program is now useful again. Yes, you have to pay more for the functionality, but at least it's a button click instead of waiting for it to maybe be what you expected via web developer (no offense to any web developers, but nothing is ever done perfectly, as stated in this blog, pixel dimensions, etc are an important aspect of maintaining cohesion between design and building and sometimes the translation isn't perfect) now you're in full control. I found this blog and the solution elsewhere so I thought I'd help out anyone else having the same problem I did.

Likes

fotoroeder

Inspiring

May I ask, if you (or anyone here in this forum) has any experience, if ANIMA works any better then the plugin of XD (Web Export)?

Thanks in advance and Kind regards,

Uwe

T

Thomas5C2717777611

Participating Frequently

I do not have experience with it, unfortunately, I haven’t used Anima yet, either, but I only recently found the information on Adobe’s own website and wanted to spread the good word because I, like many in these forums, questioned the need for a prototype program that gives no ability to export. Here is the link for the Anima Plugin explanation from Adobe and how you can download it directly: https://blog.adobe.com/en/publish/2020/04/29/anima-app-adobe-xd-plugin-design-to-code.html#gs.pzow4r

Hope this helps!

Thomas

E

ElmedinMemo

Participant

Muse: Design - Publish and your web is up and running. Update something and Muse uploads only those updated items. Super quick and nice for ONE pereon to maintan website.
XD: I undertand the concep of designing something and them coder has to do it to actually become a website. Explain me this: designer changes something every day... you need tgat coder every single time? Turnaround time will be at slowest. How many designers were actually happy after coder "simplified" their looks. Adobe is not very good at these things. Just look what they did between Illustrator and InDesign - almost nothing Those two departments cannot sync programs for the past decade.

K

Kenneth Kawamoto

Community Expert

> Explain me this: designer changes something every day... you need tgat coder every single time? Turnaround time will be at slowest.

That's why XD exists! Designer can change things quickly without coding actual thing 😄

Y

Yinka8657

Participant

Hello Great minds!

I am a newbie to the Adobe XD design platform. My Question here is, after I have finished my design and prototypes on XD, what next step do I take from there? I understand that all a developer needs to create a good and responsive website is are CSS code for text and shapes properties, and Exported Icons and Images etc... So I am asking, after doing all these on XD, what next do i do to take my design element out? The CSS, the Icons, images and others, that would be so useful for a developer to create a responsive project???.... Thank You! I need response please.

Chris W. Griffith

Community Expert

Once you share your design, there is a developer view. That view will enable them to do the extraction and inspection needed to build it.

andrewj710

Participating Frequently

Check out Quest AI plugin for Adobe XD in the Discover Plugins section. It lets you combine artboards into one HTML page directly from XD. Kind of a spiriftual successor to Muse as it lets you add video, animations, interactions, CMS, etc. But it also lets you host the pages you make from XD with it.

http://quest.ai

Check it out 😉

fotoroeder

Inspiring

Hi andrewj710,

quest.ai seems to be not too bad at first but getting deeper, one cannot download the code so quite useless except one takes the advantage of pinegrow, to name just the one I kind of know.

Pinegrow let´s you load a website as a project, save it, edit it and that should be just one workflow possible.

Of course it is limited in some space (50MB - free version) but maybe worth it to give it at least a try.

Kind Regards,

Uwe

A

AnotherMe

Inspiring

I'm learning how to use Adobe XD. It's a great tool! I have a few questions about this tool

After the Adobe XD prototype is completed and shared with the developers, what happens then? Do the developers take the information in the prototype and start coding around the information provided in the prototype?
Can Adobe XD be used for creating themes for CMS tools such as WordPress?
Does Adobe XD offer an export option to a PDF so I can use the information from within the prototype and use it for a case study either on Behance or my website?
I shared the Adobe XD tutorial to my Adobe Cloud. I opened it on my iPhone Adobe XD app. I see the XD file but I can't close the file shared. Why is that? What happens if I upload several Adobe XD files to the Adobe Cloud? Does the iPhone Adobe XD app allow me to view various projects from my iPhone? Am I correct, in that, the Adobe XD iPhone app is for viewing only? This would be the same for an iPad device, correct?
Can Adobe XD be used for designing prototypes for Adobe Captivate and Adobe Animate?
Can Adobe XD be used for desining page layouts for Adobe InDesign, or is that not the correct way to use this tool.

craigc62986038

Participant

I am familiar with the ability to export the mockup as a pdf or svg to be "cut up" into code by an outsource service for $800.

Is there anything other than doing this?

Can I import my UI into a more advance tool that writes code automatically?

What do people normally do after you are done with your design?

Give it to a developer?

Do you take it to the next step an dump it into InVision or Axure? Others?

BTW, my design will be used for a webapp first.

craigc62986038

Participant

Bueler?

C

carla45979755

Participant

Hi Everyone

I have been forced to move to Dreamweaver to re-do my website, which is a complete pain in the arse. Apart from anything else, it randomly crashes on me, both at work (separate account) and at home. In addition, the CSS Designer disappears whilst you are typing. Dreamweaver also tends to stall for no apparent reason.

If you are going to have to learn HTML, CSS, Javascript, PHP, why bother with Dreamweaver, it is a bloated piece of software that does exactly what free software like Compozer or Visual Studio Code do. Where I work, we had less problems with teaching people how to develop websites with Visual Studio Code than with Dreamweaver, and it is Free.

With regard to @BurkeAD comment "...with XD or pen and paper..." that tells me that it is not a worth while piece of software to purchase if pen and paper can do the same thing. That is now two pieces of software that we are paying for in the Creative Cloud package that are actually not worth the money. They are little more than fancy padding for a simple function.

The question we are asking where I work is..."given what I have said above, why would we purchase Adobe over other software?"

Carl

BenPleysier

Community Expert

XD and Dreamweaver can be likened to an architect and a builder. The builder does not design and an architect does not build.

Edit: I have tried numerous other products including Visual Studio Code and, over the past 20 odd years, have always returned to Dreamweaver.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

C

czytagramy

Participant

Architectural design and building construction are physically different worlds. In case of website, all can be done in the same environment. Adobe Muse was an example. Since more than a decade dozen web design apps have worked in WYSIWYG mode and generated code as well. Adobe has just made a step back. That is why I have turned to another app developer after Muse dead.

petra.c.e0822

Participant

What have you all done after creating the XD prototype? I feel like I've got it where it needs to be but I don't know what to do next? Do developers take these and create the app itself?

Very new to the app industry. Please forgive the elementary inquiry.

K

Kenneth Kawamoto

Community Expert

Do developers take these and create the app itself?

Yes - you can send the design spec and exported assets (or XD file itself) to developers.

Preran

Correct answer

Community Manager

You will have to use Dreamweaver to convert your design in Adobe XD to a website. Adobe XD is a prototyping tool which allows you to create your initial design without code. After your design is ready, you will have to export your assets and recreate your design in an HTML editor.

Adobe Muse is no longer being developed or sold by Adobe. It will continue to be supported for its existing user base until March 2020.

Thanks,

Preran

C

carla45979755

Participant

Hi Preran

Given that we now have one less piece of software in the Creative Cloud, and that it has been replaced with a piece of software that essentially replaces paper and a pen, nothing more (Adobe XD), will be be getting a reduction on our fees? Can you explain why so much time and effort is being put into a piece of software that - despite all of Adobe's hype - doesn't really do that much at all? Is it because someone from management has a bee in their bonnet, blinkers on, or has a financial incentive?

Honestly, why on earth would someone waste so much time developing the website with XD and then have to REDO the entire thing again to make it live?

Seems like a completely useless piece of software to me - and for your management guys --> Corel Suite and Webflow are a cheaper alternative, and one that my school will be seriously looking at going forward.

elainecc

Community Manager

Just to clarify, XD was never intended as a replacement for Muse. Instead, XD was created for the UX/UI designer, who needs to rapidly iterate and test designs before it's ready for implementation by a developer.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded