Highlighted

How to keep object fixed in transitions?

Community Beginner ,
Apr 04, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

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

 

Views

234

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

How to keep object fixed in transitions?

Community Beginner ,
Apr 04, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

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

 

Views

235

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
Adobe Community Professional ,
Apr 04, 2020

Copy link to clipboard

Copied

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

 

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
Reply
Loading...
Community Beginner ,
Apr 05, 2020

Copy link to clipboard

Copied

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. 

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
Reply
Loading...
Adobe Community Professional ,
Apr 05, 2020

Copy link to clipboard

Copied

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.

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
Reply
Loading...