Nested instance loses all its settings when the parent variant or component changes, if its variant property is bound to a variable resolving to a non-default mode
A nested icon instance has its variant property (Environment = iOS / Android / Web) bound to a string variable, so it switches automatically with the variable mode. Inside the parent component, the icon has its own settings: width and height bound to a size variable, an explicit variable mode for color, and a layer name.
When the parent instance sits in a frame whose variable mode makes the icon resolve to a variant other than the one stored in the main component (e.g. Web instead of iOS), changing the parent’s variant drops every setting on the nested icon. Swapping the parent to another component does the same. The icon falls back to the raw icon component: default size, default color, default name.
Steps to reproduce:
- Create an icon component set with a variant property “Environment” (iOS, Android, Web).
- Create a string variable in a collection with modes iOS / Android / Web, whose values match the variant names.
- Create a parent component set with variants State = Start / Partial / Final. In each variant, place an icon instance, bind its Environment property to the variable, bind its width and height to a size variable, and set an explicit color mode on it.
- Place an instance of State = Start inside a frame with the variable collection set to Web mode. The icon displays correctly.
- Change State to Partial.
Expected: the icon keeps the size, color mode and name defined in the Partial main component, displayed in its Web variant.
Actual: the icon reverts to the raw Web variant: default size, default color, default name. All settings from the main component are lost.
Notes:
- It does not happen when the frame is in the same mode as the variant stored in the main component (iOS in our case).
- It does not happen if the parent variant is changed first and the frame’s mode is switched to Web afterward.
- It happens both from the UI and from the Plugin API (setProperties and swapComponent).
- Explicit overrides set on the nested icon by the user are lost too.
- resetOverrides() on the parent or on the icon does not restore it.
- Restructuring the variants doesn’t help (same layer names and order in all variants, or absolute positioning of the icon).
- Fill overrides on vectors inside the icon do survive. Only settings on the icon instance itself are lost.
- Workaround: switch the frame to the default mode, change the variant, then switch back. We also avoided variant changes by using boolean properties for the icon’s position.
