Hi there!

I've run into the same situation a few times and found that using Swap overlay between dialog steps works well. I set the first dialog as Open overlay and then use Swap overlay for the next ones. It keeps the background consistent and reduces the number of screens if the backdrop doesn’t need to change.

Hope this helps!

Hi Ondrej,

Thanks alot for responding, I got the 2nd part where we continue to use Swap Overlay property for rest of dialogs, but could you pls explain the first part where you set the first dialog as open overlay, I cant understand how do I make that work, do I need to add that property to background frame or to the dialog  itself?

I’ll Appreciate your suggestions

You can do it by adding the Open overlay interaction to a specific element like a button. I usually set it up as shown in the screenshot, with the position set to Centered and background enabled to better simulate the typical dialog behavior.

Hope it helps!

Thanks alot for the help, now the flow looks cleaner without requiring to manually add background in each frame, I also found out that a better way to start the flow is to add “Mouse Enter” “or “After Delay” trigger, this way we trigger the flow to start naturally.

I appreciate your help, Thanks

Happy to hear it’s cleaner now!

Great question—managing multiple dialog states in Figma can definitely get heavy if you're duplicating shared elements. One workaround is to use components and variants for the background frame, and then nest your tab content as variants or overlays. That way, the background stays consistent and reusable without inflating your file size.

Also, if you’re prototyping user flows for lead management or client communications, I highly recommend looking into tools like Phonexa. They streamline multi-step interactions and make it easier to maintain consistency across complex UX systems.

Good luck with your project!

Hey Muneeb, I totally get what you're running into — having to duplicate background elements for every dialog state can really bloat your file. One workaround that’s worked well for me is keeping the shared background inside a parent frame or component, and then using overlays or component variants for the dialog content itself.

That way, the background stays consistent, and you only swap the content layer (like tabs or dropdowns). You could also explore using interactive components to manage tab transitions without needing to create separate frames for each state.

Hope that helps — curious what others have done too!

Hi ​@Wirkkarl 
Thanks alot for your replies and recommendations, sorry for reading it 2 months late, I didnt receive notifications actually, I’d look into the Phonexa