Swap instance property of nested components issue

I run into this issue when swapping the instance property of a nested component

Here is the link to my demo file.

I find some designers having the same/similar issues as mine. Does the new component properties feature works with nested components? Doesn't seem so


I have exactly the same issue here.


Same issue. All our Design system is based on nested components, we would love to see Components Properties working with Nested components too.


I have reported this as a bug through their form and with lots of debugging, research and bug isolation effort managed to break through their 1st line of defence (support) to the engineering team.

Now waiting for the response from the engineers…


Thank you for your hard work :+1:

This is the number one issue preventing us from using the new property features on our Design system.

1 Like

Same issue here – we’re experiencing this issue when nesting an instance-swappable icon button in another component.

Issues arise when viewing it in a prototype as the icon is set to change when clicking to another page, but doesn’t change at all when viewing the prototype.

Hey :wave: we’re experiencing this issue.
Please fix.

Before finding this post, I posted about this same issue as a “Share an idea” topic.

Upvote if you like. Maybe if we push this problem from both sides, as “bug fix” and “new feature,” it’s more likely to happen? If a duplicate “Share an idea” exists, I can delete mine.


Got a response. In my case the lost overrides issue happened due to the difference in the colors of the icon components (or variants).

If the main icon components (or their variants) have different fill colors, Figma won’t transfer the color override when swapping their instances.

1 Like

I’m still so obsessed with this that I made another bug report Icon of an nested component resets color after changing variant

1 Like

I have waste so much time because of this

I solved it by giving the icon vectors all the same name. Example: first icon is a contact icon and named the component “contact”, and name of icon itself is “Icon”. Second icon, component name is “cancel”, name of icon itself is “Icon”. It works for me :slight_smile:

1 Like