Note: The following updates were released November, 2020.
In previous versions of auto layout, alignment was controlled at the child object level. This meant you could have different alignments for different child objects in an auto layout frame.
We found the behavior uncommon among users, so in November 2020 we moved alignment controls to the parent frame to simplify how auto layout works. With the latest update, all child objects have to be aligned the same way.
If you already have auto layout frames with children of different alignments that were created before November 2020, you may see a warning in the auto layout modal.
Update
In order to make adjustments to your auto layout values, you first need to update the frame in order to remove the individual child alignment. After updating your frame:
Figma will try to maintain your original design visually. In many cases, Figma will add intermediate frames to allow for differing alignments. These frames will be named Auto-added frame.
You can immediately undo this change, however, if you click away from the window or refresh the page, you will not be able to undo the update in the future.
If you’ve updated a main component, confirm its instances updated correctly.
To create a design with child items with different alignment:
Select the item you want to align differently.
Add Auto layout to the item using the keyboard shortcut ShiftA.
Set the newly created frame to Fill container in the axis you want the alignment to be in.
✅ You have a reliable and stable internet connection
Figma requires access to a reliable and stable internet connection. Figma does not currently support offline move.
If your connection is unreliable, or you experience periods of limited bandwidth, your performance will be impacted. Some things you may experience are:
Files loading slowly
Seeing low-resolution versions of your images
Reduced performance when panning and zooming in the Canvas
We're actively working on improving the Figma experience for low-bandwidth connections. Let us know by reaching out to the Support Team or Submit a bug report.
✅ You're running the latest version of your preferred browser
Figma doesn't support developer or beta versions of browsers. We only support stable release versions of Chrome, Firefox and Safari.
Figma is built using WebGL. You will need to have this enabled to use Figma. You can check if your browser has this installed and enabled, by visiting this website: https://webglreport.com/
There is currently an active memory limit of 2GB on Files. If you are working with large Files in Figma, then you may run into some issues with memory. When your File reaches the active memory limit we will display an error message on screen.
Ask your IT department or systems administrator to unblock Port 443. This is the standard port for websites that are run over SSL (Secure Sockets Layer - https).
Advanced Troubleshooting
If you're still encountering problems, we may ask you to perform some diagnostic tests.
We've put together step-by-step instructions that take you through these tests. Follow the links below for more information.
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:
Select the Main menu and hover over View.
Select Memory usage. The memory usage will appear as a meter in your left sidebar.
Click Manage memory.
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.
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.
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.
Hold down the modifier keys and click on the file in the file browser
Mac:⇧ Shift⌃ Control⌥ Option
Windows:AltShift
SelectRestore from version.
ClickRestorenext 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).
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).
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 →
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.
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: ⌘ CommandA
Windows: Ctrl + A
Use the Copy shortcut to copy the page's contents to your clipboard.
Mac: ⌘ CommandC
Windows: Ctrl + C
Return to the new file in a separate tab. Use the Paste shortcut to paste the contents of your clipboard:
Mac: ⌘ CommandP
Windows: Ctrl + P
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:
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
Open the project where the file is located.
Hold down the modifier keys and click on the file:
Mac:⇧ Shift⌃ Control⌥ Option
Windows:AltShift
Select Restore from version.
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:
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:
There are three multiplayer limits when working in files. When the file reaches any of those limits, Figma will adjust the multiplayer experience to improve performance and maintain collaboration. The current multiplayer limits are:
Note: We're actively working on increasing these limits! If you reach these limits, we would love to hear from you. You can reach the Figma Support team using the menu. Please include any context for your use case, and the impact the limits had on your work.
Cursors
To improve performance, Figma and FigJam will only show up to 200 multiplayer cursors to other users in a file at any one time (you'll always be able to see your own cursor). We will prioritize the cursors of any editors over viewers.
Figma and FigJam will always show the cursors of anyone being followed by other participants. These cursors won’t contribute to the 200 cursor limit.
If you join any time after this limit is reached, we will notify you that your cursor is hidden to other participants. You’ll still be able to see your own cursor in the file.
Tip! If people follow you in a file, your cursor will be shown to everyone whether you're a viewer or editor.
Editors
Anyone that joins a file as an editor is included in the editor count. Once the editor limit is reached in a file, anyone who joins the file will be given view-only access.
If you join after this limit is reached, Figma will show an alert to confirm you’ve been converted to view-only access. Click Done to dismiss the window.
If you have edit access to the file, this limitation only applies to the current multiplayer session. You'll be able to edit again once existing editors leave the file.
Once the file reaches 500 participants, anyone that joins the file will only see a static version of the file. It won't be possible to view any multiplayer actions, including other participants' cursors or any changes being made to the file.
If you join the file after this limit is reached, Figma will let you know that you have view-only access and any multiplayer cursors are hidden. Click Open view-only to open the view-only version of the file.
When participants start leaving the file, you can try refreshing the page to get access to it.
You have access to a variety of fonts in Figma. This includes default fonts provided by Figma, fonts installed on your computer or device, and shared fonts if you're part of a Figma organization.
When you're in a Figma design file, Figma checks to see if you have access to the fonts being used in that file. If any text is using a font that you don't have access to, a missing font warning will appear in the file.
If you're still experiencing problems, please submit a bug report! To speed up the process, please let us know which steps you've tried and any results. Learn how to submit a bug report →
Inter is Figma's interface font and is one of the default fonts we provide in Figma. If you also have Inter installed on your device, Figma will use this version over the one provided by Figma. If your organization uploads Inter as a shared font, Figma will use this version in files.
If editors use different versions of the same font, you may see conflicting fonts. This can appear in any of these ways:
The font is an available choice in your Figma file, but some files have the missing font warning modal. This happens when other editors of the file using a different version of the same font.
B
Text shifts or changes format
The text layer moves or reformats when you edit it (e.g. baseline shifts, changes weight, changes alignment).
This happens when other editors of the file are using a different version of the same font.
Crystal has Inter v3.0 installed on her computer and uses it in a Figma file. A few days later, Joey installs Inter v3.18 and opens the same file. He edits an existing text layer using Inter, and the layer shifts two pixels up. While Crystal and Joey have the same font installed, they were different versions.
C
Icon fonts turns into text
An icon font turns into a text description of the icon font when you edit or activate the text layer.
D
Ligatures aren't working
If ligatures aren't working, make sure you've toggled them on in the Type Details panel. If ligatures are on and you're still experiencing the issue, make sure all editors are using the same version of the font.
Fix conflicting font issues
If editors use different versions of the same font, you may have conflicting font issues ↑. To resolve conflicting font issues, all editors in the file need to:
Update the font
Uninstall and remove the local font from their computer.
Download and install the font from one common source.
Restart the desktop or browser app.
Update affected layers
Select a layer using that font.
Open the menu or open the quick actions menu.
Use Select all with same font to select all text layers with that font.
Use Recompute Text Layout in Selection to reset text to the correct formatting.
You need to be signed in to Creative Cloud and have opened the application within the last 30 days to access these fonts.
Adobe Fonts supports devices running macOS or Windows 10. If you aren't seeing these fonts, make sure you're running the latest version of Windows.
Install missing fonts
If you've installed a font on your computer, it should be an available in Figma. You need to use Figma's desktop app or install the Font Service if you're using the browser app.
Install font
To allow Figma to access a font from your computer, you need to add or install the font on your device.
If you've recently installed the Font Helper or a new font, you won't see those changes in Figma immediately. Quit and restart the desktop app or refresh the browser app you're using to access Figma.
Make sure the Figma font service is installed and working (browser only)
You need to install the Figma font service to use your local fonts in Figma's browser app. To confirm it's working:
Go to the Fonts section in your account settings to see if the font service is installed on your current device.
Make sure either the Figma Daemon, Figma Font Helper, or Font Service is running on your computer's activity monitor.
Select another font
The missing fonts modal allows you to quickly update affected text layers. You can use this approach to select an alternative font to use in your files. Updating the font applies to everyone in the file, not just you.
Note: Updating the font applies to all collaborators, including those with access to the original font.You may want to save a version of the file before you do, in case you need to reverse those changes.
Click in the top-right corner of the toolbar.
View a list of fonts and styles that are missing or unavailable in this file:
Use the dropdown fields below Replacement to update the family and style for each missing font. Figma will only show you fonts available to you.
Click Replace fonts to complete the process. All text objects in the file will be updated to the new fonts.
Every browser has its own active memory limit. This can differ across devices but the general understanding is there's anactive memory limit of 2GBfor each tab in a browser.
If you're working with large files and libraries in Figma you may run into these limits. If your file is using upwards of 75% of the browser's memory, you may not be able to open or edit the file.
To continue to use affected files, you will need to reduce your memory usage. This can involve splitting up large files, removing hidden layers, or reducing large assets. Reduce memory usage →
Restart Figma
If you're not getting a 404 message or a memory alert, there are some actions you can take to improve performance:
Close any Figma tabs you're not using.
Browser: Quit your browser application, then open Figma in a new browser window.
Desktop App: Force-quit the Figma desktop app, then restart it.
Check the Console log
The Console log in Chrome's developer tools records any actions the browser has performed. If any of these actions fail, they will show as red in the Console log.
If there are any errors there, you can share a copy of the Console log with Figma's Support team. This information can help the Support team find and diagnose any error messages.
Open the Developer tools in the browser or desktop app using the shortcut:
If you are continuing to run into issues opening a file, please reach out to Figma's Support team. They will be able to help you troubleshoot and identify underlying issues.
The Support team may ask you further questions about your setup to help identify where the issue might be occurring.
If the issue is happening in a specific file, the Support team will need a link to the file to troubleshoot further. You'll can attach a URL to your Figma file when you submit a bug report.
The Support team doesn't automatically have access to your account or the content your files. If you're comfortable sharing the file publicly, you can update your link sharing settings.
If you would prefer not to share your file publicly, you can temporarily invite a representative of the Support team to the file. They will give you specific instructions for how to do this when you contact them.
If you have checked the console log and have identified errors there, please include an export of the console log in your bug report.
Users of the these Chrome versions: 77.0.3865.75, 77.0.3865.90 and 77.0.3865.105
You can find out what browser and operating system version you're using via What's my Browser
A recent update to Chrome contains a networking issue which may cause Figma users to lose changes while editing. You can check for updates to Chrome by entering "chrome://settings/help" into your browser's address bar.
While this issue isn’t affecting everyone, we strongly encourage users on the affected versions of chrome to upgrade to version Chrome/77.0.3865.120 or greater to avoid any issues.
The versions of Chrome with this networking issue are:
77.0.3865.75
77.0.3865.90
77.0.3865.105
If you are unable to upgrade, you can use the Figma Desktop or switch to Firefox to edit Figma files until you can do so.
If you have any questions, please reach out to the Support team in app or at support@figma.com.
