How to Optimize Figma for Customer Presentations?

Figma is a tool for designing and prototyping digital experiences. It’s also a great way to make customer presentations.

The prototyping functions offered by Figma are a fantastic way to quickly get customer feedback.

During some customer presentations, I encountered an important problem: Figma memory is sometimes insufficient. In fact, two types of occurrences impact the navigation during the start of the animated prototype:

  • The prototype turns completely black,
  • Shortly after Figma opens, a message appears via a pop-up stating that the memory is insufficient.

I then became Interested In the different ways to fix it and get a fluid prototype. We are now going to discuss 3 issues that greatly improve Figma performance.

1 – Avoiding Hidden Layers

If a component uses a lot of hidden layers, a Figma file can potentially be associated with millions of objects, and that inevitably contributes to exhausting its memory.

Our advice? Create several different components.

2 - Compress your Images

In my opinion, the speed of the prototype is mainly impacted by the images' weight.

In HD quality and in large dimensions, Images can take up a lot of memory. Since Figma does not have any plugins for optimizing images, I personally went through Photoshop and its "Optimize for the web" functionality and then reimported the images into Figma. With this manipulation done, we can really feel the difference.

Another tip: Figma offers a tool that Indicates the resources consumed by each item. Thanks to this functionality, you can quickly judge if your file is too large.

­­3- Use of an External Library

To gain RAM, it is good practice to have two files:

  • A library of all components,
  • A file made up of all the models without the components.

In this second file, we authorize the external library via the assets board. Using an external library is a very good practice within the framework of design systems (when several files communicate with the same component file).

­­4- Conclusion

Figma can be used like Invision.

To do this, it is necessary to optimize your Figma file to avoid memory problems.

To summarize:

  • Avoid large images or large vector files,
  • Avoid hidden layers in the components, as they lead RAM overconsuming,
  • Promote an external library of components.