How to tackle slow performance?

Hello everyone,

For our Interior Design presentations (and other presentations) I’m trailing whether we could switch from InDesign to Figma.

Main reason for this is the exciting communication features Figma offers that we can use internally and with clients.

Another great opportunity is creating more dynamic presentations for live presentation to clients. Only problem; on my Dell XPS 13 9350 our first presentation rebuild is very slow and lagging in present mode… (It works fine on our designer’s PC, but often the presentation is done through laptops)

My question: are there any tricks for keeping a file ‘lightweight’ ? :smiley:

1 Like

Or is there maybe an article I missed on managing this challenge?

I haven’t had this problem myself but I read one person had a similar issue. They solved it by simply removing all unnecessary frames and groups from the screen, leaving only objects that have colors or connections in the prototype. Everything else was removed and they said it reduced the lag significantly, so they even wanted to find someone who could write a plugin that would do this automatically.

3 Likes

Hi Onno :wave: The Help Centre article here on Troubleshooting Memory Issues has some good tips on ‘Managing Memory Use’ which should also help make a File more ‘lightweight’: https://help.figma.com/hc/en-us/articles/360040528173-Troubleshoot-memory-issues

The most common issues I’ve seen include images added at a larger size than they’re used at, stacked effects and gradients (which are heavy to render) and hidden layers in Components. I’d suggest you start by minimising the use of these in a duplicate File to check if it helps.

Hoping this gives you somewhere to start!

3 Likes

Hi Gleb, thanks for your input and suggestion! I’m a bit puzzled about unnecessary Frames and groups. Currently each of our frames (25) represents one presentation slide and all of them are used. Do you have an example?

Hi Katie, thank you too for your input and suggestions.

Aha… Good point, image sizes is probably is a good starting point.

Since we just started trailing we haven’t gotten to the part of creating components yet.

I’m not sure what you mean with stacked effects? :smiley:

Frames and groups and component instances can be nested in each other. “Unnecessary” ones are those that only create better layer hierarchy/structure and are not visually represented on the screen in any way (all groups, most frames). Of course you will need to keep your 25 top-level frames, but what’s inside of them can be optimized. Basically, if there is a frame that doesn’t have fills or strokes or effects or any group (they don’t have strokes/fills/effects in all cases), select it and hit Shift + Cmd/Ctrl + G (ungroup) to reduce the amount of layers. Note that such nodes may still be important for design purposes, so you should only do that in a copy of the file just for the prototype optimization purposes. In the ideal case, you will be left with only text nodes, rectangles, lines, etc. in each frame with no nesting at all (but perfection is unreachable, and that’s ok).

1 Like

Yeah, I just noticed this as well with one of my prototypes, it’s not super heavy I think but dang it feels really slow. It’ll be easier if we know what are the things that’s causing it to be slow rather than trying to make some random design changes on the file.

I do wonder, since on the prototypes it’s static images, wouldn’t it be possible for when a prototype is presented, some form of automated image optimisation and etc. is done behind the scenes? I know this may sound easy but admittedly difficult to implement, just thought of sharing the idea out.

And I’ve just made an interesting observation, I opened the prototype on my iPad and it just flies. Only downside is the iPad device overlay seems to scale wrong on that device, the prototype looks and function fine, but the iPad device overlay is definitely wrong.

3 Likes

Hi again Omar! The problem with the overlay scale on the iPad sounds like it could be a bug. Can you send the Support Team some video of this, by using the ‘?’ widget to ‘Get help’ and we can file a bug for you or suggest a workaround. Thanks!

Not sure if you have many images, but that can also help make it slower.

This plugin from @Alex is a great way to optimize your files.

6 Likes

Much love for all of your (detailed) feedback and suggestions!! @Bruno_Figueiredo @Gleb @Omar @KatieLee Means a lot to get help so fast from different angles when you’re just starting out.

We’ve duplicated our project and will now start looking at your different points, process them, and after each step look what’s working.

Once we have a result we’re happy with I’ll update you again! :smiley:

3 Likes

Just echoing what everyone else has said. Try to import images at or near the size you will need them. Also optimizing them via the plug in mentioned above or through a site like tinypng.com or using imageoptim (mac program).

Just submitted the bug report! :smiley:

2 Likes

Hello @Bruno_Figueiredo @Gleb @Omar @KatieLee. Same issue. I read all the previous answers, removed all the optional frames from the layout, but the prototype still lags and freezes. It is impossible to scroll down the layout normally, and even more so to open the side menu. Nothing helps to solve the problem. The interesting thing is that the other, more complex and bulky prototypes work fine, and this landing page is freezing and lagging. For some reason, no one from support responds to my topic, although I attached screencasts and a link to the prototype and described the problem in detail. If it is not difficult for you, answer in my topic to draw the attention of support to my problem. This really prevents you from approving the layout with the customer. Thanks. Here is a link to my topic: Prototype is freezing (mobile layout)

This eventually helped fix our problem! Initially, we started with downsizing all of our images and that seemed to have no impact.

1 Like

@Gleb, do hidden layers affect rendering time?

[EDIT] Nevermind, it’s discussed here: https://help.figma.com/hc/en-us/articles/360040528173-Troubleshoot-memory-issues

I found a solution! Hopefully helps some of you as well.

Have been wrestling with this on a prototype that needed to be presented to a wide audience. The prototype worked flawlessly on the Figma desktop app (and pretty smoothly on iPad and at least one Android phone), but I really needed this to be accessible with a share link on any browser on any desktop computer and it was just so painfully slow, it wasn’t going to work.

The slow-down for me came primarily from transition animations. I set all transitions to Instant and now the prototype is completely usable in-browser. It’s a bit of a shame since animations add a level of refinement to the designs, but… :man_shrugging:

Hope this helps anyone else struggling with this.

2 Likes

Hi Daniel, thanks for taking the time to share your solution! I have noticed that especially once you start using smart animate or smart matching layers it slows down the preformance more than the simple ones. We will keep your trick in mind :grinning_face_with_smiling_eyes: :v:

@Daniel_Olmstead @Onno
I’ve made a request for that.
Please vote :wink:

1 Like

Good day!
my team’s using Figma for Marketing purpose, we have a lot of promo materials in the workspace.
Now, we face with the situation that the poductivity of Figma was significantly slowed down. Can you suggest us the solution?

Thanks in advance.