How do you turn auto animations into viable code?

Community Beginner ,
Feb 23, 2021 Feb 23, 2021

Copy link to clipboard

Copied

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?

TOPICS
Import and export, Prototyping, Share or publish

Views

172

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Feb 24, 2021 Feb 24, 2021
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 ...

Likes

Translate

Translate
Adobe Employee ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 24, 2021 Feb 24, 2021

Copy link to clipboard

Copied

LATEST

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.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines