I have the same issue replacing an icon in a variant. The color is not preserved
(Back to original post) @RowanW Your layer setup and nesting is wrong. Having a root “Button” instance isn’t necessary and as a result your second level (btm-sm/…) instances are messing overrides up.
All you need is your second levels as individual components (not instances to start)… and combine those as variants. If you want to keep all button variants organized layer-wise put them all in a frame. For example…
and merge as variants
[♢Button] is not needed.
Layer names (e.g. Label) need to match in the button like you have done, but icons can be swapped in the instances without being overridden when you select a different variant (primary, secondary etc.)… as long as the same icon/layer name is used in the main components that you merge as variants.
Hope this helps,
Well the problem with what you suggest is that if you duplicate your button instances a lot and they aren’t based on a component, theres no way to manage design changes (to the basic button layout / design) in the future.
Especially problematic if you have a design system with a lot of button themes and states etc.
Renaming the nested component fixes the problem.
But given that Figma docs suggest using a nested component, it’s not great that this approach needs hacks to work.
In case you missed it, heres the link to figma best practices using a nested component: Creating and organizing Variants