How to Change Background Color in Figma

Why you can trust our content

The tech space is full of hype and difficult terms; we take the reliability standards to new heights. Our blog content is backed by:

Learn more

Let’s Work Together

Changing the background colors in Figma is a simple feature that can take your designs to the next level. Selecting the appropriate color whenever you’re looking to change the background of the canvas, frame, or shape.

“In Figma, choosing the right background color is not just about aesthetics; it’s about functionality. Understanding the impact of color on user experience can transform your design from good to great.”

Zain Ali

Co-Founder & CTO

In this short read, step-by-step methods of changing backgrounds, solving the most common issues, and some best practices for consistent and professional designs will be discussed.

Skim the blog Information

Section	Key Points
Types of Backgrounds	Canvas (workspace), Frame (container), Shape (objects).
Best Practices	Use neutral tones, maintain consistency, ensure readability.
Change Canvas Background	Deselect all layers → Go to Background Settings → Select color.
Change Frame/Shape Color	Select object → Go to Fill → Choose color → Adjust opacity.
Add Gradients & Multiple Colors	Click “+” in Fill → Reorder layers → Apply gradient type.
Common Issues & Fixes	Deselect layers to change canvas, set background before new pages, match HEX/RGB for consistency.
Ensuring Consistency	Save colors as Figma styles, use Copy & Paste Style.
FAQs	Use images as backgrounds, reset with #FFFFFF, troubleshoot fill issues.

Give Your Figma Designs a Fresh Look!

Understanding Background Colors in Figma

Figma allows you to change the background shade at various levels. Knowing which background to change helps in achieving the best results.

Types of Background Colors in Figma

1. Canvas Background – The workspace background is visible behind all layers.
2. Frame Background – The shade inside a frame that affects all contained elements.
3. Shape Background – The color used for individual shapes like rectangles, circles, and icons.

Best Practices for Background Colors

- Neutral tones help in maintaining clean and professional designs.
- Ensure that the same shades are used in several frames.
- Color should be readable in both light and dark modes.

Steps to Change Background Shade or Color in Figma

Changing the Canvas Background Color

The canvas background sets the tone of your Figma workspace. Here’s how to change it:

- Open Your Figma File – Launch Figma and open your project.
- Deselect All Layers – Click on an empty area to deselect everything
- Access the Background Settings – Scroll down the right panel and find the “Background” color option.
- Choose a Color – Click on the color box and select a new color using the Figma color picker.

Best Practices

- Avoid using colors that are too bright and may cause eye strain.
- Use subtle backgrounds for a professional and distraction-free workspace.

Master Background Customization in Figma!

Changing the Shade of a Frame or Shape

To change the background of a frame or shape, follow these steps:

- Select the Frame or Shape – Click on the object whose background you want to change.
- Navigate to the Fill Section – In the right-hand panel, look for the “Fill” option.
- Adjust the Color – Click on the fill color and choose a new shade from the Figma color styles panel.
- Modify Opacity (Optional) – Adjust the opacity slider for transparency effects.

Best Practices

- Use high-contrast colors for better readability.
- Save your commonly used colors as Figma color styles for easy reuse.

Tips for Adding Multiple Colors or Gradients

Want to create more dynamic designs? You can add multiple fills or gradients.

- Add Another Fill – Click the “+” icon in the Fill section to add another layer.
- Reorder Fills – Drag and rearrange fills to change the layering order.
- Hide or Remove Fills – Click the eye icon to hide a fill or “-” icon to delete it.

Best Practices

- Use gradients to give depth and smooth transitions.
- Avoid using too many colors since it can give a cluttered look.

Common Issues and Troubleshooting

Even with Figma background cutout tools, you may experience some challenges. Here are common issues and their solutions:

- Issue: Unable to Change Canvas Background Color
  - Solution: Make sure that nothing is selected as the canvas background can only be modified when nothing is selected.
- Issue: Changes Are Not Applied on Newly Added Pages
  - Solution: First, select the desired shade and then create new pages for consistency.
- Issue: Colors Appear Differently on Different Screens
  - Solution: The same HEX or RGB value is used to keep the same color across different screens or devices.

Best Practices for Using Background Colors in Figma

- Shades must be uniform for all frames
- Use shades with rich contrast combinations to increase readability
- Save color schemes as Figma color styles for quick access in future designs.
- Test the colors using multiple displays for accuracy.

Need Assistance with Your Figma Designs?

Have you got complex Figma projects that require expertise? Check our professional design services for refined and visually appealing designs.

By using this guide, change the Figma background color in no time. Try out various backgrounds today and see the unique visual experience you can create.

Make your Figma designs pop with the right background!

We apply solid colors, gradients, and frames professionally.

FAQs

How do I change the background color in Figma?

Select the canvas, frame, or shape, and then go to the Fill settings in the right panel. Open the Figma color picker by clicking on the color box. You can now select your preferred shade. If you want, you can even adjust the opacity or apply a gradient for further customization.

Can I set a gradient as a background in Figma?

Yes, you may apply a gradient by selecting the Fill section and then going to Linear, Radial, Angular, or Diamond Gradient. You may vary the color stops to get some smooth transitions among colors. You can use it to give more depth and effects to your design.

Why can't I change the canvas background color?

If you can’t change the background color of the canvas, make sure nothing is selected. The canvas background setting will only appear if everything is deselected. If that doesn’t work, see if a background layer is hiding the canvas.

How do I revert to the default background color?

To change the fill setting, you would open up Fill settings and pick white or transparent. Alternatively, you can input the default HEX code #FFFFFF for white. If necessary, remove additional fills to regain the original look.

Is it possible to use an image as a background in Figma?

Yes, you can set an image as a background by selecting the frame or shape, going to Fill settings, and choosing Image instead of a solid color. Upload your image and adjust the scaling options for the best fit. This feature is great for creating custom textures or branding elements.

How do I ensure my background color is consistent across all frames?

To avoid inconsistency, you can save the background as a Figma color style and use it on all frames. In this way, you will make your design more uniform and the updates easier. You can apply the same color using the feature Copy and Paste Style.

Share this post on social media:

Zain Ali

AI & Data Science Specialist

Zain Ali is a dynamic AI engineer and software development expert known for crafting intelligent, scalable, and future-ready digital solutions. With extensive experience in artificial intelligence, machine learning, and web development, he empowers businesses by building systems that drive performance, automation, and innovation.