In Su Yang’s and Naomi Jung’s Schema 2022 talk “Inside Figma: behind the scenes of component properties” at 10m16s they get into how .fig files get rendered. I was amazed at how using instances is a huge efficiency gain in terms of memory! It got me wondering, if the most impactful thing we can do is to reduce hidden layers, does it make sense to go after regular frames (non-instances) before reducing hidden layers in main components and their instances? If I understood Su’s and Naomi’s explanation correctly, hidden layers in an instance would only add lines of code to a local file when they are overridden.
An example: a library’s button component has two icons that sit on either side of the label. By default these are hidden and tied up to individual component properties.
If 3 instances of this button is placed in a local file, no overrides made, then they’re each only a few lines of code (i’ll say 4 each, 12 total, based on the following screenshot).
And even still, if both of the icons are revealed via component properties (registering as an override) that would show up as an override in the code (one line):
And these component prop overrides showing both icons would make them 6 lines of code (instead of 4), for a total of 18 lines of code.
Rather than if the button wasn’t a component, and neither were the icons, where it would have to render every aspect of every hidden layer as a line of code for every single occurrence! So back-of-the-napkin math would make that 4 objects:
-
parent frame
- layer name
- fill
- height
- width
- constraint or AL settings
-
text layer for the button label
- layer name
- font family
- font size
- fill color
- line height
- tons of other typographic settings
-
left icon
- layer name
- SVG path
- fill color
-
right icon
- layer name
- SVG path
- fill color
That’s at least 16 lines of code per occurrence, 16 x 3 is 48 lines of code. Again, if I’m understanding correctly, this means hidden layers in component instances are 2.66 times more efficient/less expensive than non-componentized hidden layers!
Would love it if someone who understands the technical side of Figma could confirm or let me know where I’ve gotten anything wrong.