Figma Support Forum

Fill overrides don't work within variants

Product Questions
#1

Hello,

Variants were a literal godsend when they got introduced, but there’s an issue that still persists to this day.

Let’s say I have a very basic button component, containing text and an icon, and that has 3 variants for different hierarchy levels. The issue is, if I need to swap my icon’s instance, it will stop picking up the fill override when I change variants, thus breaking my component, as illustrated here:

I’m aware of a workaround involving union groups, but it’s very tedious to set up and it makes the instance swapping process more annoying than it should be. Is there any fix in the works?

#2

Hey @Voxy , check this Button Variants: How do I prevent swapped icon overrides from showing after setting icon property to "none"? - #2 by Bruno_Figueiredo

#3

Thanks for sharing that @Steven but I guess this issue is way more complex than my fixe for icons visibility. I edited my file to add the how to do this too.

Here the issue is, every time you do a component override, it expects the exact same ID or layer name on another instance, but, since the vectors of the icons are completely different, they don’t override because they don’t identify the new element.

The best solution so far was a trick that @Rogie_King shared a while ago where all your icons are part of a Union. I recorded a quick explainer here:

2 Likes
#4

Thank you for the reply!

As I’ve stated in my original post, I’m aware of this workaround (and I’m using it in production), however it does force you to dig deeper and deeper down your layer tree which isn’t the best. I was just hoping to know if a proper “fix” was to be considered by the developers. :slightly_smiling_face:

#5

Best practice, use icon fonts.
That’s what we do at my company, and it’s the same on Figma and code output.

We have a centralized font build page, and then we keep a log of font updates on a Slack channel. You can export SVGs and build the font with various available tools.