Skip to main content

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.


Crude representation of my issue. https://www.figma.com/file/WMVEvY86qXqWuDlKRjVup3/Untitled?type=design&node-id=0%3A1&mode=design&t=KQNvGyIEDr34DUwr-1

Hey @Ben_Beeson, thanks for reaching out!


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.


Screenshot 2024-02-13 at 2.07.05 PM

@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.


See attached video.


Thanks, @Ben_Beeson!


With the change made, things now seem to be working as expected. We’re not able to reproduce the issue in your screen recording.


Is this happening both in-browser & using the desktop app? When was the last time you refreshed your tabs?

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?

Ah… got it. Sorry for the oversight!


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.

Thank you! I look forward to hearing back.

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:

Figma Learn - Help Center

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.


Thanks for looking into this and taking the time 😃


I’d like to informally request this be a feature.

Reply


Terms & ConditionsCookie settings