Skip to main content

Paint

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

type Paint = SolidPaint | GradientPaint | ImagePaint

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.


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.


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
}