I have a Side bar component set up like this:
- Base component with Size and Levels variants – here’s where I placed an icon instance
- Master component with States and Brand/Neutral variants.
Enabled state: label and icon use color token Content-Secondary.
Hovered/Focused state: use color token Content-Primary
When users insert the component, they choose the Level and can swap the icon instance to an icon they need. The issue is that the color tokens are not being preserved properly according to the state when you change the states and then change the icon, like this:
- Change state from Enabled to Hovered.
In Enabled, icon color is Content/Secondary. - Swap the left icon (from Settings to any other icon).
All good, the icon changes color to Content/Primary as expected. - Change state back to Enabled.
Icon color correctly changes to Content/Secondary. - Swap the left icon.
It incorrectly swaps the icon color to Content/Primary. - Change state to Hovered.
Icon color is correct (Content/Primary). - Change state to Enabled.
Icon color goes back to the correct value Content/Secondary.
Is this a Figma limitation or a bug? I can’t seem to solve this while the icon instance is placed in the base component.
Link to a sample file:
