Figma Support Forum

New Interaction: Swap Variant

Currently, if I want to do a hover effect on say a button, I do it in two ways:

  • Duplicate frame and add hover interaction on the button layer
  • Duplicate button layer outside of parent frame and add interaction: while hovering > open overlay (select duplicated button) > manual position …
    Both ways demand duplicating content and neither is flexible.

What if we extend the functionality of variants (kudos for this great feature btw) and use it in interactions.

New way is then:

  1. Create button variants (default, hover, disabled, whatever you want)
  2. Add interaction on button layer and choose: while hovering > swap variant (select variant)
    …see image

Thats’s it! The swapped variant takes on all overrides. I think this way is much more flexible as it isolates the interaction on the level of the button layer. There is no need for duplicating stuff and linking frames.

3 Likes

Hey @madmonkey this should be what will be live with the upcoming Interactive components update.

You can read about it here:

2 Likes

Great!!! I can’t wait.
Thank you!

This is exactly what I want, it is just so frustrating to not be able to swap variant
I’m so excited to be able to do that :smiley:

This feature could save a lot of work and prototyping space, since right now i have to duplicate each app screen (frame) only to show how a little info box expands. If this “swap variants” would also work within autolayouts (because “open overlay” does not if the swapped container is bigger) that would be awesome. I am really struggling keeping multiple small expand/collapse instances up to date in a larger project where lots of those are within a long autolayout scrolling list. beeing able to swap single variants/instances/frames with eachother would be killer!

This goes with an “ON DELAY” type of addition as well, typically it’s the same type of desired action.

I’m pretty confident they’re building this all into interactive components, otherwise they would have added on delay, as it’s commonly used to trigger secondary actions in invision and they know that.

Any ETA on this feature?