How do you turn auto animations into viable code?

[Miraud]

The auto animate feature is really fun in XD, but as I google about for how to turn those into viable code, I’m not finding any resources on how to do it.

So what is Adobe’s intended workflow in giving us auto animate? The Specs/Variables information is essentially only about placement, so what is Adobe’s development vision for these interactions?

Somehow export items as HTML5? SVG? Animated gifs or APNGs? HTML with <path> and <animate> classes..? With what tools, apps, workflows?

Surely the answer is not “that’s not XD’s problem, because it’s just a prototyping tool.” What would be the point of giving us a tool that can’t be developed – or at least, can’t be developed efficiently and with basic standards or workflows? That would lead to increased project costs, frustrated interactions between designers and developers, and unhappy clients – surely not what Adobe wants for us.  So again, what's Adobe's anticipated workflow here?

Either way, what are all of you using? Any tools or tutorials you’ve seen or have worked for you and your developers?

[HARSHIKA_VERMA]

Hi Miraud,

We understand your concern. We had a similar discussion happened in past here: https://community.adobe.com/t5/adobe-xd/how-to-export-html-css-javascript-from-adobe-xd/m-p/10771556

Would you mind taking a look and join the discussion and see if the plugin suggested helps you?

Thanks,

Harshika

[Dan Rodney · Accepted solution]

Architects use CAD apps to design buildings... yet those designs are not the actual buildings. No one expects an architect to build the building, they only expect them to design it. Construction firms and workers build the building (and need engineers to make sure they won't fall down).

The same goes for digital design. There's a HUGE difference between designing versus coding a website/app. XD is a design app, not a coding app. Custom designed websites/apps are then handed over to coders who build the functional website or app using code (something written and not output generically from an app). This has been a standard practice for as long as I can remember designing websites. This has been the case when I've designed in Photoshop, ImageReady, Fireworks, Sketch, and XD. There's nothing new about this workflow, and Adobe has provided a design app with XD that actually helps make designing easier, and XD's design specs makes it easier for developers (coders) to look at those specs and then write the required code.

This discussion has been going on since the invention of websites. Designers want to design websites and would like their design app to be able to produce a functional website. I'm sorry, but it's just not that easy (I honestly wish it were though). Apps that make it easy to design have never produced good code, and apps that focus on code don't make it easy to design. There are very different environments with unique challenges.

For animations, there are many different ways they could be built, such as animated GIF, coded using CSS or JavaScript (there are many different JavaScript libraries to choose from that developers may have opinions on... such as GreenSock, React, etc), or a video could be used. In other words, there's too many options to choose from so Adobe can't really make that decision. It's up to the developer (coder) based on how the animation will be used. Animations in a website or app would be built differently. 

I hope that explains why XD is a design app, and it's not Adobe fault that websites and apps are complicated to make. There are areas in which XD could help sometimes (such as exporting an animated GIF) but those aren't always what we want, so it's not something Adobe can solve completely.