CONVERT TO CODE
We seriously need to be able to convert our designs into code, just like sketch and invision can both do. This is the only thing holding people back from joining xd.
“Convert to code” is fairly ambiguous, and I’m looking for more specifics as to what you’re hoping to get out of this. We already have a number of stories that go to specific technologies: HTML/CSS, XCode, Android Studio, etc. I’d like to close this one out in the interest of having more specific export paths.
John MacDonald commented
As another hybrid designer/developer, I agree with Daniel Vianna's comment. Other than CSS styles for assets, I cannot imagine that code exported from Xd would be terribly helpful to a developer, particularly one who is working with a front-end framework or library and would need to map Xd's export to framework-specific structures and classes. Yet, there is a real need for a more efficient loop between design and development. Much more useful than code export would be code import. I would love to be able to import components from my code library as Xd assets!
Michael Reynolds commented
Why do we always want bloatware then when becomes bloated we complain? XD is fine as is needs a few things here and there but work beautifully.
Chelsi Peters commented
My company won't be able to use Adobe XD unless there is the probability of exporting to XML. This feature much like the password protect feature of sharing online prototypes is a must for it to be of any value to multidisciplinary teams. We don't need another Dreamweaver which already does CSS, html, etc. I would rather see Dreamweaver get some of the tools/features that Adobe XD has then to make XD a glorified version of Dreamweaver.
look at something like zepplin or avocado or figma, this would greatly help anyone using this in the next step
XML export would be very useful for Android Application Development
Alberto Quinto commented
I think that the require is in line of your declaration @ https://theblog.adobe.com/whats-next-for-adobe-xd-cc/
to take at first the feature of Sympli, in which it's possible to read the CSS parameters of the objects , feature present in many other Ux/Ui tools like Figma for example. It's not for programming, but for collaborate with developer.
The second step hoply will be export css/html separated file.
Daniel Vianna commented
I would approach this iteratively. html/css first as this seems to be easier, then for native mobile.
Love Adeola commented
Well, to be able to generate style codes(HTML-CSS/XML/Swift)
This is the same topic as 'Export whole artboards (or entire project) as HTML' and even this topic says 'Feature needs more info'.
I think Adobe admin know what this means and they also know how much work it would take which is why they are not logging it as a feature any time soon.
Matt D commented
As one who codes, I am always concerned with page load, DRY, using preprocessors for HTML and CSS, using grid systems, scalability/refactorablity etc. I consider this the 'professional way' to build an application code base. For a Adobe or any other design application to be expected to do this for me via 'generating this type of source code' seems like a very unrealistic expectation therefore I am just fine with you guys focusing on more UX focused features such like video recorded user testing session. Basically, let's keep UX tools UX tools and coder tools coder tools.
Just CSS / SASS / SCSS export for example would be great deal, even Photoshop already has CSS export of selected layer.
Stephan Lenting commented
I disagree, don’t build this feature, our coders build way better and cleaner code than tools like Sketch or Invision provide. Let development be development!
Chelsi Peters commented
I'd like to add that export to XML would be extremely helpful to my company and potentially get buy-off of more XD licenses for our systems engineers. Not being able to convert to code is a road-block.
Just something that will ease the transition of design to build like Sketch has done would be helpful: https://www.sketchapp.com/docs/exporting/code-export/
For a full scale css/html export consideration would have to be given to how responsive layouts work. Perhaps artboards in XD could be connected e.g. Desktop-Tablet-Mobile and the export code would work out the break points for each style attribute for any given page.
For us, VFL or constraints export would be a huge benefit.
After creating the app in XD everyone has to start from the beginning to REWRITE THE WHOLE APP in another software/framework.
It would be great to "export" the app and have that framework just created by XD. So the css, js (transitions) and the html with embedded pictures, logos, etc. would be created and could be used to compile the app right now in Xcode or on the other platforms.
Just add database connections to get or send data and everything is fine.
Also most of the customers are irritated that it would be months of work after seeing the "working" XD-app.
It seems to me that this is referring to something like "Inspect" mode in InVision. If so, I 100% agree it needs to be there.
There is another request with more traction and currently in Development, though. https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12951915-generate-specs-measurements-style-guide-for-de
Can't wait ;)
Fábio Leal commented
These guys can't even make f*-ing guides and layout options. You really think they gonna put code generation in it? Worse: would you pick an automatic code made by an Adobe software? If you come think how their software is buggy and poorly made, I wouldn't even consider picking a hand made code from them...
JL Garcia commented
Let's say that you do a prototype application, the client is happy as is. Next step is to convert the exported from Adobe XD png pictures to html, css and js. That is and extra step. So, conver to code will be instead of exporting to png, that the output will be html, png where necessary(graphics), css, and js. Minimal if you like, but enough to get that code and connect with databases, edit and add some js scripts, etc. The main goal will be not to re do the app in another software program. If you export to png as it is right now, you have to re do the app in dreamweaver, or any other code program from scratch using the png's as guide only. That way, Adobe XD seems more like a waste of time instead of a saving.