On this page
Quick steps
Deselect everything
Click an empty area of the canvas so no layer is selected.
Find the Page section
In the right sidebar, the Page section shows the canvas colour as a hex value with an opacity field.
Pick a new colour
Click the swatch or type a hex value. Use the eye toggle if you want to hide the background colour.
Check new pages
New pages inherit the colour of the page you're on, so set it before you add more pages if you want them to match.
How to make the Figma canvas black
Type 000000 into the Page colour field, or any dark hex you like. The defaults are #F5F5F5 in light mode and #1E1E1E in dark mode. Keep a few things in mind:
- The change applies to everyone with access to the file, not just you.
- You need edit access. Viewers can't change it.
- You can't change it from Dev Mode. Switch back to Design first.
- Each page has its own colour, so set it on every page that needs it.
The canvas colour doesn't change your frames. A frame has its own fill. Select the frame and edit its fill in the right sidebar to change the design's background.
How to put Figma in dark mode (or light mode)
Open Main menu → Preferences → Theme and choose Dark, Light or System (follows your operating system). You can also search "theme" in the Actions menu. The theme changes how Figma looks for you only. It's set per device and doesn't sync, so set it again on another computer or browser.
Designing a dark version of your own product is a different job. That's handled with variable modes, covered in dark mode with variable modes.
How to change the prototype background color
Deselect everything and switch to the Prototype tab (⇧E / Shift + E). The device and background settings sit there, with a background colour option for the area around your frames when the prototype plays. It works on any plan and needs edit access. How to prototype in Figma covers the rest of the prototype settings.
| Action | Mac | Windows |
|---|---|---|
| Switch Design / Prototype tab | Mac⇧E | WindowsShiftE |
| Actions menu | Mac⌘Kor⌘/ | WindowsCtrlKorCtrl/ |
Setting up a new file? Figma frame sizes and how to add a grid are the next steps.
Frequently asked questions
How do I change the canvas color in Figma?
Deselect everything, then edit the colour in the Page section of the right sidebar. The change applies for everyone with access to the file, and you need edit access.
How do I turn on dark mode in Figma?
Go to Main menu → Preferences → Theme and choose Dark. The setting is per device and doesn't sync to your other computers.
Why can't I change the background color in Figma?
You need edit access to the file, and the setting isn't available in Dev Mode. Also make sure nothing is selected, or the sidebar shows the selected layer instead of the Page section.
What is Figma's default background color?
#F5F5F5 in light mode and #1E1E1E in dark mode.
More in Layout, grids & constraints
- How to Import an Excel Table into FigmaFigma Design can't paste Excel cells as a table. Build one with auto layout, fill it from CSV or Google Sheets, or import .xlsx files with a free plugin.
- Figma Frame Sizes: Which Preset to Pick and How to Change ItPick a Figma frame size from the Phone, Tablet, Desktop or Paper presets, change an existing frame's size, and why you design at viewport size, not resolution.
- Why Are Constraints Not Showing in Figma?Constraints in Figma not showing? In UI3 they sit in the Position section, and only for layers inside a plain frame. Here's why they vanish and how to fix it.
- How to Add a Grid to a Frame in FigmaAdd a column, row or uniform grid to a Figma frame with layout guides, set count, margin and gutter, remove it, and fix a layout grid that isn't showing up.
- Figma Snapping Not Working (or Snapping Too Much)Where Figma's snap settings live, how to pause snapping while you drag, why frames always snap to whole pixels, and how to change the nudge amount in Figma.
- How to Use Rulers and Guides in FigmaTurn on rulers in Figma, drag out guides, remove the red guide lines, and measure the distance between layers with Option or Alt. Plus a note on units.
- How to Create Text Styles and Color Styles in FigmaCreate text and color styles in Figma, organise them into folders, edit or delete them, fix styles not showing in other files, and know when to use variables.
- How to install Figma pluginsFigma plugins don't need installing: open one from the Community or run it inside a file. Steps for Figma Design, Dev Mode, FigJam, Slides, saving and admins.
- Figma plugins not working? How to fix itFigma plugins not loading, missing or greyed out? Check your seat and edit access, org approval, network blocks and cache. A step-by-step checklist that works.
- Figma plugin vs widget: what's the difference?A Figma plugin runs for one person and closes when done. A widget is an object on the canvas everyone can see and use. When to pick which, with examples.