I have a multistep form dialog. Each step to be taken in the dialog is an instance of one component. I have the main component on a separate Figma page within the file.
I have 3 frames.
Frame 1: Empty Screen
Frame 2: Add item multistep dialog
Frame 3: Added content appears on screen.
The last step of the dialog [Add] is intended to navigate to the next frame which contains the content the user has added.
When I select the instance of the dialog and switch it to the last instance which shows the [Add] button and I connect its action to the next frame it appears to do what I hope it to.
However, when testing the interactions. the last [Add] button does not respect the interaction I set. It appears to reset to the main components interactions (which are empty on the last step of the [Add] button)
Is there some tip or trick I am missing.
I know I can try workarounds but I am wondering if there is a setting i am missing.
We took a look at how your prototype was set up, and while your component on your Component page is set up correctly to change variants from Next > Add, it looks like you’re still missing an interaction on your component in Frame 2 to bring you to Frame 3.
@dvaliao Thanks for the prompt response. I have gone and i made sure that the [Add] button on variant 2/Frame 2 was tied now to frame 3. (sorry that it wasn’t).
In testing it, i am still running into the issue described in my initial post.
If I manually change the property from default to variant 2, the interaction works to take me from the last step of the dialog to Frame 3.
When in the prototype and i click from frame 1 to frame 2 (opens dialog) and the click [Next] and then click [Add], the add button interaction is broken and does not take me to Frame 3
I reloaded the tab and i am still getting this undesired behavior. It does not work in browser either.
Since using Figma on this work account, this desired interaction has not worked.
Could you please send a video of the prototype and you successfully going through the flow?
Upon replaying the prototype, we realized that we had skipped from Frame 1 to Frame 2 w/Variant2 instead of Default. We’ve passed this back to our team to investigate further.
After further investigation, it was concluded that this isn’t possible with interactive component connections. Since you need to change to Variant2 in order to add the interaction then back to State 1, this is where the ultimate desired interaction is lost.
When using interactive components, we’re pulling straight from the component info for that interaction, so we can only apply overrides that are on Default to Variant2. More info here:
That said, it may be best to manually wire up this interaction in full from Default to Variant2. You can also try using Variables. For example, you can use a component prop as Variant2 to navigate to Frame 3.
thank you for the suggestions. If my memory serves me correctly, this was something Adobe XD is/was able to do. Remembering an interaction embedded within a instance’s variant.
