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?
What’s crazy is that the answer here isn’t correct. @Sula_Yang I did more extensive analysis of this today. While it is true that the component itself will be smaller if you use properties vs variants, the variants are 2-3 times smaller when actually used. I created 480 frames on a page, each with 10 fields. I created 3 different types of components. 1) basic form field with label 2) complex field with mostly properties and few variants 3) many variants.
What I found was the following:
What this shows is the opposite of what was said here. Having properties being used and a bunch of hidden layers actually takes up more memory in your design file. Over the course of a larger application this becomes unbearable. I had trouble even doing small operations on this file with this many layers. I often work on applications with 1k+ pages and this would make it very painful to work.
What properties does do is make it easier to maintain the design system and component, so I guess you will have to judge for yourself which is best for your use.
This doesn’t seem to be correct. See my response above. Having hidden layers actually takes more memory which makes a file break after enough layers are included. Thoughts?
Thank you for flagging. Messaged directly to request file link/share to investigate!
Any update? I did what you requested but I haven’t seen a response yet. We are building out a design system that will be used by files with thousands of pages so this is an important topic for our company.
Are you saying we should be able to assign boolean props to something like an icon within a nested component? I mean, sure we can show/hide the entire component…but why would we do that?
Confirming shared with team and will circle back w any updates
Many thanks for sharing. Following up here after reviewing with our engineering team. After looking at the duplicated file we noticed a few things:
We expect that if we wanted to support all the variation you have in “Library Base Component” with only variants, that would result in a sizable component set that would still likely use more memory than the the component property alternative.
Hope this helps! If you have additional questions feel free to file them here: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233
Not sure I understand your description. I saw a huge difference in memory when using properties vs variants. Yes, the variant set would be huge if we had all of these options for the component, but my example file clearly shows that when a component is used, only the layers related to the variant chosen are included in the design file and not all of the other hidden layers and in the properties version, all of the other layers are there, increasing the memory usage and the amount of layers in the file.
Are you saying that isn’t the case, because I can create another example that is more simple that has just two variants and two properties and do a larger quantity test to show scale. I am sure the outcome would be the same. The more layers, hidden or not, the more memory is taken up.
So what it seems like is this:
Are the options above accurate? @Sula_Yang
The main callout is that per the original topic, boolean props should have less impact on memory—however, instance swap and text properties (which you had multiples of in your example file) can in fact increase memory.
We understand keeping memory usage manageable is important, so support you pursue whichever option you believe is best for your design system.
For future support, feel free to file them: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001731233
