Animate individual elements separately (custom animation transitions / microinteractions)
Support for simple animation.
Example: Show/hide a slide or push menu
This would enhance a demo and engage prospects that are familar with common application patterns.
Reopening the feature request, based on feedback.
it would be nice to have layers for each artboard, and you can choose them when to show and animate them within the same artboard, such as how hamburger menus slide in from the side, on the same artboard, or like lightboxes, also a gradient feature would be nice
Thanks for your feedback. More controls over animation is certainly coming. We are planning to first introduce scrolling of prototypes and then more controls over changing the state of objects in your artboards.
Please continue to comment with your particular use cases that you would like to see supported with regards to animation support.
Most transitions from screen to screen are global.
In reality you probably want to animate only the relevant part of the screen to ensure the user that not the whole screen changed but just a small part. This would be facilitated by custom size layers which can be accessed by the wires and allow for custom transitional animations for each layer you want to access.
To help with understanding here is a rough draft.
Advanced interactions and behaviors as in Director,Flash,Axure etc.
This may cross into design / prototype
One of the items that is most annoying is creating a series of
duplicate art-boards just to illustrate a micro-level interaction / animation.
As a user I would like to be able to in design mode apply an event and have the event triggered when the appropriate prototyping option is chosen.
1. The ability to select an object and choose a single state event (tap, long hold, etc..) and apply a secondary state interaction (possibly not as another artboard).
This could be as simple as applying a ripple animation to a tapped object when the prototype is interacted with. This animation or state is meant to be part of the product and not just for "show".
2. Bonus points for the ability to customize (later our own state change level variations.
Kelsey Hemphill commented
The way that principle does this is my favourite, and avoids a lot of the tunneling-into-a-complicated-prototype issues that come up with Axure.
In principle, just keep the layer names consistent across artboards and the element will animate to it's next position automagically.
If adobe XD had this feature I would be thrilled.
Sean McNulty commented
The option to create custom segue animations would be great. Even if it's just having control over opacity, position, and scale. If it had an animation curve editor (like in After Effects), that would be even better. This would allow prototypes to have more individual character.
Steve O'Connor commented
The reason I need to create prototypes is to get both my team and clients to understand the difference these micro interactions can make, and to show how they work. They create context and an app's personality.
They understand screen transitions, it's the details that require prototypes.
I agree. Sometimes you can easily make beautiful animations using Principle.
Please see below ref -
XD should have these animations function, its so useful and important to express UX capability to Client, Customer or Team. It will not only help them understand the flow, but can easily help to understand how the basic animation is enhancing the UX of final product.
Be able to add animations that occur within an artboard (not just artboard to artboard). Examples: accordion as is opens/closes, modal appearing over part of screen, dropdown opening, input fields, buttons become active, etc.
Dimitris Katsafouros commented
At the moment it seems like the tool is targeted more to simple click dummies for people building something very specific. Websites or really simple apps. We're missing quite a few other markets that could benefit from this type of tool. For example creating user interface prototypes. Complete with custom animations and complex interactivity.
What we're missing.
In order to do these custom animations and interactions we need some form of timeline. And we would have to have the ability to have multiple ones.
That means the ability to have multiple timelines for each artboard triggering animations and interactions and also timelines for each object.
Also have the ability to set markers to pause, loop and backwards play these timelines.
2) Trigger events through stackable actions
For example we could have an action being triggered when something is clicked. But it would also be good if we could also stack another type of action on top of it. For example an animation happening on another part of the screen.
We also need hovering in and out actions, ability to have the user move elements of our artboards with stackable actions and so on and so forth.
3) Ability to group objects together and assign other actions on top of it. So the individual elements could have some actions assigned to them but the group could have another action driving something completely different.
4) Ability to animate all parameters. For example size, color, opacity, rotation, are the most important ones.
Tumult hype is definitely a product that should be looked at on how interactivity is approached.
This is just scratching the surface on what can be done here. Through this functionality we will be able to have rich prototypes that go beyond simple click dummies.
Andy D. commented
Be able to integrate with or embed/integrate micro interactions on forms and scrolling actions.
Craig Reidel commented
Even if XD had animation support/controls like Keynote, I think that would be enough.
Vidhunnan Murugan commented
Also Animate CC integration or import support
Vidhunnan Murugan commented
Support for more animations
Example like popup menus, sliders or animation while touching/clicking
and for interactions like single touch/clicking, touch press, sliders
THE ONE feature that's missing in all other UX tools, is being able to add custom animations and transitions between artborads and their layers/elements.
please please integrate animation here through either AE or Edge... I can imagine marking the two artborads here, hitting "animate" which will create a ready-to-go AE or Edge file, where i can create the animation ans save. While in prototype mode i can just play, and the animation will render from that file directly here...
Ability to animate icons or buttons in prototype mode.
Arthur Dickerson commented
I'd like to be able to transition an item on screen to a different state, via an animation. For example, a close affordance would change into an open affordance, or a hamburger menu, would change into a different control, and possibly have a different target/action.
This also touches upon being able to use state-transitions within the same view, to animate objects on screen, such as expanding or collapsing regions, revealing hidden content, filter controls, or fly-outs.
Ben Dedrick commented
I would love to see some custom animation tools. So far, most of the effort around XD seems to have gone into consolidating and streamlining aspects of the UX workflow that currently require a lot of disparate tools, but one big area of opportunity for that is in animation. I'm not likely to mock up a design in Sketch, then do it again in lower fidelity in some other tool just so I can explore animated transitions, so the animation bit tends to fall to the wayside. I would have a blast if the same tool I used to create designs and connect them into a prototype could also be used to create animations.
Having the same name object on 2 artboards should trigger a transition animation of a values that vary (colour, shape, x/y ect.)