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…
#Button
❖btn-sm/secondary/icon-right/default
❖btn-sm/primary/icon-right/default
…etc.
and merge as variants
NOT
♢Button
🡢 ♢btn-sm/secondary/icon-right/default
♢Button
🡢 ♢btn-sm/primary/icon-right/default
[♢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
@RowanW My bad, I think we misunderstood each other. The button variants I suggested are still based off a master component. I’m very familiar with best practices and agree 100% overrides are broken.
I’ve been having the same issues and initially assumed it was inconsistent layer names.
My problem was also with sales card variants built for multiple viewports, where even consistent layer names would not preserve the type styles if text was changed just in the text block! i.e. mobile header style would change to desktop header with the same placeholder text as expected, but not when actual product title was typed in!
Digging deeper on buttons… the only other partial solution I found is if you’re creating a system from scratch. Button types must be created directly from variant copies—then adjusted. Building multiple buttons from different text layers/components and combining them is temperamental.
For other’s comments:
-No matter what I do I can’t maintain icon color overrides
One suggestion… Always use the same icon on all button variants (e.g don’t have a star on primary and chevron on tertiary.), this should work to preserve icon overrides.
Overall this issue is in need of a major fix.
2 Likes
Update for type style overrides not being preserved when changing text:
Issue was I had multiple styles in the same text box (H3 + body + caption), separating them individually preserved the wording changes.
However this may present a new baseline spacing issue with auto layout as mentioned here…