How to keep object fixed in transitions?

Forum|Forum|6 years ago
April 4, 2020
1 reply
7005 views

Hi. Is there anyway to keep objects (for example headers and footers) fixed/static when using transitions like slide left in prototyping? The same way you can do it in Figma with "Smart animate matching layers". I'm trying to find a solution with no success so far, and it's ruining the whole prototyping experience. Any suggestions, please? I'm considering moving from Sketch/Figma to Adobe XD for a few projects to see how it's going, but the lack of this option might be a deal breaker for me 😞 Thank you!

This topic has been closed for replies.

Correct answer Peter Villevoye

Well Adobe XD has an almost similar feature, called "Auto-animations".

And it's also based on tweening the differences between matching layer names.

You create an artboard, which holds all the elements for the Before state, but also already holds all the elements for the After state. But you keep those out of sight, i.e. hidden at the right of the artboard if you're planning on letting them move from right to left. (Group them with an invisible element on the artboard, to let them 'touch base'. Otherwise off-artboard elements don't belong to that artboard.)

Copy the whole artboard, change it into the After state by moving all elements where they need to be, and keeping some elements fixed,. Then use the Auto-animate (in stead of Transition) to tween the differences while previewing.

Check out the many examples and tutorials here:

https://www.behance.net/live/replays/creative-fields/132/UI-UX

Peter Villevoye

Correct answer

Community Expert

Well Adobe XD has an almost similar feature, called "Auto-animations".

And it's also based on tweening the differences between matching layer names.

You create an artboard, which holds all the elements for the Before state, but also already holds all the elements for the After state. But you keep those out of sight, i.e. hidden at the right of the artboard if you're planning on letting them move from right to left. (Group them with an invisible element on the artboard, to let them 'touch base'. Otherwise off-artboard elements don't belong to that artboard.)

Copy the whole artboard, change it into the After state by moving all elements where they need to be, and keeping some elements fixed,. Then use the Auto-animate (in stead of Transition) to tween the differences while previewing.

Check out the many examples and tutorials here:

https://www.behance.net/live/replays/creative-fields/132/UI-UX

robbiengallAuthor

Participating Frequently

This is perfect. Thank you. Is there any way to keep those elements out of sight, as you suggested at the right of the artoboard, but without them being automatically moved to the pasteboard if they're not a part of the group? It looks like a work around, not the actual solution. Obviously it's better than nothing.

Edit: I noticed the elements can be out of the sight but stay a part of the artboard if the whole artboard is set to autoanimate, but not when auto animation is triggered by a button. I think this is something that should be investigated and fixed in the future updates.

Peter Villevoye

Community Expert

That's why I descred the option of grouping any elements off the artboard with an inivisible item on the artboard, so they don't resort to the Pasteboard.

It's indeed a work-around, and also always keep in mind that with Adobe XD you're creating mock-ups, scenarios, click-throughs – not the actual website or app. So the artboards can be regarded and created as steps in a process, and not as real webpages or fully functional app screens.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded