Component State Sling States

Participant ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

This a bit more complicated than the simple slider. I have set this XD file up completely accept I cannot get the sliding to the next state working when component is clicked. For, example a click within state moves to 2nd, then a click within the 2nd state moves to third. If you need mire explaination let me know. Please advise. Thank you.

 

Attached.

TOPICS
Design , How to , Prototyping

Views

113

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
Participant ,
Jun 07, 2022 Jun 07, 2022

Copy link to clipboard

Copied

Bad link please download this one:

https://www.dropbox.com/s/o5cjwheui4eta7e/testing01.xd?dl=0 

 

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 ,
Jun 16, 2022 Jun 16, 2022

Copy link to clipboard

Copied

LATEST

Hey, sorry for the late reply. So you want to do two things at the same time - switch a button to it's selected state, and transition to a different state in the parent component. I'm afraid this isn't possible, as Xd won't allow two interactions to happen at the same time.

 

Another problem is you can't switch the parent component's state from an element that is inside a nested component. There would be a way to do it, but the radio states must be controlled by the master component, which will result in having 12 states on the sliding-QA component, and no nested components - only groups (you can still have the hover state ones).

 

If you decide to play with that, the interaction can be triggered automatically by including an empty lottie file in the selected state of any radio button, and adding an end of playback trigger to it that will switch the slider component to the second page.

 

A better way from a UX standpoint imo is to have a button that says "Next" appear at the bottom in the selected states, and when you click it - you will go to the next slide. This way if a user selects something by mistake, they will be able to change it before moving on.

 

And with all this in mind - there will probably be a drawback, that when you click next, or the slider switches automatically, for a split second the choice made on the previous slide will be reset, but that can be minimized with a quick transition and might be an acceptable compromise.

 

If conditional advance to the next slide (only if something is selected) isn't mandatory, you can skip all this and just have a next button that's always active, with the possibility of people moving to the next slide without having selected anything, which might be okay for the prototype and to just show the element / microinteractions.

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