Color is an important part of web design that brings life to your page and mobile applications. Figma is a great creative tool, but the default color scheme leaves a lot to be desired. Luckily, there are plenty of ways to make the most of colors in Figma. You can customize almost everything, even the background colors.
In this article, we will show you how to change the background color of your canvas, buttons, and other components in Figma. We’ll also show you how to create your own colors. Let’s get into it.
How to change the background color
Depending on whether you chose the “light” or “dark” theme, the background color of your workspace will be light gray or dull black. Changing the background color of your workspace won’t change the theme, but it will change the color scheme of the current page. Any new page will have the color of the current page, not the theme.
With that in mind, let’s look at how to change the background color of your workspace.
- Open a new workspace.
- In the right toolbar, select the “Background” section.
- Use the color picker to change the background color.
- If you want to add rules to your background, press “Shift+R” to enable them.
How to change background color using Prototype
Prototypes allow you to preview what your current project will look like on a device in the presentation viewer. The model configuration of some devices comes with different color scales. Therefore, it is important to choose the right model for your needs.
To select the device and change the background color in Prototype, do the following:
- Clear your selections on your canvas.
- Go to the “Prototype” menu in the right sidebar.
- Select your preferred device and model. The preview box will show you how it will look on the canvas.
- In the “Background” section, choose the background color you want. The background color will appear behind the device in the preview box.
How to create custom color sets in Figma
When you’re working on a project, the last thing you want to do is waste time. Figma has a useful feature that allows you to create custom color sets. These colors can also be applied to background colors, so you can quickly change colors without having to go through the color wheel. This saves you the time of resetting the color every time.
Here’s how to create custom color sets in Figma:
- Create a new shape on your canvas.
- Highlight the shape, then in the sidebar go to the “Fill” section.
- Click the color box, then create the color you want to use in the popup window.
- To the right of the “Fill” section, there is a symbol with four dots. Click on it to enable the “Color Styles” modal.
- In the right corner of the modal, click the “+” symbol. Repeat these steps for any other colors you want to create.
- To add your custom color, select the layer you want to color and go to the “Fill” section.
- Click on the four dots on the right.
A colorful canvas
With so many customization options available, Figma has all the color combinations you need to create eye-catching web designs. You can even create your own colors, having endless options at your disposal. These methods show you how to make the most of Figma’s wide color palette and applications. You’ll be making projects worthy of art exhibits in Figma in no time.
