How can I optimize Figma performance when working with large design files?

Also struggling with this. Check your layers count. Remove unnecessary layers. Also, if you have a bunch of variants in components see where you can reduce.

Do you know if hidden layers affect performance? It’s common to customise a variant by hiding unnecessary layers which leads to having tons of hidden layers.

The amount of variants only affects the updating speed of said component and I don’t think it has any other effect on performance per se. However, if you have like an icon component with hundreds of variants, then updating the instances takes ages.

Apparently, yes. I reached out to help and they mentioned to remove hidden layers in instances. I haven’t done this as this though.

That essentially means we should get rid of structure components as they often add hidden layers to many components. The repercussion of that is we need more variants of different components. Given that it slows down the updating process, I think it would be best to dedicate a page to more complicated components (e.g. button: variants, states, different content) so that you could have “variants” as individual components. That is, if you aim to optimise the performance.

I have a project that uses a component library I’ve designed. In its current form, I’ve tried to minimise the amount of variants with nested structure components which apparently is the worst case scenario performance-wise. I’m going to test my hypotheses and report back to what seems to improve the performance.

​@Daraa Team, I have now finished the rebuilding of the said component library. I got rid of all structure components, expect the ones that were crucial for interactions, and increased the amount of variants. I wanted to keep all variants of a single component within one Figma component to see how much the removal of hidden layer affects the performance. I might split some components into smaller bits later.

I had to keep consistent with layer names so swapping into a different variant wouldn’t reset the instance. Additionally when the content of a component consisted from an optional icon and text layer, I split it into two variants. I thought as long as variant multi-edit (`Q`) works it’s fine to add more variants.

Now with these changes, the amount of hidden layers plummeted. The performance got significantly better and prototype works so much smoother. Components with less variants update crazy fast compared to those with dozens of variants.

The biggest improvement on performance was when I rebuild my 250-variant icon component as separate components. Previously, adding a new icon practically caused updates on majority of components (icon was used in lots of structure components). I also had a hidden editable layer in each icon which I moved away from the new icon components. They now exist outside of the component if edits are needed.

The only downside is that since this restructuring changed names and the usage of icons changed completely, I have to manually change the icons and all text content within the files that uses this component library. If you decide to do what I did, remember to duplicate your design file and update the library on the copy only!

It’s worth it the hard work.