Significant performance drops while working with nested components and design systems

Ask the community
1

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.

6 Likes
2

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

3

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,

4

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.

2 Likes
5

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,

6

Hi there! I’m experiencing the exact same symptoms with nearly the same scenario that @pavelsoyfer reported.

In an attempt to troubleshoot, I moved a page I’m working on from the primary file I was working with in an attempt to reduce memory/CPU. I then reduced the number of components to the minimum besides removing the design system components which has helped some - however my CPU regularly hits over 100% usage on a 2023, M2 Pro Mac. The lag has rendered my workflow to nearly unusable as I wait for 1-10 seconds for even the smallest change (including typing a letter).

Curious to hear if there was a solution that came out of the support ticket or if I should file an additional one. Thanks in advance!

7

@ Jordan_Campbell1

M2 Pro is a pretty capable CPU, I find it a bit odd you’re able to push it to 100% with Figma. Are you running some stuff in the background by any chance?

I’m on a MacBook Pro 2019, 6-core i7 and I’ve just tried opening a file with like at least 60 frames (they’re all instances, but it’s still a lot for Figma to render) and also tried updating my library aaand also tried viewing a prototype. The hover interactions in the proto lag, there’s a 5 second delay between when I hover over and the hover state appearing. And yet my CPU barely hits 60%. AMD GPU is active also, so there’s no earthly way I’m performance bottlenecked.

I was under impression the M1/M2 Pros are basically “gods” among CPU and they tend to outrun Intel based on what I’ve seen. I recall working on a stock M1 on a 13-inch MBP a few years back and somehow it ran huge design files like it was nothing.

So I’m a bit curious to ask about your situation since 100% CPU is what I’d expect from rendering a scene in Blender, not Figma. :slightly_smiling_face:

(Screenshot from Intel Power Gadget)

Screenshot 2024-04-17 at 6.27.14 PM
Screenshot 2024-04-17 at 6.27.14 PM780×344 18.2 KB

8

Yeah absolutely, happy to expand! I put together this Loom to go through the situation on what is nearly a blank-state file as well as what eased the problem. Here’s also a screenshot of the activity monitor status.

CleanShot 2024-04-17 at 12.16.43@2x
CleanShot 2024-04-17 at 12.16.43@2x1480×1762 222 KB

I’ve closed my exuberant amount of Chrome tabs to weight that and other programs out - closed out other intensive apps as well to rule that out.

It could be that I’m using an intense component and would be better off utilizing a series of variables like I explain in the video.

What worked for me (temporary and not ideal) was removing the intensive component’s variants and whittling it down to a base component without prototyping and without interactive tabs/filters until I can replicate the old interaction via variables.

9

I’m assuming you’re referring to the 110.5% CPU column? As far as I know and just Googled, Activity Monitor has this thing where it shows you CPU % for multiple threads as a sum of values for each thread, so what you’re seeing could just as easily be some abstract load for two threads, one of which is at 100%, plus some load on the other.

Check out out the bottom stats in the Activity Monitor — you’re idling at 79.6%. I’m seeing some peaking in the blue chart (User, that’s you and your apps, Figma included), probably up to 80s, but it’s kinda okay for a CPU to peak to a higher load value on occasion when it needs to, well, load stuff. Mostly you’re showing load values similar to mine, judging by the chart, but AM is also pretty infamous for inaccurate stats (or so would Mac forums have you believe).

If you’ve got a spare minute — I recommend trying out an app like iStat, I think there’s a free version available called “Mini”. It’s a monitoring widget, same idea, but I’d trust its values a bit more. Overall I doubt Figma is ever able to load your M2 to it’s 100%.

Also. I’ve watched your video and oh man, I get it. My current project is of similar complexity, with multiple design system files and absolutely — editing a master component, even if I’m just editing text, the document freaks out and tries to update all the instances right away. I talked to Figma support about it some more and I believe they’ve confirmed that it’s Figma trying to loop over every single instance and that’s what causes the slowdown. I even get the same “Document has unsaved changes” prompt as I saw in your clip (the dot next to the tab name). Mine struggles a little bit less now that I’d moved stuff around into multiple files, but even still, these slowdowns occur regularly.

10

Has your performance always been like this? Because I could swear for some reason I’m certain it kinda used to run better. Like I mentioned before, the base M1 (not even a Pro, an entry-level M1) seemed to handle pretty large files, many of them, with a huuuge design system at my last workplace in 2022. And now you’re experiencing performance issues on a M2 Pro which is a spaceship compared to that M1, so idk, maybe I’m imagining things, but my hunch wants to keep asking if there’s been some under the hood changes recently within the app.

11


Here’s my clip. I’ve updated an icon and that icon component is used in a bunch of components on a different page in the same file and as soon as I touch it, the file becomes laggy and the app FPS drops as if I’m running Cyberpunk2077* in the background :sweat_smile:

*a really demanding video game

12

I’ll definitely check out iStat for a more accurate read - appreciate the recommendation!

That’s what I was assuming too, that the complexity and looping of every instance is causing it to be overloaded.

From what I researched and your feedback, the best method for me now is utilizing setting variables for the time being. Thanks for the context you got from support as well!

13

I’m experiencing the same problem on a Mac mini M2 Pro with 64GB. My buttons have become very unresponsive. It takes lately between 2 and 4 seconds to change from default to hover state while hovering.

14

Same problem with countless support tickets submitted and still no resolution. Our prototypes are unusable. And our design system file which used to work very quickly has slowed to a halt and publishing is nearly impossible. 20-45 minutes to publish and usually the publish just times out.

2 Likes
15

I’m experiencing the same problem on a Macbook M1. I have a file with less than 10 components and it’s still happening. Clearly a Figma issue.

I can render 3d files flawlessly on the MacBook, but can’t run Figma? Come on… this is something you need to fix asap as the app I pretty much useless atm.

16

Are any of you using the string variable for something? I used it with the new font variable feature and I think this is what caused the lag.

When I turned it off, the performance was back to normal. IDK if it helps all of you but maybe something to experience.

Lesson learned: Don’t ship a feature that’s not proper tested yet. This is clearly a Figma dev issue and there’s nothing wrong with our computers.

1 Like
17

@Morten_Korshavn we’ve pinpointed it to the typography variables as well. So now we’re undoing all of the typography variables in the design system as a work around to see if that speeds up prototypes.

18

Great that you located the issue. I think that it’s a bit weird that they release this without proper testing when it’s causing such critical errors.

Please, let me know if you find any other issues in the variables that can cause performance issues, then I’ll try to work my way around those :v:

19

I just wanted to chime in — I’m not using typography variables at all. I use some basic text variables to connect states of multiple components. For instance, a single component expands/collapses on click and while doing that it sets a variable to either “On” or “Off”. That variable is then bound to some other component variant, so that once the first one collapses, the other component changes to a collapsed variant too. I have about four of these variables set up this way in a file I’m working on now.

But then again, I’ve just tried viewing a prototype from a different file that uses zero variables and has some card hover interations and when viewed… they do play and relatively quickly (no 3 second delay between hovers now, but that may be because I’m forcing my discrete GPU now), but when I’m trying to scroll the page I can see the prototype/app struggling. Every time I’m trying to scroll the page and the cursor inevitably lands on a card, it then tries to play the hover state — it lags/stutters/freezes for a second. And my temps go up and I can hear my laptop fans spin up.

So my initial point stands — large artboards with nested components and/or design system assets when paired with hover states seem to be quite taxing performance-wise.

I know it’s not really apples-to-apples of a comparison, but when I’m viewing the same UI done in HTML everything flies like Starship Enterprise even with TurboBoost disabled and while on integrated graphics. But the thing is — I gotta be able to preview animations/interations before I send it off to our front-end guy, hence all the performance frustration.

I also stand corrected — forcing the discrete GPU and enabling CPU Turbo does seem to help with performance. It’s far from perfect, but at least hovers work to some extent. I’m working on a frame with a lot of hovers now and even with my AMD 5300M it struggles.

Anyway, hope this provides some more insights.

20

Hi, I have discovered: OS Mac, latest Beta Figma now that the biggest impact on the performance have variables. If I have a screen when Default (Auto) variables are used then the page works fine, but If I apply variables to the layer / page and each of the components is updated, then performance of such a view is dramatically low.

It is interesting comparing to the Tokens Studio plugin which allows to achieve similar effect → the same design system components in different skins, but without paralysing Figma to the point where normal work is no possible because editing a page takes ages.

My solution for now is to work in the auto view with default variables and switch them to the other skin ONLY when editing is finished. For example before sending it to Zeplin. I hope Figma will solve it as I can’t imagine on working on the for themes using the same set of components from one library.