Breaking components for performance issues

Our teams are facing performance issues in Figma while using design system components. They constantly have warning and error messages related to memory usage.

This is happening mainly when we use components:

  • with several variations and properties
  • composed of other complex pattern components

Examples of components that are facing this problem:

  • Table
  • ChatBubble
  • Pagination
  • Nav
  • And more…

We already investigated Figma’s documentation here about this topic and we understand that we’re developing the components in the correct way following all the best practices mentioned.

The only solution that we see is breaking current components into multiple ones. For example, break the component into smaller components like ButtonPrimary, ButtonSecondary, ButtonError… However, this is not a complete solution and doesn’t seems right/the best approach for us since we have great features in Figma like boolean properties and more.

  • Do you believe this is a best practice for the construction of complex components and patterns in Figma?
  • Do you have tips about the best structure for this type of complex component that avoid the memory usage problem?
  • Do you have suggestions on how we can improve our library to avoid these issues?

I have faced similar while back on a large file of component, Here is my Experience

  • The most usage goes to tables that have Hover and are under each other as pagination page

  • Separate the components that are not prototyped in the same page into different pages

  • Make sure you have a really decent internet connection, I noticed the more powerful the network is, the less ram consumes by the PC

  • Use the App 100%

  • Reduce the size of images and dump data (Cropping them would work too)

  • Don’t overuse variants in one components like 10/20, break them into different components.

I hope these tips help you

1 Like