How to Change the Canvas Color in Figma, and Why I Use Mid Grey

You change the canvas colour in Figma by clicking an empty part of the canvas so that nothing is selected, then clicking the colour swatch in the Page section of the right sidebar and typing a new hex value, and the colour applies to that one page and is saved in the file for everyone who opens it. Every Figma file which I set up for a website uses #AAAAAA on every page, because a white website frame on Figma’s default light canvas, #F5F5F5, measures 1.09 to 1 against it, which leaves the page with almost no edge, while the same frame on mid grey measures 2.32 to 1 and reads as a page straight away.

This post goes through the steps, who sees the colour once you change it, and why I think mid grey works better than both of Figma’s defaults for website designs.

How to change the canvas color in Figma

Figma’s own article on changing the background color of the canvas gives the same route which I use, and it needs a seat with can edit access to the file.

1. Clear the selection

Click an empty part of the canvas or press Escape until nothing is selected. The right sidebar only shows the page settings while nothing is selected, which is the reason most people cannot find the setting, since a selected frame fills the sidebar with its own fill, stroke and layout controls instead.

2. Find the Page section

With nothing selected, the Design tab of the right sidebar shows a section called Page at the top, which holds the background colour of the page that you are on, as Figma’s guide to the right sidebar describes.

3. Set the colour

Click the swatch and pick a colour, or click the hex value and type a new one, so AAAAAA for mid grey. Figma also accepts the three digit short form, and typing AAA writes it out as AAAAAA. The opacity sits beside the hex value at 100%, and the Hide icon switches the background off, which I would leave alone.

4. Repeat it on every page

The colour belongs to one page, so a file with a Cover, a Design page, a Components page and a Style Guide page needs the change four times. A new page copies the colour of the page which you were on when you added it, so setting the first page before adding the rest saves most of the clicks.

Who sees the new colour

The canvas colour is saved in the file, and Figma’s article says that changing it sets the colour for everyone who has access to the file, so the person who reviews your design sees the same grey as the designer, in the browser, in the desktop app and in view only mode. The light and dark themes behave differently. Figma’s guide to changing themes explains that a theme changes only the interface around the canvas, on your own device, and that a new file starts at #F5F5F5 in light mode and #1E1E1E in dark mode depending on the theme which was on when the file was made. So two people can open the same file in different themes and still see the same canvas, and a file which was made in dark mode stays dark for everyone until someone changes the page colour.

The colour cannot be changed from Dev Mode, so a developer who wants a different grey has to switch back to the Design view, which needs edit access too.

Why mid grey works for website designs

A website design is mostly a row of tall frames with white, light grey and black sections, so the canvas has to keep the edges of all three visible. These are the contrast ratios between the canvas and the frames, worked out with WCAG’s relative luminance formula.

The light default loses the white frames and the light grey sections, and the dark default loses the black footer and any dark hero, while mid grey is the one canvas in the table which keeps every edge visible. I think it’s really noticeable in a review, since the reviewer can tell where one page ends and the next begins without hunting for the frame’s name tag.

WCAG’s non-text contrast rule asks for 3 to 1 on the edges of interface parts, and a canvas is the designer’s workspace and not the website, so the rule does not apply to it, but it’s a useful yardstick, and #959595 is the lightest grey which reaches 3 to 1 against white. I keep #AAAAAA because the black sections stay at 8 to 1 on it, and a darker canvas starts to pull the eye towards itself in the gaps between the frames. If your designs are mostly white with very light grey cards, #959595 is a good alternative.

What stays separate from the canvas

Exports

An exported frame takes its background from its own fill, and every frame which I export for a case study comes out on its own white or black with none of the grey around it. Figma’s guide to exporting designs covers the settings, and if a frame has a fill which you want left out of the file, the Fill section has a Show in exports checkbox.

The prototype background

Presentation view has a background of its own, set in the Prototype tab of the right sidebar with nothing selected, under Background, beside the Device and Flows settings, as Figma’s article on prototype device and background settings shows. I mostly set it to the same grey, so a reviewer who opens the prototype sees the page against the same colour as in the file.

Sections

A section has its own fill and stroke, set in the right sidebar like any other layer, as Figma’s guide to organising the canvas with sections describes. I give every section the same #AAAAAA fill with a dashed stroke in black at 12%, so a section blends into the canvas and only its outline shows, which keeps the attention on the screens inside it. A tool or a flow with many states sits in sections, and a normal page, which has one frame for each screen width, sits straight on the canvas with Desktop, Tablet and Mobile in one row.

Setting the colour on a whole file at once

A file with a dozen pages takes a while by hand, and a plugin can do it in one run, since each page’s background is a property called backgrounds in Figma’s Plugin API, which holds a single solid colour. I set it this way on every file which I build, together with the section styles, and then check one page by eye, because the setting lives on each page and a page added later by someone else will copy whichever page they were on.

Once the canvas is set, the rest of the review is easier to run, and my posts on how to comment in Figma and how to add annotations in Figma cover the next two steps. The website designs on my projects page were all laid out on this grey.

Frequently asked questions

How do I change the canvas color in Figma?

Click an empty part of the canvas so nothing is selected, then open the swatch in the Page section of the right sidebar and type a hex value, and repeat it on every page of the file, since the colour belongs to one page.

Why can’t I change the background color in Figma?

Mostly because something is still selected, so the sidebar shows that layer’s settings instead of the page. The other two reasons are view only access, since the setting needs can edit access, and Dev Mode, where the canvas colour cannot be changed.

Does the canvas color show in exports?

An exported frame takes its background from the frame’s own fill, so a PNG or PDF of a frame looks the same whatever the canvas colour is.

Does dark mode change the canvas color in Figma?

The theme changes only the interface around the canvas, on your own device. The canvas keeps the colour saved on the page, and dark mode only decides the starting colour of a new file, which is #1E1E1E instead of #F5F5F5.

What is the best canvas color for website designs?

I think a mid grey such as #AAAAAA, since it keeps white, light grey and black sections all visible against the canvas, while the light default hides the white frames and the dark default hides the black ones.