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, Figma displays banners and alerts at certain thresholds:
- A
60% usage
When you reach
60%of the browser's memory limit Figma will show a yellow warning banner, you can't dismiss this banner.This file is almost out of browser memory. Remove content to lower memory use to 50% or less. This will ensure you can continue to work in this file safely.
Figma will offer you suggestions for reducing your memory usage. Click Show memory-reduction tips to view suggestions for reducing memory.
At this point, you may experience performance issues—like lagging in multiplayer—when interacting with the file.
- B
75% usage
When you reach
75%of your memory limit, Figma will show a red alert banner, you can't dismiss this banner.Adding content is no longer safe as data may be lost. Remove content to reduce this file’s memory use or restore a previous version.
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.
Follow the tips we've outlined below ↓ to reduce your memory usage.
- C
100% usage
If your file reaches
100%of your memory limit, Figma will lock the file and inform you there's no available memory.This file has run out of browser 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:
- Open the project where the file is located.
- Hold down the modifier keys and click on the file in the file browser
- Mac: ⇧ Shift ⌃ Control ⌥ Option
- Windows: Alt Shift
- Select Restore from version.
- Click Restore next to the appropriate version
- D
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.
Figma is undergoing scheduled maintenance for the next 30 minutes. Keep this tab open to ensure your changes are synced once maintenance is over. Learn more.
- E
Memory reduced
Once your memory usage drops below 50%, you'll see a success message in the banner. You can now dismiss the banner.
You successfully reduced memory and this file is now safe to use. You can close this banner.
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 or 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.
Tip!The Downsize plugin allows you to compress large images on the canvas.
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
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.
