Hello Figma Support,
I am working on a multi-brand design system with base, semantic and component-specific variables. Each brand uses extended variable collections.
We also have a dedicated icon collection used to switch between the graphic variants required by each brand.
I have tested two approaches:
-
A string variable bound to the icon component’s variant property.
-
Boolean variables controlling the visibility of each brand-specific graphic.
In both cases, the icon graphic changes correctly according to the active brand.
The problem starts when these icons are nested inside our system Icon component, which is then used inside more complex components such as buttons or inputs.
When I change a parent component variant or perform an instance swap, Figma stops respecting the icon color override applied by the parent component and restores the color defined in the original icon component set.
I have also observed the following:
-
With the string-variable approach, if I disable the collection that controls the icon graphics and enable it again, the correct color overrides appear again.
-
However, as soon as I change a component variant or perform another instance swap, the color overrides are lost again.
-
If I activate the semantic, component-specific and icon collections while keeping them on their parent collections, everything works correctly.
-
The issue appears when I switch those collections to their extended child collections, which represent the individual brands.
This suggests that the problem is related to the interaction between extended collections, variable-controlled icon graphics and nested component overrides.
I have verified that all icon variants use the same internal layer names, hierarchy and structure.
Steps to reproduce
-
Create an icon component set with one graphic per brand.
-
Control the active graphic using either a string variable or boolean variables.
-
Nest the icon set inside a system
Iconcomponent. -
Nest that component inside another component, such as a button.
-
Override the icon color from the parent component.
-
Activate the semantic, component-specific and icon variable collections.
-
Switch from the parent collections to the extended brand collections.
-
Change the parent component variant or swap the icon instance.
Actual result
The icon graphic changes, but its color override is lost and Figma restores the color from the original icon component.
With string variables, disabling and re-enabling the icon collection temporarily restores the overrides, but they are lost again after a variant change or instance swap.
Expected result
Changing the icon graphic by brand should not remove unrelated color overrides. The icon should preserve its contextual color when:
-
switching between extended brand collections;
-
changing parent component variants;
-
swapping icon instances;
-
working through multiple levels of nested components.
This behaviour did not occur until recently and is now causing a major issue for our design system consumers.
Is this a known regression related to extended collections or variable-controlled nested components? Is there a recommended workaround for switching icon graphics by brand while preserving overrides?
