Skip to main content

Paint

Figma has four types of paints: solid colors, gradients, images, and videos.

type Paint = SolidPaint | GradientPaint | ImagePaint | VideoPaint

Common properties

visible?: boolean [readonly]

Whether the paint is visible. Defaults to true.

opacity?: number [readonly]

The opacity of the paint. Must be a value between 0 and 1. Defaults to 1.

You can use the solidPaint utility function to set both color and opacity using CSS color strings:

// Create a new SolidPaint
const paint = figma.util.solidPaint('#FF00FF88')

// Modify an existing SolidPaint
if (node.fills[0].type === 'SOLID') {
  const updated = figma.util.solidPaint('#FF00FF88', node.fills[0])
}

blendMode?: BlendMode [readonly]

Determines how the color of this paint blends with the colors underneath it. Defaults to "NORMAL".

SolidPaint

type: 'SOLID' [readonly]

The string literal "SOLID" representing the type of paint this is. Always check the type before reading other properties.

color: RGB [readonly]

The color of the paint. This does not have a alpha property, use opacity instead.

You can use the solidPaint utility function to set both color and opacity using CSS color strings:

// Create a new SolidPaint
const paint = figma.util.solidPaint('#FF00FF88')

// Modify an existing SolidPaint
if (node.fills[0].type === 'SOLID') {
  const updated = figma.util.solidPaint('#FF00FF88', node.fills[0])
}

boundVariables?: { [field in VariableBindablePaintField]?: VariableAlias} [readonly]

The variables bound to a particular field on this paint

GradientPaint

type: 'GRADIENT_LINEAR' | 'GRADIENT_RADIAL' | 'GRADIENT_ANGULAR' | 'GRADIENT_DIAMOND' [readonly]

The string literal representing the type of paint this is. Always check the type before reading other properties.

gradientTransform: Transform [readonly]

The positioning of the gradient within the layer.

gradientStops: ReadonlyArray<ColorStop> [readonly]

Array of colors and their position within the gradient.

ImagePaint

This is where you'll find images in Figma, as there are no image nodes. See this example of working with images.

type: 'IMAGE' [readonly]

The string literal "IMAGE" representing the type of paint this is. Always check the type before reading other properties.

scaleMode: 'FILL' | 'FIT' | 'CROP' | 'TILE' [readonly]

How the image is positioned and scaled within the layer. Same as in the properties panel.

imageHash: string | null [readonly]

The hash (id) of the image used for this paint, if any. Use figma.getImageByHash to get the corresponding image object.

imageTransform?: Transform [readonly]

Applicable only for scaleMode == "CROP". Determines how the image is positioned (thus, cropped) within the layer.

scalingFactor?: number [readonly]

Applicable only for scaleMode == "TILE" (automatic for other modes). Determines the scaling (thus, repetition) of the image within the layer.

rotation?: number [readonly]

Applicable only for scaleMode == "TILE" | "FILL" | "FIT" (automatic for scaleMode == "CROP"). Determines the rotation of the image within the layer. Must be in increments of +90.

filters?: ImageFilters [readonly]

The values for the image filter slides, equivalent to those in the paint picker. All values default to 0.0 and have range -1.0 to +1.0.

ImageFilters

interface ImageFilters {
  exposure?: number
  contrast?: number
  saturation?: number
  temperature?: number
  tint?: number
  highlights?: number
  shadows?: number
}

ColorStop

interface ColorStop {
  readonly position: number
  readonly color: RGBA
}

VideoPaint

type: 'VIDEO' [readonly]

The string literal "VIDEO" representing the type of paint this is. Always check the type before reading other properties.

scaleMode: 'FILL' | 'FIT' | 'CROP' | 'TILE' [readonly]

How the image is positioned and scaled within the layer. Same as in the properties panel.

videoHash: string | null [readonly]

The hash (id) of the video used for this paint, if any.

videoTransform?: Transform [readonly]

Applicable only for scaleMode == "CROP". Determines how the video is positioned (thus, cropped) within the layer.

scalingFactor?: number [readonly]

Applicable only for scaleMode == "TILE" (automatic for other modes). Determines the scaling (thus, repetition) of the video within the layer.

rotation?: number [readonly]

Applicable only for scaleMode == "TILE" | "FILL" | "FIT" (automatic for scaleMode == "CROP"). Determines the rotation of the video within the layer. Must be in increments of +90.

filters?: ImageFilters [readonly]

The values for the video filter slides, equivalent to those in the paint picker. All values default to 0.0 and have range -1.0 to +1.0.

On this page