Reduce memory usage in files
Every browser has its own active memory limit. This can differ across devices but the general understanding is there's an active memory limit of 2GB across all tabs for a browser.
As Figma serves both the web app and the desktop app via a browser, these limitations apply when using the Figma desktop app too.
If you're working with large files and libraries in Figma you may run into these limits. To continue to use affected files, you will need to reduce your memory usage.
In this article, we'll outline some of the ways you can adapt your files so they work within these limitations.
Memory usage alerts
Figma measures your memory usage as a percentage, which means you might see different values across platforms or devices.
To keep you informed of your memory usage, and any potential issues that may arise from that, Figma displays banners and alerts at certain thresholds.
- A yellow banner will appear at the top of the screen when you reach
77%of the browser's memory limit. You can't dismiss this banner and Figma will offer you suggestions for reducing your memory usage. You may experience performance issues, like lagging in multiplayer, when interacting with the file. - A red banner will appear at the top of the screen when you reach
90%of your memory limit. You can still make changes to the file, but we recommend taking immediate action to protect your work. Failure to reduce memory usage now will increase the possibility of data loss. - If your file reaches
100%of your memory limit, Figma will lock the file and inform you there's no available memory. At this point, closing other Figma tabs and reloading the browser may allow you to open the file. If you're unable to open and load the file, you'll need to restore a previous version of the file that used less memory.
There are a few actions you can take from the banners themselves. Otherwise, we recommend following the tips we've outlined below ↓ to reduce your memory usage.
- Click Show memory-reduction tips to view suggestions for reducing memory. Once your memory usage drops below 65%, you'll see a success message and can dismiss the banner.
- If you can't make any changes, closing other Figma tabs and reloading the browser may allow you to open the file.
- If you're unable to open and load the file, you'll need to restore a previous version of the file that used less memory.
Scheduled maintenance: If you receive a memory usage alert during scheduled maintenance, Figma will display two banners at the top of the screen. We recommend leaving the file open and trying again once maintenance is complete.
Reduce memory usage
There are a number of factors that contribute to memory usage. It's not as straightforward as a specific number of layers, data, or resources in the file.
Note: We're using the term memory very generally here, but the memory usage banners are only triggered by WASM memory (WebAssembly.Memory) usage. Figma uses this memory to render layers and objects on the canvas, as well as deliver the collaborative multiplayer experience.
Hidden layers
Hidden layers are a big contributor to memory usage. This is because Figma needs to store and render information about those layers even when they're not visible.
If you're using hidden layers to switch between different states or variations of a component, we recommend creating variants instead.
This reduces the number of layers in each instance, while still allowing you to switch between different variants in a component set.
This is also something to bear in mind for complex components and instances with multiple levels of nesting.
Note: You'll also need to take into account the size of your component sets. A few component sets with thousands of variants in them will still contribute to memory usage.
Tip! To delete a layer, select it in the canvas or Layers panel in the left sidebar. Then press the delete or backspace key to remove it.
Large component or variant libraries
Caution: At the moment, it isn't possible to move components between files without breaking the connection between the main components and instances in other files.
If you have a large library of components or variants and are near the memory limit, you may need to divide it into smaller libraries.
Both the number of components and the number of variants can contribute to memory usage. So you may still run into memory limits if you have only a few component sets, but they have 10000's of variants oor properties.
We realize the limitations around moving components is particularly frustrating when addressing memory issues. This is something we're actively working on. We've outlined one approach for moving components below.
Note: We recognize this is very involved, especially at scale. In the meantime, third-party plugins like the Master plugin → which requires its own paid subscription, will allow you to do this programmatically.
- Copy components from the original file and paste them in the new file. This will create instances of your original component in the new file.
- Select all instances and use the Detach instance shortcut to detach them from the original main component.
- Select the frames and click the next to the component icon in the toolbar. Choose Create multiple components.
- Click the next to the file name in the toolbar and select Publish styles and components from the options. Add a description and click Publish.
- Open a file which uses components from your original library. Enable the new library that you just published so its available in the instance menu.
- Select an instance in the file and in the menu select Edit > Select all with same instance action. This will select any other instances of that component in your current file.
- In the right sidebar, use the Instance menu to select the same instance from the new file. You can change the source file using the file menu next to the search field.
- Repeat this for each relevant instance in the file. You'll also need to repeat this process in any other files that used components you moved from the original library.
Tip! There are lots of different ways you could divide up your library, the best approach is the one that meets the needs of your library's users.
Learn more about creating and organizing libraries: 📘 Best practices: components, styles, and shared libraries →
Large files with multiple images and pages
If you have a large file with a significant number of pages, or lots of high resolution images, you may experience performance or memory issues.
If this causes browser-level crashes, Figma won't display the memory usage banners. This is something to think about when working in files with a large number of high-resolution images.
We recommend splitting up large files into smaller files by copying the contents of each page, and pasting it into a new file.
Caution: At the moment, it isn't possible to move components between files without breaking the connection between main components and instances in other files.
If you need to break up a library file into smaller files, follow the instructions above ↑
- Create a new file in your Figma account.
- In a separate tab, open the original file and view the page you want to move.
- Use the Select all shortcut to select everything on the page.
- Mac: ⌘ Command A
- Windows: Ctrl + A
- Use the Copy shortcut to copy the page's contents to your clipboard.
- Mac: ⌘ Command C
- Windows: Ctrl + C
- Return to the new file in a separate tab. Use the Paste shortcut to paste the contents of your clipboard:
- Mac: ⌘ Command P
- Windows: Ctrl + P
Import large assets
Importing large amounts of text, images, or complex vectors with many points can also impact your memory usage. You may need to reduce the number or quality of assets you import, or reduce the size of the files you're importing:
- Break large files into smaller files.
- Compress high resolution images.
- Import complex SVGs in smaller parts.
Learn how to import files into Figma →
Note: Image decoding uses JS memory, which isn't included in the memory percentage or banner alerts. Images can still contribute to WASM memory as they are rendered on the canvas.
