Is there a way to make overrides work on "interactive components"?

I just made an interactive component with two states, “Default” and “Hover”. The idea is that when i hover over “Default”, it changes to the “Hover” state adding the text on top and stuff (which is working fine).

The problem comes when i use this components overriding the “Hover” state on the prototype because when i press play, it keeps coming to the original “Hover” state and not the overridden one.

Is there a way to make this work or im making something wrong? I hope im making myself clear.

I have come upon the same issue which is kind of a bummer, even though I understand interactive components are still in beta.

Is there a solution to this?

In case it helps, I hacked the behavior by using two different components in the case of a button and then combining them into a single one:

  1. 1 Interactive component that’s nothing but the background changing depending on states.
  2. 1 component for the text.

This actually saves the overrides and also the interactions.

3 Likes

I’m having this same issue. I would expect that on the given instance I could toggle to the hover variant, do my overrides, and then toggle back to the default and have the overrides preserved, but that doesn’t seem to happen. Is there a way to do this?

Having the same issue! Starting to get into prototyping and I’ve come across this issue quite quickly. Doesn’t seem like something only advanced users would need. Hope it gets an update soon.

+1 same issue.
I have a prototype of my app but it’s really annoying that all overrides are lost when interacting with it.

I have the same issue on a date picker component I am building with the On Click interaction advancing through properties. The interactive component is set up to:

  • null closed state (user clicks to open)
  • null open state (user selects a day)
  • selected closed state (default copy overridden on this state to show which day the user selected)

Expected result
User navigates through component to selected closed state that displays the overridden copy applied on the instance.

Actual result
User navigates through component to selected closed state that displays the default copy of the instance.

It appears that the override gets ignored in the prototype view despite being set and visible in the editor view. Happy to provide a walkthrough if requested by @Figma_Support.

1 Like

That’s where my mind went as well. Disappointing to see it doesn’t work this way.

What exactly is your problem and could you share a link to an example?

@Facu-A @Richard_Doyle (I can only tag two people)
Turns out we should be using editable properties instead of overrides. Here’s a demo with a tooltip component. Hope that helps.

I cannot recreate this. Have you tried this? Can you provide any further instruction?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.