STR Create an icon with #000 fill. Create a _base button component with a label and a placeholder icon component with #000 fill. Apply the instance swap property on the placeholder icon component. Create a button component wrapping the _base button component, make this the “default” variant. Add a hover variant of this button and link it up with “while hovering”. Change the icon fill in the default and hover states to #f00. Create an instance of the button component. Use instance swap to swap in the icon of step 1. Notice the icon is now red. Play the prototype and hover. Notice the icon in the hover state is now black (reverts to original icon color). Expected behaviour In the prototype, while hovering it should remain red. Observation This only happens when using the instance swap property. When the instance swap property is removed and the icon is replaced “manually”, the color override persists. The workaround for now is to avoid the instance swap property for component interactions dealing with color overrides and to just manually swap icons.

Instance swap property breaks hover colour override?

STR

Create an icon with #000 fill.

Create a _base button component with a label and a placeholder icon component with #000 fill.

Apply the instance swap property on the placeholder icon component.

Create a button component wrapping the _base button component, make this the “default” variant.

Add a hover variant of this button and link it up with “while hovering”.

Change the icon fill in the default and hover states to #f00.

Create an instance of the button component.

Use instance swap to swap in the icon of step 1.

Notice the icon is now red.

Play the prototype and hover.

Notice the icon in the hover state is now black (reverts to original icon color).

Expected behaviour

In the prototype, while hovering it should remain red.

Observation

This only happens when using the instance swap property. When the instance swap property is removed and the icon is replaced “manually”, the color override persists.

The workaround for now is to avoid the instance swap property for component interactions dealing with color overrides and to just manually swap icons.

Page 1 / 1

This has been happening for me as well. In the workspace view, variants all retain their correct colour overrides when switching between component variants. But in prototype view, they will revert to their default #000000 colour when switching variants.

I have triple checked that all my component variants and all my Icons have the same layer structures as well layer names, but the issue persists. Considering that the component in question is one that contains nearly 100 variants, I would hope the solution is not to simply remake all of them.

I do believe this is a bug and not a layer structure issue because I was rigorously following all the recommended methods to ensure this issue does not occur.

You need like thihs?

Figma

Thank you Sergio, until this bug is fixed your hack gets the job done 🙂

That hack’s certainly a way to work around. However, I still hope Figma’s doing their best to come up with a permanent solution.

After you wrap your _base button into another component you may want to re-apply colours, enforcing an override. This should help without “hacks”

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded