not an expert here so there is possibly an error in the way I’m doing things, but still.
I’ve created some components that have some child components inside them, so far so good.
If the child component has variants, that’s when something weird happens. In some cases, not all, creating an instance of the parent component, then switching the variant of the child component inside does not work as intended.
I’ve created a dedicated small Figma file to illustrate the issues and isolate them from more complex content.
Here is the link if you can have a look please :
Either the switch does nothing at all (my Lib Icon component that switches icons, by switching the text content of a text layer)
Your components are nested too deep so when you swap to “Icon / Object Icon” it would keep the default for nested “Icon / FontAwesome” component as an override. When you flip a variant the button component itself does nothing because there is override on the “Icon / FontAwesome” already
I was able to fix that by giving each nexted “Icon / FontAwesome” instance unique name
There is another problem though, the icon colour does not work well. If you to change the icon colour it will not stay on another icon.
My gutt feel is that a single icon component with variants for each icon that rely on another nested component isn’t that good with Figma. Your example is a perfect illustration for that. Override logic is a straightforward on a flat structures, however it becomes more and more complicated as you nest deeper and deeper. Each time you nest a component instance into another component Figma to persist that instance overides as defaults for that component.
Thanks a lot for cracking that and taking the time to make it work and explaining it so well !
On top of everything, this file was created just the day before the current Figma update, so …
Indeed in a new article just recently posted on the help section they explicitly say what you said, using variants inside the same component to manage icons is not advised, probably among others for the reasons above.
What remains totally unclear to me however is the second issue in the original file, the one with colors and sizes @Pavel_Kiselev … is it the same issue ? doesn’t seem so
If you need a dynamic size component, you may want to explore different technique. Once the instance is set there is no way to change it is size. The only exception is for hug content components though. Which means if your “Square” sizing is set to hug contents and it is size determined by its content, than you can have truly dynamic size
