I’ve recorded a short video showing the issue:Dropbox Capture
Basically, when using the new instance swap component property as part of a nested component, the instance swap isn’t reflected when used in combination with variant properties.
Here are the tests I did in the video:
Using nested components and variant properties ( works)
Using nested components and component properties ( doesn’t work)
Using component properties and variant properties ( works)
Does that mean that component properties are designed not to be used as part of base nested component sets?
I hope this gets fixed. Actually, there is a similar issue if you use a similarly designed nested button component with a base component, but your icons are not designed as different components but variants of a single Icon component. In that case, the same happens, switching the icon and then switching the state of the button also reverts, meaning the override of the nested instance is only applied to that specific variant, and changing any other property the modification is lost. It was also the case before the recent figma update.
I have not used nested components for the 2 variants that I’ve reduced my Field component to. I did use it for the 32 variants I had previously, but I haven’t used that approach much lately as it has resulted in some workflow issues when trying to reset changes to an instance swapped component that was nested in another component.
This does mean I need to make changes to the same layer in both variants in my field component (styling the input text differently, for example), but Figma has made it easy to select matching layers across variants with this button, so it’s less of an issue:
works)
doesn’t work)