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
-
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
-
yann Le Coroller commented
Personaly, I'm dreaming of being able to save artboads as .xib file usable in xcode.
-
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.
-
Anonymous commented
look at something like zepplin or avocado or figma, this would greatly help anyone using this in the next step
-
Martin commented
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
Please do not transform Adobe XD into another Dreamweaver. I think generating accurate CSS for styles is good enough. It's probably better to allow third parties to develop plugins, like Adobe XD to bootstrap or Adobe XD to react. AirbNB is doing this for sketch: http://airbnb.io/react-sketchapp/. So open the API and let third party people do their plugins for specific cases. As a hybrid designer / coder I agree with some folks that creating good html / javascript via UI is unrealistic. Other stuff related to UI tools are way more important, and focusing on the core logic of the software. Photoshop was great for me for 15 years, but as people stuffed more features like 3D it became too sluggish and busy. As long as the apps can export/import or work in sync it's better to develop different tools, the same I don't expect photoshop or adobe XD to replace illustrator for complex illustrations
-
Yasin commented
I would approach this iteratively. html/css first as this seems to be easier, then for native mobile.
-
Love Adeola commented
Hello Elaine,
Well, to be able to generate style codes(HTML-CSS/XML/Swift)And also JavaScript for interactions and animations.