This document states that the hidden layer consumes memory.
Hidden layers are a big contributor to memory usage. This is because Figma needs to store and render information about those layers even when they’re not visible.
Thus, we suspect that the Boolean property only hides elements and consumes more memory than creating two variants, one with elements and one without.
Which actually consumes less memory?
Confirming that in the example here, now with the boolean property you should actually see memory savings.
Even though boolean property also uses hidden layers, it still should net-net reduce the total number of variants and layers needed in a design system, thus improving the file’s memory usage.
For example for the button component set that’s built using just variants and variant properties: It includes two variants to represent the button’s two states. This component set has a total of seven layers (one component set layer, two variant layers, and four nested layers).
But if we use boolean properties instead, we need only one component and a boolean property applied to the icon to toggle its visibility. So this version has a total of three layers (one component layer and two nested layers).
With over 50% reduction in layers, there should also be more efficient file memory usage.
Also see our updated Help Center here.
Thanks for explaining it this way, I hadn’t thought about it like this before!
Hi @Sula_Yang , I could understand that if we use boolean property instead of more number of variants, the size of Design system main file will drastically reduce. But not in the file where we gonna use those instances right? Lets say I have converted 16 variants into 1. And if I use it anywhere which means all other hidden layers are still there in the file where I’m working.
and also it seems impossible to have an instance of another component to be linked to a boolean property to show/hide this instance, and not possible to have together a instance switch and boolean property linked to the same instance layer…
“Impossible to have an instance of another component to be linked to a boolean property”
This should be possible if you select the instance and create the boolean property from Layer in the design panel (see scrn shot)
“Not possible to have together a instance switch and boolean property linked to the same instance layer”
This should also be possible: Select the instance, setup the instance swap property from the instance icon in the design panel, and setup the boolean property from Layer in the design panel.
Thank you for the official answer. But as he says, what about when an instance is used in another file, like a team library?
Thank you for bumping this up. Once you’ve reduced your variant set using component properties, that will also lead to file savings for when you use an instance. That is because when using instances Figma loads in the entire variant set so that variant swaps can work offline; but in the scenario where you’ve converted 16 variants into 1, we now only need to load 1 which should lead to memory savings. @Muthu_Nathan
Thank you very much. It was really easy to understand.
Now I can use component properties without worry😉
That’s awesome to hear and appreciate the great questions!
If you and others would like to learn more about component properties, please register for our upcoming office hours next Thursday 5/26
Even if you can’t make it, you can register so you get the recording afterwards!
I am experiencing issues with memory and this would help me a lot. One thing I haven’t been able to understand so hope someone here can make it more clear:
A large number of variants will slow down the file and use memory. Is it the same if you have used based components to create the variants? Does base components help save memory or do they equally make the file large when importing the instance from your library?
