How to tackle slow performance?

Hi @Eugenezh , what solved it for us was removing as much unnecessary frames and groups as possible. (see Gleb’s post from 1-feb)

If that doesn’t work, you could try splitting your work into more pages or different files.

Good luck :v:

This worked. Lagging gone.

I may be the odd one out.

But I am still experiencing severe Figma’s prototyping performance.

It still not only lags but crashes despite restarting my comp, the browser etc. As part of job application task I am demanded to work and present an array of design accross various screens. Simple as 99% of what everyone use Figma for. Yet it is a hog for some reason when viewing it under browser.

I have done many if not all of the work arounds here.

  1. Deleting many frames and artboards.
  2. Deleting entire pages worth of other bits of behind the scene comps development.
  3. Keeping jpeg images optimized <200kb.
  4. I have also changed many roll over effects from dissolves, smart-animates to just “instants”.

These performance slowdowns (at least in prototyping stages) used to be tolerable last year. But now ~ not even a scroll down 1/4 way of anything it chugs up everywhere. Chrome, Firefox, Safari included.

As I’m typing this, it’s getting worse! It is now stuck on the figma anim icon loading screen no matter what browser! And no matter how many restarts.

Screen Shot 2022-01-16 at 5.48.24 pm

I have had 40+ hours worth of stake recorded in this project even if just a “trial” for a job application. If anyone can help me or at least experiencing the same, please let me know.

Same. No solution yet.

You can use an alternative way to show a presentation.
Try my Demo Station plugin to download your presentation as a ZIP-archive to show it even in offline mode. Or you can use the plugin to upload it into a cloud and show it.

1 Like

I cannot even get simple form drop downs appearing nor working anymore in prototyping. Even if I cut and paste components to fresh new draft file with nothing else it still chugs up within Figma app itself, chrome and safari. Only instant state roll overs seem stable other than that, it’s macbook jet fan noise galore and browser crashes.

And this is without any fancy smart animate features by the way. Just linear on/off states.

Yes, Figma needs some fine tuning…

1 Like

One Thing That is surely Work is steps i mention below will work for you maybe.

First thing you should more Focus is that i used figma in Chrome browser then i switched to it’s official app. It Great Works on desktop. Also Chrome browser use lots memory to run.

Second thing is If you are using Rulers in making Wireframes, Then it will definitely slow down process by half. I know Rulers are very important in Pixel Perfect Design, but when you need them most then you can use it, otherwise turn it off.

Third thing, if your design have lots of Images then use it by compressing via Plugin “Downside”.

My prototype starts lagging when i start a screenshare on zoom. It works fine for the first few mins but then the zoom cpu graph maxes out and the lag kicks in. I tried reinstalling zoom but it didn’t work. If i am not on zoom and dont screenshare, the prototype works from ne. This started happening a few days back and i am really frustrated as i have an important demo coming up in a few days. If anyone can help, please let me know. Thanks

I hope Figma is tracking FPS on user’s machines so they can identify the use-cases where performance is laggy. I’d happily let Figma spy on my projects if it meant they were gonna improve performance.

1 Like

Also struggling with performance here, especially since my project is for a data entry system containing many interactive tables and busy displays.

Question - I’m trying to make it load faster and run smoother and have done ALL of the recommended optimisations already, but wondered which way to go on the following:

  • Local components vs Separate file for design system - Does it make a difference on file size or performance? Should I link my file to our design system and use their components, or detach it and keep only the ones I use in the local file?
  • More screens vs using variables - Using Figma variables does seem to have a significant impact on performance, however when compared to having hundreds of screens in replace, I’m not sure which is better. e.g. 1 screen where variables control a combination of instances on that screen, or multiple screens to contain each possible combination of instances?
  • Additional layers vs additional elements - I use lots of auto-layouts and layers to make my tables easy to maintain and interactive/responsive. I could reduce the number of layers if I add additional ‘spacer’ squares, e.g. instead of a header and table content having separate frames each with separate auto-layouts, I could combine them into one auto-layout with 0px spacing and just use blank squares to create the spacing where needed - would this be better for performance, i.e. each extra layer/level = 10 extra blank elements?
  • Many component variants vs few variants with more hidden layers - Should I have, say, 1 table cell as a component, which contains many hidden elements which I can just toggle visible on the cells that need it, or create many variants of the table cell so that each time I use it I use the specific variant that I need which contains exactly what is needed? (The boolean component property is meant to be efficient for this, but it doesn’t work with variables so I’ve avoided it so far in favour of point 2 above)
  • Modify a component instance vs detach the component - Is it better to keep as many things attached to components as possible, or if I end up making small overrides to the local instance is it better to detach it?

Any experience or knowledge of any of the above points would be really useful!

Local components: they are always loaded so they take up resources. External components are only loaded when you use an instance of them so if you use a library with 100 components and use only one component, only that one component will be loaded.

Fewer nodes = better. Doesn’t matter which type of nodes they are.

Few variants with hidden layers would be better since all variants are loaded at once when you use a single variant so if you have 20 buttons with 5 layers each, that’s 100 layers to load but if you have one button with 10 hidden layers that’s only 10 layers to load.

Shouldn’t matter for performance. But if you delete layers after detaching, that would be an improvement, e.g. if you have a complex instance with 100 nodes but only need 5 of them (others are hidden), then it might be better to detach. Detaching is not favorable though when you use components if it’s a long-term project which you are planning to maintain and update.

1 Like

That’s amazing - thank you!
Also very glad to hear that I can create/use an external component library without it overloading every file that I link it to!

Would still be very interested to hear what effect variables and their various uses have on performance.