Drag and time trigger on components states
Allow drag gestures and time trigger to transition from a component state to another. Now, only tap and hover triggers are available.
This will allow designers to emulate content sliders much easier
As a user: I would like a way to introduce an animated component, like showing a "spinning" loader on one artboard that I can then link to another artboard with a timed transition.
So that: I don't have to duplicate several of the same artboards to show an animation (that won't be stuck in a loop).
ie: Design example: Showing a spinning loader for 3 seconds on one artboard, and then linking to a different artboard displaying the loaded results.
Agreed! It blew my mind that this simple interaction wasn't a basic feature of component states.
Zigmas Mallol commented
This would be so cool to have, this way, with the drag trigger at least we could do some "fake" inner scrolling component.
not to talk more about the possibility to do micro-animations with the time trigger... (But maybe you have your reasons not to do this... memory-wise, or something)
Add the option to use time as a trigger between component states. That way we could do complex looping animations on page.
i think if we can add Time Trigger to components is really good. imagine i want to prototype the insertion point in a search box. what i can do now is to create a new art board and hide the insertion point in first one and make it visible in the second art board , whatever my search box is components but i have to add a new art board for this goal and loop these art boards whit time trigger.
Now imagine we could add Time trigger to component it self. then you can add a lot of async animations in a single art board. that works in many cases not only an insertion point. you can create a lot of components looping through their states whit different life span.
thanks adobe team i love xd :)
Life of에이미 commented
Regarding the slider question, unfortunately We must/ have to link up the same behavior in all the artboards for them to work properly.
Then we should have made a lot of multiple artboards for this dragging/slider effects on the project, Kinda Time consuming and wasting time. and also while we are making those drag /slider trigger, feel a lot of confusion.
Hopefully the Drag trigger will be usable for components.
I cannot believe this is even true. Can you not drag from one component state to another? Surely you don't still have to create an art board for each drag position? Please say I am wrong... If not, I would like to strongly suggest that dragging within components to other component state is a feature please. Thanks
This is vital for presenting animated button states that take you to the next art-board! It's lame to do a presentation for other professionals where you have to click the button twice (i.e. after the initial tap state simulated the button being tapped) because you only have a "tap" or "drag" state available.
The ability to have a time state that initiates after a tap would solve this problem, allowing you to hover, then tap (causing animation), then it simply transitions to the target board via a few ms of time.
The similarity between CSS transitions and the new Component States functionality are so similar. Auto animate only allows for one transition. Real CSS allows for unlimited transitions.
I'm starting to see mico animations like the "Add to cart button" attached. Which could be created using the new component states functionality. But instead of States, think of them as steps in CSS transitions. States A, B and C turn into Transition 1, 2 and 3. You already have easing and timing already developed.
All you would have to do is in Prototype mode allow me to +Add the transition order.
1. create a component instance
2. build all it's states
3. Select new Interaction = Transition Sequence
4. Select Trigger (Hover, Tap, Voice)
5. Action: Auto-Animate
6. Destination: Transition-1
7. Plus Destination: Transition-2
8. Plus Destination: Transition-3
9. and so on, If you set the last one back to the default you could create a looping asset all on one Art Board!
This process would be even easier if XD allowed masking groups of layers with clipping. so you could move elements like this around and saving as a component for reuse. This added feature would also reduce the number of artboards a user would need to work with just to do this one animation.
This would be extremely useful for toast messages, etc. that animate on-screen, then back off without user interaction.
Christian Stengel commented
This would be helpful for designing more specific micro interactions for buttons which changes their appearances etc. Would make a prototype way more realistic and give a better feel to the usage of time to it.
This is a key feature!
Barbaro Barroso commented
Totally agree with you, it is a feature that would be very useful when creating animated compositions within the same XD. Hopefully it will be incorporated in next year's versions.
Gerard McComish commented
Yes. This makes so much sense. Especially adding a time delay. You could effectively create animated components (movie-clips).
I totally agree, we need timed states urgently :)
Should be related to https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38959951-drag-and-time-trigger-on-components-states but yes I would like this feature too.
Lucas Matos commented
Sliders are another use.
Timed interaction (changing state based on time, just like you can with artboards) would be helpful in many different cases as well. It could be used for continuous animation loops, adding "extra keyframes" in the transition between states as well as the obvious simulation of state changes that normally take time (saving/erasing/exporting/uploading).
Alex H commented
Yes! Timed transitions are very important for simulating loading states and interactions between an app or website and the server to simulate loading.
No other available interaction makes sense for something like this.
I just want a 3 second delay and then have it transition to the success or error state.