'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Add fills to text and shape layers
If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →
Before you start
Who can use this feature
Supported on any team or plan.
Anyone with Can edit access to a file can 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. You can add, adjust, and remove fills in the Fill section of the right sidebar.
Add fills
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 right sidebar, click the icon 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, choose a color, and apply blend modes. 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.
Adjust fills
Add, remove or adjust fill properties at any time. You can adjust fill in the Design panel of the right sidebar.
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.
If selected layers share the same fill properties, you can adjust them in the Fill section of the Properties Panel.
If selected layers have different Fill properties, you can adjust each fill individually in the Selection colors section of the Properties Panel.
- Hover over the left edge of the fill to reveal the drag handles . Click and drag on the handles to reorder fills.
- Click the icon to toggle visibility off and the icon to toggle visibility on. Learn more about toggling visibility →
- Click the icon to remove a fill from your selection.