Skip to main content

Frame

Typeobject
Backlinks6

A frame is an object that can be rendered and a container that holds objects. In contrast to a group, a group is not an object but rather a collection of objects. For example: The frame's fills affect itself. The group's fills affect all of its children.

PropertyTypeRequired
idstringRequired
namestringOptional
isLockedbooleanRequired
visiblebooleanRequired
contextSettingsGraphicsContextSettingsRequired
styleStyleRequired
boundsRectRequired
transformedBoundsRectOptional
matrixMatrixRequired
alphaMaskByArray<AlphaMask>Required
outlineMaskByArray<string>Required
maskTypeintegerRequired
styleEffectMaskAreaintegerRequired
maskShowTypeintegerOptional
overflowintegerRequired
cornerSmoothingnumberOptional
overrideKeystringOptional
horizontalConstraintConstraintOptional
verticalConstraintConstraintOptional
resizesContentintegerOptional
keepShapeWhenResizebooleanOptional
variableDefsArray<VariableDef>Optional
variableRefsArray<VariableRef>Optional
styleEffectBooleanintegerOptional
childObjectsArray<PathImageTextGroupFrameSymbolInstanceSymbolMaster>Required
classstringRequired
radiusArray<number>Optional
backgroundColorColorOptional
frameTypeintegerOptional

id​

Required

Description

ID of the object, globally unique.

Type

string

name​

Optional

Description

Name of the object, for user identification, encoded in UTF-8.

Type

string

isLocked​

Required

Description

If true, the object will be unable to be edited.

Type

boolean

visible​

Required

Description

If false, the object will be invisible.

Type

boolean

contextSettings​

Required

Description

The opacity and blending-related configurations of the object.

style​

Required

Description

The borders, fills, and other styles of the object.

Type

Style

bounds​

Required

Description

The bounds of the object before undergoing matrix transformations.

Type

Rect

transformedBounds​

Optional

Description

An enclosing rectangle for the object. This property stores information about the object after the matrix transformation.

Type

Rect

matrix​

Required

Description

Matrix used for translating, rotating, and scaling the object.

Type

Matrix

alphaMaskBy​

Required

Description

A list of alpha masks applied to the object.

Type

Array<AlphaMask>

outlineMaskBy​

Required

Description

A list of outline masks applied to the object, clipped by the intersection of their outlines. The items in the list are object IDs of the masks.

Type

Array<string>

maskType​

Required

Description

The mask type of the object.

Type

integer

Value

enum: the value of this property must be equal to one of the following values:

ValueExplanation
0
not a mask
1
outline mask
2
alpha mask

styleEffectMaskArea​

Required

Description

How the style and visible of the mask object affect the area of the mask.

Type

integer

Value

enum: the value of this property must be equal to one of the following values:

ValueExplanation
0
The style and visible of the mask object do not affect the area of the mask, which depends on its bounds.
1
The style of the mask object does not affect the area of the mask, while the visible does.
2
The style and visible of the mask object do affect the area of the mask.

maskShowType​

Optional

Description

How the mask object is displayed.

Type

integer

Value

enum: the value of this property must be equal to one of the following values:

ValueExplanation
0
depend on its style. (Default value for outline mask.)
1
only display its bounds. (Default value for alpha mask when its alphaType equals 0.)
2
do not display. (Default value for other conditions.)

overflow​

Required

Description

How to display the child element of the object when it overflows its container.

Type

integer

Value

enum: the value of this property must be equal to one of the following values:

ValueExplanation
1
hidden. Anything outside the scope of the container will be cropped and invisible.
2
visible. Contents outside the scope of the container will not be cropped and will be visible.
3
scrolled. Content that is outside the container's scope is cropped, and a scrollbar is displayed to view the content that is beyond the container's boundaries.

cornerSmoothing​

Optional

Description

Smoothness of rounded corners. Range: [0, 1]. 0 is the default value, indicating no smoothing for rounded corners.

Type

number

overrideKey​

Optional

Description

Used to be associated with the object by symbol instances for overriding its attributes. Check the objectId in the OverrideValue for details. If overrideKey exists, find a symbol master through upward traversal (which could be the object itself); overrideKey is unique within the symbol master.

Type

string

horizontalConstraint​

Optional

Description

Horizontal constraints for the object. Default value is 1.

verticalConstraint​

Optional

Description

Vertical constraints for the object. Default value is 1.

resizesContent​

Optional

Description

How child objects behave when the object is resized.

Type

integer

Value

enum: the value of this property must be equal to one of the following values:

ValueExplanation
0
If the current object contains children (suitable for paths with boolean operations), the current object serves as the starting point. For each child, if the object chain includes a frame or symbol without a layout, the constraints on the child object are applied (ignoring constraints for groups and top-level paths with boolean operations). Otherwise, scaling is applied.
1
Force child objects to have fixed positions and sizes.
2
Apply child object constraints. (Default value.)

keepShapeWhenResize​

Optional

Description

False: When resizing occurs, the object scales according to the horizontalConstraint and verticalConstraint. (Default value.) True: When resizing occurs, the object itself maintains its angle, and the center position is scaled. The scaling occurs along both the length and width directions.

Type

boolean

variableDefs​

Optional

Description

A list of variables that can be used by children.

Type

Array<VariableDef>

variableRefs​

Optional

Description

A list of referenced variables.

Type

Array<VariableRef>

styleEffectBoolean​

Optional

Description

How the style of the object affects the region participating in a Boolean operation with another object.

Type

integer

Value

enum: the value of this property must be equal to one of the following values:

ValueExplanation
0
ignore style(default value): The region in which an object participates in a Boolean operation is independent of its style.
1
If the object is a path and the path has borders without fills, then the borders will be used as a region to participate in the Boolean operation calculation. If the object is a text and the text has borders without fills, then the object will be ignored during the Boolean operation. In other cases, it behaves the same as ignore style.

childObjects​

Required

Description

A list of all child objects. Note: The child object that appears later in the list will be displayed above the one that appears first.

class​

Required

Type

string

Value

constant: the value of this property must be equal to:

"frame"

radius​

Optional

Description

The radius values correspond to the corners in the following order: left-top, right-top, right-bottom, left-bottom. Default value is [0, 0, 0, 0].

Type

Array<number>

Value

maximum number of items: the maximum number of items for this array is: 4

minimum number of items: the minimum number of items for this array is: 4

backgroundColor​

Optional

Description

The background color of the canvas on which the frame is positioned. Exists only on the top-level frame.

Type

Color

frameType​

Optional

Description

no description

Type

integer

Value

enum: the value of this property must be equal to one of the following values:

ValueExplanation
0
normal frame.(Default value)
1
virtual frame. In many design software, each page may have elements that are floating outside the top-level frame(artboard). Organizing these elements into a new top-level frame would create a virtual frame.
2
container of symbol master variants. In Figma, when creating multiple variants of a symbol master, it automatically creates a frame to contain them.