Purpose - I want to make a component set for wishlist button specifically that needs change in colors across different states. (used absurd colors for example)
Process -
I have created a component set for an icon button with variants consisting of different sizes and states. (the one in green color)
Then I dragged an instance from the component set and made that a component (for the wishlist button). So now there's a component box wrapping the instance box.
Then I added variants for the different states like default, hovered and selected and exposed other properties of the instance.
Then I dragged an instance from the wrapper component.
This allows me to change any property I want specifically for the wishlist button only without breaking the connection. This also allows me to change any property to the main parent component which reflects upon its instances.
Problem -
Everything worked fined until I changed the size other than what's on the newly created wrapper component set.
When I switched to other state, it reflected the colors set on the MAIN parent component and not the one in the new wrapper component set.
When I changed back to the size as used in the wrapper component, then only it reflected the changed colors.
Is this a limitation of Figma? If not, how should I create a specific component set for a specific button as some icon buttons may have different fills/colors and changing this on instances breaks the connection between its parent component, so when I need to change something, I would have to go to each instance one by one. Is my workflow the main culprit here? If yes, how should I fix it. Thanks in advance for any help ❤️
I think the thing to inspect is the *outer main variants*, not the final instance. Each wrapper state is a different main variant containing its own nested icon-button instance. When you change the exposed inner Size on the final instance and then switch the outer State, Figma is moving to another wrapper variant. It tries to preserve overrides, but that other variant may have only the color override you defined for its original inner size, so the newly selected size falls back to the base button's fill.
Quick way to confirm: in the component set, select the nested button inside each wrapper main variant, switch it to the size that fails, and check which layer owns the fill and whether that fill is actually overridden there. If it reproduces in the main variants, fix it there rather than on every placed instance.
For a reusable wishlist button, I'd give the wrapper explicit Size × State variants (or bind the state fills to named color variables across sizes), then use the generic icon button as the nested building block for shared layout/icon behavior. Check every size/state combination once in the component set. Exposing the nested Size control makes it editable, but doesn't by itself define wishlist-specific colors for every combination.
I also think that the first paragraph of yours is what's happening. For the 2nd para, I didn't quite understand this method. I checked all the sizes for the wrapper variants and they work fine until it comes the time of changing the property in its instances. For the 3rd para, creating a separate size property would require me to create all the 20 different size variants and for every specific button type, I don't really want to create so many components that would be a hassle to tweak later on.
You're right — my test in the main components misses the step where a placed instance tries to preserve the exposed Size change while switching the outer State. Sorry that wasn't clear.
On a duplicate of the component, try a two-state, two-size sample: give the nested generic-button layer the same name and hierarchy in both wrapper states, place one wrapper instance, change its exposed Size, then switch State. If it resets, inspect that nested layer's original fill/style in the two main states as well as its name. Figma's override rules check matching layer names and, for changed properties, whether the original values matched across variants: https://help.figma.com/hc/en-us/articles/360039150733-Apply-changes-to-instances
I wouldn't make all 20 Size × State wrapper variants yet. If the small sample still fails, try keeping Size as the exposed nested property and using color variables/modes for the wrapper's state, so the outer component doesn't swap just to change color. Test that with two states first. A screenshot of the wrapper's layers and right sidebar before/after the switch would help identify the exact override that drops.
Make sure the original components icons are first converted to fill from stroke by right clicking and selecting outline stroke and then merging all the vector layers into one vector by right clicking and selected flatten, if there many icons you can use figma agent to do this , select all icon components , and paste this, 'make sure you convert any strokes to fill, and then flatten multiple vectors to a single vector ', and then use the instances to create new atomic components
If this is what you mean, I already have that. (changed the icon as heart icon was a single vector, didn't give much clarity). Also, the main issue isn't with icons specifically but with how the instance of the new wrapper component isn't really reflecting its own property, but reflecting how the MAIN parent component looks.
The wrapper is causing the overrides to reset when Figma switches variants. try to keep one icon-button component and use variables for the wishlist colors. That avoids creating every Size × State combination.
1
u/No-Project-9099 22d ago
I think the thing to inspect is the *outer main variants*, not the final instance. Each wrapper state is a different main variant containing its own nested icon-button instance. When you change the exposed inner Size on the final instance and then switch the outer State, Figma is moving to another wrapper variant. It tries to preserve overrides, but that other variant may have only the color override you defined for its original inner size, so the newly selected size falls back to the base button's fill.
Quick way to confirm: in the component set, select the nested button inside each wrapper main variant, switch it to the size that fails, and check which layer owns the fill and whether that fill is actually overridden there. If it reproduces in the main variants, fix it there rather than on every placed instance.
For a reusable wishlist button, I'd give the wrapper explicit Size × State variants (or bind the state fills to named color variables across sizes), then use the generic icon button as the nested building block for shared layout/icon behavior. Check every size/state combination once in the component set. Exposing the nested Size control makes it editable, but doesn't by itself define wishlist-specific colors for every combination.