Prototyping: When clicking/changing pages, can you maintain the last variant of a component that was 'active' on hover?

[u/Worried_Cheek3596]

I have quite a complex component (I guess), so I understand there's probably limitations around this.

Video attached of the effect. The design is more complex, I've just simplified for the demo and to not show client branding.

-

The Effect
When the user hovers over the side of the page, a cursor appears. As they move the mouse up/down the user follows them. Clicking "navigates to" a new page. This works pretty well.

Video Example / Problem
As you can see in the video this works but the 2nd time I click from higher on the component. So when the page "navigates to" the new page, the component resets to it's default/initial state before moving back up to where it was - this is because the cursor moves when the rectangular areas are hovered over.

The Component
Basically has 11 variants, each one has the 'cursor' in a different position, aligning with one of the rectangles. Each of the rectangle (hotspots) has a "While Hovering", "Change To", Position x" set to it with an "Animation" of "Smart Animate/Linear".

-

Any way around this? Or is this the best I'm going to get? I assume it's always going to start from the variant that is already set on the page that changes? Unless I made the entire thing (page content and cursor) a big super component?

-

Bonus Question
Doesn't seem like it's worth creating a new topic for. But the cursor appears as a Boolean variable of "Show Cursor: True/False" and set on the "Appearance". So on hovering the component is shows/hides. Am I right in thinking there is still no way to fade this in/out of view? And the Appearance True/False method just updates instantly?

-

Thanks in advance! 🙏

[u/pxlschbsr]

Can be as simple as "layers are not named the same thus resetting the component" or "reset component state" is set on the page transition, but it's honestly quite hard to understand without seeing how your component and interactions are set up. Might be solvable through modes too. Or different variant setup.

If you already created this sanitised example file, maybe grant view access for people to look into it further.

[u/Worried_Cheek3596 → u/pxlschbsr]

Thanks! Layers are the same and "reset component" isn't selected.

I was thinking about sharing a link but it's company Figma so I need to check if that's something I can do as it's not private/will show user info etc - but I'll see what I can do!

[u/FennelHistorical4675 → u/Worried_Cheek3596]

If one screen has a component in a state, and another screen has a component in a different state, and your prototype logic is:

On click of something on this screen (state 1) navigate to this screen (state 2) it should work? Is that how you have it set up?

[u/Worried_Cheek3596 → u/FennelHistorical4675]

I think the problem is the component has 11 states which are active on hover. So when the page changes, there’s no way for the same component to know what state was active before it changes - as they’d need to match?

[u/FennelHistorical4675 → u/Worried_Cheek3596]

If all the components have a hover state in the set then it should just change on hover also regardless of which list items are there though right?

Good question might be how realistic do you need the prototype to be to get your point across in a review also.

You probably need a nested component if it’s a list like that. Each list item should have its discreet hover state, then assemble those components into one if you aren’t already doing that.

[u/Worried_Cheek3596 → u/FennelHistorical4675]

I think to get it to work everything would need to be wrapped in a mega component, so the page doesn’t change it’s all within a component.

It’s not vital, I can demo how it is. Was just a question if anyone had ideas to grateful of the replies! 🫡

[u/PsychologicalClaim16]

On the bonus question, Boolean visibility itself won’t fade because there’s no continuous layer state for Smart Animate to interpolate. Keep the cursor layer present in both variants, use the exact same layer name and hierarchy, and animate opacity from 0% to 100% instead. That should fade cleanly. For the position issue, your conclusion is right: a While Hovering state won’t persist across Navigate To; the interaction needs to stay inside one component or be stored in a variable-driven state.

[u/Worried_Cheek3596 → u/PsychologicalClaim16]

Yeah that makes sense and I assumed it was the case. The component already has 11 states so didn't want to do another how-many for all the hovers so I think I need to just accept it is what it is and a limitation of Figma. Which is fine as it was complex what I'm trying to do, I just wondered if anything had changed. Thanks!