Component Overrides don't apply to variants

I have the exact same problem, @Levi_Jones.

I did an experiment where I removed the instance of a nesting component that contained the button which worked to get the different states of my buttons, but the content (icon + label) kept changing to the initial state, ignoring the overrides.

Did any of you guys resolve this issue ? My main problem is with buttons and changing their CTAs

Any word on this? Basically I have a hover state button component but every instance reverts to the components default hover state color. How is this a bug?

Would be great to get this resolved. When I change a variant, i.e While hovering change button to hover variant it works well. The moment I go to my component library and make a subtle change, like the background colour, and publish I then go back to my main flow and accept the updates… at this point all my interactions have reset and I have to reapply the settings. I have done this so many times now that’s its making it a very longwinded exercise 🙂

I am having the same issue. I am creating an interactive sidebar, and my components have an icon and a title in them. The hover states work fine, but I also have an enabled state with an override that is not working. The enabled state will hold the changes to the copy, but not the icon that I want to change out. When clicking the enabled state will show my icon reverted to the default icon.

Yes! I’m having the same issue and this a really serious bug! I can’t working with my library.

1. The first time update the variants component, all the changes instance in different design file will reset to default.

2. After first time reset, the variants instance will act as normal.

3. Only affect with the file using library, if within same file it won’t happen this bug.

Figma team please fix this soon as possible, cuz i cannot update anything cuz it will make all my file reset to default status.

I have the same problem，please fix this as soon as possible

+1 on this issue

I would love the functionality to be able to add hover states to varients in components… if they worked in prototype/presentation mode.

icons are reverting back to the original state in the library

I’m looking forward to seeing this one fixed 🙂

Same issue! On hover Figma refuses to respect the color change.

Same issue too. It’s a real pain, since I can’t prototype interaction properly because of this bug. Please fix it!

Guys!
Take a look at this topic!

Does the bug you are referring in this post have something to do with the one i am highlighting in my post?

In short:
From time to time i find a bug where i create a placeholder button and then i create multiple instances of it and change the icon of each instance.
The bug happens when after hover the icon color remains as hover.

In my topic i also provide a file where you can see the bug, but also a clone copy of the same button with the same hieriarchy on EVERYTHING, but the copy does not have this problem.

My issue is not image related or anything. My issue is that if I turn off a hover state in my prototype instance, then I update any part of the component and re-publish…

Then it turns on the hover state again which I specifically told the instance that I do not want happening on that instance.

Really wish Figma had thought about UX when they built this. Frustrating that they do not seem to want to address this or see it as an issue sorry.

Any suggestions or workarounds that folks do?

So we just NOT do hover states in variants?

+1 this is a huge problem

I still have this problem.

This is a huge and serious issue. It makes the entire idea of component libraries unusable. You have to go and rebuild the main component with the updated nested components which defeated the idea of components in the first place.

I still have this problem

commenting again for attention

Holy cow this is STILL happening!?

This bug needs to be a high priority fix and it has been YEARS!

So i have been reading through these feeds and I was wonder if it is the similar problem that i am having. If it is then this is something they need to really address… Here is a link to a video I created to try and explain my headache. I love that app but man this is brutal.

https://drive.google.com/file/d/1pFF-E2NwxQYiC1AKpRqJVFfPy-TFH0ia/view?usp=drive_link

I should be shocked that this is still a thing…and yet I’m not shocked.

Definitely an issue.

What I’m doing and the result I’m expecting:

• I add an instance of my component with hover state interaction to my file.
• I change the color of that instance.
• I run the prototype and my component (which is blue) now shows the override color (orange) on the default AND hover states.

What’s actually happening:

• The component shows the override color (orange) on the default state plus elements common to both states, but NOT on the elements that are changing with hover (for example: a changing icon.)

One thing I have learned about Figma: the thing you expect to happen is never the thing that actually happens, and you can never tell if it’s a bug or not.

I may have a solution:
I removed the accents, apostrophes, etc. from my variant names, published the library, and the bug disappeared.
Then I renamed my variants with the accents, etc. just to see..., published the library and it continued to work.

I’ve literally been trying to fix this issue all day.