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.
Tom Clements
shared this idea
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
43 comments
-
DrMissile
commented
“Convert to code” isn't ambiguous at all - Do a comp analysis, copy your competitors.
-
Ealyn
commented
Hi, I'd love to see conversion to HTML/CSS. I recently worked on a project and the developers asked me about the specific CSS background-gradient property and we couldn't find it in the shared file.
Thank you a lot for your work!
-
Andrew
commented
Check out the plugin Quest AI for Adobe XD.
http://www.quest.aiIt lets you convert different sized artboards in a single XD design doc into one single responsive HTML page without coding anything. Also, it is free. Find it from "Discover Plugins" in XD.
-
Kate L
commented
Specifically HTML/CSS export. To save the need for yet another tool like Zeplin.
-
Blake Barr
commented
I believe what is being asked for is the ability for XD to export out as HTML and CSS so that we are making actual product, not just prototypes that we then have to figure out how to create again somewhere else. These aren't wireframes. We are going through the full development process for something that cannot be used.
-
Julien Desmettre
commented
I see that plugins already exists to export Symbols as React Components. I guess it would be possible to do the same with some other libraries or framework like Vue, or even basic HTML/CSS, JS for responsive behaviours or animations. Even ( and that would be best ) a plugin for every platform ( iOS, Android ). Of course it seems impossible to export a full functional app, but sure it's a time gain for developers, as half of the front integration work would be done. Sure this feature is the future of the frontend, and i hope a near one.
-
Brent Zabka
commented
Hi Elaine. Your software brilliantly allows creative types (that don't code) to create functional app prototypes usable on an iPhone or Android. Given the ability of the prototype to function seamlessly on an iPhone or Android device, why not give us the ability to offer the app on the App Store or Play Store? In our case, we are providing information pertinent to the fight against Alzheimer's. Our prototype is built, but XD is not providing us publishing functionality. Would you use our app as a Guinea Pig???
Sincerely,
Brent Zabka, President of Arbor Rose Memory Care Homes
-
Tyler Moore
commented
"Convert to code" is fairly ambiguous- translates to the fact you understand what the customer wants, but would rather keep being lazy and not seek innovation. I agree with @Sam below.
Where is the scrappy startup spirit of Adobe? Way to completely disregard this issue. Also, way to motivate up and coming developers to work harder than you, and smarter than you, to possibly fixing this issue instead of killing the discussion.
-
Erik Demule
commented
The future of XD is to get the possibility to generate the final application (source code) from the prototype (for all platform): that is the future or programming industry and UIX. Like the company creolabs.com starting to trying to do.
It's not possible that Adobe doesn't think about that! I hope this day will come quickly... -
Anonymous
commented
HTML/CSS!!
-
Best Of All Films
commented
Currently i was working on similar plugin once its done it will available on plugins store
-
Bobo
commented
It is interesting if there was the possibility to publish the project on a web domain in possesion or on a domain created by Adobe, as in Adobe Portfolio, without codes, like Adobe Muse.
-
David Bonnabel
commented
TJ,
You might want to look into services like Zeplin.io for that service. At our company we have adjust our workflow to XD design / experience and then to bridge to dev we use Zeplin to export code, style guide, coponents and images. We have had great success with it and our devs really find ot useful and saves a ton of time.
Cheers,
David -
TJ Zafarana
commented
Hi Elaine,
We're starting to use this at my company and have had some feedback on the Publish Specs option from our dev team. It appears to be causing more work for them. I believe all the information is there that is necessary for them, but laid out in a way that doesn't make for a fast + seamless build.
They think it would be useful to:
Cut out icons, and use css syntax (aka no tracking icon, use text instead)
Make attributes copy and paste-able
Export CSS?
Export HTML?A few changes would go a long way. I think the current build of publish specs focuses a bit too much on the design workflow rather than the code workflow.
-
JA
commented
Hi Elaine, I think there are a lot of good comments here, but the main point is that there are limitations with any third party integration, but the publish link makes more work for developers. My developers are used to slicing a PSD file (I believe that's what they do...I'm no developer) and exporting as PSD isn't an option so they had to learn XD and some integration that works on windows....when I work with my designers who work on mac osx.
I have no doubt that as XD gets more robust it will allow developers to see the ultimate goal with sticky headers and transitions in prototype mode, but getting the html code out of XD will always be the ultimate goal and must be a much more significant amount of the effort spent in upgrading XD itself. Especially in lieu of paid third party integrations.
-
Siddharth
commented
Generate Web-Ready code
It will be nice to get web-ready code like Muse does from XD. And if possible it will be nice if we can generate Android & iOS native apps.
-
Siddharth
commented
It will be nice to get web-ready code like Muse does from XD. And if possible it will be nice if we can generate Android & iOS native apps.
-
Wil
commented
Hi Elaine, Just adding a bit...
Perhaps more of a generic html/css export may be useful. Since devs will be using varying approaches and frameworks, it may be more useful to give them basic html/css for asset layout and styles from which they can pull the code they need. No matter, a dev will always have to improvise but having something to start with can speed up the tweaky work. :) -
Paul Mackinnon
commented
I mentioned this in the feature request for HTML export...
You should provide a comprehensive extendscript API (like other Adobe Apps) but comprehensively so that developers can write some Javascript to export the data they require
So rather than field further info on what formats to export etc, just give the power to obtain the data and let third parties develop the most requested plug-ins
-
Anonymous
commented
At least offer css