Changing nested components within a main component no longer works

Unfortunately I’m having the same issue and would really love some help!

Similarly, I have set up all my icons as variants of a component, and used that component within a button component. As of today, I’m unable to swap between the different icon variants - the icon stays the same no matter which variant I use.

Icons are in a OTF format (I’m using Font Awesome) and it seems that swapping the instances merely takes on the original component’s text style and colour, but does not swap the actual icon itself.

I’m wondering if Figma has changed the way it handles swapping component variants :’( this has made my icon components unusable 😦 Any help would be appreciated!

We have the exact same issue. It surfaced on Dec 9, 2021. We kinda fixed the issue. It’s more of a ‘loose-a-kidney’ solution, really. Can live with it, but makes you limited.

We have an _icon base component and a _button base, then we created components from those with variations. _icon is a font-based icon (Font Awesome Pro) and has ‘weight’ and ‘size’ for variant props. The _button is a bit more extensive and has variants for hover/disabled/etc. Also _icon is set to ‘fill: black’ and the _button text is also set to ‘black’, so they are all neutral. In the variants for buttons, change the text color depending on background color (most have white text on a darker background.)

We did two tests:

1. icon component using the _icon base,
2. icon component using only a text layer

• we made sure the text layer was named the same in both components and on the buttons.

The one of the _button base variants uses the _icon base for the ubiquitous ‘button with icon before’. Then in the main button component we invert the icon color, as stated above. When swapping the icon component on the button instance, we discovered that any icon components that used the _icon base didn’t swap properly (color or correct glyph) and the icon components that only used a text layer swapped properly (inheriting the button color and swapped to the correct glyph).

I tried different approaches and even though it looked like they work in the beginning I’m running into the same problem over and over again and it makes work more than difficult.

I’d really like to know if this is a known bug for Figma and can/will be fixed or where the main problem lies…

We use 50+ icons from Font Awesome. Since we can’t expect that all designers remember which one we added them as components to our library.

These icons are used in nested components. Buttons for example. But we can’t swap them. It just swaps the component, but keeps the content of the text (i.e. the icon name), despite the fact that the text layers of each icon component are named differently. So, the component times will show the icon font shopping-cart.

If the icon component isn’t nested swapping works.

Any idea?

(PS: sorry, we just switched to Figma) 😉

TLDR: Combine the icon components as variants.

Hi, just an update! After my previous post, I found that it works when I combined the icons as variants once again. If you’ve done this correctly, the dotted purple outline will appear around the variants. I believe the problem arose because these icons were previously set up to be variants by the naming convention (e.g. icon/arrow up, icon/arrow down) rather than by clicking on ‘combine as variants’ button → so perhaps Figma didn’t correctly recognise them as variants?? Not sure!

Do take note that this changed the variant dropdown menu from an icon gallery to the icon names in text so it’s harder for me to choose the correct icons, but it worked in terms of nested components for now!

Hope this helps!! 🙂

Thanks a lot k_w_y,

I just tried it, and it works. My problem with this solution is, that the bounding box doesn’t resize to the different widths of the icon fonts in nested instances (it does when not nested and in the master components). Which creates new problems. 😉

Also, an update from my side: I found a workaround for me, that works so far. I did not need to change my icon components. But within the component, where my icons are nested I reset all overrides for the icons. This means they no longer have the right size and colour but for the size I created text styles which I can later assign to the icon.
When I insert a button with an icon, I can change the icon, change its colour and assign the text style for icons in buttons. When I copy paste this button and want to change the icon again, I have to reset all overrides on the icon and start again.
Not ideal, but I still have the icon preview within the selection dropdown.

I opened a ticket:

https://help.figma.com/hc/en-us/requests/530626

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.