Hi Figma team & community,
I’m managing a design system and I wish to make a massive update to make it lighter to improve performances on our design files.
With variables and components variants, there are infinite possibilities on how to create components. The outcome components will likely be a mixed between variables and component variants, but when I can prioritize one versus the other, I would like to know what will improve performance based on how Figma is structurally built?
Performance rumours:
— One one hand, I’ve heard that pasting a component instance in a file brings all its variants with it. So having 2 instances of a component with 8 variants, would equal having it 16 times in our file, which increase its weight.
— On another hand, I’ve had very complex and massive prototypes in the past, and at some point when I was having many many variables, it started to crash and not render/take-into-count all the variable rules and logic as it was lacking memory.
Approach options:
Below example showing how ‘State’ can be managed as variants or variables, but this could be extrapolated multiple times within a single component to manage more options. E.g. Button types (primary, secondary, tertiary, etc.), Button sizes (large, medium, small, etc.), etc.
1. Variants approach
2. Variables approach
Please Figma team, guide us on how to make the most out of this powerful tool, and let us know if the above rumours are true or false!