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 per browser tab.
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. Jump to memory reduction tips ↓
Memory usage alerts
Note: You may not see all these alerts in order, and in some cases you may not see them at all. Especially if memory usage increases in a short space of time.
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, 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 variations of a component, we recommend creating boolean properties instead. Boolean properties are a type of component property that allows you to toggle a property, such as layer visibility, on and off.
Even though this method uses hidden layers, it reduces the number of variants and layers needed in a design system, thus improving the file’s memory usage.
In the example below, we created a button component set without using boolean properties. It includes two variants to represent the button's two states: with icon and no icon. This design system has a total of seven layers (one component set layer, two variant layers, and four nested layers).
If we use boolean properties instead, we need only one component and a boolean property applied to the icon to toggle its visibility. This version has a total of three layers (one component layer and two nested layers).
We improved the file's memory usage by reducing the number of layers by more than one-half.
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
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.
Move published components and component sets between files, without breaking links to instances This is a two part process: cut and paste the components, then publish the changes. Move published components between files →
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.
