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 the following best practices:
- Configure your browser:
- Set your browser zoom to 100%.
- Make sure you have the latest browser version.
- MacOS: Disable the left/right swipe gesture.
- Install the Figma Font Helper.
Want to use Figma's Desktop Apps instead? You won't have to update these settings. However, 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.
Configure your browser
We've got detailed instructions for the following browsers, below:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
1.Open Chrome and go to the Chrome Settings page: chrome://settings/
- macOS: Chrome > Preferences, or [⌘] + [,]
- Windows: File > Preferences or Menu (vertical ellipses) > Settings
2. In the Appearance section, make sure your Page zoom is set to 100%. This will ensure your files are displayed accurately at higher resolutions.
3. Scroll down and click on the Advanced link to expand the settings:
4. In the System section, ensure Use hardware acceleration when available is enabled:
5. If WebGL isn't currently enabled, you can head to your Chrome Flags settings in your browser: chrome://flags/
6. Update Override software rendering list to enabled, this should be near the top of the list:
7. Alternatively, you can search for any experimental WebGL related flags and update these to Enabled.
1.Open Firefox and go the menu in the top-right corner.
2. This will allow you to see the current Zoom level. Use the “-” and “+” icons to decrease/increase the zoom level:
3. From that same menu, select Preferences from the options:
4. 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.
5. 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.
6. 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 websites section, ensure Figma is set to 100%:
Note: 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.
Disable Swipe Gesture (MacOS)
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.
1.Open Systems preferences and go to the Trackpad settings:
2. Go to the More Gestures tab:
3. 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 Using Local Fonts article for more information.