Before you Start
Who can use this feature
Users on Any plan can use Fills in their designs
Users with Edit access to add or adjust Fills
Paints are colors, gradients, or images. Fills are just one of the ways you can use paints in Figma.
Apply paints to text layers, or any vector object, this includes shapes, vector networks, and boolean groups.
Add, adjust and remove fills in the Fill section of the Properties Panel.
Add fills to Text layers, Frames, and any vector objects. You can even add more than one fill to a single layer. This allows you to layer gradients over images, or apply blend modes to create unique effects.
We treat each fill as a unique layer, so you can adjust the properties individually. You can even toggle the visibility of each fill independently.
- Select the layer(s) you want to add a fill to.
- In the Fill section of the Properties Panel, click the plus
+button to add a fill to the layer.
- Figma will add a default Solid fill with a hex value of C4C4C4. Click on the fill swatch to open the color picker:
- From the color picker you can:
- Select a Paint type: a Solid color, a Gradient, or an Image/GIF.
- Apply a Blend mode.
- Use the Color palette in the body of the modal to select a color.
- Use the Eyedropper tool to select any color from an image or object in the canvas.
- Adjust the Hue using the slider.
- Adjust the Opacity using the bottom slider, or the field.
- View the color value across each color model.
- Use the Document colors field to select a palette from local colors, styles, and styles from enabled libraries.
Learn more about using the Color picker.
Want to reuse fills across your designs? Create Color Styles from fills or strokes and apply them to objects in the canvas.
Add, remove or adjust fill properties at any time.
- Make a selection in the canvas.
- If the layers share the same Fill properties, you can adjust them in the Fill section of the Properties Panel.
- If the layers have different Fill properties, you can adjust each Fill individually in the Selection colors section of the Properties Panel.
Selection colors allows you to view and adjust the paints applied to a selection, individually. This also allows you to change the Fills of child objects, when you have the parent selected.
Want to change the order that fills appear? Click on the left edge of the fill, closest to the swatch, and drag it to the new position.
Want to temporarily hide a fill? Click the eye icon to toggle the visibility of the fill off and on.
If you don't need a fill anymore, you can remove it. Click the minus icon
- to remove the fill.