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.
Hi, all-
“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.
-Elaine
-
Sam commented
This is the same topic as 'Export whole artboards (or entire project) as HTML' and even this topic says 'Feature needs more info'.
https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13057005-export-whole-artboards-or-entire-project-as-htmlI 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.
-
Pavel commented
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.
-
Anonymous commented
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. -
Anonymous commented
For us, VFL or constraints export would be a huge benefit.
-
Anonymous commented
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.
-
Greg commented
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.
-
Gonzalo commented
For me at least, HTML/CSS is the most important.
-
Scott Flatten commented
Exactly! What's the point of using the app if it doesn't save time with a great exporter?