Solid fills in Figma - Step-by-Step Guide

Introduction

Solid fills add a single color to shapes or backgrounds in your design. This helps highlight important data or separate sections clearly in your dashboard or report visuals.

When you want to color a chart background to make data stand out

When you need to fill a shape like a rectangle or circle with one color for emphasis

When creating buttons or labels that require a consistent color fill

When separating dashboard sections visually with colored blocks

When highlighting key numbers or KPIs with colored backgrounds

Steps

Step 1: Select the shape or frame you want to fill

- Canvas area

The selected object is highlighted with selection handles

Step 2: Click the Fill section in the right sidebar

- Design panel on the right

The Fill color picker panel opens showing current fill settings

Step 3: Click the color square to open the color picker

- Fill section in the Design panel

A color picker popup appears allowing color selection

Step 4: Choose a color by clicking on the color spectrum or entering a hex code

- Color picker popup

The selected shape updates immediately with the new solid fill color

Step 5: Adjust the opacity slider if you want a transparent fill

- Fill section opacity control

The fill color becomes more transparent or opaque as you move the slider

Before vs After

Before

A rectangle shape with no fill color, showing only its border

After

The rectangle shape is filled with a solid blue color at 100% opacity

Settings Reference

Fill color

📍 Design panel > Fill section

Sets the solid color used to fill the selected object

Default: No fill or last used color

Opacity

📍 Design panel > Fill section

Controls the transparency level of the fill color

Default: 100%

Common Mistakes

Trying to apply a fill to a text layer

Text layers do not support fills directly; fills apply to shapes or frames

Convert text to outlines or place text inside a filled shape to add background color

Setting fill opacity to 0% and wondering why the color disappears

0% opacity makes the fill fully transparent, so it looks invisible

Use opacity above 0% to see the fill color

Summary

Solid fills add a single color to shapes or frames to highlight or separate data visually.

You can pick any color and adjust its transparency using the Fill section in the Design panel.

Remember fills do not apply directly to text layers; use shapes behind text for colored backgrounds.