How to Configure your browser for Figma
There are a couple of things you'll want to set up on your browser, before getting started with Figma.
First up, you'll need to make sure you have WebGL installed and enabled on your browser. This website will let you know if this is enabled: http://webglreport.com/
We also recommend doing the following, to ensure you have the best experience using Figma:
- Confirm you have WebGL installed and enabled (see above).
- Set your browser zoom to 100%.
- Make sure you have the latest browser version
- Disable the left/right swipe gesture (macOS only).
- Install the Figma Font Helper to use local fonts (Find out more).
Click on your browser for more detailed instructions:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge (Figma no longer supports Internet Explorer: Supported Browsers)
Want to use Figma's Desktop Apps instead? You won't have to update these settings. If you do plan to use the browser version at some point in the future, we'd recommend going through these settings now, so you're all set.
- Open Chrome and go to the Chrome Settings page (link: Chrome Settings page in a new tab).
macOS: Go to Chrome > Preferences in the menu bar, or using the [Command] + [,] shortcut.
Windows: Go to File > Preferences or click the vertical ellipses in the top right corner and choose Settings.
- In the Appearance section, ensure your Page zoom is set to 100%. This will ensure your files are displayed accurately at higher resolutions.
- Scroll down and click on the Advanced link to expand the settings:
- In the System section, ensure Use hardware acceleration when available is enabled:
- If WebGL isn't currently enabled, you can head to your Chrome Flags settings in your browser: chrome://flags/
- The update the Override software rendering list to enabled. This should be near the top of the list:
- Alternatively, you can search for WebGL related flagsand update this to Enabled.
- Open Firefox and open the menu in the top-right corner.
- This will allow you to see the current Zoom level. You can then use the - and + icons to decrease/increase the zoom level:
- From that same menu, select Preferences from the options:
- Scroll down to the Firefox Updates section. You'll be able to see the current version and whether or not it is up to date:
- You can click the Check for updates button to check for any updates. If you're not on the latest version this will prompt an install of the latest version. Firefox will automatically restart after installing.
- We recommend updating the Allow Firefox to setting to Automatically install updates.
Safari is automatically updated by macOS whenever there is a new version. If there is a new version of macOS available, you'll be able to update this on your computer directly, which will also update Safari with any required updates.
- Open Figma in Safari.
- Head to Safari > Preferences in the main menu.
- Go to the Websites tab and click Page Zoom.
- In the Currently open website section, ensure Figma is set to 100%:
You'll need to be using at least V10.11.1 (El Capitan) if you want to use pinch-and-zoom functionality.
To update Microsoft Edge to the latest version:
- From the Start menu select Settings > Updates & Security.
- Select Windows updates at the top of the list and then Check for updates.
- If there are any available, they will start downloading. Microsoft Edge will be updated and restarted automatically.
Microsoft Edge does not support a default zoom level, instead it will remember what zoom level you last used.
You can update the zoom level from the More settings. This allows you to increase/decrease the zoom at 25% increments.
If you hold down [Ctrl] while using the mouse scroll or ↑ and ↓ keys, you can change the zoom in 5% increments.
If you're using the Trackpad on macOS, then you may wish to disable the left/right swipe gesture.
This will prevent you from accidentally closing out of the Figma file, when you are scrolling left and right within the canvas.
- Open Systems preferences and go to the Trackpad settings:
- Go to the More Gestures tab:
- Disable the Swipe between pages option:
Install Font Helper
If you're going to use Figma in the browser and want to access your locally saved fonts, you'll want to install the Figma Font Helper. Once installed, you'll be able to access your local fonts from the Font Library.
If you're using the Figma Desktop app, then you won't need to install the Figma Font Helper to use locally stored fonts.
Check out our Use Local Fonts with Figma Font Helper article for more information.