Change themes in Figma
Before you Start
Who can use this feature
Users on any team or plan
Available in Figma design and file browser
Use themes to change the appearance of Figma design files and the file browser. Choose between light or dark themes, or let your system settings determine the theme. If your system’s appearance is set to light, then Figma will use the light theme. If your system is set to dark, then Figma will use the dark theme.
Change theme
Change your theme from a Figma design file via the main menu or quick actions menu.
Theme settings are device-specific. If you're using a Figma account across multiple devices, theme settings from one device won't carry over to another.
Changing your theme also won’t affect appearance settings for others, even if you’re viewing the same file.
When you create new files, Figma sets the background color to light or dark color depending on your current theme. While in light mode, newly created files default to a light-gray background color #F5F5F5
. While in dark mode, they’ll default to an off-black color #1E1E1E
.
Note: New pages determine their background color based on the current page’s background color, and don’t rely on your current theme. Change a background color by de-selecting any layers and using the color picker from the Background section of the right sidebar.
Main menu
To change your theme from the main menu of a Figma design file:
- Open any Figma design file you have access to.
- Click in the top-left of the toolbar.
- Go to Preferences > Theme.
- Select an option from the list of themes.
Your Figma design file and the file browser will immediately change to the selected theme.
Quick actions
To change your theme from the quick actions menu of a Figma design file:
- Open any Figma design file you have access to.
- Open the quick actions menu.
- Mac: ⌘ Command /
- Windows: Control /
- Type in search terms to find the theme you want to use
- Use dark mode
- Use light mode
- Use system theme
Your Figma design file and the file browser will immediately change to the selected theme.
Tip! Plugin developers can match their plugin UI to Figma’s light and dark modes. Learn more from Figma’s plugin developer docs →