Significant performance drops while working with nested components and design systems

Greetings!

I’d like to report issues with Figma’s performance when working with both components and prototypes. I’ve got multiple files with a descent amount of frames and quite a lot of nested components. I’ve tried splitting everything into multiple files, I’m using variables/properties, but even with those techniques as soon as I update a single line of text in a component everything lags like there’s no tomorrow.

From what I can gather, the lagging occurs as Figma is trying to update all component instances. I’ve tried splitting the design system into various files as I mentioned, so that it doesn’t have to update everything at once, but it still struggles a lot and for a second (…or ten. Or more.) the file becomes virtually unworkable. It even shows the cloud icon saying the file has unsaved changes, despite my connection being solid.

The thing is… it’s not the delay when it’s updating instances that’s bothering me. It’s the fact that any changes are synched rightaway, which makes editing a component incredibly slow.

For instance, I have a card component that’s using other components inside (imagine a card with rows of text). The inner components are stored in a separate file, no changes being done to them. So I take a bunch of cards like that and use them in a larger frame — like a view of a web app. That larger view I make into a component also, so that I can place its instances next to it, shrinking/expanding their sizes (to show how the auto-layout works on 4 breakpoints).

So, in total: component #1 — a card (uses smaller components from another file), component #2 — a webapp view with 10 cards, and about 12 instances of component #2 next to it.

That doesn’t seem excessively large, given how I’ve seen design systems way larger at my last job. And yet, both editing any text inside component #1, its instances within component #2 and playing the prototype is just abysmally slow. I’ve got a relatively capable MacBook Pro 2019 with a hexacore CPU, more than 4GB or RAM is free (16 total), the computer isn’t utilized fully, CPU load is pretty low. I feel like it’s some kind of Figma’s “engine” bottleneck.

But it gets better! Placing a separate frame with the same card compoment, with nothing in it, just the card — the hover animation between 2 card variants lags still. Even if that new frame doesn’t have any instances, just a frame. So it’s like the whole file or anything inside of it lags.

I’ve tried cleaning the caches, I’ve reinstalled the app last night, I’ve tried it on a dedicated GPU — nothing. I’ve sent it to other people and they confirm it lags on their machines as well.

I seem to recall being able to make larger prototypes and they worked well on an M1 MacBook Pro 13. Our DS has loads of components in various files, but isn’t that… the idea? So I can’t imagine how larger products are able to work with hundreds of screens/frames since it doesn’t seem to be dependent on my laptop’s performance. If this little thing can handle a modern game at high settings (Fallen Order, High, ~40fps, AC Unity Ultra High — 50-60fps), it should probably be able to handle a Figma prototype :slightly_smiling_face:

Please let me know where I can talk to someone about it, I’m willing to provide any feedback or details if it helps resolve this issue.

Best regards,
Paul

P. S.
Published design system updates often wouldn’t apply to a current file when I press the “Update all” button — nothing happens. I’ve had to reload a tab multiple times today alone to see changes from other files. It’s like after a certain amount of complexity the app just struggles.

Hello! I have the same problem. I can not make 3 layer side navigation. I have lots of nested components inside and it’s bugging…(((( I re-did side nav several times but it became worse

Hi @pavelsoyfer, Thank you for bringing this to our attention! I understand your frustration regarding the performance issues. We also appreciate you taking the time to troubleshoot.

While we would like to offer more assistance here, it’s a bit challenging to investigate the cause of this issue without a closer look at your file.
Therefore, I recommend reaching out directly to our support team for help: https://help.figma.com/hc/en-us/requests/new
To assist our support team in investigating, kindly provide the following information:

  • Please make sure to use your Figma account email.
  • Share the direct link to your file, and add support-share@figma.com as an Editor to the file (this won’t impact your billing).
  • It would be extremely helpful if you could provide a video recording of the issue you’re facing.

Additionally, you may already be aware, but the tips provided in this article might be helpful in addressing your situation: Tips for reducing memory

Also, Thank you for informing us about the issue regarding Review and accept library updates (in P.S. section). It’s available on any paid plan and for anyone with can edit access.
If the issue persists, please don’t hesitate to reach out. I can divide the topic to provide further assistance if you want.

I hope this information is helpful. Please let us know if I misunderstood anything.
We also welcome any suggestions or insights from our community, so feel free to share!

Thank you,

Hi there, just wanted to add that I’ve tried viewing a prototype of a website I did a while back and on the same laptop, same OS version, etc. etc., it now works slower. Even when using my discrete GPU, simple hover transitions on buttons lag. There’s a very noticeable lag between the cursor moving onto a button and it animating to its hover state. And that project is a lot less complicated than the design system I’m currently working on.

So… It doesn’t seem like these issues are on my end. Even if I’m working on a relatively large frame, like a desktop web page, around 1600x7000px, button animations should work well, otherwise what’s the point in having them.

I’ll try to contact the support team now.

1 Like

Hi @pavelsoyfer, Thank you for providing us with the additional information!

I appreciate you reaching out to our support team, and I can see your ticket (#963173) in our system. Our support team is currently working on it and will contact you to provide assistance.

Thank you,