Guide to fills

Fills can be solid colors, gradients, patterns, images, or videos.

A layer fill is any fill applied to the inside of a layer, such as a frame, shape, or text layer. You can use the color picker in the Fill section of the right sidebar to apply layer fills.

A stroke fill is the visible outline of a closed layer or open vector path. You can use the color picker in the Stroke section of the right sidebar to apply stroke fills.

Objects can have multiple layer or stroke fills. Each fill has its own set of properties that can be adjusted individually.

A. An object with a layer fill

B. An object with a stroke

C. An object with a layer fill and stroke

Fill types

There are five types of fills:

• Solid: A single color.
• Gradient: A blend of two or more colors or tints of the same color. Learn more about using gradients.
• Pattern: A fill that references another object on the canvas. Learn more about using patterns.
• Image: A static image. Learn more about adding images to your designs.
• Video: A video or animated GIF. Video is only available on paid plans. Learn more about adding video to your designs.

Add fills to objects

You can add layer and stroke fills to any type of object. Layer fills are only visible on closed objects, such as shapes, frames, or text layers. Strokes are visible on open and closed objects.

Add a layer fill

To add a layer fill:

1. Select the object you want to add a fill to.
2. In the Fill section of the right sidebar, click the plus to add a new fill.
3. By default, Figma adds a solid fill. Click on the fill swatch to open the color picker.
4. Use the color picker to select a fill type, adjust colors, pattern sources, or select image/video files from your computer. Learn more about using the color picker.

Add a stroke fill

To add a stroke fill:

1. Select the object you want to add a stroke to.
2. In the Stroke section of the right sidebar, click the plus to add a new stroke.
3. By default, Figma adds a solid stroke fill. Click on the fill swatch to open the color picker.
4. Use the color picker to select a fill type, adjust colors, pattern sources, or select image/video files from your computer. Learn more about using the color picker.

Once applied, you can use the settings in the Stroke section of the right sidebar to control the stroke’s appearance. Learn more about applying and adjusting stroke properties.

Adjust fills

You can add, remove, or adjust fill properties at any time:

• Update fill: To change an existing fill, click on the fill swatch in the Fill or Stroke section of the right sidebar and use the color picker to update the fill.
• Change fill opacity: Use the opacity field next to the fill swatch to change a fill’s opacity.
• Toggle visibility: Click on the open eye or closed eye to toggle the fill’s visibility.
• Update fill order: If a layer has multiple layer or stroke fills, you can hover over the left edge of the fill to reveal the drag handle. Click and drag the handle to reorder fills.
• Remove a fill: To remove a fill, click the minus next to the fill or stroke fill.