How to change the Background Color of a Frame or a Shape in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text “Background Color” beneath it.

A step by step guide on changing the background color or add multiple colors to a frame or shape in Figma.

Step One: Select the Frame or Shape

A screenshot of Figma with a Frame selected.

In Figma, select the frame or shape.

Step Two: Change the Color

A screenshot of Figma with a Frame selected. Highlighted on the right side bar is the hex color input under fill. Change this value to change the background color. If you wish to change the opacity (transparency) of the frame or shape, change the % value to the right of the hex value.

Set the background color by changing the Fill hex value, or click the colored square to open up the color picker.

If you wish to change the opacity, change the % value (i.e. 100%) next to the hex value.

A screenshot of Figma with a Frame selected. Highlighted on the right side bar under fill is a colored box. If you press this it will open up a color picker menu.

Select the colored box to open the color menu.

To change the way the color is formatted, click the RGB caret in the color menu to open the dropdown. The options are Hex, RGB, CSS, HSL and HSB.

A screenshot of Figma with a Frame selected and the color picker open. Highlighted are the color options that appear if you press RGB. The options are Hex, RGB, CSS, HSL and HSB.

Step Three: Add another Color


<p>A screenshot of Figma with a Frame selected. Highlighted on the right menu bar under the fill section is a plus button. If you press it, it will add a color.</p>
<p></p>

If you wish to add another color, press the + next to Fill and configure the new color in the same way described in Step Two.

Step Four: Reorder, Hide or Remove

A screenshot of Figma with a Frame selected. Highlighted on the right menu bar under the fill section is a color. If you highlight the color, it will present handles on the left side of the bar - this allows you to change its position within the hierarchy. The lower down it is, the further down it is in the background. To the right of it there is an eye, this allows you to show or hide the color. Finally, to the right of it, there is a - icon. If pressed this removes the color.

To change the order of the colors, highlight a color input. This will present a handle icon which will allow you to reorder the color by clicking and dragging the color. The lower down a color is, the further down it is in the background (i.e. higher up colors are overlays whilst the lowest one is the "true background").

If you wish to hide/show the color, toggle the eye icon to the right of the color.

Finally, to remove a color, press the minus icon to the far right of the color.

Looking to learn more about the basics behind styling frames, paths, shapes and text in Figma ?

Consult the list below to learn more about the basics behind styling text, shapes, paths and frames in Figma.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details