···

    Reduce memory usage in files

    If you're working with large files or libraries in Figma, you may run into memory limitations. In this article, we'll outline some of the ways you can adapt your files so they work within these limitations.

    What is memory?

    We use the general term “memory” throughout this article to explain and address the memory alerts you’ll see in Figma.

    In this article, we’re referring to a specific type of memory: WASM memory (WebAssembly Memory). Figma uses WASM memory to render layers and objects on the canvas and deliver a collaborative multiplayer experience.

    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 is built on browser-based technologies, these limitations apply even when you’re using Figma’s desktop applications.

    Manage memory

    Figma measures your memory usage as a percentage, which means you may see different values across platforms or devices.

    To view memory usage indicators for the contents of your file:

    1. Select the Main menu and hover over View.
    2. Select Memory usage. The memory usage will appear as a meter in your left sidebar.
    3. Click Manage memory.
    4. From the Manage memory modal, toggle Show memory in layers panel. This allows you to view how much memory your layers and components are using.

    Tip: You can also view Memory-reduction tips in the modal for best practices to manage your file's memory.

    Memory usage alerts

    To keep you informed of your memory usage, and any potential issues that may arise, Figma displays banners and alerts at certain thresholds:

    Note: You may not see all these alerts in order. If memory usage increases in a short space of time, you may not receive an alert at all.

    When you reach 60% of the browser's memory limit Figma will show a yellow alert tile in the left sidebar.Templates__4_.png

    At this point, you may experience performance issues—like lagging in multiplayer—when interacting with the file.

    When you reach 75% of your memory limit, Figma will show a red alert tile in the left sidebar. You cannot dismiss this alert.Templates__2_.png

    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.

    Click Learn more to view suggestions for reducing memory usage or follow the tips we've outlined below ↓

    If your file reaches 100% of your memory limit, Figma will lock the file and inform you that there's no available memory.100_usage.png

    At this point, you must restore a previous version of the file that used less memory:

    1. Open the project where the file is located.
    2. Hold down the modifier keys and click on the file in the file browser
      • Mac:⇧ Shift ⌃ Control ⌥ Option
      • Windows: Alt Shift
    3. Select Restore from version.
    4. Click Restore next to the appropriate version

    When memory usage drops below 50%, you'll see a success message and can dismiss the alert.

    Note: If you receive a memory usage alert during scheduled maintenance, Figma displays two banners at the top of the screen. We recommend waiting until maintenance is complete before leaving the file open or trying again.

    Tips for reducing memory

    There are a number of factors that contribute to memory. Unfortunately, there isn’t a specific number of layers, data, or resources you can look out for. This means we can’t give you a one-size-fits-all approach to reducing memory. If you’re experiencing high memory usage, use the following solutions to help troubleshoot the issue.

    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.

    Solutions:

    • Boolean component properties: 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, improving the file’s memory usage.
    Before After

    Our button component set has two variants to represent the button's two states: with an icon and without an icon.

    This component has a total of seven layers (one component set layer, two variant layers, and four nested layers).variants-only.png

    We only need 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).

    reduced-by-boolean.png

    Tip! To delete a layer, select it in the canvas or Layers panel in the left sidebar. Then press the delete or backspacekey to remove it.

    Large component or variant libraries

    The number of components and variants can contribute to memory usage. You may still run into memory limits if you have only a few component sets, but they have thousands of variants.

    Solutions:

    • Use Component properties: If a library has a large number of variants or a file is near the memory limit, consider using component properties → to reduce the number of components and variants needed.

      This improves memory usage because Figma loads all components in a component set. This allows you to quickly switch between variants. If you use component properties and have less variants, there’s less components Figma needs to load.

    • Break up large library files: If your library file is still near the memory limit after making these adjustments, you may need to divide it into smaller libraries.

      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. 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.

    Solutions:

    • Split up large files into smaller files: create new files for each page in your current file.
      1. Create a new file in your Figma account. In a separate tab, open the original file and view the page you want to move.
      2. Use the Select all shortcut to select everything on the page.
        • Mac: ⌘ Command A
        • Windows: Ctrl + A
      3. Use the Copy shortcut to copy the page's contents to your clipboard.
        • Mac: ⌘ Command C
        • Windows: Ctrl + C
      4. 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
      5. In the original file: open the page list in the left sidebar. Right-click on the page name and select Delete page.
    • Compress your image files: the Downsize plugin allows you to compress large images on the canvas.

    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.

    Access locked files

    If your file reaches 100% of your memory limit, Figma will lock the file and inform you that there's no available memory. There are two things you can try:

    • Restore the file to a version that uses less memory. If you aren’t able to access version history from the file, you can still perform this action in the file browser.
    • If you see a white screen, your file may have crashed due to image memory. In this state, you won’t be able to access the file or the file’s version history. You can try open the file with images in thumbnail mode ↓.

    Restore previous version

    1. Open the project where the file is located.
    2. Hold down the modifier keys and click on the file:
      • Mac: ⇧ Shift ⌃ Control ⌥ Option
      • Windows: Alt Shift
    3. Select Restore from version.
    4. Click Restore next to the appropriate version.

    Open file in thumbnail only mode

    You may be able to access the file again using thumbnail-only mode. This loads the file with low-resolution images.

    To access thumbnail-only mode, add a ?thumbnails-only=1 query parameter (also known as a query string) to the end of the file URL.

    • If the link doesn’t include existing parameters, the link ends with the file name. You can add a new ?thumbnails-only=1 query string to the end of the link. The final URL will look like this: 
      https://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?thumbnails-only=1
    • If the link already has parameters, like a ?node-id parameter, you need to add &thumbnails-only=1 instead. Use an & delimiter when adding more parameters to a query string. The final URL will look like this: 
      http://figma.com/file/Xhi0lg09reehpFWk4f9NQh/file-name?node-id=211-2665&t=D5QnxlouJ9sKF1dM-0&thumbnails-only=1

    You can now try any approaches to reduce memory usage.

     

    Related Videos

    See more